/* Alsalhi Safety — main stylesheet (generated from the approved design + theme additions) */
/* =========================================================
   TOKENS — الهوية المعتمدة
   ========================================================= */
:root{
  --oxblood:#6B0F1A; --oxblood-deep:#4A0911; --oxblood-soft:#8E1C2A; --oxblood-night:#2E050A;
  --ember:#E0243A; --ivory:#F2EDE6; --ink:#1B1416; --night:#0B090A;

  --bg:var(--ivory); --surface:#FBF9F6; --surface-2:#E9E2D8;
  --text:var(--ink); --muted:#6F6461; --rule:#DDD3CB; --rule-strong:#C9BDB3;
  --accent:var(--oxblood); --accent-ink:#FBF6F2; --accent-text:var(--oxblood);
  --band:#0F0C0D; --band-text:#EEE7E1; --band-muted:#A1958F; --band-rule:#2A2224;
  --on-photo:#F6F1EB; --on-photo-muted:rgba(246,241,235,.74);

  /* سلّم الأوزان — IBM Plex */
  --w-head:700;   /* العناوين الرئيسية */
  --w-title:600;  /* عناوين البطاقات والتسميات */
  --w-ui:500;     /* الأزرار والقوائم */
  --w-body:400;   /* النص الأساسي */
  --w-light:300;  /* الجزء الثاني من العنوان */
  --w-num:200;    /* الأرقام الكبيرة فقط */

  --ff-ar:"IBM Plex Sans Arabic","IBM Plex Sans",system-ui,"Segoe UI",Tahoma,sans-serif;
  --ff-en:"IBM Plex Sans","IBM Plex Sans Arabic",system-ui,"Segoe UI",sans-serif;
  --ff-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --ff:var(--ff-ar);
  --gutter:clamp(16px,4vw,56px);
  --max:1320px;
  --img-filter:none;
}
:root[data-lang="en"]{--ff:var(--ff-en)}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0B090A; --surface:#141011; --surface-2:#1C1618;
  --text:#EEE7E1; --muted:#A1958F; --rule:#2A2224; --rule-strong:#3A3033;
  --accent:#8E1C2A; --accent-ink:#FBF1EF; --accent-text:#E08A95;
  --band:#141011; --band-rule:#2E2528;
  --img-filter:brightness(.82) saturate(.9);
}

/* =========================================================
   BASE
   ========================================================= */
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--ff);font-weight:var(--w-body);font-size:16px;line-height:1.8;
  -webkit-font-smoothing:antialiased;transition:background .6s ease,color .6s ease;overflow-x:hidden}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
h1,h2,h3,h4{margin:0;font-weight:var(--w-head);text-wrap:balance;line-height:1.3}
h3,h4{font-weight:var(--w-title)}
.lt{font-weight:var(--w-light)}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.mono{font-family:var(--ff-mono)}
.eyebrow{font-size:13px;font-weight:var(--w-title);letter-spacing:.02em;color:var(--accent-text);display:flex;align-items:center;gap:14px}
:root[data-lang="en"] .eyebrow{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase}
.eyebrow::before{content:"";width:28px;height:2px;background:currentColor;flex:none}
.sec{padding-block:clamp(80px,10vw,140px)}
.sec-head{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(24px,5vw,96px);align-items:end;margin-bottom:clamp(40px,5vw,64px)}
.sec-head h2{font-size:clamp(30px,3.6vw,50px);margin-top:18px}
.sec-head h2 .lt{display:block;color:var(--muted)}
.sec-head p{color:var(--muted);max-width:58ch;font-size:clamp(15px,1.2vw,17px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:15px 28px;border-radius:2px;font-size:15px;font-weight:var(--w-ui);
  text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background .3s,color .3s,border-color .3s;white-space:nowrap}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--oxblood-deep)}
.btn-ghost{border-color:currentColor;background:transparent}
.btn-ghost:hover{background:var(--text);color:var(--bg);border-color:var(--text)}
.btn-photo{border:1px solid rgba(246,241,235,.55);color:var(--on-photo)}
.btn-photo:hover{background:var(--on-photo);color:var(--ink)}
.btn svg{width:18px;height:18px;flex:none}
.link-arrow{display:inline-flex;align-items:center;gap:10px;font-weight:var(--w-ui);font-size:14px;text-decoration:none;color:var(--accent-text);
  border-bottom:1px solid currentColor;padding-bottom:4px}
.link-arrow svg{width:16px;height:16px;transition:transform .3s}
:root[dir="rtl"] .link-arrow svg,:root[dir="rtl"] .flip{transform:scaleX(-1)}
.ph-img{width:100%;height:100%;object-fit:cover;filter:var(--img-filter);transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter .6s}

/* =========================================================
   HEADER (utility bar + main bar)
   ========================================================= */
.site-head{position:fixed;inset-inline:0;top:0;z-index:50;padding-top:env(safe-area-inset-top,0px);color:var(--on-photo);
  transition:background .5s,color .5s,border-color .5s;border-bottom:1px solid rgba(246,241,235,.14)}
.util{font-size:12.5px;border-bottom:1px solid rgba(246,241,235,.12);max-height:44px;overflow:hidden;transition:max-height .45s,opacity .3s,border-color .4s}
.util .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;height:42px}
.util .grp{display:flex;gap:22px;align-items:center;opacity:.8}
.util .grp span{display:inline-flex;gap:8px;align-items:center}
.util svg{width:14px;height:14px}
.util .mono{direction:ltr;letter-spacing:.04em}
.util .since{font-family:var(--ff-mono);letter-spacing:.18em;font-size:11px}
.main-bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:84px;transition:height .4s}
.site-head.solid{background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);color:var(--text);border-color:var(--rule)}
.site-head.solid .util{max-height:0;opacity:0;border-color:transparent}
.site-head.solid .main-bar .wrap{height:72px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;flex:none}
.brand .logo{width:54px;height:54px;flex:none;filter:drop-shadow(0 6px 14px rgba(0,0,0,.25));transition:width .4s,height .4s}
.site-head.solid .brand .logo{width:46px;height:46px;filter:none}
.brand b{display:block;font-weight:var(--w-head);font-size:15.5px;line-height:1.3}
.brand small{display:block;font-family:var(--ff-en);font-size:9.5px;letter-spacing:.3em;opacity:.7;font-weight:var(--w-ui)}
.nav{display:flex;gap:clamp(16px,2vw,30px);align-items:center}
.nav a{text-decoration:none;font-size:14.5px;font-weight:var(--w-ui);opacity:.82;transition:opacity .3s;position:relative;padding-block:6px}
.nav a:hover,.nav a.on{opacity:1}
.nav a.on::after{content:"";position:absolute;inset-inline:0;bottom:0;height:2px;background:var(--ember)}
.head-tools{display:flex;align-items:center;gap:10px}
.icon-btn{width:44px;height:44px;border-radius:50%;border:1px solid currentColor;background:transparent;display:grid;place-items:center;cursor:pointer;opacity:.85;transition:opacity .3s,background .3s,color .3s}
.icon-btn:hover{opacity:1}
.icon-btn svg{width:18px;height:18px}
.lang-btn{font-family:var(--ff-en);font-size:12px;font-weight:var(--w-title);letter-spacing:.06em}
:root[data-lang="en"] .lang-btn{font-family:var(--ff-ar);letter-spacing:0;font-size:13px}
.i-sun{display:none}
:root[data-night="1"] .i-sun{display:block}
:root[data-night="1"] .i-moon{display:none}
.head-cta{padding:12px 20px;font-size:14px}
.menu-btn{width:auto;padding-inline:16px 14px;border-radius:999px;gap:10px;display:inline-flex;align-items:center;font-size:13.5px;font-weight:var(--w-ui)}
.menu-btn .bars{display:grid;gap:5px;width:18px}
.menu-btn .bars i{height:1.5px;background:currentColor;display:block;transition:width .3s}
.menu-btn .bars i:last-child{width:60%}
.menu-btn:hover .bars i:last-child{width:100%}

/* side drawer — slides in from the reading side (right in Arabic, left in English) */
.scrim{position:fixed;inset:0;z-index:65;background:rgba(11,9,10,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}
.scrim.open{opacity:1;visibility:visible}
.drawer{position:fixed;inset-block:0;inset-inline-start:0;z-index:70;width:min(460px,92vw);background:var(--bg);color:var(--text);display:flex;flex-direction:column;
  padding:calc(22px + env(safe-area-inset-top,0px)) clamp(22px,3vw,40px) calc(26px + env(safe-area-inset-bottom,0px));overflow-y:auto;
  transform:translateX(100%);transition:transform .7s cubic-bezier(.77,0,.18,1),visibility .7s;visibility:hidden;box-shadow:0 0 80px rgba(0,0,0,.35)}
:root[dir="ltr"] .drawer{transform:translateX(-100%)}
.drawer.open{transform:none!important;visibility:visible}
.drawer .top{display:flex;justify-content:space-between;align-items:center;padding-bottom:22px;border-bottom:1px solid var(--rule)}
.drawer .top .icon-btn{border-color:var(--rule-strong)}
.drawer nav{display:grid;margin-top:14px}
.drawer nav a{font-size:clamp(22px,2.4vw,28px);font-weight:var(--w-title);text-decoration:none;padding-block:13px;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  opacity:0;transform:translateY(14px);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1),color .3s}
.drawer nav a:hover{color:var(--accent-text)}
.drawer nav a .mono{font-size:11px;color:var(--muted);font-weight:var(--w-body)}
.drawer.open nav a{opacity:1;transform:none}
.drawer.open nav a:nth-child(1){transition-delay:.18s}.drawer.open nav a:nth-child(2){transition-delay:.23s}.drawer.open nav a:nth-child(3){transition-delay:.28s}
.drawer.open nav a:nth-child(4){transition-delay:.33s}.drawer.open nav a:nth-child(5){transition-delay:.38s}.drawer.open nav a:nth-child(6){transition-delay:.43s}
.drawer.open nav a:nth-child(7){transition-delay:.48s}.drawer.open nav a:nth-child(8){transition-delay:.53s}
.drawer .info{margin-top:28px;display:grid;gap:16px;font-size:14px;color:var(--muted)}
.drawer .info b{display:block;color:var(--text);font-weight:var(--w-title);font-size:12px;letter-spacing:.06em;margin-bottom:2px}
.drawer .info .mono{direction:ltr;display:inline-block;color:var(--text)}
.drawer .tools{display:flex;gap:10px;margin-top:22px}
.drawer .tools .icon-btn{border-color:var(--rule-strong)}
.drawer .d-cta{margin-top:auto;padding-top:26px;display:grid}

/* =========================================================
   HERO — cinematic full-bleed slider
   ========================================================= */
.hero{position:relative;height:min(100svh,960px);min-height:680px;overflow:hidden;background:var(--night);color:var(--on-photo)}
.slide{position:absolute;inset:0;visibility:hidden;z-index:0}
.slide.was{visibility:visible;z-index:1}
.slide.is-on{visibility:visible;z-index:2;animation:wipe-rtl 1.5s cubic-bezier(.77,0,.18,1) both}
:root[dir="ltr"] .slide.is-on{animation-name:wipe-ltr}
.slide.first{animation:none!important}
@keyframes wipe-rtl{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes wipe-ltr{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.frame{position:absolute}
.frame img{width:100%;height:100%;display:block;transition:filter 1.2s ease}
.slide.is-on .frame{animation:kb 10s linear both}
@keyframes kb{from{transform:scale(1.12)}to{transform:scale(1)}}
:root[data-night="1"] .frame img{filter:brightness(.4) saturate(.8) contrast(1.06)}
.shade{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(270deg,rgba(11,9,10,.88) 0%,rgba(11,9,10,.62) 36%,rgba(11,9,10,.1) 72%),linear-gradient(0deg,rgba(11,9,10,.92) 0%,rgba(11,9,10,.2) 34%,transparent 50%),linear-gradient(180deg,rgba(11,9,10,.55) 0%,transparent 22%)}
:root[dir="ltr"] .shade{background:linear-gradient(90deg,rgba(11,9,10,.88) 0%,rgba(11,9,10,.62) 36%,rgba(11,9,10,.1) 72%),linear-gradient(0deg,rgba(11,9,10,.92) 0%,rgba(11,9,10,.2) 34%,transparent 50%),linear-gradient(180deg,rgba(11,9,10,.55) 0%,transparent 22%)}
.grain{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* night hotspots on the real devices */
.spot{position:absolute;width:var(--s,14px);height:var(--s,14px);margin:calc(var(--s,14px) / -2) 0 0 calc(var(--s,14px) / -2);border-radius:50%;opacity:0;transition:opacity 1s ease;pointer-events:none}
:root[data-night="1"] .spot{opacity:1}
.spot.ember{background:radial-gradient(circle,#fff 0 12%,#ff3a4f 30%,rgba(224,36,58,.35) 55%,transparent 72%);animation:blink 1.6s steps(1) infinite}
.spot.lum{background:radial-gradient(circle,#fffaf0 0 18%,rgba(244,236,216,.55) 42%,transparent 70%);animation:breathe 3.6s ease-in-out infinite}
.spot.green{background:radial-gradient(circle,#eafff1 0 14%,#3fdc7e 34%,rgba(63,220,126,.3) 56%,transparent 72%)}
.spot.lens{background:radial-gradient(circle,rgba(255,80,96,.9) 0 16%,rgba(224,36,58,.45) 40%,transparent 70%);animation:breathe 2.8s ease-in-out infinite}
@keyframes blink{0%,55%{opacity:1}56%,100%{opacity:.18}}
@keyframes breathe{0%,100%{opacity:.75}50%{opacity:1}}
.hero .hud{position:absolute;z-index:4;inset:150px var(--gutter) 250px;pointer-events:none;opacity:0;transition:opacity 1s ease .3s;font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;color:rgba(246,241,235,.7);direction:ltr}
:root[data-night="1"] .hero .slide.is-on .hud{opacity:1}
.hero .hud .c{position:absolute;width:26px;height:26px;border:0 solid rgba(246,241,235,.5)}
.hero .hud .tl{top:0;left:0;border-top-width:1px;border-left-width:1px}.hero .hud .tr{top:0;right:0;border-top-width:1px;border-right-width:1px}
.hero .hud .bl{bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}.hero .hud .br{bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}
.hero .hud .rec{position:absolute;top:8px;left:38px;display:flex;gap:8px;align-items:center;color:#ff5a6b}
.hero .hud .rec i{width:8px;height:8px;border-radius:50%;background:var(--ember);box-shadow:0 0 10px var(--ember);animation:blink 1.4s steps(1) infinite}
.hero .hud .time{position:absolute;bottom:8px;left:38px}
.hero .hud .id{position:absolute;top:8px;right:38px}
.hero .hud .lbl{position:absolute;bottom:8px;right:38px}

.hero-in{position:relative;z-index:5;height:100%;display:grid;grid-template-rows:1fr auto;padding-top:150px;padding-bottom:0}
.copies{display:grid;align-content:end;padding-bottom:clamp(30px,5vh,56px)}
.copy{grid-area:1/1;max-width:760px;display:grid;gap:22px;align-content:end;visibility:hidden}
.copy.on{visibility:visible}
.copy .eyebrow{color:#F0B8BF;opacity:0;transform:translateY(10px);transition:opacity .6s .2s,transform .8s .2s}
.copy.on .eyebrow{opacity:1;transform:none}
.copy .h{font-size:clamp(38px,5.6vw,82px);line-height:1.16;font-weight:var(--w-head)}
.copy .ln{display:block;overflow:hidden;padding-bottom:.08em}
.copy .ln>span{display:block;transform:translateY(110%);transition:transform 1.2s cubic-bezier(.2,.85,.2,1)}
.copy .ln.lt>span{color:var(--on-photo-muted)}
.copy.on .ln>span{transform:none}
.copy.on .ln:nth-child(1)>span{transition-delay:.35s}.copy.on .ln:nth-child(2)>span{transition-delay:.5s}
.copy .lead{font-size:clamp(15.5px,1.25vw,18px);color:var(--on-photo-muted);max-width:56ch;opacity:0;transform:translateY(14px);transition:opacity .8s .7s,transform 1s .7s}
.copy.on .lead{opacity:1;transform:none}
.copy:not(.on) .ln>span,.copy:not(.on) .lead,.copy:not(.on) .eyebrow{transition-delay:0s!important;transition-duration:.35s}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.hero-foot{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,3vw,48px);align-items:end;padding-block:22px 28px;border-top:1px solid rgba(246,241,235,.2);position:relative}
.hero-foot .bar{position:absolute;top:-1px;inset-inline-start:0;height:2px;width:0;background:var(--ember)}
.hero-foot .bar.run{animation:prog 7s linear forwards}
.hero-foot.paused .bar{animation-play-state:paused}
@keyframes prog{to{width:100%}}
.counter{display:flex;align-items:flex-end;gap:16px}
.counter .num{font-family:var(--ff-en);font-weight:var(--w-num);font-size:56px;line-height:.9;letter-spacing:-.03em;direction:ltr}
.counter .num small{font-size:15px;opacity:.55;margin-inline-start:6px;letter-spacing:0}
.arrows{display:flex;gap:8px}
.arrows .icon-btn{width:46px;height:46px;border-color:rgba(246,241,235,.4);color:var(--on-photo)}
.arrows .icon-btn:hover{background:var(--on-photo);color:var(--ink)}
.meta{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:clamp(18px,3vw,44px)}
.meta div{display:grid;gap:2px;opacity:0;transform:translateY(8px);transition:opacity .6s,transform .7s}
.meta.on div{opacity:1;transform:none}
.meta.on div:nth-child(2){transition-delay:.08s}.meta.on div:nth-child(3){transition-delay:.16s}
.meta span{font-family:var(--ff-mono);font-size:10px;letter-spacing:.18em;opacity:.6}
.meta b{font-weight:var(--w-title);font-size:14.5px}
.next{display:flex;gap:12px}
.next button{width:clamp(130px,11vw,170px);background:none;border:0;padding:0;cursor:pointer;text-align:start;color:var(--on-photo);display:grid;gap:8px}
.next .th{aspect-ratio:16/10;overflow:hidden;position:relative;border:1px solid rgba(246,241,235,.25)}
.next .th img{width:100%;height:100%;object-fit:cover;transition:transform .8s;filter:brightness(.85)}
.next button:hover .th img{transform:scale(1.08);filter:none}
.next .k{font-family:var(--ff-mono);font-size:10px;letter-spacing:.14em;opacity:.6}
.next b{font-weight:var(--w-ui);font-size:13px;line-height:1.4;display:block}
.scroll-cue{position:absolute;z-index:6;bottom:30px;inset-inline-end:var(--gutter);display:none}

/* features strip */
.trust{border-bottom:1px solid var(--rule);background:var(--surface)}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.trust div{padding:26px 0;padding-inline-end:22px;display:flex;gap:16px;align-items:flex-start}
.trust div+div{padding-inline-start:22px;border-inline-start:1px solid var(--rule)}
.trust svg{width:26px;height:26px;flex:none;color:var(--accent-text);margin-top:3px}
.trust b{display:block;font-weight:var(--w-title);font-size:15px;line-height:1.5}
.trust span span{font-size:13.5px;color:var(--muted);line-height:1.6}

/* =========================================================
   ABOUT
   ========================================================= */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,100px);align-items:center}
.about-media{position:relative;padding-bottom:12%;padding-inline-end:14%}
.about-media .main{aspect-ratio:4/3.3;overflow:hidden}
.about-media .sub{position:absolute;bottom:0;inset-inline-end:0;width:46%;aspect-ratio:1;overflow:hidden;border:10px solid var(--bg)}
.about-media .badge{position:absolute;top:24px;inset-inline-start:24px;background:var(--accent);color:var(--accent-ink);padding:16px 18px;display:grid;gap:2px;max-width:220px}
.about-media .badge b{font-size:14px;font-weight:var(--w-title);line-height:1.5}
.about-media .badge span{font-size:12px;opacity:.8;line-height:1.5}
.about-body{display:grid;gap:22px;color:var(--muted);font-size:clamp(15px,1.2vw,17px)}
.about-body h2{font-size:clamp(28px,3.2vw,44px);color:var(--text)}
.about-body h2 .lt{display:block;color:var(--muted)}
.about-body b{color:var(--text);font-weight:var(--w-title)}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(56px,7vw,96px);border-top:2px solid var(--text)}
.pillar{padding:30px 0 0;padding-inline-end:28px;display:grid;gap:12px;align-content:start}
.pillar+.pillar{padding-inline-start:28px;border-inline-start:1px solid var(--rule)}
.pillar .k{font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;color:var(--accent-text)}
.pillar h3{font-size:clamp(19px,1.6vw,22px)}
.pillar p{color:var(--muted);font-size:15px}

/* =========================================================
   SYSTEMS — photo cards
   ========================================================= */
.sys-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sys{position:relative;aspect-ratio:4/4.6;overflow:hidden;color:var(--on-photo);display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate;text-decoration:none}
.sys img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s cubic-bezier(.2,.7,.2,1);filter:var(--img-filter)}
.sys::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(11,9,10,.94) 0%,rgba(11,9,10,.55) 45%,rgba(11,9,10,.08) 75%);transition:background .5s}
.sys:hover img{transform:scale(1.06)}
.sys:hover::before{background:linear-gradient(0deg,rgba(74,9,17,.96) 0%,rgba(74,9,17,.62) 50%,rgba(11,9,10,.1) 80%)}
.sys .inner{padding:clamp(22px,2.4vw,32px);display:grid;gap:12px}
.sys .code{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.18em;color:#F0B8BF;display:flex;justify-content:space-between}
.sys h3{font-size:clamp(20px,1.8vw,24px);line-height:1.4}
.sys ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.sys li{font-size:12.5px;padding:4px 10px;border:1px solid rgba(246,241,235,.3);border-radius:999px;color:var(--on-photo-muted)}
.sys .more{display:inline-flex;gap:8px;align-items:center;font-size:13.5px;font-weight:var(--w-ui);margin-top:4px;opacity:.9}
.sys .more svg{width:16px;height:16px}

/* =========================================================
   WATCH — live monitoring showcase (animated device scenes)
   ========================================================= */
.watch{position:relative;background:#070606;color:#EEE7E1;overflow:hidden;isolation:isolate;
  --m1:#FFFFFF;--m2:#D6CFC8;--m3:#8F8680;--hudc:rgba(238,231,225,.62)}
.watch.live{--m1:#4a4244;--m2:#241e20;--m3:#0d0a0b}
.watch::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 70% at 28% 50%,#1a1113 0%,#070606 70%)}
:root[dir="ltr"] .watch::before{background:radial-gradient(60% 70% at 72% 50%,#1a1113 0%,#070606 70%)}
.watch .scan{position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:0;transition:opacity 1s;background:repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px)}
.watch .scan::after{content:"";position:absolute;inset-inline:0;height:18%;top:-20%;background:linear-gradient(180deg,transparent,rgba(224,36,58,.06),transparent);animation:sweep 7s linear infinite}
.watch.live .scan{opacity:1}
@keyframes sweep{to{top:110%}}
.watch-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(32px,5vw,90px);align-items:center}
.watch .eyebrow{color:#F0B8BF}
.watch h2{font-size:clamp(30px,3.6vw,50px);margin-top:18px}
.watch h2 .lt{display:block;color:#A1958F}
.watch .intro{color:#A1958F;margin-top:18px;max-width:52ch}
.switch{display:inline-flex;align-items:center;gap:14px;margin-top:28px;background:none;border:1px solid #3A3033;border-radius:999px;padding:8px 18px 8px 8px;cursor:pointer;color:#EEE7E1;font-size:14px;font-weight:var(--w-ui)}
:root[dir="rtl"] .switch{padding:8px 8px 8px 18px}
.switch .track{width:46px;height:26px;border-radius:999px;background:#2A2224;position:relative;transition:background .4s}
.switch .track::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:20px;height:20px;border-radius:50%;background:#EEE7E1;transition:inset-inline-start .4s cubic-bezier(.2,.8,.2,1)}
.switch[aria-pressed="true"] .track{background:var(--oxblood-soft)}
.switch[aria-pressed="true"] .track::after{inset-inline-start:23px}
.devs{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid #2A2224}
.devs button{width:100%;display:grid;grid-template-columns:16px 1fr auto;gap:16px;align-items:center;padding:16px 0;background:none;border:0;border-bottom:1px solid #2A2224;color:#A1958F;cursor:pointer;text-align:start;position:relative;transition:color .3s,padding .3s}
.devs button:hover,.devs button[aria-pressed="true"]{color:#EEE7E1}
.devs button[aria-pressed="true"]{padding-inline-start:10px}
.devs button i.p{position:absolute;bottom:-1px;inset-inline-start:0;height:1px;width:0;background:var(--ember)}
.devs button[aria-pressed="true"] i.p{animation:prog 6s linear forwards}
.watch.paused .devs i.p{animation-play-state:paused!important}
.devs .led{width:9px;height:9px;border-radius:50%;background:#3a3033;justify-self:center;transition:background .4s,box-shadow .4s}
.watch.live .devs .led{background:#3fdc7e;box-shadow:0 0 8px #3fdc7e}
.watch.live .devs button[aria-pressed="true"] .led{background:var(--ember);box-shadow:0 0 10px var(--ember);animation:blink 1.4s steps(1) infinite}
.devs b{font-weight:var(--w-title);font-size:16px}
.devs .st{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.14em;direction:ltr}
.watch .fine{margin-top:18px;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.14em;color:#6f6461;direction:ltr;text-align:end}
:root[data-lang="en"] .watch .fine{text-align:start}

.watch .cam-box{position:relative;aspect-ratio:1/1;max-width:560px;width:100%;justify-self:center}
.watch .scene{position:absolute;inset:0;opacity:0;transform:scale(.965);transition:opacity .9s ease,transform 1.4s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.watch .scene.is-on{opacity:1;transform:none}
.watch .scene svg{width:100%;height:100%;display:block;overflow:visible}
.watch .hud{position:absolute;inset:-6%;pointer-events:none;opacity:0;transition:opacity 1s ease .4s;font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;color:var(--hudc);direction:ltr}
.watch.live .hud{opacity:1}
.watch .hud .c{position:absolute;width:26px;height:26px;border-color:var(--hudc);border-style:solid;border-width:0}
.watch .hud .tl{top:0;left:0;border-top-width:1px;border-left-width:1px}.watch .hud .tr{top:0;right:0;border-top-width:1px;border-right-width:1px}
.watch .hud .bl{bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}.watch .hud .br{bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}
.watch .hud .rec{position:absolute;top:10px;left:38px;display:flex;align-items:center;gap:8px;color:var(--ember)}
.watch .hud .rec i{width:8px;height:8px;border-radius:50%;background:var(--ember);box-shadow:0 0 10px var(--ember);animation:blink 1.4s steps(1) infinite}
.watch .hud .id{position:absolute;top:10px;right:38px}.watch .hud .time{position:absolute;bottom:10px;left:38px}.watch .hud .lbl{position:absolute;bottom:10px;right:38px}
.watch .n{opacity:0;transition:opacity 1.1s ease}
.watch.live .n{opacity:1}
.watch .d{transition:opacity 1s ease}
.watch.live .d{opacity:0}
/* camera */
.watch .cam .ir{fill:#2a1d20;transition:fill .8s ease}
.watch .cam .status{fill:#3a2a2d}
.watch .cam .mount{fill:#B9B0A8;transition:fill .8s}
.watch.live .cam .ir{fill:#ff3548}
.watch.live .cam .ir-glow{animation:irpulse 3.2s ease-in-out infinite}
.watch.live .cam .status{fill:var(--ember);animation:blink 1.4s steps(1) infinite}
.watch.live .cam .mount{fill:#2a2325}
@keyframes irpulse{0%,100%{opacity:.85}50%{opacity:1}}
/* smoke */
.watch .sd-led{fill:#6a3a40}
.watch.live .sd-led{fill:#ff3548;animation:dbl 3.4s infinite}
.watch.live .sd-glow{animation:dbl 3.4s infinite}
@keyframes dbl{0%,5%{opacity:1}6%,11%{opacity:.08}12%,17%{opacity:1}18%,100%{opacity:.08}}
.watch .ripple{transform-box:fill-box;transform-origin:center;opacity:0;stroke-width:1.2}
.watch.live .ripple{animation:ripple 5.1s ease-out infinite}
.watch.live .ripple.r2{animation-delay:1.7s}.watch.live .ripple.r3{animation-delay:3.4s}
@keyframes ripple{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.3);opacity:0}}
/* panel */
.watch .lbls{fill:#8a7f7a}
.watch .zones circle{fill:rgba(0,0,0,.18)}
.watch.live .zones circle{fill:#F2E3C2;animation:zone 2.4s infinite}
.watch .zones circle:nth-child(2){animation-delay:.3s}.watch .zones circle:nth-child(3){animation-delay:.6s}.watch .zones circle:nth-child(4){animation-delay:.9s}
.watch .zones circle:nth-child(5){animation-delay:1.2s}.watch .zones circle:nth-child(6){animation-delay:1.5s}.watch .zones circle:nth-child(7){animation-delay:1.8s}.watch .zones circle:nth-child(8){animation-delay:2.1s}
@keyframes zone{0%,10%{opacity:.85}30%,100%{opacity:.1}}
.watch .caret{fill:#3a2a14;animation:blink 1s steps(1) infinite}
/* sprinkler */
.watch .flow path{stroke-dasharray:4 14;opacity:.6}
.watch.live .flow path{animation:flow 1.6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-36}}
.watch.live .bulb-glow{animation:irpulse 2.6s ease-in-out infinite}
.watch .cap-txt{fill:#8a7f7a}
/* extinguisher */
.watch .needle{transform-origin:272px 120px;transform:rotate(-4deg)}
.watch.live .needle{animation:needle 4s ease-in-out infinite}
@keyframes needle{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(3deg)}}
@media (max-width:960px){.watch-grid{grid-template-columns:1fr}.watch .cam-box{order:-1;max-width:420px}}
@media (max-width:600px){.watch .hud{display:none}}

/* =========================================================
   SERVICES — list + sticky photo
   ========================================================= */
.svc-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,4vw,64px);align-items:start}
.svc-photo{position:sticky;top:110px;aspect-ratio:4/5;overflow:hidden;background:var(--surface-2)}
.svc-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease,transform 1.4s;transform:scale(1.04);filter:var(--img-filter)}
.svc-photo img.on{opacity:1;transform:none}
.svc-photo .cap{position:absolute;inset-inline:0;bottom:0;padding:22px;background:linear-gradient(0deg,rgba(11,9,10,.85),transparent);color:var(--on-photo);display:grid;gap:4px}
.svc-photo .cap .mono{font-size:10.5px;letter-spacing:.16em;opacity:.75}
.svc-photo .cap b{font-weight:var(--w-title);font-size:18px}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.pill{font-size:13.5px;font-weight:var(--w-ui);padding:9px 18px;border:1px solid var(--rule-strong);border-radius:999px;color:var(--muted);background:transparent;cursor:pointer;transition:all .3s}
.pill:hover{color:var(--text);border-color:var(--text)}
.pill[aria-pressed="true"]{background:var(--text);color:var(--bg);border-color:var(--text)}
.pill .c{font-family:var(--ff-mono);font-size:10.5px;opacity:.7;margin-inline-start:6px}
.svc-list{border-top:2px solid var(--text);list-style:none;margin:22px 0 0;padding:0}
.svc{display:grid;grid-template-columns:44px 1fr auto;gap:18px;align-items:center;padding-block:22px;border-bottom:1px solid var(--rule);transition:background .3s,padding .3s;cursor:default}
.svc:hover,.svc.hl{background:var(--surface);padding-inline:14px}
.svc-n{font-family:var(--ff-mono);font-size:12px;color:var(--muted)}
.svc-title{font-size:clamp(17px,1.4vw,19px);font-weight:var(--w-title);line-height:1.5}
.svc-desc{display:block;color:var(--muted);font-size:14px;line-height:1.7;margin-top:2px}
.wa-link{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:var(--w-ui);text-decoration:none;color:var(--accent-text);
  border:1px solid var(--rule-strong);padding:9px 14px;border-radius:999px;white-space:nowrap;transition:all .3s}
.wa-link:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.wa-link svg{width:15px;height:15px}
.svc-more{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:30px}
.svc-more p{color:var(--muted);font-size:14.5px;max-width:52ch}

/* =========================================================
   PRODUCTS
   ========================================================= */
.products{background:var(--surface);border-block:1px solid var(--rule)}
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.prod{background:var(--bg);border:1px solid var(--rule);display:flex;flex-direction:column;transition:border-color .3s,transform .4s}
.prod:hover{border-color:var(--rule-strong);transform:translateY(-4px)}
.prod .pic{aspect-ratio:16/10;overflow:hidden;position:relative;background:var(--band)}
.prod:hover .pic img{transform:scale(1.05)}
.prod .pending{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:10px;color:var(--band-muted);
  background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(238,231,225,.04) 14px 15px),radial-gradient(90% 90% at 50% 40%,#2a1d20,#0f0c0d)}
.prod .pending svg{width:40px;height:40px;color:#E08A95;opacity:.8}
.prod .pending .mono{font-size:10px;letter-spacing:.2em}
.prod .count{position:absolute;top:14px;inset-inline-start:14px;background:rgba(11,9,10,.62);color:var(--on-photo);font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.12em;padding:6px 10px;backdrop-filter:blur(6px)}
.prod .body{padding:24px;display:grid;gap:12px;flex:1;align-content:start}
.prod h3{font-size:clamp(18px,1.5vw,21px)}
.prod .en-sub{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.prod ul{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:6px}
.prod li{font-size:14px;color:var(--muted);display:flex;gap:10px;align-items:center}
.prod li::before{content:"";width:5px;height:5px;background:var(--accent-text);flex:none}
.prod .p-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 24px;border-top:1px solid var(--rule);flex-wrap:wrap}
.prod .p-foot a{font-size:13.5px;font-weight:var(--w-ui);text-decoration:none}
.prod .p-foot .q{color:var(--accent-text);display:inline-flex;gap:8px;align-items:center}
.prod .p-foot .q svg{width:15px;height:15px}

/* =========================================================
   STATS over photo
   ========================================================= */
.stats-band{position:relative;color:var(--on-photo);overflow:hidden;isolation:isolate}

.stats-band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(11,9,10,.92),rgba(46,5,10,.78))}
.stats-band .eyebrow{color:#F0B8BF}
.stats-band h2{font-size:clamp(28px,3.4vw,46px);margin-top:18px}
.stats-band h2 .lt{display:block;color:var(--on-photo-muted)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(246,241,235,.25);margin-top:clamp(40px,5vw,64px)}
.stat{padding:30px 0 4px;padding-inline-end:24px;display:grid;gap:10px}
.stat+.stat{padding-inline-start:24px;border-inline-start:1px solid rgba(246,241,235,.18)}
.stat b{font-family:var(--ff-en);font-weight:var(--w-num);font-size:clamp(50px,6vw,86px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat b sup{font-size:.36em;color:#F0B8BF;vertical-align:top;position:relative;top:.3em;margin-inline-start:4px}
.stat span{color:var(--on-photo-muted);font-size:14.5px;max-width:24ch}

/* =========================================================
   PROJECTS
   ========================================================= */
.proj-rail{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(260px,29vw,400px);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:18px;scrollbar-width:thin;scrollbar-color:var(--rule-strong) transparent}
.proj{scroll-snap-align:start;display:grid;gap:16px;text-decoration:none}
.proj .ph{aspect-ratio:4/5;position:relative;overflow:hidden;background:var(--surface-2)}
.proj .ph .img{position:absolute;inset:0;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.proj:hover .ph .img{transform:scale(1.05)}
.proj .tag{position:absolute;top:16px;inset-inline-start:16px;font-family:var(--ff-mono);font-size:10px;letter-spacing:.14em;padding:6px 10px;background:rgba(11,9,10,.55);color:#F2EDE6;backdrop-filter:blur(6px)}
.proj .ph-note{position:absolute;bottom:16px;inset-inline-start:16px;font-family:var(--ff-mono);font-size:10px;letter-spacing:.14em;color:rgba(242,237,230,.6)}
.proj h3{font-size:clamp(16px,1.4vw,19px);line-height:1.5}
.proj p{font-size:13.5px;color:var(--muted);display:flex;gap:10px;align-items:center}
.proj p i{width:5px;height:5px;background:var(--accent-text)}
.rail-ctrl{display:flex;gap:10px}
.rail-ctrl .icon-btn{border-color:var(--rule-strong);color:var(--text)}
.rail-ctrl .icon-btn svg{width:16px;height:16px}

/* =========================================================
   CLIENTS
   ========================================================= */
.logo-rows{display:grid;border-top:1px solid var(--rule)}
.logo-row{overflow:hidden;border-bottom:1px solid var(--rule);white-space:nowrap}
.logo-row .track{display:inline-flex;animation:mq 80s linear infinite}
:root[dir="rtl"] .logo-row .track{animation-name:mq-rtl}
.logo-row.rev .track{animation-direction:reverse}
.logo-row:hover .track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
@keyframes mq-rtl{to{transform:translateX(50%)}}
.plate{display:inline-grid;place-items:center;height:104px;min-width:230px;padding-inline:28px;border-inline-end:1px solid var(--rule);font-size:15px;font-weight:var(--w-ui);color:var(--muted);transition:color .3s,background .3s}
.plate:hover{color:var(--text);background:var(--surface)}
.plate small{display:block;font-family:var(--ff-mono);font-size:9px;letter-spacing:.2em;opacity:.6;margin-top:2px;text-align:center;font-weight:var(--w-body)}
.note{margin-top:22px;font-size:13px;color:var(--muted);display:flex;gap:10px;align-items:center}
.note i{width:6px;height:6px;border-radius:50%;background:var(--ember)}

/* =========================================================
   CERTIFICATES
   ========================================================= */
.certs{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cert{display:grid;gap:14px}
.cert .frame-c{aspect-ratio:3/4;background:var(--surface);border:1px solid var(--rule);padding:14px;position:relative;transition:transform .5s,box-shadow .5s}
.cert:hover .frame-c{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(27,20,22,.35)}
.cert .paper{position:absolute;inset:14px;border:1px solid var(--rule);display:grid;place-items:center;align-content:center;gap:14px;text-align:center;padding:20px;
  background:repeating-linear-gradient(0deg,transparent 0 22px,color-mix(in srgb,var(--rule) 55%,transparent) 22px 23px)}
.cert .paper svg{width:46px;height:46px;color:var(--accent-text)}
.cert .paper .mono{font-size:10px;letter-spacing:.18em;color:var(--muted)}
.cert h3{font-size:16px;line-height:1.55}
.cert .status{font-family:var(--ff-mono);font-size:10px;letter-spacing:.14em;color:var(--accent-text)}

/* =========================================================
   PROCESS
   ========================================================= */
.steps{display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.steps::before{content:"";position:absolute;top:27px;inset-inline:0;height:1px;background:var(--rule-strong)}
.step{display:grid;gap:14px;padding-inline-end:28px;position:relative}
.step .num{width:55px;height:55px;border-radius:50%;background:var(--bg);border:1px solid var(--rule-strong);display:grid;place-items:center;font-family:var(--ff-mono);font-size:13px;position:relative;transition:all .4s}
.step:hover .num{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.step h3{font-size:clamp(17px,1.5vw,20px);margin-top:10px}
.step p{font-size:14.5px;color:var(--muted);max-width:30ch}

/* =========================================================
   CTA over photo
   ========================================================= */
.cta{position:relative;color:var(--on-photo);overflow:hidden;isolation:isolate}

.cta::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(270deg,rgba(107,15,26,.94) 0%,rgba(74,9,17,.86) 50%,rgba(11,9,10,.6) 100%)}
:root[dir="ltr"] .cta::before{background:linear-gradient(90deg,rgba(107,15,26,.94) 0%,rgba(74,9,17,.86) 50%,rgba(11,9,10,.6) 100%)}
.cta .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(32px,6vw,100px);align-items:end;padding-block:clamp(80px,10vw,130px)}
.cta .eyebrow{color:#F6D3D7}
.cta h2{font-size:clamp(32px,4.4vw,62px);margin-top:20px;line-height:1.25}
.cta h2 .lt{display:block;opacity:.85}
.cta p{color:var(--on-photo-muted);margin-top:20px;max-width:46ch}
.cta-actions{display:grid;gap:12px}
.cta .btn{justify-content:space-between}
.btn-light{background:var(--on-photo);color:var(--oxblood)}
.btn-light:hover{background:#fff}
.cta .phones{display:grid;gap:4px;margin-top:10px;font-family:var(--ff-mono);font-size:14px;color:var(--on-photo-muted);direction:ltr;text-align:end}
:root[data-lang="en"] .cta .phones{text-align:start}

/* =========================================================
   FOOTER
   ========================================================= */
.foot{background:var(--band);color:var(--band-text);padding-top:clamp(64px,8vw,100px);padding-bottom:26px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:clamp(28px,4vw,64px);padding-bottom:52px;border-bottom:1px solid var(--band-rule)}
.foot h4{font-size:14px;font-weight:var(--w-title);margin-bottom:18px;color:var(--band-text)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot ul a{text-decoration:none;font-size:14.5px;color:var(--band-muted);transition:color .3s}
.foot ul a:hover{color:#F0B8BF}
.foot .about-mini{color:var(--band-muted);font-size:14px;max-width:40ch;margin-top:20px}
.foot address{font-style:normal;color:var(--band-muted);font-size:14px;line-height:1.9}
.foot address .mono{color:var(--band-text);direction:ltr;display:inline-block}
.foot-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:24px;font-size:12.5px;color:var(--band-muted)}
.foot .seal{color:#E08A95}

/* floating whatsapp */
.fab{position:fixed;inset-inline-end:22px;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:40;width:58px;height:58px;border-radius:50%;
  background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;box-shadow:0 18px 40px -12px rgba(107,15,26,.55);text-decoration:none;transition:transform .3s}
.fab:hover{transform:translateY(-3px)}
.fab svg{width:26px;height:26px}

.rv{transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.js .rv.pre{opacity:0;transform:translateY(24px)}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1150px){
  .nav{display:none}
  .util .grp.hide-m{display:none}
  .certs{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:960px){
  .hero-foot{grid-template-columns:1fr auto}
  .next{display:none}
  .head-cta{display:none}
  .sec-head,.about-grid,.cta .wrap,.svc-wrap{grid-template-columns:1fr}
  .svc-photo{display:none}
  .sys-grid,.prod-grid{grid-template-columns:1fr 1fr}
  .trust .wrap,.stats{grid-template-columns:1fr 1fr}
  .trust div:nth-child(3),.stat:nth-child(3){border-inline-start:0;padding-inline-start:0}
  .trust div:nth-child(n+3){border-top:1px solid var(--rule)}
  .stat:nth-child(n+3){border-top:1px solid rgba(246,241,235,.18)}
  .steps{grid-template-columns:1fr 1fr;row-gap:44px}
  .steps::before{display:none}
  .pillars{grid-template-columns:1fr}
  .pillar+.pillar{padding-inline-start:0;border-inline-start:0;border-top:1px solid var(--rule);margin-top:24px}
  .meta{grid-template-columns:repeat(2,auto)}
  .meta div:nth-child(3){display:none}
}
@media (max-width:600px){
  .util{display:none}
  .brand small{display:none}
  .sys-grid,.prod-grid,.trust .wrap,.stats,.steps,.certs,.foot-grid{grid-template-columns:1fr}
  .trust div+div{border-inline-start:0;padding-inline-start:0;border-top:1px solid var(--rule)}
  .stat+.stat{border-inline-start:0;padding-inline-start:0;border-top:1px solid rgba(246,241,235,.18)}
  .sys{aspect-ratio:4/4.2}
  .svc{grid-template-columns:1fr auto}
  .svc-n{display:none}
  .wa-link span{display:none}
  .wa-link{padding:10px}
  .hero{min-height:620px}
  .hero .hud{display:none}
  .meta{display:none}
  .hero-foot{grid-template-columns:1fr}
  .counter .num{font-size:40px}
  .menu-btn .lbl{display:none}
  .menu-btn{width:44px;padding:0;justify-content:center}
  .brand .logo{width:46px;height:46px}
  .about-media{padding-inline-end:0;padding-bottom:0}
  .about-media .sub{display:none}
  .plate{min-width:180px;height:88px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* =========================================================
   THEME ADDITIONS — inner pages, blog, contact
   ========================================================= */
.util a{color:inherit;text-decoration:none;display:inline-flex;gap:8px;align-items:center}
.menu-btn .lbl{white-space:nowrap}
.sec-head.solo{grid-template-columns:1fr}
.head-side{display:grid;gap:22px;justify-items:start}
.head-side p{color:var(--muted);max-width:58ch}
.wrap.narrow{max-width:900px}
.svc-title a{color:inherit;text-decoration:none}
.svc-title a:hover{color:var(--accent-text)}
.steps{list-style:none;margin:0;padding:0}
.stats-band .bg,.cta .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.stats-band img:not(.bg),.cta img:not(.bg){position:static;width:auto;height:auto}
.prod .pending svg{width:44px;height:44px;color:#E08A95;opacity:.85}
.prod ul.full{grid-template-columns:1fr 1fr;display:grid;column-gap:18px}
.proj .ph .ph-img{position:absolute;inset:0}
.ph-empty{position:absolute;inset:0;display:grid;place-items:center;color:rgba(242,237,230,.35);
  background:radial-gradient(120% 90% at 30% 20%,#6B0F1A 0%,#1b1416 72%)}
.proj:nth-child(3n+2) .ph-empty{background:radial-gradient(120% 90% at 70% 20%,#4A0911 0%,#141011 72%)}
.proj:nth-child(3n) .ph-empty{background:radial-gradient(120% 90% at 40% 80%,#8E1C2A 0%,#2E050A 72%)}
.ph-empty svg{width:56px;height:56px}
.proj-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 18px}
.proj[hidden]{display:none}
.logo-grid{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--rule);border-inline-start:1px solid var(--rule)}
.logo-grid .plate{min-width:0;border-bottom:1px solid var(--rule);height:130px;text-align:center}
.plate{text-decoration:none;color:var(--muted)}
.plate .logo-img{max-width:150px;max-height:62px;width:auto;height:auto;object-fit:contain;filter:grayscale(1);opacity:.75;transition:filter .3s,opacity .3s}
.plate:hover .logo-img{filter:none;opacity:1}
:root[data-night="1"] .plate .logo-img{filter:grayscale(1) invert(1) brightness(1.6);opacity:.7}
.cert{margin:0}
.cert a.frame-c{display:block;padding:10px}
.cert a.frame-c img{width:100%;height:100%;object-fit:contain;background:#fff}
.cert figcaption{display:grid;gap:6px}
.social{display:flex;gap:10px;margin-top:22px}
.social .icon-btn{width:40px;height:40px;border-color:var(--band-rule);color:var(--band-text)}
.foot address a{color:inherit;text-decoration:none}
.foot-bottom a{color:inherit;text-decoration:none}
.cta .phones a{color:inherit;text-decoration:none}
.err-code{font-family:var(--ff-en);font-weight:var(--w-num);font-size:clamp(90px,16vw,200px);line-height:1;color:var(--accent-text)}

/* banner (inner pages) */
.banner{position:relative;min-height:clamp(420px,62vh,620px);display:flex;align-items:flex-end;color:var(--on-photo);background:var(--night);overflow:hidden;isolation:isolate}
.banner-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;animation:kb 12s ease-out both}
:root[data-night="1"] .banner-img{filter:brightness(.55) saturate(.85)}
.banner-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(11,9,10,.92) 0%,rgba(11,9,10,.45) 55%,rgba(11,9,10,.55) 100%)}
.banner-in{width:100%;padding-top:170px;padding-bottom:clamp(40px,6vw,72px);display:grid;gap:14px;justify-items:center;text-align:center}
.banner h1{font-size:clamp(34px,5vw,72px);line-height:1.2;max-width:22ch}
.banner p{color:var(--on-photo-muted);font-size:clamp(15px,1.3vw,18px);max-width:60ch}
.crumbs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;font-size:13px;color:var(--on-photo-muted)}
.crumbs a{color:inherit;text-decoration:none}
.crumbs a:hover{color:var(--on-photo)}
.crumbs [aria-current]{color:#F0B8BF}
.intro-sec{padding-bottom:0}
.lead-prose{font-size:clamp(16px,1.35vw,19px);text-align:center;color:var(--muted)}

/* blog */
.cat-nav{margin-bottom:36px}
.cat-nav .pill{text-decoration:none}
.cat-nav .pill[aria-current="page"]{background:var(--text);color:var(--bg);border-color:var(--text)}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,28px)}
.post-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--rule);transition:border-color .3s,transform .4s}
.post-card:hover{border-color:var(--rule-strong);transform:translateY(-4px)}
.pc-img{display:block;aspect-ratio:16/10;overflow:hidden;position:relative;background:var(--band)}
.pc-img .ph-img{position:absolute;inset:0}
.post-card:hover .pc-img .ph-img{transform:scale(1.05)}
.pc-img .tag{position:absolute;top:14px;inset-inline-start:14px;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:var(--w-ui);padding:5px 12px}
.pc-body{padding:24px;display:grid;gap:12px;align-content:start;flex:1}
.pc-meta{font-size:12.5px;color:var(--muted)}
.post-card h3{font-size:clamp(17px,1.4vw,20px);line-height:1.5}
.post-card h3 a{color:inherit;text-decoration:none}
.post-card h3 a:hover{color:var(--accent-text)}
.post-card p{color:var(--muted);font-size:14.5px}
.post-card .link-arrow{justify-self:start;margin-top:6px}
.pagination{display:flex;justify-content:center;gap:8px;margin-top:48px;flex-wrap:wrap}
.pagination .page-numbers{min-width:44px;height:44px;display:grid;place-items:center;padding-inline:14px;border:1px solid var(--rule-strong);text-decoration:none;color:var(--text);font-weight:var(--w-ui)}
.pagination .current{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.empty{color:var(--muted);text-align:center}

/* article */
.art-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.art-side{position:sticky;top:100px;display:grid;gap:22px}
.art-meta{display:grid;gap:10px;font-size:13.5px;color:var(--muted);padding-bottom:22px;border-bottom:1px solid var(--rule)}
.art-meta span{display:inline-flex;gap:8px;align-items:center}
.art-meta svg{width:16px;height:16px}
.art-meta .pill{justify-self:start;text-decoration:none}
.toc{display:grid;gap:12px}
.toc b{font-size:13px;font-weight:var(--w-title);color:var(--accent-text)}
.toc ol{margin:0;padding:0;list-style:none;counter-reset:t;display:grid;gap:2px;border-inline-start:2px solid var(--rule)}
.toc li{counter-increment:t}
.toc a{display:block;padding:7px 14px;font-size:14px;color:var(--muted);text-decoration:none;line-height:1.6;border-inline-start:2px solid transparent;margin-inline-start:-2px;transition:color .3s,border-color .3s}
.toc a::before{content:counter(t,decimal-leading-zero) "  ";font-family:var(--ff-mono);font-size:11px;opacity:.7}
.toc a:hover,.toc a.on{color:var(--text);border-color:var(--accent-text)}
.side-cta{background:var(--band);color:var(--band-text);padding:24px;display:grid;gap:12px}
.side-cta .eyebrow{color:#F0B8BF}
.side-cta b{font-size:17px;font-weight:var(--w-title);line-height:1.5}
.side-cta p{color:var(--band-muted);font-size:14px}
.prose{font-size:clamp(16px,1.2vw,17.5px);line-height:2;color:var(--text);min-width:0}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:clamp(22px,2.2vw,30px);margin-top:1.9em;scroll-margin-top:110px;padding-top:.9em;border-top:1px solid var(--rule)}
.prose h2:first-child{margin-top:0;border-top:0;padding-top:0}
.prose h3{font-size:clamp(18px,1.6vw,21px);margin-top:1.5em}
.prose p,.prose li{color:color-mix(in srgb,var(--text) 86%,var(--muted))}
.prose ul,.prose ol{padding-inline-start:1.3em}
.prose li+li{margin-top:.4em}
.prose li::marker{color:var(--accent-text)}
.prose strong{font-weight:var(--w-title);color:var(--text)}
.prose a{color:var(--accent-text)}
.prose blockquote{margin-inline:0;padding:18px 22px;border-inline-start:3px solid var(--accent-text);background:var(--surface);font-size:1.02em}
.prose table{width:100%;border-collapse:collapse;font-size:.95em;display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid var(--rule);padding:10px 14px;text-align:start;vertical-align:top}
.prose th{background:var(--surface-2);font-weight:var(--w-title)}
.prose img{height:auto}
.prose figure.wide{margin:0 0 1.4em}
.prose .note{background:color-mix(in srgb,var(--accent) 8%,transparent);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);padding:16px 20px}

/* contact */
.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,4vw,64px);align-items:start}
.c-cards{display:grid;gap:12px}
.c-card{display:flex;gap:16px;align-items:center;padding:22px;border:1px solid var(--rule);background:var(--surface);text-decoration:none;color:inherit;transition:border-color .3s,transform .3s}
.c-card:hover{border-color:var(--accent-text);transform:translateY(-2px)}
.c-card svg{width:26px;height:26px;color:var(--accent-text);flex:none}
.c-card b{display:block;font-weight:var(--w-title)}
.c-card span span{color:var(--muted);font-size:14px}
.c-card .mono{direction:ltr;display:inline-block}
.c-form{display:grid;gap:18px;padding:clamp(24px,3vw,40px);border:1px solid var(--rule);background:var(--surface)}
.c-form h2{font-size:clamp(24px,2.4vw,32px)}
.c-form h2 .lt{color:var(--muted)}
.c-form .hint{color:var(--muted);font-size:14px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.c-form label{display:grid;gap:6px;font-size:13.5px;font-weight:var(--w-ui)}
.c-form input,.c-form select,.c-form textarea{font:inherit;font-weight:var(--w-body);padding:13px 14px;border:1px solid var(--rule-strong);background:var(--bg);color:var(--text);border-radius:2px;width:100%}
.c-form input:focus,.c-form select:focus,.c-form textarea:focus{outline:2px solid var(--accent-text);outline-offset:0;border-color:transparent}
.c-form .btn{justify-self:start}
.f-err{color:var(--ember);font-size:14px}

/* lightbox */
.lb{position:fixed;inset:0;z-index:90;background:rgba(11,9,10,.9);display:grid;place-items:center;padding:24px;cursor:zoom-out}
.lb img{max-width:min(1000px,100%);max-height:90vh;object-fit:contain;background:#fff}

@media (max-width:1150px){
  .proj-grid{grid-template-columns:repeat(3,1fr)}
  .logo-grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:960px){
  .post-grid{grid-template-columns:1fr 1fr}
  .art-grid,.contact-grid{grid-template-columns:1fr}
  .art-side{position:static}
  .proj-grid{grid-template-columns:1fr 1fr}
  .logo-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:600px){
  .post-grid,.f-row,.prod ul.full{grid-template-columns:1fr}
  .logo-grid{grid-template-columns:1fr 1fr}
  .menu-btn .lbl{display:none}
  .banner{min-height:380px}
}
[hidden]{display:none!important}
/* mobile header + hero legibility */
:root[data-night="1"] .frame img{filter:brightness(.5) saturate(.85) contrast(1.05)}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
@media (max-width:600px){
  .main-bar .wrap{gap:10px}
  .head-tools{gap:8px}
  .head-tools .js-theme{display:none}
  .brand{gap:10px}
  .brand b{font-size:13.5px}
  .icon-btn{width:40px;height:40px}
  .shade,:root[dir="ltr"] .shade{background:linear-gradient(0deg,rgba(11,9,10,.94) 0%,rgba(11,9,10,.6) 50%,rgba(11,9,10,.3) 100%)}
}

/* =========================================================
   MOBILE EDITION — a furniture-house calm on small screens.
   Quiet header, full-screen hero, swipeable catalogues,
   a floating contact bar instead of loud buttons.
   ========================================================= */
.m-progress{display:none}
.m-bar{display:none}
.hero-foot .tabname{display:none}

@media (max-width:768px){
  :root{--gutter:20px}
  body{font-size:15.5px;line-height:1.85}
  .sec{padding-block:76px}

  /* ---- header: slim, no circles ---- */
  .main-bar .wrap,.site-head.solid .main-bar .wrap{height:64px}
  .site-head{border-bottom-color:rgba(246,241,235,.1)}
  .brand{gap:10px}
  .brand .logo,.site-head.solid .brand .logo{width:38px;height:38px}
  .brand b{font-size:13px;font-weight:var(--w-title);letter-spacing:.01em}
  .brand small{display:none}
  .head-tools{gap:4px}
  .head-tools .js-theme,.head-cta{display:none}
  .head-tools .lang-btn{border:0;width:auto;height:40px;padding-inline:10px;font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.14em;opacity:.8}
  .menu-btn,.menu-btn:hover{border:0;width:auto;height:40px;padding-inline:8px 0;gap:10px;opacity:1;background:none}
  .menu-btn .lbl{display:inline!important;font-size:13px;font-weight:var(--w-ui)}
  .menu-btn .bars{width:22px;gap:6px}

  /* ---- hero: a full-screen photograph, soft type, one line of actions ---- */
  .hero{height:100svh;min-height:600px;max-height:none}
  .shade,:root[dir="ltr"] .shade{background:linear-gradient(0deg,rgba(11,9,10,.9) 0%,rgba(11,9,10,.55) 42%,rgba(11,9,10,.12) 70%,rgba(11,9,10,.45) 100%)}
  .hero-in{padding-top:84px}
  .copies{padding-bottom:26px}
  .copy{gap:14px}
  .copy .eyebrow{font-size:11.5px;gap:10px}
  .copy .eyebrow::before{width:18px}
  .copy .h{font-size:clamp(30px,8.4vw,38px);line-height:1.28;font-weight:var(--w-title)}
  .copy .ln.lt>span{font-weight:var(--w-light)}
  .copy .lead{font-size:14.5px;line-height:1.8;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .hero-cta{display:grid;grid-template-columns:1.1fr 1fr;gap:10px;margin-top:6px}
  .hero-cta .btn{padding:14px 10px;font-size:13.5px;gap:8px;border-radius:999px}
  .hero-cta .btn svg{width:16px;height:16px}
  .hero-foot{grid-template-columns:1fr auto;align-items:center;padding-block:16px 22px;gap:14px}
  .hero-foot .meta,.hero-foot .next{display:none}
  .counter{display:contents}
  .counter .num{font-size:30px;order:0}
  .hero-foot .tabname{display:block;font-size:12.5px;color:var(--on-photo-muted);order:1;justify-self:start;grid-column:1}
  .counter .num{grid-column:1;grid-row:1;justify-self:start}
  .hero-foot .tabname{grid-row:2}
  .arrows{grid-column:2;grid-row:1/3}
  .arrows .icon-btn{width:40px;height:40px}
  .hero .hud{display:none}

  /* ---- section heads ---- */
  .sec-head{gap:14px;margin-bottom:30px}
  .sec-head h2{font-size:clamp(25px,7vw,30px);margin-top:12px;line-height:1.35}
  .sec-head p{font-size:14.5px}
  .eyebrow{font-size:12px}

  /* ---- features: a quiet two-by-two ---- */
  .trust .wrap{grid-template-columns:1fr 1fr;gap:0}
  .trust div,.trust div+div{padding:20px 0;padding-inline-end:12px;padding-inline-start:0;border:0;flex-direction:column;gap:10px}
  .trust div:nth-child(even){padding-inline-start:14px;border-inline-start:1px solid var(--rule)}
  .trust div:nth-child(n+3){border-top:1px solid var(--rule)}
  .trust svg{width:22px;height:22px;margin:0}
  .trust b{font-size:13.5px}
  .trust span span{font-size:12.5px}

  /* ---- about: edge-to-edge photograph ---- */
  .about-grid{gap:34px}
  .about-media{margin-inline:calc(-1 * var(--gutter));padding:0}
  .about-media .main{aspect-ratio:4/3.4}
  .about-media .sub{display:none}
  .about-media .badge{top:auto;bottom:-22px;inset-inline-start:var(--gutter);max-width:78%;padding:14px 16px}
  .about-body{padding-top:18px;font-size:15px}
  .about-body h2{font-size:clamp(25px,7vw,30px)}
  .about-body .cta-row{gap:18px;align-items:center}
  .pillars{margin-top:48px;border-top-width:1px}
  .pillar,.pillar+.pillar{padding:22px 0 0;margin-top:0;border:0;display:grid;grid-template-columns:62px 1fr;column-gap:10px}
  .pillar+.pillar{border-top:1px solid var(--rule);margin-top:22px}
  .pillar .k{grid-row:1/3;padding-top:5px;font-size:10px}
  .pillar p{font-size:14px}

  /* ---- swipeable catalogues ---- */
  .sys-grid,.prod-grid,.certs,.blog-home .post-grid,.related .post-grid,.proj-rail{
    display:grid!important;grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:80%;gap:14px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);padding-bottom:4px}
  .sys-grid::-webkit-scrollbar,.prod-grid::-webkit-scrollbar,.certs::-webkit-scrollbar,.post-grid::-webkit-scrollbar,.proj-rail::-webkit-scrollbar{display:none}
  .sys-grid>*,.prod-grid>*,.certs>*,.post-grid>*,.proj-rail>*{scroll-snap-align:start}
  .certs{grid-auto-columns:62%}
  .proj-rail{grid-auto-columns:74%}
  .m-progress{display:block;position:relative;height:1px;background:var(--rule);margin-top:22px;overflow:hidden}
  .m-progress i{position:absolute;top:0;inset-inline-start:0;height:1px;background:var(--text);transition:transform .15s linear}
  .rail-ctrl{display:none}

  .sys{aspect-ratio:4/5.1}
  .sys .inner{padding:20px;gap:10px}
  .sys h3{font-size:19px}
  .sys li{font-size:11.5px;padding:3px 9px}
  .sys li:nth-child(n+4){display:none}

  .prod .pic{aspect-ratio:4/3}
  .prod .body{padding:18px;gap:8px}
  .prod li{font-size:13.5px}
  .prod li:nth-child(n+4){display:none}
  .prod ul.full li:nth-child(n+4){display:flex}
  .prod .p-foot{padding:14px 18px}

  /* ---- live monitoring ---- */
  .watch-grid{gap:26px}
  .watch .cam-box{max-width:88%;margin-inline:auto}
  .watch .intro{font-size:14.5px}
  .switch{margin-top:20px}
  .devs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;border:0;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);margin-top:22px}
  .devs::-webkit-scrollbar{display:none}
  .devs li{flex:none}
  .devs button,.devs button[aria-pressed="true"]{width:auto;grid-template-columns:auto auto;gap:8px;padding:10px 16px;border:1px solid #2A2224;border-radius:999px}
  .devs button[aria-pressed="true"]{border-color:#8E1C2A;background:rgba(142,28,42,.18)}
  .devs .st,.devs i.p{display:none}
  .devs b{font-size:13.5px;white-space:nowrap}
  .watch .fine{text-align:center}

  /* ---- services: calm list, filters on one line ---- */
  .filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter)}
  .filters::-webkit-scrollbar{display:none}
  .pill{flex:none;font-size:13px;padding:8px 16px}
  .svc-list{margin-top:18px;border-top-width:1px}
  .svc{grid-template-columns:1fr auto;padding-block:18px;gap:14px}
  .svc:hover,.svc.hl{background:none;padding-inline:0}
  .svc-title{font-size:15.5px}
  .svc-desc{font-size:13px;line-height:1.7}
  .wa-link{width:40px;height:40px;padding:0;justify-content:center;border-radius:50%}
  .svc-more{margin-top:22px}

  /* ---- stats: fine numerals ---- */
  .stats-band .sec{padding-block:64px}
  .stats-band h2{font-size:clamp(25px,7vw,30px)}
  .stats{grid-template-columns:1fr 1fr;margin-top:32px}
  .stat,.stat+.stat{padding:22px 0 18px;padding-inline-end:12px;padding-inline-start:0;border:0}
  .stat:nth-child(even){padding-inline-start:16px;border-inline-start:1px solid rgba(246,241,235,.18)}
  .stat:nth-child(n+3){border-top:1px solid rgba(246,241,235,.18)}
  .stat b{font-size:clamp(40px,12vw,52px)}
  .stat span{font-size:12.5px}

  /* ---- projects ---- */
  .proj h3{font-size:15.5px}
  .proj p{font-size:12.5px}
  .proj-grid{grid-template-columns:1fr 1fr;gap:18px 12px}
  .proj-grid .proj h3{font-size:14px}

  /* ---- clients ---- */
  .plate{height:84px;min-width:170px;padding-inline:20px;font-size:13.5px}
  .logo-grid{grid-template-columns:1fr 1fr}
  .logo-grid .plate{height:100px}

  /* ---- certificates ---- */
  .cert h3{font-size:14px}

  /* ---- process: vertical timeline ---- */
  .steps,.steps::before{display:block}
  .steps{position:relative;padding-inline-start:0}
  .steps::before{content:"";position:absolute;top:8px;bottom:8px;inset-inline-start:21px;width:1px;height:auto;background:var(--rule-strong)}
  .step{display:grid;grid-template-columns:44px 1fr;column-gap:16px;padding:0 0 26px}
  .step .num{width:44px;height:44px;font-size:11.5px;grid-row:1/3}
  .step h3{margin-top:10px;font-size:17px}
  .step p{font-size:14px}

  /* ---- blog cards ---- */
  .post-grid{grid-template-columns:1fr}
  .pc-body{padding:18px;gap:8px}
  .post-card h3{font-size:16.5px}
  .post-card p{font-size:13.5px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

  /* ---- CTA ---- */
  .cta .wrap{padding-block:72px;gap:30px}
  .cta h2{font-size:clamp(28px,8vw,36px)}
  .cta-actions .btn{border-radius:999px}
  .cta .phones{text-align:start}

  /* ---- inner pages ---- */
  .banner{min-height:62svh}
  .banner-in{padding-top:110px;gap:10px}
  .banner h1{font-size:clamp(28px,8vw,38px)}
  .banner p{font-size:14.5px}
  .crumbs{font-size:12px}
  .art-side{gap:18px}
  .toc ol{max-height:none}
  .prose{font-size:16px;line-height:1.95}
  .prose h2{font-size:21px}
  .c-card{padding:18px}
  .c-form{padding:22px}

  /* ---- footer ---- */
  .foot{padding-top:60px;padding-bottom:110px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:34px 18px}
  .foot-grid>div:first-child,.foot-grid>div:last-child{grid-column:1/-1}
  .foot-bottom{flex-direction:column;gap:8px}

  /* ---- drawer: an ivory page of its own ---- */
  .drawer{width:100vw;padding-inline:24px}
  .drawer nav a{font-size:28px;font-weight:var(--w-light);padding-block:12px}
  .drawer nav a.on{font-weight:var(--w-title)}

  /* ---- floating contact bar replaces the red button ---- */
  .fab{display:none}
  .m-bar{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:4px;position:fixed;z-index:45;inset-inline:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));
    padding:5px;border-radius:999px;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border:1px solid var(--rule);box-shadow:0 18px 40px -18px rgba(27,20,22,.45);transform:translateY(160%);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
  .m-bar.show{transform:none}
  .m-bar a{display:flex;align-items:center;justify-content:center;gap:7px;height:44px;border-radius:999px;font-size:13px;font-weight:var(--w-ui);text-decoration:none;color:var(--text)}
  .m-bar a svg{width:16px;height:16px}
  .m-bar a.q{background:var(--accent);color:var(--accent-ink)}
}
@media (max-width:340px){
  .brand b{font-size:12px}
  .hero-cta{grid-template-columns:1fr}
}

/* =========================================================
   OFFICIAL EDITION — portal structure with a crafted finish:
   accessibility tools, numbered sections, quick-access cards,
   credential seals, figures, contact channels.
   ========================================================= */
main,.foot{zoom:var(--zoom,1)}
.m-only{display:none!important}

/* utility bar tools */
.util .a11y{display:inline-flex;align-items:center;gap:2px;border-inline-start:1px solid rgba(246,241,235,.22);padding-inline-start:12px;margin-inline-start:4px}
.util .a11y button,.util .a11y a{background:none;border:0;color:inherit;font:inherit;font-size:12px;font-weight:var(--w-ui);padding:5px 8px;cursor:pointer;display:inline-flex;gap:6px;align-items:center;border-radius:2px;transition:background .3s}
.util .a11y button:hover,.util .a11y a:hover{background:rgba(246,241,235,.12)}
.site-head.solid .util .a11y button:hover,.site-head.solid .util .a11y a:hover{background:var(--surface-2)}
.util .a11y svg{width:13px;height:13px}
.util .a11y .js-fs{font-family:var(--ff-en);letter-spacing:.02em}
.util .grp{opacity:1}
.util .grp>span,.util .grp>a{opacity:.82}

/* numbered eyebrows (home) */
.eyebrow .no{order:-1;font-family:var(--ff-mono);font-size:11px;letter-spacing:.08em;font-weight:var(--w-ui)}

/* quick access */
.quick{position:relative;z-index:6;margin-top:-60px}
.hero:has(+ .quick) .hero-in{padding-bottom:64px}
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);border:1px solid var(--rule);box-shadow:0 36px 70px -34px rgba(27,20,22,.45)}
.q-card{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:24px 22px;text-decoration:none;color:var(--text);position:relative;transition:background .35s,color .35s}
.q-card+.q-card{border-inline-start:1px solid var(--rule)}
.q-card::after{content:"";position:absolute;inset-inline:0;top:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
:root[dir="ltr"] .q-card::after{transform-origin:left}
.q-card:hover::after{transform:scaleX(1)}
.q-card:hover{background:var(--bg)}
.q-ic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:var(--accent-text);background:color-mix(in srgb,var(--accent) 9%,transparent);transition:background .35s,color .35s}
.q-card:hover .q-ic{background:var(--accent);color:var(--accent-ink)}
.q-ic svg{width:22px;height:22px}
.q-tx b{display:block;font-weight:var(--w-title);font-size:15px;line-height:1.45}
.q-tx span{display:block;font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:2px}
.q-go svg{width:16px;height:16px;opacity:.45;transition:opacity .3s,transform .3s}
.q-card:hover .q-go svg{opacity:1}

/* credentials strip (features) */
.trust{background:var(--bg);border-bottom:0}
.quick + .trust .wrap{padding-top:26px}
.trust .wrap{border-bottom:1px solid var(--rule)}
.trust div{align-items:center}
.trust svg{width:46px;height:46px;padding:11px;border:1px solid var(--rule-strong);border-radius:50%;margin:0;color:var(--accent-text);box-sizing:border-box}

/* about figures */
.about-grid{align-items:start}
.figures{display:grid;grid-template-columns:repeat(4,1fr);margin:6px 0 0;border-block:1px solid var(--rule)}
.figures>div{padding:18px 0 16px;padding-inline-end:12px}
.figures>div+div{padding-inline-start:14px;border-inline-start:1px solid var(--rule)}
.figures dt b{font-family:var(--ff-en);font-weight:var(--w-num);font-size:clamp(34px,3.2vw,46px);line-height:1;color:var(--text);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.figures dt b sup{font-size:.4em;color:var(--accent-text);vertical-align:top;position:relative;top:.25em;margin-inline-start:2px}
.figures dd{margin:8px 0 0;font-size:12.5px;color:var(--muted);line-height:1.55}

/* band rhythm: alternate surfaces for a structured, official read */
#services{background:var(--surface);border-block:1px solid var(--rule);padding-top:clamp(80px,10vw,140px)!important}
#certs{background:var(--surface);border-block:1px solid var(--rule);padding-top:clamp(80px,10vw,140px)!important}

/* live monitoring: grid children may shrink (fixes mobile overflow) */
.watch-grid>*{min-width:0}
.watch .fine{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* contact channels */
.cta .channels{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:6px}
.ch{display:flex;gap:14px;align-items:center;padding:18px;border:1px solid rgba(246,241,235,.22);background:rgba(11,9,10,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--on-photo);text-decoration:none;transition:background .3s,border-color .3s;min-width:0}
.ch:hover{background:rgba(246,241,235,.1);border-color:rgba(246,241,235,.45)}
.ch svg{width:22px;height:22px;flex:none;color:#F0B8BF}
.ch span{min-width:0}
.ch small{display:block;font-size:11.5px;opacity:.72}
.ch b{display:block;font-weight:var(--w-title);font-size:14px;line-height:1.5}
.cta .wrap{row-gap:34px}

@media (max-width:1150px){
  .quick-grid{grid-template-columns:1fr 1fr}
  .q-card:nth-child(3){border-inline-start:0}
  .q-card:nth-child(n+3){border-top:1px solid var(--rule)}
  .cta .channels{grid-template-columns:1fr 1fr}
}
@media (max-width:960px){
  .figures{grid-template-columns:1fr 1fr}
  .figures>div:nth-child(3){border-inline-start:0;padding-inline-start:0}
  .figures>div:nth-child(n+3){border-top:1px solid var(--rule)}
}
@media (max-width:768px){
  .util{display:none}
  .m-only{display:grid!important}
  .head-tools .m-only{width:36px;height:36px;border:1px solid currentColor;border-radius:50%;opacity:.7;padding:0;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.06em}
  .head-tools .m-only svg{width:15px;height:15px}
  .head-tools{gap:8px}
  .menu-btn{padding-inline-start:6px}

  .drawer{width:min(400px,86vw)}
  .drawer nav a{font-size:24px}

  .quick{margin-top:0;padding-top:22px;background:var(--bg)}
  .quick-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:74%;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    background:none;border:0;box-shadow:none;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
  .quick-grid::-webkit-scrollbar{display:none}
  .q-card,.q-card+.q-card,.q-card:nth-child(n+3){scroll-snap-align:start;border:1px solid var(--rule);background:var(--surface);padding:16px;gap:12px}
  .q-ic{width:40px;height:40px}
  .q-ic svg{width:19px;height:19px}
  .q-tx b{font-size:14px}
  .q-tx span{font-size:12px}
  .q-go{display:none}
  .quick + .trust .wrap{padding-top:6px}
  .trust svg{width:40px;height:40px;padding:9px}

  .figures dt b{font-size:36px}
  .cta .channels{grid-template-columns:1fr 1fr;gap:8px}
  .cta .channels .ch:last-child{grid-column:1/-1}
  .ch{padding:14px;gap:10px}
  .ch b{font-size:13px}
  #services,#certs{padding-top:76px!important}
}
/* a11y theme label: show only the target mode */
.util .a11y .js-theme span.i-sun{display:none}
:root[data-night="1"] .util .a11y .js-theme span.i-sun{display:inline}
:root[data-night="1"] .util .a11y .js-theme span.i-moon{display:none}
/* hero fits one screen above the quick-access bar */
@media (min-width:769px){
  .copy .h{font-size:clamp(36px,4.5vw,66px)}
  .copies{padding-bottom:28px}
  .copy{gap:18px}
  .hero-in{padding-top:140px}
  .hero:has(+ .quick) .hero-in{padding-bottom:84px}
  .quick{margin-top:-52px}
}

/* =========================================================
   LUXE LAYER — the furniture-house finish.
   Serif numerals, catalogue captions, fewer boxes,
   curtain reveals, an entrance moment.
   ========================================================= */
:root{--ff-serif:"IBM Plex Serif",Georgia,"Times New Roman",serif}

/* ---- entrance curtain (home, once per visit; CSS-only so it never blocks) ---- */
.curtain{position:fixed;inset:0;z-index:100;background:var(--ivory);display:grid;place-items:center;pointer-events:none;
  animation:curtain-up 1s cubic-bezier(.77,0,.18,1) 1.5s forwards}
.seen .curtain{display:none}
.c-in{display:grid;justify-items:center;gap:14px;animation:c-fade 1.5s ease both}
.c-in img{width:84px;height:84px}
.c-line{width:0;height:1px;background:var(--oxblood);animation:c-line 1.1s .2s cubic-bezier(.2,.8,.2,1) forwards}
.c-name{font-size:15px;font-weight:var(--w-title);color:var(--ink);letter-spacing:.02em}
.c-est{font-family:var(--ff-serif);font-style:italic;font-size:13px;color:#7E7370;letter-spacing:.06em}
@keyframes curtain-up{to{transform:translateY(-100%);visibility:hidden}}
@keyframes c-fade{0%{opacity:0;transform:translateY(8px)}30%,100%{opacity:1;transform:none}}
@keyframes c-line{to{width:120px}}
@media (prefers-reduced-motion:reduce){.curtain{display:none}}

/* ---- serif numerals & english details ---- */
.eyebrow .no,.counter .num,.figures dt b,.stat b,.sysx .n,.q-no,.step .num,.pill .c,.prod .count,.hero-foot .next .k{font-family:var(--ff-serif);font-style:italic;font-weight:300;letter-spacing:0}
.eyebrow .no{font-size:14px}
.counter .num{font-weight:200}
.figures dt b{font-weight:200;font-size:clamp(40px,3.6vw,54px)}
.stat b{font-weight:200}
.sysx .code,.hero-foot .meta span,.tag,.en-sub,.proj .tag{letter-spacing:.2em}

/* ---- quieter headings: more air, softer weight contrast ---- */
.sec{padding-block:clamp(96px,11vw,168px)}
.sec-head{margin-bottom:clamp(48px,6vw,88px)}
.sec-head h2{font-size:clamp(30px,3.4vw,48px);font-weight:var(--w-title);letter-spacing:-.005em}
.sec-head h2 .lt{font-weight:var(--w-light)}
.sec-head p{line-height:1.95}
.eyebrow{letter-spacing:.04em}

/* ---- buttons: tailored, not loud ---- */
.btn{border-radius:0;padding:16px 30px;letter-spacing:.01em;position:relative;overflow:hidden}
.btn-primary{background:var(--oxblood)}
.btn-primary::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.08);transform:translateX(101%);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
:root[dir="rtl"] .btn-primary::after{transform:translateX(-101%)}
.btn-primary:hover::after{transform:none}
.link-arrow{border-bottom-width:1px;padding-bottom:6px;gap:12px;letter-spacing:.01em}
.link-arrow:hover svg{transform:translateX(-6px)}
:root[dir="ltr"] .link-arrow:hover svg{transform:translateX(6px)}

/* ---- systems: staggered catalogue with captions under the photograph ---- */
.catalog{display:grid;grid-template-columns:repeat(3,1fr);column-gap:clamp(20px,2.6vw,40px);row-gap:clamp(48px,6vw,88px)}
.catalog .sysx:nth-child(3n+2){margin-top:clamp(40px,6vw,96px)}
.sysx{display:grid;gap:22px;align-content:start}
.sys-img{display:block;aspect-ratio:4/5;overflow:hidden;position:relative;background:var(--surface-2)}
.sys-img .ph-img{position:absolute;inset:0;transition:transform 1.8s cubic-bezier(.2,.7,.2,1),filter .6s}
.sys-img::after{content:"";position:absolute;inset:14px;border:1px solid rgba(246,241,235,0);transition:border-color .6s,inset .6s;pointer-events:none}
.sysx:hover .sys-img .ph-img{transform:scale(1.06)}
.sysx:hover .sys-img::after{border-color:rgba(246,241,235,.55);inset:18px}
.js .sysx.rv.pre .sys-img{clip-path:inset(0 0 100% 0)}
.sysx .sys-img{clip-path:inset(0 0 0 0);transition:clip-path 1.3s cubic-bezier(.77,0,.18,1)}
.sys-cap{display:grid;gap:10px}
.sys-meta{display:flex;align-items:baseline;gap:14px;color:var(--muted)}
.sysx .n{font-size:22px;color:var(--accent-text)}
.sysx .code{font-family:var(--ff-mono);font-size:10px;text-transform:uppercase}
.sysx h3{font-size:clamp(19px,1.6vw,23px);font-weight:var(--w-title);line-height:1.45}
.sysx .items{font-size:14px;color:var(--muted);line-height:1.9}
.sysx .link-arrow{justify-self:start;margin-top:6px;font-size:13.5px}

/* ---- about: one tall photograph with an inset frame ---- */
.about-media .main{position:relative}
.about-media .main::after{content:"";position:absolute;inset:16px;border:1px solid rgba(246,241,235,.5);pointer-events:none}
.about-media .sub{border-width:12px}
.about-body{gap:24px}
.about-body p{line-height:2}

/* ---- quick access: typographic, no bubbles ---- */
.quick-grid{counter-reset:q}
.q-card{grid-template-columns:auto 1fr auto;padding:26px 24px;counter-increment:q}
.q-ic{background:none!important;width:auto;height:auto;border-radius:0;color:var(--accent-text)}
.q-card:hover .q-ic{color:var(--accent-text)}
.q-ic svg{width:26px;height:26px;stroke-width:1}
.q-tx b{font-size:15.5px}
.q-card::before{content:counter(q,decimal-leading-zero);position:absolute;top:12px;inset-inline-end:16px;font-family:var(--ff-serif);font-style:italic;font-size:12px;color:var(--muted)}

/* ---- credentials: seals on a single quiet line ---- */
.trust svg{border-color:var(--rule);padding:12px;stroke-width:1}
.trust b{font-weight:var(--w-title)}

/* ---- services: an index, set like a catalogue contents page ---- */
.svc{padding-block:26px}
.svc-n{font-family:var(--ff-serif);font-style:italic;font-size:16px;color:var(--accent-text)}
.svc-title{font-weight:var(--w-title)}
.svc-photo::after{content:"";position:absolute;inset:16px;border:1px solid rgba(246,241,235,.45);pointer-events:none;z-index:1}
.svc-photo .cap{z-index:2}
.wa-link{border-radius:0}

/* ---- products: catalogue items, no boxes ---- */
.prod{background:none;border:0}
.prod:hover{transform:none}
.prod .pic{aspect-ratio:4/3.2}
.prod .pic::after{content:"";position:absolute;inset:14px;border:1px solid rgba(246,241,235,0);transition:border-color .6s;pointer-events:none}
.prod:hover .pic::after{border-color:rgba(246,241,235,.5)}
.prod .body{padding:22px 0 0;gap:10px}
.prod h3{font-size:clamp(19px,1.6vw,22px)}
.prod ul:not(.full){display:block;color:var(--muted);font-size:14px;line-height:1.9}
.prod ul:not(.full) li{display:inline}
.prod ul:not(.full) li::before{display:none}
.prod ul:not(.full) li+li::before{content:" · ";display:inline;background:none;width:auto;height:auto;color:var(--accent-text)}
.prod .p-foot{padding:18px 0 0;border-top:0;justify-content:flex-start;gap:26px}
.prod .p-foot a{border-bottom:1px solid currentColor;padding-bottom:4px}
.prod .count{background:var(--bg);color:var(--text);backdrop-filter:none;font-size:13px}
.products{background:var(--bg);border:0}
.prod-grid{column-gap:clamp(20px,2.6vw,40px);row-gap:clamp(48px,5vw,72px)}

/* ---- projects & blog: captions breathe ---- */
.proj{gap:18px}
.proj .ph::after{content:"";position:absolute;inset:14px;border:1px solid rgba(246,241,235,.25);pointer-events:none}
.post-card{background:none;border:0}
.post-card:hover{transform:none}
.pc-body{padding:22px 0 0}
.pc-img .tag{background:var(--bg);color:var(--text)}

/* ---- process: serif numerals in hairline rings ---- */
.step .num{font-size:18px;width:58px;height:58px;background:var(--bg)}

/* ---- certificates: gallery frames ---- */
.cert .frame-c{box-shadow:0 1px 0 var(--rule),0 30px 60px -40px rgba(27,20,22,.35)}

@media (max-width:1150px){.catalog{grid-template-columns:1fr 1fr}.catalog .sysx:nth-child(3n+2){margin-top:0}.catalog .sysx:nth-child(even){margin-top:clamp(40px,6vw,80px)}}
@media (max-width:768px){
  .sec{padding-block:80px}
  .catalog .sysx:nth-child(n){margin-top:0}
  .sysx{gap:16px}
  .sys-img{aspect-ratio:4/5}
  .sysx .items{font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .prod .body{padding-top:16px}
  .prod ul:not(.full) li{display:inline!important}
  .q-card::before{top:10px;inset-inline-end:12px}
  .figures dt b{font-size:40px}
  .btn{padding:14px 22px}
}

/* =========================================================
   EDITORIAL LAYER — the section name is the headline.
   One ivory canvas, generous air, one hairline under each head.
   ========================================================= */
.sec{padding-block:clamp(110px,12vw,190px)}
.sec + .sec{padding-top:clamp(40px,5vw,80px)}
#services,#certs{background:none;border:0;padding-top:clamp(40px,5vw,80px)!important}

.sec-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,96px);align-items:end;
  margin-bottom:clamp(52px,6vw,96px);padding-bottom:clamp(28px,3vw,44px);border-bottom:1px solid var(--rule)}
.sec-head.stack{grid-template-columns:1fr;gap:20px;border-bottom:0;padding-bottom:0;margin-bottom:34px}
.sh-main{display:flex;align-items:flex-start;gap:clamp(12px,1.6vw,22px)}
.sh-main .no{font-family:var(--ff-serif);font-style:italic;font-weight:300;font-size:clamp(15px,1.2vw,19px);color:var(--accent-text);padding-top:.7em;flex:none}
.sec-head .sh-title{font-size:clamp(46px,6.6vw,100px);font-weight:var(--w-title);line-height:1.02;letter-spacing:-.012em;margin:0;color:inherit}
.sh-side{display:grid;gap:14px;justify-items:start;padding-bottom:.5em}
.sec-head .sh-sub{font-size:clamp(18px,1.55vw,22px);font-weight:var(--w-body);line-height:1.65;color:var(--text);max-width:40ch}
.sec-head .sh-text{font-size:15.5px;color:var(--muted);line-height:1.95;max-width:54ch}
.sh-side .link-arrow{margin-top:6px}
.sh-side .rail-ctrl{margin-top:4px}

/* dark and photo contexts */
.watch .sec-head .sh-sub,.cta .sec-head .sh-sub,.stats-band .sec-head .sh-sub{color:var(--on-photo)}
.watch .sec-head .sh-text{color:#A1958F}
.cta .sec-head .sh-text,.stats-band .sec-head .sh-text{color:var(--on-photo-muted)}
.watch .sh-main .no,.cta .sh-main .no,.stats-band .sh-main .no{color:#F0B8BF}
.watch .sec-head .sh-title{font-size:clamp(40px,5vw,76px)}
.cta .sec-head .sh-title{font-size:clamp(44px,6vw,92px)}

/* about: calm two columns under the head */
.about-grid{grid-template-columns:1.05fr .95fr;gap:clamp(36px,6vw,110px);align-items:start}
.about-media .main{aspect-ratio:4/4.6}
.about-body{gap:30px;padding-top:6px}
.about-body .lede{font-size:clamp(18px,1.5vw,21px);line-height:1.95;color:var(--text);font-weight:var(--w-light)}
.about-body .link-arrow{justify-self:start}

/* services on home: a clean index beside the photograph */
.svc-list{border-top:0;margin-top:0}
.svc:first-child{border-top:1px solid var(--rule)}

/* blog / related heads keep the same system */
.related .sec-head,.blog-home .sec-head{margin-bottom:56px}

@media (max-width:960px){
  .sec-head{grid-template-columns:1fr;gap:18px;align-items:start}
  .about-grid{grid-template-columns:1fr}
}
@media (max-width:768px){
  .sec{padding-block:88px}
  .sec + .sec{padding-top:24px}
  #services,#certs{padding-top:24px!important}
  .sec-head{margin-bottom:40px;padding-bottom:24px}
  .sec-head .sh-title{font-size:clamp(40px,11vw,52px)}
  .watch .sec-head .sh-title{font-size:clamp(36px,10vw,46px)}
  .cta .sec-head .sh-title{font-size:clamp(40px,11vw,52px)}
  .sh-main .no{padding-top:.5em;font-size:14px}
  .sec-head .sh-sub{font-size:17px}
  .sec-head .sh-text{font-size:14.5px}
  .about-media .main{aspect-ratio:4/3.6}
  .about-body .lede{font-size:17px}
}
/* quiet per-row actions */
.wa-link{border:0;padding:8px 0;color:var(--muted);gap:8px;background:none!important}
.svc:hover .wa-link,.svc.hl .wa-link,.wa-link:hover{color:var(--accent-text)}
.svc:hover,.svc.hl{background:none}
.svc .svc-title a{transition:color .3s}
.svc.hl .svc-title a{color:var(--accent-text)}
@media (max-width:768px){.wa-link{width:auto;height:auto;border:0;border-radius:0;padding:8px 0}}
/* =========================================================
   SECTION SPACING — one generous, equal rhythm between sections.
   (Replaces the tighter ".sec + .sec" rule above.)
   ========================================================= */
.sec,.sec + .sec,#services,#certs{padding-block:clamp(130px,13vw,210px)!important}
.is-home main > .sec:first-of-type{padding-top:clamp(120px,12vw,180px)!important}
.sec-head{margin-bottom:clamp(64px,7vw,110px)}
@media (max-width:768px){
  .sec,.sec + .sec,#services,#certs{padding-block:110px!important}
  .sec-head{margin-bottom:48px}
}

/* =========================================================
   ARRANGEMENT — about as one block, services grid,
   project tiles, monitoring that follows day/night.
   ========================================================= */

/* about: the title lives beside the photograph, not above it */
.about-body .sec-head{margin-bottom:4px}
.about-body .sec-head .sh-title{font-size:clamp(44px,5.4vw,84px)}
.about-grid{align-items:center}

/* services: a calm grid of tiles */
.svc-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule);border-inline-start:1px solid var(--rule)}
.svc-tile{border-bottom:1px solid var(--rule);border-inline-end:1px solid var(--rule)}
.svc-tile a{display:flex;flex-direction:column;gap:12px;height:100%;min-height:300px;padding:30px 28px 28px;text-decoration:none;color:var(--text);transition:background .5s,color .5s}
.st-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.st-n{font-family:var(--ff-serif);font-style:italic;font-weight:300;font-size:24px;color:var(--accent-text);transition:color .5s}
.st-type{font-size:12px;color:var(--muted);transition:color .5s}
.svc-tile h3{margin-top:auto;font-size:clamp(17px,1.35vw,19px);font-weight:var(--w-title);line-height:1.5}
.svc-tile p{font-size:13.5px;color:var(--muted);line-height:1.8;transition:color .5s}
.st-go{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:var(--w-ui);color:var(--accent-text);opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s,color .5s}
.st-go svg{width:15px;height:15px}
:root[dir="rtl"] .st-go svg{transform:scaleX(-1)}
.svc-tile a:hover,.svc-tile a:focus-visible{background:var(--oxblood);color:#FBF6F2}
.svc-tile a:hover .st-n,.svc-tile a:hover .st-type,.svc-tile a:hover p,.svc-tile a:hover .st-go{color:rgba(251,246,242,.82)}
.svc-tile a:hover .st-go{opacity:1;transform:none;color:#FBF6F2}
.svc-note{margin-top:28px;color:var(--muted);font-size:14.5px}
.js-svc-filters{margin-bottom:34px}

/* projects: small square tiles in an ordered grid */
.proj-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ptile{position:relative;aspect-ratio:1/1;padding:22px;display:flex;flex-direction:column;justify-content:space-between;background:var(--surface);border:1px solid var(--rule);overflow:hidden;isolation:isolate;transition:background .5s,color .5s,border-color .5s}
.ptile .ph-img{position:absolute;inset:0;z-index:-2;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.ptile.has-img{color:var(--on-photo);border-color:transparent}
.ptile.has-img::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(11,9,10,.85),rgba(11,9,10,.15) 60%)}
.ptile.has-img:hover .ph-img{transform:scale(1.06)}
.pt-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.pt-n{font-family:var(--ff-serif);font-style:italic;font-weight:300;font-size:20px;color:var(--accent-text);transition:color .5s}
.pt-cat{font-size:12px;color:var(--muted);transition:color .5s}
.pt-name{font-size:clamp(15px,1.25vw,17px);font-weight:var(--w-title);line-height:1.5}
.ptile:not(.has-img):hover{background:var(--oxblood);border-color:var(--oxblood);color:#FBF6F2}
.ptile:hover .pt-n,.ptile:hover .pt-cat,.ptile.has-img .pt-n,.ptile.has-img .pt-cat{color:rgba(251,246,242,.8)}
.js-proj-filters{margin-bottom:34px}

/* monitoring: ivory by day, the control room by night */
.watch{transition:background .8s,color .8s}
.watch:not(.live){background:var(--surface-2);color:var(--text)}
.watch:not(.live)::before{opacity:0}
.watch::before{transition:opacity .8s}
.watch:not(.live) .sec-head .sh-sub{color:var(--text)}
.watch:not(.live) .sec-head .sh-text{color:var(--muted)}
.watch:not(.live) .sh-main .no{color:var(--accent-text)}
.watch:not(.live) .switch{border-color:var(--rule-strong);color:var(--text)}
.watch:not(.live) .switch .track{background:var(--rule-strong)}
.watch:not(.live) .devs{border-color:var(--rule)}
.watch:not(.live) .devs button{border-color:var(--rule);color:var(--muted)}
.watch:not(.live) .devs button[aria-pressed="true"]{color:var(--text)}
.watch:not(.live) .fine{color:var(--muted)}

@media (max-width:1150px){
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc-tile a{min-height:250px}
  .proj-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:768px){
  .svc-tile a{min-height:0;padding:22px 20px;gap:10px}
  .svc-tile h3{margin-top:14px;font-size:16px}
  .st-go{opacity:1;transform:none}
  .proj-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ptile{padding:16px}
  .pt-name{font-size:14.5px}
  .pt-n{font-size:17px}
  .about-body .sec-head .sh-title{font-size:clamp(40px,11vw,52px)}
  .watch:not(.live) .devs button,.watch:not(.live) .devs button[aria-pressed="true"]{border-color:var(--rule)}
}
@media (max-width:480px){
  .svc-grid{grid-template-columns:1fr}
}
.about-body .sec-head .sh-title{color:var(--text)}
/* project tiles: smaller squares, six to a row */
.proj-tiles{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.ptile{padding:16px 16px 18px}
.pt-n{font-size:17px}
.pt-cat{font-size:11px}
.pt-name{font-size:14px;line-height:1.55}
@media (max-width:1150px){.proj-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:960px){.proj-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:768px){.proj-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pt-name{font-size:13.5px}}

/* =========================================================
   SOFT-FRAME LAYER — rounded, framed, calm.
   Section titles in rounded frames, glass panels over photos,
   black gradients, rolling-digit counters, grouped services.
   ========================================================= */
:root{--r-lg:26px;--r-md:18px;--r-sm:12px}

/* ---- hero: no zoom on entry, a deep black gradient, copy in a glass panel ---- */
.slide.is-on .frame,.banner-img{animation:none!important;transform:none!important}
.shade,:root[dir="ltr"] .shade{background:
  linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.18) 26%,rgba(0,0,0,.28) 55%,rgba(0,0,0,.9) 100%),
  radial-gradient(120% 90% at 50% 40%,rgba(0,0,0,0) 30%,rgba(0,0,0,.45) 100%)}
.copies{background:rgba(8,6,7,.38);backdrop-filter:blur(16px) saturate(115%);-webkit-backdrop-filter:blur(16px) saturate(115%);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);padding:clamp(26px,3vw,44px) clamp(24px,3.2vw,48px);max-width:780px;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.6);margin-bottom:26px}
.copy .eyebrow{display:inline-flex;justify-self:start;padding:7px 16px 7px 14px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(255,255,255,.06);font-size:12.5px;font-weight:var(--w-ui);letter-spacing:.02em;color:#F4D6DA}
.copy .eyebrow::before{width:7px;height:7px;border-radius:50%;background:var(--ember);box-shadow:0 0 10px var(--ember)}
.copy .h{font-size:clamp(34px,4vw,58px)}
.copy .h .ln:first-child>span{font-weight:var(--w-title)}
.copy .ln.lt>span{font-weight:var(--w-light)}
.copy .lead{font-weight:var(--w-body);color:rgba(246,241,235,.8)}
.hero-cta{margin-top:4px}
.hero-foot .meta div{padding:8px 14px;border:1px solid rgba(255,255,255,.16);border-radius:var(--r-sm);background:rgba(0,0,0,.25);backdrop-filter:blur(8px)}
.next .th{border-radius:var(--r-sm)}
.arrows .icon-btn{border-radius:50%}

/* ---- buttons: soft pills ---- */
.btn{border-radius:999px;padding:15px 30px}
.btn-primary::after{border-radius:999px}

/* ---- section titles in rounded frames ---- */
.sec-head{align-items:center}
.sh-main{display:inline-flex;align-items:center;justify-self:start;gap:16px;padding:14px 30px 16px 16px;
  border:1px solid var(--rule-strong);border-radius:var(--r-lg);background:var(--surface);box-shadow:0 18px 40px -30px rgba(27,20,22,.35)}
:root[dir="ltr"] .sh-main{padding:14px 16px 16px 30px}
.sh-main .no{display:grid;place-items:center;width:44px;height:44px;flex:none;padding:0;border-radius:50%;border:1px solid var(--rule-strong);background:var(--bg);font-size:15px}
.sec-head .sh-title,.about-body .sec-head .sh-title{font-size:clamp(34px,3.8vw,58px);line-height:1.15}
.watch.live .sh-main,.cta .sh-main,.stats-band .sh-main{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16);box-shadow:none}
.watch.live .sh-main .no,.cta .sh-main .no,.stats-band .sh-main .no{background:transparent;border-color:rgba(255,255,255,.22)}
.watch:not(.live) .sh-main{background:var(--bg)}

/* ---- photographs & cards share the same soft corners ---- */
.about-media .main,.sys-img,.svc-photo,.prod .pic,.pc-img,.cert .frame-c,.banner-img{border-radius:var(--r-lg)}
.about-media .main::after,.sys-img::after,.prod .pic::after{border-radius:calc(var(--r-lg) - 8px)}
.about-media .badge{border-radius:var(--r-md);padding:16px 20px;background:rgba(107,15,26,.92);backdrop-filter:blur(6px)}
.ptile{border-radius:var(--r-md)}
.q-card,.c-card,.c-form,.side-cta{border-radius:var(--r-md)}

/* ---- services: two tidy groups of equal cards ---- */
.svc-group+.svc-group{margin-top:clamp(40px,5vw,64px)}
.svc-group-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.sg-label{display:inline-flex;align-items:center;gap:12px;padding:9px 12px 9px 18px;border:1px solid var(--rule-strong);border-radius:999px;font-size:14.5px;font-weight:var(--w-title);background:var(--surface)}
:root[dir="rtl"] .sg-label{padding:9px 18px 9px 12px}
.sg-count{display:grid;place-items:center;min-width:30px;height:30px;padding-inline:6px;border-radius:999px;background:var(--oxblood);color:#FBF6F2;font-family:var(--ff-serif);font-style:italic;font-size:13px;font-weight:300}
.sg-hint{font-size:13.5px;color:var(--muted)}
.svc-grid{border:0!important;gap:14px;grid-template-columns:repeat(4,minmax(0,1fr))}
.svc-tile{border:0!important}
.svc-tile a{min-height:0;height:100%;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);padding:24px 24px 22px;gap:10px;
  display:grid;grid-template-rows:auto auto 1fr auto;align-content:start}
.svc-tile .st-n{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--rule-strong);font-size:15px}
.svc-tile h3{margin-top:10px;min-height:3em;font-size:clamp(16px,1.25vw,18px);line-height:1.5}
.svc-tile p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.st-go{opacity:1;transform:none;margin-top:6px}
.svc-tile a:hover{border-color:var(--oxblood)}
.svc-tile a:hover .st-n{border-color:rgba(251,246,242,.4)}

/* ---- odometer digits ---- */
.odo{display:inline-flex;direction:ltr;vertical-align:top}
.odo-win{display:inline-block;height:1em;overflow:hidden;line-height:1}
.odo-col{display:flex;flex-direction:column;transition:transform 2.4s cubic-bezier(.16,.84,.24,1)}
.odo-col span{display:block;height:1em;line-height:1}
.odo-sep{display:inline-block}
.figures dt b{display:inline-flex;align-items:flex-start;line-height:1}
.figures>div{padding-block:20px 18px}

/* ---- inner page banners: title in a glass frame ---- */
.banner-in{justify-items:center}
.banner-in h1,.banner-in p,.banner-in .crumbs{position:relative}
.banner-in{row-gap:14px}
.banner .banner-in>h1{padding:18px 34px 22px;border:1px solid rgba(255,255,255,.16);border-radius:var(--r-lg);background:rgba(8,6,7,.36);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.banner .crumbs{padding:7px 16px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(0,0,0,.25)}
.banner-shade{background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.2) 40%,rgba(0,0,0,.85) 100%)}

@media (max-width:1150px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:768px){
  .copies{padding:22px 20px;border-radius:var(--r-md);margin-bottom:18px}
  .copy .h{font-size:clamp(28px,7.6vw,36px)}
  .sh-main{padding:10px 20px 12px 10px;gap:12px;border-radius:var(--r-md)}
  :root[dir="ltr"] .sh-main{padding:10px 10px 12px 20px}
  .sh-main .no{width:36px;height:36px;font-size:13px}
  .sec-head .sh-title,.about-body .sec-head .sh-title{font-size:clamp(28px,8vw,36px)}
  .svc-tile a{padding:18px}
  .svc-tile h3{min-height:0}
  .banner .banner-in>h1{padding:14px 22px 16px;border-radius:var(--r-md)}
}
@media (max-width:480px){.svc-grid{grid-template-columns:1fr}}
.copies{align-self:end}

/* =========================================================
   AWARDS PAGE — shields on a lit stage, letters in gallery mats.
   ========================================================= */
.awards{padding-top:clamp(64px,7vw,110px)!important}
.aw-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:0 0 clamp(56px,7vw,96px);border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.aw-stats>div{padding:26px 28px;display:grid;gap:6px}
.aw-stats>div+div{border-inline-start:1px solid var(--rule)}
.aw-stats b{font-family:var(--ff-serif);font-style:italic;font-weight:200;font-size:clamp(44px,5vw,64px);line-height:1;display:inline-flex;color:var(--text)}
.aw-stats dd{margin:0;font-size:14px;color:var(--muted)}

.aw-shields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,32px);margin-bottom:clamp(80px,9vw,140px)}
.aw-shield{margin:0;display:grid;gap:22px}
.aw-shield .stage{position:relative;display:grid;place-items:center;aspect-ratio:1/1;border-radius:var(--r-lg);overflow:hidden;isolation:isolate;
  background:radial-gradient(60% 55% at 50% 38%,#3a2a2d 0%,#171213 55%,#0b090a 100%)}
.aw-shield .stage::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(40% 30% at 50% 8%,rgba(255,236,200,.28),transparent 70%)}
.aw-shield .stage::after{content:"";position:absolute;left:18%;right:18%;bottom:9%;height:7%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.65),transparent)}
.aw-shield .stage img{position:absolute;top:12%;left:15%;width:70%;height:73%;max-width:none;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55));transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.aw-shield .stage:hover img{transform:translateY(-8px) scale(1.03)}
.aw-shield figcaption{display:grid;gap:8px;justify-items:start}
.aw-shield h3{font-size:clamp(19px,1.6vw,23px);font-weight:var(--w-title);line-height:1.45}
.aw-shield p{color:var(--muted);font-size:14.5px}
.aw-year{display:inline-block;padding:4px 12px;border-radius:999px;border:1px solid var(--rule-strong);font-family:var(--ff-serif);font-style:italic;font-size:13px;color:var(--accent-text)}

.aw-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:34px;padding-bottom:24px;border-bottom:1px solid var(--rule)}
.aw-title{font-size:clamp(26px,2.6vw,36px);font-weight:var(--w-title)}
.aw-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.6vw,36px) clamp(18px,2.2vw,30px)}
.aw-card{display:grid;gap:18px;align-content:start}
.mat{position:relative;display:grid;place-items:center;aspect-ratio:4/3.1;padding:clamp(14px,1.6vw,22px);border-radius:var(--r-md);background:#fff;
  border:1px solid var(--rule);box-shadow:0 1px 0 rgba(27,20,22,.04),0 26px 50px -34px rgba(27,20,22,.45);transition:transform .5s,box-shadow .5s}
.mat::before{content:"";position:absolute;inset:8px;border:1px solid rgba(27,20,22,.08);border-radius:calc(var(--r-md) - 6px);pointer-events:none}
.mat img{position:absolute;top:7%;left:6%;width:88%;height:86%;object-fit:contain}
.mat:hover{transform:translateY(-5px);box-shadow:0 1px 0 rgba(27,20,22,.04),0 36px 60px -34px rgba(27,20,22,.55)}
.mat .zoom{position:absolute;bottom:14px;inset-inline-end:14px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--oxblood);color:#fff;opacity:0;transform:scale(.8);transition:opacity .35s,transform .35s}
.mat .zoom svg{width:15px;height:15px;transform:rotate(-45deg)}
.mat:hover .zoom{opacity:1;transform:none}
.aw-cap{display:grid;gap:6px}
.aw-meta{display:flex;align-items:center;justify-content:space-between;gap:10px}
.aw-group{font-size:12px;color:var(--muted)}
.aw-card h3{font-size:16px;font-weight:var(--w-title);line-height:1.55}
.aw-card p{font-size:13.5px;color:var(--muted);line-height:1.7}
:root[data-night="1"] .mat{background:#f4f0ea}

@media (max-width:960px){.aw-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:768px){
  .aw-stats{grid-template-columns:1fr 1fr 1fr}
  .aw-stats>div{padding:18px 14px}
  .aw-stats b{font-size:38px}
  .aw-stats dd{font-size:12px}
  .aw-shields{grid-template-columns:1fr}
}
@media (max-width:520px){.aw-grid{grid-template-columns:1fr}}

/* ===== CONTACT LINES ===== */
.foot address .f-line{display:flex;flex-direction:column;gap:2px;margin-top:12px}
.foot address .f-line small{font-size:12.5px;opacity:.6;font-weight:var(--w-ui)}
.c-card b small{display:block;font-size:12.5px;font-weight:var(--w-body);color:var(--muted);margin-top:2px}

.c-card.c-row:hover{transform:none}

.c-card.c-row > span:first-of-type{flex:1 1 auto;min-width:120px}
.c-acts{display:flex;gap:8px;flex-wrap:wrap}
.c-acts a{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--rule);border-radius:999px;font-size:13.5px;font-weight:var(--w-ui);color:inherit;text-decoration:none;transition:background .3s,border-color .3s,color .3s}
.c-acts a:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.c-acts a svg,.c-card .c-acts svg{width:15px;height:15px;color:currentColor}
.foot .f-nums{display:inline-flex;align-items:center;gap:10px}
.foot .f-wa{display:inline-flex;opacity:.7;transition:opacity .3s}
.foot .f-wa:hover{opacity:1}
.foot .f-wa svg{width:16px;height:16px}
@media (max-width:560px){.c-card.c-row{flex-wrap:wrap}.c-acts{width:100%;padding-inline-start:42px}}

/* ===== CONTACT MAP ===== */
.c-map{margin:clamp(40px,5vw,72px) 0 0;border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.c-map iframe{display:block;width:100%;height:clamp(300px,38vw,460px);border:0;filter:grayscale(.35) contrast(1.02)}
:root[data-theme="dark"] .c-map iframe{filter:grayscale(.6) invert(.9) hue-rotate(180deg)}
.c-map figcaption{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 22px}
.c-map figcaption span{display:inline-flex;align-items:center;gap:10px;color:var(--muted)}
.c-map figcaption svg{width:20px;height:20px;color:var(--accent-text)}

/* ===== COMPLAINTS PAGE ===== */
.care-steps{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:0;counter-reset:cs;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface)}
.care-steps li{counter-increment:cs;display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:4px;padding:20px 22px;border-top:1px solid var(--rule)}
.care-steps li:first-child{border-top:0}
.care-steps li::before{content:counter(cs,decimal-leading-zero);grid-row:span 2;font-family:var(--ff-serif);font-style:italic;font-weight:var(--w-num);font-size:26px;line-height:1;color:var(--accent-text)}
.care-steps b{font-weight:var(--w-title)}
.care-steps span{color:var(--muted);font-size:14px}

/* ===== CERTS PREVIEW (about) ===== */
.certs-aw{grid-template-columns:repeat(4,minmax(0,1fr))}
.mat.dark{background:radial-gradient(60% 55% at 50% 38%,#3a2a2d 0%,#171213 60%,#0b090a 100%);border-color:transparent}
.mat.dark::before{border-color:rgba(255,255,255,.06)}
.mat.dark img{filter:drop-shadow(0 18px 24px rgba(0,0,0,.55))}
:root[data-night="1"] .mat.dark{background:radial-gradient(60% 55% at 50% 38%,#3a2a2d 0%,#171213 60%,#0b090a 100%)}
.certs-more{margin:clamp(32px,4vw,52px) 0 0;display:flex;justify-content:center}
.certs-more .btn svg{width:15px;height:15px}
[dir="rtl"] .certs-more .btn svg{transform:scaleX(-1)}
@media (max-width:960px){.certs-aw{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== CLIENT LOGOS ===== */
.logo-grid .plate .logo-img{max-width:78%;max-height:76px}
.logo-row .plate .logo-img{max-width:170px;max-height:66px}

/* ===== PROJECT LOGOS ===== */
.ptile.has-logo{gap:8px}
.pt-logo{flex:1;min-height:0;display:grid;place-items:center;padding:4px 6px}
.pt-logo img{max-width:82%;max-height:64px;width:auto;height:auto;object-fit:contain;transition:transform .5s}
.ptile.has-logo:hover{background:var(--surface);border-color:var(--accent-text);color:inherit}
.ptile.has-logo:hover .pt-n,.ptile.has-logo:hover .pt-cat{color:var(--muted)}
.ptile.has-logo:hover .pt-logo img{transform:scale(1.06)}
:root[data-night="1"] .pt-logo img{filter:grayscale(1) invert(1) brightness(1.6);opacity:.85}
@media (max-width:768px){.pt-logo img{max-height:48px}}

/* ===== PRODUCT WITHOUT LIST (e.g. CCTV): the photo fills the card height ===== */
.prod.no-list .pic{flex:1 1 auto;aspect-ratio:auto;min-height:260px}
.prod.no-list .pic .ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.prod.no-list .body{flex:0 0 auto}
#cctv-cameras .pic .ph-img{object-position:69% 45%}
#emergency-exits .pic .ph-img{object-position:50% 12%}
#ppe .pic .ph-img{object-position:50% 35%}

/* ===== SISTER COMPANIES (footer) ===== */
.sisters{display:grid;gap:10px;margin-top:28px;max-width:420px}
.sisters-lbl{font-size:12px;letter-spacing:.04em;color:var(--band-muted)}
.sister{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:10px 14px 10px 10px;border:1px solid var(--band-rule);border-radius:var(--r-md);color:inherit;text-decoration:none;transition:border-color .3s,background .3s,transform .3s}
[dir="rtl"] .sister{padding:10px 10px 10px 14px}
.sister:hover{border-color:rgba(251,246,242,.35);background:rgba(251,246,242,.04);transform:translateY(-2px)}
.s-logo{width:88px;height:56px;border-radius:10px;background:#fff;display:grid;place-items:center;padding:6px;overflow:hidden}
.s-logo img{max-width:76px;max-height:44px;width:auto;height:auto;object-fit:contain}
.s-txt{display:grid;gap:3px;min-width:0}
.s-txt b{font-weight:var(--w-title);font-size:14.5px;line-height:1.4}
.s-txt small{font-size:12px;color:var(--band-muted);line-height:1.5}
.s-go{width:30px;height:30px;border-radius:50%;border:1px solid var(--band-rule);display:grid;place-items:center;transition:background .3s,border-color .3s}
.s-go svg{width:13px;height:13px;transform:rotate(-45deg)}
[dir="rtl"] .s-go svg{transform:rotate(-135deg)}
.sister:hover .s-go{background:var(--oxblood);border-color:var(--oxblood)}
.util .u-social{display:inline-grid;place-items:center;opacity:.85;transition:opacity .3s}
.util .u-social:hover{opacity:1}
.util .u-social svg{width:15px;height:15px}