/* ==========================================================================

   أصول الرواد المتكاملة — نظام التصميم (الإصدار ٢)

   RTL-first · dark technical identity · no build step

   ========================================================================== */



/* ------------------------------ 1. Tokens ------------------------------- */

:root {

  /* Brand palette — taken from the USUL logo */

  --green-200: #DCEFC8;

  --green-300: #B9E08A;

  --green-400: #8CC63F;

  --green-500: #5CA024;

  --green-600: #36761A;

  --orange-400: #FFC24D;

  --orange-500: #F0A21B;



  /* Deep forest surfaces */

  --night-950: #071310;

  --night-900: #0B1D18;

  --night-850: #0F241E;

  --night-800: #143028;

  --night-700: #1B3F34;

  --night-600: #245143;



  /* Day surfaces */

  --paper: #F7F9F4;

  --paper-2: #EDF2E7;

  --paper-3: #E2EADC;

  --white: #FFFFFF;



  /* Text */

  --ink: #16211C;

  --ink-soft: #35443C;

  --ink-muted: #61736A;

  --on-dark: #EEF5EC;

  --on-dark-soft: rgba(238, 245, 236, .72);

  --on-dark-muted: rgba(238, 245, 236, .48);



  /* Lines */

  --line: rgba(22, 33, 28, .13);

  --line-soft: rgba(22, 33, 28, .07);

  --line-dark: rgba(255, 255, 255, .12);

  --line-dark-soft: rgba(255, 255, 255, .07);



  /* Type */

  --font-display: "Readex Pro", "IBM Plex Sans Arabic", system-ui, sans-serif;

  --font-body: "IBM Plex Sans Arabic", "Readex Pro", system-ui, sans-serif;

  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;



  /* Shape */

  --r-xs: 8px;

  --r-sm: 12px;

  --r-md: 18px;

  --r-lg: 26px;

  --r-xl: 34px;

  --r-pill: 999px;



  /* Depth */

  --shadow-1: 0 1px 2px rgba(4, 8, 15, .06);

  --shadow-2: 0 10px 30px rgba(4, 8, 15, .08);

  --shadow-3: 0 26px 70px rgba(4, 8, 15, .16);

  --glow-green: 0 16px 36px rgba(92, 160, 36, .32);



  /* Layout */

  --wrap: 1220px;

  --gutter: clamp(18px, 4.6vw, 40px);

  --section-y: clamp(60px, 8vw, 108px);

  --header-h: 84px;



  /* Motion */

  --ease: cubic-bezier(.2, .75, .25, 1);

}



/* ------------------------------ 2. Reset -------------------------------- */

*, *::before, *::after { box-sizing: border-box; }



html {

  -webkit-text-size-adjust: 100%;

  scroll-behavior: smooth;

  scroll-padding-block-start: calc(var(--header-h) + 20px);

}



body {

  margin: 0;

  background: var(--paper);

  color: var(--ink);

  font-family: var(--font-body);

  font-size: clamp(15.5px, 1vw, 17px);

  line-height: 1.8;

  -webkit-font-smoothing: antialiased;

  text-rendering: optimizeLegibility;

  overflow-x: hidden;

}

body.is-locked { overflow: hidden; }



img, svg, video { max-width: 100%; display: block; height: auto; }



h1, h2, h3, h4, h5 {

  font-family: var(--font-display);

  font-weight: 600;

  line-height: 1.25;

  letter-spacing: -.01em;

  margin: 0 0 .5em;

  color: var(--ink);

  text-wrap: balance;

}

h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.16; font-weight: 600; }

h2 { font-size: clamp(1.65rem, 3.1vw, 2.6rem); font-weight: 600; }

h3 { font-size: clamp(1.15rem, 1.7vw, 1.42rem); }

h4 { font-size: 1.02rem; }



p { margin: 0 0 1.05em; }

p:last-child { margin-bottom: 0; }



a { color: var(--ink); text-decoration: none; transition: color .2s var(--ease); }

a:hover { color: var(--green-600); }



::selection { background: var(--green-300); color: var(--night-900); }



:focus-visible {

  outline: 2px solid var(--green-500);

  outline-offset: 3px;

  border-radius: 6px;

}



.num, .stat__value, time { font-variant-numeric: tabular-nums; }



/* ---------------------------- 3. Primitives ----------------------------- */

.wrap {

  width: 100%;

  max-width: var(--wrap);

  margin-inline: auto;

  padding-inline: var(--gutter);

}



.section { padding-block: var(--section-y); position: relative; }

.section--tight { padding-block: clamp(40px, 5vw, 68px); }

.section--paper { background: var(--paper); }

.section--paper-alt { background: var(--paper-2); }

.section--white { background: var(--white); }

.section--night {

  background:

    radial-gradient(900px 480px at 88% -10%, rgba(92, 160, 36, .14), transparent 60%),

    radial-gradient(700px 420px at 4% 108%, rgba(216, 250, 114, .07), transparent 60%),

    var(--night-900);

  color: var(--on-dark-soft);

}

.section--night h1, .section--night h2, .section--night h3, .section--night h4 { color: #fff; }

.section--night a { color: var(--on-dark); }

.section--night a:hover { color: var(--green-300); }



.kicker {

  display: inline-flex;

  align-items: center;

  gap: .55em;

  margin-bottom: 1em;

  font-family: var(--font-mono);

  font-size: .72rem;

  font-weight: 500;

  letter-spacing: .16em;

  text-transform: uppercase;

  color: var(--green-600);

}

.kicker::before {

  content: "";

  width: 22px;

  height: 1px;

  background: currentColor;

  opacity: .6;

}

.section--night .kicker { color: var(--green-400); }



.lede {

  font-size: clamp(1rem, 1.3vw, 1.14rem);

  line-height: 1.85;

  color: var(--ink-muted);

  max-width: 62ch;

}

.section--night .lede { color: var(--on-dark-soft); }



.section-head { margin-bottom: clamp(30px, 4vw, 54px); max-width: 760px; }

.section-head--center { margin-inline: auto; text-align: center; }

.section-head--center .kicker { justify-content: center; }

.section-head h2 { margin-bottom: .45em; }



.grid { display: grid; gap: clamp(14px, 1.6vw, 20px); }

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }



.mt-6 { margin-top: 2.2rem; }

.center { text-align: center; }



/* ------------------------------ 4. Buttons ------------------------------ */

.btn {

  --bg: var(--night-900);

  --fg: #fff;

  --bd: transparent;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: .55em;

  padding: .92em 1.5em;

  border-radius: var(--r-pill);

  border: 1px solid var(--bd);

  background: var(--bg);

  color: var(--fg);

  font-family: var(--font-body);

  font-size: .95rem;

  font-weight: 500;

  line-height: 1.2;

  cursor: pointer;

  white-space: nowrap;

  transition: transform .25s var(--ease), background-color .25s var(--ease),

              box-shadow .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);

}

.btn svg { width: 1.05em; height: 1.05em; flex: none; }

.btn:hover { transform: translateY(-2px); color: var(--fg); }

.btn:active { transform: translateY(0); }



.btn--accent {

  --bg: linear-gradient(115deg, var(--green-300), var(--green-500));

  --fg: #08210A;

  box-shadow: var(--glow-green);

  font-weight: 600;

}

.btn--accent:hover { box-shadow: 0 22px 46px rgba(92, 160, 36, .38); }



.btn--solid { --bg: var(--night-900); --fg: #fff; }

.btn--solid:hover { --bg: var(--night-700); }



.btn--outline { --bg: transparent; --fg: var(--ink); --bd: var(--line); }

.btn--outline:hover { --bg: #fff; --bd: var(--line); box-shadow: var(--shadow-1); }



.btn--outline-light { --bg: rgba(255, 255, 255, .04); --fg: #fff; --bd: var(--line-dark); }

.btn--outline-light:hover { --bg: rgba(255, 255, 255, .09); --bd: rgba(255, 255, 255, .26); }



.btn--lg { padding: 1.05em 1.8em; font-size: 1rem; }

.btn--sm { padding: .62em 1.05em; font-size: .85rem; }

.btn--block { width: 100%; }



.link-arrow {

  display: inline-flex;

  align-items: center;

  gap: .4em;

  font-size: .9rem;

  font-weight: 500;

  color: var(--green-600);

}

.link-arrow svg { width: .95em; height: .95em; transition: transform .25s var(--ease); }

.link-arrow:hover svg { transform: translateX(-4px); }

.section--night .link-arrow { color: var(--green-300); }



/* ------------------------------ 5. Header ------------------------------- */

.site-header {

  position: fixed;

  inset-block-start: 0;

  inset-inline: 0;

  z-index: 90;

  padding-block: 14px;

  transition: padding .3s var(--ease);

}

.site-header.is-scrolled { padding-block: 8px; }



.header-bar {

  display: flex;

  align-items: center;

  gap: 8px;

  height: 66px;

  padding-inline: 22px 10px;

  border-radius: var(--r-pill);

  border: 1px solid var(--line);

  background: rgba(255, 255, 255, .84);

  box-shadow: 0 10px 30px rgba(22, 33, 28, .07);

  backdrop-filter: blur(18px) saturate(160%);

  -webkit-backdrop-filter: blur(18px) saturate(160%);

  transition: background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);

}

.site-header.is-scrolled .header-bar {

  background: #fff;

  border-color: var(--line);

  box-shadow: 0 12px 34px rgba(22, 33, 28, .12);

}

.header-bar .brand { padding-inline-start: 6px; }



.brand { display: inline-flex; align-items: center; gap: .7em; flex: none; color: var(--ink); }

.brand:hover { color: var(--ink); }

.brand__mark {

  height: 36px;

  width: 82px;

  object-fit: contain;

  object-position: right center;

  flex: none;

  transition: transform .45s var(--ease);

}

.brand:hover .brand__mark { transform: translateY(-1px) scale(1.02); }

.brand__name {

  display: block;

  font-family: var(--font-display);

  font-weight: 600;

  font-size: 1rem;

  line-height: 1.15;

  color: var(--ink);

  white-space: nowrap;

}

.brand__sub {

  display: block;

  font-family: var(--font-mono);

  font-size: .55rem;

  letter-spacing: .18em;

  color: var(--ink-muted);

  direction: ltr;

  text-align: right;

  margin-block-start: .35em;

  white-space: nowrap;

}



.nav { margin-inline-start: auto; }

.nav ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }

.nav li { margin: 0; }

.nav a {

  display: inline-block;

  white-space: nowrap;

  padding: .46em .64em;

  border-radius: var(--r-pill);

  font-size: .86rem;

  font-weight: 400;

  color: var(--ink-soft);

  transition: color .2s var(--ease), background-color .2s var(--ease);

}

.nav a:hover { color: var(--ink); background: rgba(22, 33, 28, .05); }

.nav a.is-active { color: var(--night-900); background: var(--paper-2); font-weight: 500; }



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



.icon-btn {

  width: 44px; height: 44px;

  display: grid; place-items: center;

  border-radius: 50%;

  border: 1px solid var(--line);

  background: #fff;

  color: var(--ink);

  cursor: pointer;

  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);

}

.icon-btn:hover { background: var(--paper-2); border-color: var(--green-400); color: var(--green-600); }

.icon-btn svg { width: 18px; height: 18px; }



.burger { display: none; }

.burger span {

  display: block;

  width: 18px; height: 1.5px;

  margin: 3px auto;

  border-radius: 2px;

  background: currentColor;

  transition: transform .3s var(--ease), opacity .2s var(--ease);

}

.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }

.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }

.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }



/* Mobile drawer */

.drawer {

  position: fixed;

  inset: 0;

  z-index: 85;

  padding: calc(var(--header-h) + 10px) var(--gutter) 32px;

  background:

    radial-gradient(600px 380px at 80% 0%, rgba(92, 160, 36, .16), transparent 60%),

    var(--night-950);

  color: var(--on-dark);

  display: flex;

  flex-direction: column;

  opacity: 0;

  visibility: hidden;

  transform: translateY(-10px);

  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;

  overflow-y: auto;

}

.drawer.is-open { opacity: 1; visibility: visible; transform: none; }

.drawer a.d-link {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: .72em 0;

  border-block-end: 1px solid var(--line-dark-soft);

  font-family: var(--font-display);

  font-size: 1.42rem;

  font-weight: 500;

  color: #fff;

}

.drawer a.d-link small { font-family: var(--font-mono); font-size: .68rem; color: var(--green-400); }

.drawer__foot { margin-block-start: auto; padding-block-start: 28px; display: grid; gap: 6px; font-size: .9rem; }

.drawer__foot span { color: var(--on-dark-muted); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }

.drawer__foot a { color: var(--green-300); direction: ltr; display: inline-block; }



/* ------------------------------- 6. Hero -------------------------------- */

.hero {

  position: relative;

  overflow: hidden;

  isolation: isolate;

  padding-block: calc(var(--header-h) + clamp(46px, 7vw, 92px)) clamp(52px, 7vw, 88px);

  background: var(--night-950);

  color: var(--on-dark-soft);

}

.hero::before {

  content: "";

  position: absolute;

  inset: -20% -10% auto -10%;

  height: 120%;

  z-index: -2;

  background:

    radial-gradient(720px 480px at 78% 8%, rgba(92, 160, 36, .22), transparent 62%),

    radial-gradient(560px 420px at 6% 34%, rgba(240, 162, 27, .10), transparent 60%),

    radial-gradient(900px 620px at 50% 110%, rgba(11, 21, 36, .9), transparent 70%);

}

.hero::after {

  content: "";

  position: absolute;

  inset: 0;

  z-index: -1;

  background-image:

    linear-gradient(to right, rgba(255, 255, 255, .035) 1px, transparent 1px),

    linear-gradient(to bottom, rgba(255, 255, 255, .035) 1px, transparent 1px);

  background-size: 64px 64px;

  mask-image: radial-gradient(ellipse 80% 62% at 50% 34%, #000 30%, transparent 76%);

  -webkit-mask-image: radial-gradient(ellipse 80% 62% at 50% 34%, #000 30%, transparent 76%);

}



.hero__grid {

  display: grid;

  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);

  gap: clamp(30px, 5vw, 64px);

  align-items: center;

}

.hero h1 { color: #fff; margin-block-end: .42em; }

.hero h1 em {

  font-style: normal;

  background: linear-gradient(100deg, var(--green-300), var(--orange-400));

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

  white-space: nowrap;

}

.hero .lede { color: var(--on-dark-soft); max-width: 54ch; margin-block-end: 1.9em; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-block-end: clamp(26px, 3vw, 38px); }



.hero__meta {

  display: flex;

  flex-wrap: wrap;

  gap: 8px 10px;

  padding-block-start: 22px;

  border-block-start: 1px solid var(--line-dark-soft);

  list-style: none;

  margin: 0;

  padding-inline: 0;

}

.hero__meta li {

  margin: 0;

  display: inline-flex;

  align-items: center;

  gap: .45em;

  padding: .35em .8em;

  border-radius: var(--r-pill);

  border: 1px solid var(--line-dark-soft);

  background: rgba(255, 255, 255, .03);

  font-size: .78rem;

  color: var(--on-dark-soft);

}

.hero__meta svg { width: 13px; height: 13px; color: var(--green-400); flex: none; }



/* Hero panel: pressure gauge + product chips */

.panel {

  position: relative;

  border-radius: var(--r-xl);

  padding: clamp(18px, 2.4vw, 26px);

  background: linear-gradient(155deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02) 55%, rgba(92, 160, 36, .06));

  border: 1px solid var(--line-dark);

  box-shadow: 0 30px 80px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

}

.panel__head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  padding-block-end: 14px;

  border-block-end: 1px solid var(--line-dark-soft);

  margin-block-end: 14px;

}

.panel__title { font-size: .84rem; color: #fff; font-weight: 500; }

.panel__live {

  display: inline-flex;

  align-items: center;

  gap: .4em;

  font-family: var(--font-mono);

  font-size: .66rem;

  letter-spacing: .12em;

  color: var(--green-300);

}

.panel__live::before {

  content: "";

  width: 6px; height: 6px;

  border-radius: 50%;

  background: var(--green-400);

  box-shadow: 0 0 0 3px rgba(140, 198, 63, .18);

  animation: pulse 2.4s var(--ease) infinite;

}

@keyframes pulse { 50% { opacity: .35; } }



.panel svg.gauge { width: 100%; height: auto; }



.panel__rows { display: grid; gap: 8px; margin-block-start: 6px; }

.panel__row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  padding: .6em .8em;

  border-radius: var(--r-sm);

  background: rgba(255, 255, 255, .04);

  border: 1px solid var(--line-dark-soft);

  font-size: .78rem;

  color: var(--on-dark-soft);

}

.panel__row b { color: #fff; font-weight: 500; font-size: .82rem; }

.panel__row .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green-400); }



.panel__badge {

  position: absolute;

  inset-block-end: -44px;

  inset-inline-start: -14px;

  display: flex;

  align-items: center;

  gap: .6em;

  padding: .65em .95em;

  border-radius: var(--r-md);

  background: var(--paper);

  color: var(--ink);

  border: 1px solid var(--line);

  box-shadow: var(--shadow-2);

  font-size: .78rem;

  font-weight: 500;

}

.panel__badge svg { width: 17px; height: 17px; color: var(--green-600); flex: none; }

.panel__badge small { display: block; font-weight: 400; color: var(--ink-muted); font-size: .7rem; }



/* ----------------------------- 7. Marquee ------------------------------- */

.marquee {

  overflow: hidden;

  border-block: 1px solid var(--line);

  background: var(--white);

  padding-block: 14px;

  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);

  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);

}

.marquee__track {

  display: flex;

  gap: 42px;

  width: max-content;

  animation: slide 34s linear infinite;

}

.marquee__track span {

  display: inline-flex;

  align-items: center;

  gap: 42px;

  font-family: var(--font-mono);

  font-size: .76rem;

  letter-spacing: .18em;

  text-transform: uppercase;

  color: var(--ink-muted);

  white-space: nowrap;

}

.marquee__track span::after { content: "◆"; font-size: .5rem; color: var(--green-500); }

@keyframes slide { to { transform: translateX(50%); } }



/* ------------------------------ 8. Numbers ------------------------------ */

.metrics {

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: clamp(10px, 1.6vw, 18px);

}

.metric {

  padding: clamp(18px, 2.4vw, 26px);

  border-radius: var(--r-md);

  border: 1px solid var(--line-soft);

  background: var(--white);

}

.metric__value {

  display: block;

  font-family: var(--font-display);

  font-weight: 600;

  font-size: clamp(1.7rem, 2.8vw, 2.3rem);

  line-height: 1;

  color: var(--ink);

  direction: ltr;

  text-align: right;

}

.metric__value span { color: var(--green-600); }

.metric__label { display: block; margin-block-start: .5em; font-size: .82rem; color: var(--ink-muted); line-height: 1.5; }



.section--night .metric { background: rgba(255, 255, 255, .04); border-color: var(--line-dark-soft); }

.section--night .metric__value,

.is-dark .metric__value { color: #fff; }

.section--night .metric__value span,

.is-dark .metric__value span { color: var(--green-400); }

.section--night .metric__label,

.is-dark .metric__label { color: var(--on-dark-muted); }



/* ------------------------------ 9. Tiles -------------------------------- */

.bento {

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: clamp(12px, 1.4vw, 18px);

}

.bento__item {

  grid-column: span 1;

  display: flex;

  flex-direction: column;

  gap: .5em;

  padding: clamp(20px, 2.4vw, 28px);

  border-radius: var(--r-lg);

  background: var(--white);

  border: 1px solid var(--line-soft);

  transition: border-color .3s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);

  position: relative;

  overflow: hidden;

}

.bento__item:hover { transform: translateY(-4px); border-color: rgba(92, 160, 36, .45); box-shadow: var(--shadow-2); }

.bento__item--wide { grid-column: span 2; }

.bento__item--tall { grid-row: span 2; }

.bento__item h3 { margin-block: .2em 0; }

.bento__item p { color: var(--ink-muted); font-size: .92rem; margin: 0; }

.bento__item .link-arrow { margin-block-start: auto; padding-block-start: 1.1rem; }



.bento__item--feature {

  background:

    radial-gradient(520px 300px at 90% 0%, rgba(92, 160, 36, .16), transparent 60%),

    linear-gradient(150deg, var(--night-800), var(--night-950));

  border-color: var(--line-dark);

  color: var(--on-dark-soft);

}

.bento__item--feature h3 { color: #fff; }

.bento__item--feature p { color: var(--on-dark-soft); }



/* icon chip */

.chip-icon {

  width: 46px; height: 46px;

  display: grid; place-items: center;

  border-radius: 14px;

  background: rgba(92, 160, 36, .10);

  border: 1px solid rgba(92, 160, 36, .22);

  color: var(--green-600);

  margin-block-end: .55em;

  transition: transform .35s var(--ease), background-color .3s var(--ease);

}

.chip-icon svg { width: 22px; height: 22px; }

.bento__item:hover .chip-icon { transform: translateY(-2px) scale(1.05); }

.bento__item--feature .chip-icon {

  background: rgba(140, 198, 63, .16);

  border-color: rgba(140, 198, 63, .3);

  color: var(--green-300);

}



/* ------------------------------ 10. Products ---------------------------- */

.filters {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-bottom: clamp(20px, 3vw, 32px);

}

.chip {

  display: inline-flex;

  align-items: center;

  gap: .4em;

  padding: .5em 1em;

  border-radius: var(--r-pill);

  border: 1px solid var(--line);

  background: transparent;

  color: var(--ink-soft);

  font-family: inherit;

  font-size: .84rem;

  cursor: pointer;

  transition: all .2s var(--ease);

}

.chip:hover { border-color: rgba(92, 160, 36, .5); color: var(--ink); }

.chip.is-active {

  background: var(--night-900);

  border-color: var(--night-900);

  color: #fff;

}

.section--night .chip { border-color: var(--line-dark); color: var(--on-dark-soft); }

.section--night .chip:hover { color: #fff; }

.section--night .chip.is-active { background: var(--green-400); border-color: var(--green-400); color: #04231D; }



.products {

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: clamp(12px, 1.4vw, 18px);

}

.products--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }



.prod {

  display: flex;

  flex-direction: column;

  border-radius: var(--r-lg);

  background: var(--white);

  border: 1px solid var(--line-soft);

  overflow: hidden;

  transition: border-color .3s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);

}

.prod:hover { transform: translateY(-4px); border-color: rgba(92, 160, 36, .45); box-shadow: var(--shadow-2); }



.prod__media {

  position: relative;

  display: grid;

  place-items: center;

  aspect-ratio: 4 / 3;

  background:

    radial-gradient(320px 200px at 70% 15%, rgba(140, 198, 63, .16), transparent 65%),

    linear-gradient(150deg, var(--night-800), var(--night-950));

  overflow: hidden;

}

.prod__media::after {

  content: "";

  position: absolute;

  inset: 0;

  background-image:

    linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px),

    linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);

  background-size: 26px 26px;

  mask-image: radial-gradient(ellipse at 50% 50%, #000, transparent 78%);

  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000, transparent 78%);

}

.prod__media svg { width: 78px; height: 78px; color: var(--green-300); position: relative; z-index: 1; }

.prod__tag {

  position: absolute;

  inset-block-start: 12px;

  inset-inline-start: 12px;

  z-index: 2;

  padding: .3em .7em;

  border-radius: var(--r-pill);

  background: rgba(4, 8, 15, .55);

  border: 1px solid var(--line-dark);

  color: var(--on-dark-soft);

  font-family: var(--font-mono);

  font-size: .62rem;

  letter-spacing: .1em;

  text-transform: uppercase;

  backdrop-filter: blur(6px);

}



.prod__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: .55em; flex: 1; }

.prod h3 { font-size: 1rem; margin: 0; line-height: 1.4; }

.prod p { font-size: .84rem; color: var(--ink-muted); margin: 0; line-height: 1.6; }

.prod__specs {

  list-style: none;

  margin: 0;

  padding: 0;

  display: grid;

  gap: 5px;

  font-size: .78rem;

  color: var(--ink-soft);

}

.prod__specs li { display: flex; align-items: baseline; gap: .5em; margin: 0; }

.prod__specs li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--green-500); flex: none; }

.prod__foot {

  margin-block-start: auto;

  padding-block-start: 12px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  border-block-start: 1px solid var(--line-soft);

}

.prod__code { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; color: var(--ink-muted); }



/* --------------------------- 11. Service rows --------------------------- */

.rows { display: grid; }

.row-item {

  display: grid;

  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);

  gap: clamp(26px, 4vw, 58px);

  align-items: center;

  padding-block: clamp(30px, 4vw, 52px);

  border-block-start: 1px solid var(--line-soft);

}

.row-item:first-child { border-block-start: 0; }

.row-item--flip .row-item__media { order: 2; }

.row-item h3 { font-size: clamp(1.3rem, 2vw, 1.75rem); margin-block-end: .35em; }

.row-item__body > p { color: var(--ink-muted); }



.row-item__media {

  position: relative;

  display: grid;

  place-items: center;

  min-height: 250px;

  padding: 28px;

  border-radius: var(--r-lg);

  background:

    radial-gradient(380px 240px at 78% 8%, rgba(140, 198, 63, .18), transparent 62%),

    linear-gradient(150deg, var(--night-800), var(--night-950));

  border: 1px solid var(--line-dark);

  overflow: hidden;

}

.row-item__media::after {

  content: "";

  position: absolute;

  inset: 0;

  background-image:

    linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px),

    linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);

  background-size: 28px 28px;

  mask-image: radial-gradient(ellipse at 50% 50%, #000, transparent 76%);

  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000, transparent 76%);

}

.row-item__media .glyph {

  position: relative;

  z-index: 1;

  display: grid;

  place-items: center;

  width: 108px; height: 108px;

  border-radius: 50%;

  border: 1px dashed rgba(140, 198, 63, .32);

  color: var(--green-300);

}

.row-item__media .glyph svg { width: 52px; height: 52px; }

.row-item__num {

  position: absolute;

  inset-block-end: 6px;

  inset-inline-start: 16px;

  z-index: 1;

  font-family: var(--font-display);

  font-size: 3.6rem;

  font-weight: 600;

  line-height: 1;

  color: rgba(255, 255, 255, .07);

  letter-spacing: -.02em;

}



/* spec chips */

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-block: .9em 1.2em; }

.tag {

  padding: .3em .75em;

  border-radius: var(--r-pill);

  border: 1px solid var(--line);

  background: var(--paper);

  font-size: .76rem;

  color: var(--ink-soft);

}



/* checklist */

.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .6em; }

.checks li {

  display: grid;

  grid-template-columns: 18px 1fr;

  gap: .6em;

  align-items: start;

  margin: 0;

  font-size: .93rem;

  color: var(--ink-soft);

  line-height: 1.65;

}

.checks svg { width: 17px; height: 17px; color: var(--green-600); margin-block-start: .25em; }

.section--night .checks li { color: var(--on-dark-soft); }

.section--night .checks svg { color: var(--green-400); }



/* ------------------------------ 12. Steps ------------------------------- */

.steps {

  display: grid;

  grid-template-columns: repeat(5, minmax(0, 1fr));

  gap: 12px;

  counter-reset: step;

}

.step {

  counter-increment: step;

  position: relative;

  padding: 24px 18px 20px;

  border-radius: var(--r-md);

  border: 1px solid var(--line-soft);

  background: var(--white);

  transition: border-color .3s var(--ease), transform .3s var(--ease);

}

.step:hover { transform: translateY(-3px); border-color: rgba(92, 160, 36, .4); }

.step::before {

  content: "0" counter(step);

  display: block;

  font-family: var(--font-mono);

  font-size: .72rem;

  letter-spacing: .12em;

  color: var(--green-600);

  margin-block-end: 1.6em;

}

.step h4 { font-size: .98rem; margin-block: 0 .35em; }

.step p { font-size: .84rem; color: var(--ink-muted); margin: 0; line-height: 1.6; }



/* ----------------------------- 13. Projects ----------------------------- */

.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); }

.case {

  position: relative;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  min-height: 290px;

  padding: 22px;

  border-radius: var(--r-lg);

  overflow: hidden;

  isolation: isolate;

  color: #fff;

  background: var(--night-800);

  transition: transform .4s var(--ease), box-shadow .4s var(--ease);

}

.case::before {

  content: "";

  position: absolute;

  inset: 0;

  z-index: -2;

  background: var(--case-art, linear-gradient(150deg, #0B1524, #16283D));

  transition: transform .7s var(--ease);

}

.case::after {

  content: "";

  position: absolute;

  inset: 0;

  z-index: -1;

  background: linear-gradient(to top, rgba(4, 8, 15, .94) 6%, rgba(4, 8, 15, .45) 54%, rgba(4, 8, 15, .12) 100%);

}

.case:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }

.case:hover::before { transform: scale(1.04); }

.case:hover { color: #fff; }

.case__no {

  position: absolute;

  inset-block-start: 16px;

  inset-inline-start: 20px;

  font-family: var(--font-mono);

  font-size: .72rem;

  letter-spacing: .14em;

  color: rgba(255, 255, 255, .55);

}

.case__glyph {

  position: absolute;

  inset-block-start: 24px;

  inset-inline-end: 20px;

  z-index: -1;

  color: rgba(255, 255, 255, .13);

}

.case__glyph svg { width: 66px; height: 66px; }

.case h3 { color: #fff; font-size: 1.08rem; margin-block-end: .28em; }

.case p { color: rgba(255, 255, 255, .70); font-size: .84rem; margin: 0; }

.case__specs {

  display: flex;

  flex-wrap: wrap;

  gap: 6px 12px;

  margin: 12px 0 0;

  padding-block-start: 12px;

  border-block-start: 1px solid rgba(255, 255, 255, .16);

  list-style: none;

  padding-inline: 0;

  font-family: var(--font-mono);

  font-size: .68rem;

  letter-spacing: .04em;

  color: rgba(255, 255, 255, .62);

}

.case__specs li { margin: 0; }



/* ------------------------------- 14. FAQ -------------------------------- */

.faq { display: grid; gap: 10px; max-width: 880px; margin-inline: auto; }

.faq details {

  background: var(--white);

  border: 1px solid var(--line-soft);

  border-radius: var(--r-md);

  overflow: hidden;

  transition: border-color .25s var(--ease);

}

.faq details[open] { border-color: rgba(92, 160, 36, .45); }

.faq summary {

  cursor: pointer;

  list-style: none;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1em;

  padding: 1.05em 1.25em;

  font-weight: 500;

  font-size: .98rem;

}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {

  content: "";

  width: 26px; height: 26px;

  flex: none;

  border-radius: 50%;

  border: 1px solid var(--line);

  background-color: var(--paper);

  background-image:

    linear-gradient(var(--ink-soft), var(--ink-soft)),

    linear-gradient(var(--ink-soft), var(--ink-soft));

  background-size: 10px 1.5px, 1.5px 10px;

  background-position: center, center;

  background-repeat: no-repeat;

  transition: transform .3s var(--ease), background-color .25s var(--ease);

}

.faq details[open] summary::after {

  transform: rotate(45deg);

  background-color: rgba(92, 160, 36, .14);

}

.faq__body { padding: 0 1.25em 1.2em; color: var(--ink-muted); font-size: .93rem; }



/* ------------------------------- 15. CTA -------------------------------- */

.cta {

  position: relative;

  overflow: hidden;

  isolation: isolate;

  display: grid;

  grid-template-columns: minmax(0, 1fr) auto;

  gap: clamp(22px, 3.5vw, 44px);

  align-items: center;

  padding: clamp(30px, 4.6vw, 56px);

  border-radius: var(--r-xl);

  border: 1px solid var(--line-dark);

  background:

    radial-gradient(620px 360px at 86% 0%, rgba(140, 198, 63, .24), transparent 62%),

    radial-gradient(420px 300px at 10% 100%, rgba(216, 250, 114, .12), transparent 60%),

    linear-gradient(150deg, var(--night-800), var(--night-950));

  color: var(--on-dark-soft);

  box-shadow: var(--shadow-3);

}

.cta::before {

  content: "";

  position: absolute; inset: 0; z-index: -1;

  background-image:

    linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px),

    linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);

  background-size: 42px 42px;

  mask-image: radial-gradient(ellipse at 78% 18%, #000, transparent 74%);

  -webkit-mask-image: radial-gradient(ellipse at 78% 18%, #000, transparent 74%);

}

.cta h2 { color: #fff; margin-block-end: .3em; }

.cta p { color: var(--on-dark-soft); margin: 0; max-width: 52ch; }

.cta__actions { display: flex; flex-wrap: wrap; gap: 10px; }



/* ---------------------------- 16. Page hero ----------------------------- */

.page-hero {

  position: relative;

  padding-block: calc(var(--header-h) + clamp(40px, 6vw, 74px)) clamp(38px, 5vw, 62px);

  background:

    radial-gradient(760px 420px at 86% -20%, rgba(92, 160, 36, .20), transparent 62%),

    var(--night-950);

  color: var(--on-dark-soft);

  overflow: hidden;

}

.page-hero::after {

  content: "";

  position: absolute; inset: 0;

  background-image:

    linear-gradient(to right, rgba(255, 255, 255, .04) 1px, transparent 1px),

    linear-gradient(to bottom, rgba(255, 255, 255, .04) 1px, transparent 1px);

  background-size: 56px 56px;

  mask-image: linear-gradient(to bottom, #000, transparent 86%);

  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 86%);

}

.page-hero > .wrap { position: relative; z-index: 1; }

.page-hero h1 { color: #fff; font-size: clamp(1.9rem, 3.8vw, 3rem); margin-block-end: .3em; max-width: 24ch; }

.page-hero p { color: var(--on-dark-soft); max-width: 60ch; margin: 0; }



.crumbs {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: .5em;

  list-style: none;

  margin: 0 0 1.2em;

  padding: 0;

  font-family: var(--font-mono);

  font-size: .7rem;

  letter-spacing: .08em;

  color: var(--on-dark-muted);

}

.crumbs li { margin: 0; display: inline-flex; align-items: center; gap: .5em; }

.crumbs li + li::before { content: "/"; opacity: .5; }

.crumbs a { color: var(--on-dark-soft); }

.crumbs [aria-current] { color: var(--green-300); }



/* ----------------------------- 17. Contact ------------------------------ */

.contact-grid {

  display: grid;

  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);

  gap: clamp(20px, 2.6vw, 34px);

  align-items: start;

}

.info-list { display: grid; gap: 10px; }

.info {

  display: grid;

  grid-template-columns: 42px 1fr;

  gap: .9em;

  align-items: start;

  padding: 16px 18px;

  border-radius: var(--r-md);

  background: var(--white);

  border: 1px solid var(--line-soft);

  transition: border-color .25s var(--ease), transform .25s var(--ease);

}

a.info:hover { border-color: rgba(92, 160, 36, .4); transform: translateY(-2px); color: inherit; }

.info__icon {

  width: 42px; height: 42px;

  display: grid; place-items: center;

  border-radius: 12px;

  background: rgba(92, 160, 36, .10);

  color: var(--green-600);

}

.info__icon svg { width: 20px; height: 20px; }

.info h4 { margin: 0 0 .2em; font-size: .92rem; }

.info p { margin: 0; font-size: .86rem; color: var(--ink-muted); line-height: 1.6; }

.info .value { display: block; direction: ltr; text-align: right; font-weight: 500; color: var(--ink); font-size: .9rem; }



.panel-card {

  background: var(--white);

  border: 1px solid var(--line-soft);

  border-radius: var(--r-xl);

  padding: clamp(22px, 3vw, 36px);

  box-shadow: var(--shadow-2);

}

.panel-card h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); margin-block-end: .3em; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.field { display: flex; flex-direction: column; gap: .4em; }

.field--full { grid-column: 1 / -1; }

.field label { font-size: .82rem; font-weight: 500; color: var(--ink-soft); }

.field .req { color: #C2410C; }

.field input, .field select, .field textarea {

  width: 100%;

  font-family: inherit;

  font-size: .93rem;

  color: var(--ink);

  background: var(--paper);

  border: 1px solid var(--line);

  border-radius: var(--r-sm);

  padding: .78em .9em;

  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);

}

.field textarea { min-height: 124px; resize: vertical; line-height: 1.7; }

.field input::placeholder, .field textarea::placeholder { color: #93A3A8; }

.field input:focus, .field select:focus, .field textarea:focus {

  outline: none;

  background: #fff;

  border-color: var(--green-500);

  box-shadow: 0 0 0 4px rgba(92, 160, 36, .16);

}

.field.has-error input, .field.has-error select, .field.has-error textarea {

  border-color: #DC2626;

  box-shadow: 0 0 0 4px rgba(220, 38, 38, .10);

}

.field__error { display: none; font-size: .75rem; color: #B91C1C; }

.field.has-error .field__error { display: block; }

.field--check label { display: flex; align-items: flex-start; gap: .6em; font-weight: 400; font-size: .86rem; color: var(--ink-muted); cursor: pointer; }

.field--check input[type="checkbox"] { width: 17px; height: 17px; flex: none; margin-block-start: .25em; accent-color: var(--green-600); }

.form-note { margin-block-start: .9em; font-size: .76rem; color: var(--ink-muted); line-height: 1.6; }

.form-status {

  display: none;

  margin-block-start: .9em;

  padding: .8em 1em;

  border-radius: var(--r-sm);

  font-size: .86rem;

  background: rgba(92, 160, 36, .12);

  border: 1px solid rgba(92, 160, 36, .3);

  color: #085C4B;

}

.form-status.is-visible { display: block; }



.map {

  border-radius: var(--r-xl);

  overflow: hidden;

  border: 1px solid var(--line-soft);

  box-shadow: var(--shadow-2);

  background: var(--paper-2);

}

.map iframe { display: block; width: 100%; height: 380px; border: 0; filter: grayscale(30%) contrast(1.03); }



/* ------------------------------ 18. Footer ------------------------------ */

.site-footer {

  position: relative;

  padding-block: clamp(48px, 6vw, 76px) 0;

  background: var(--night-950);

  color: var(--on-dark-muted);

  overflow: hidden;

}

.site-footer::before {

  content: "";

  position: absolute;

  inset-block-start: 0; inset-inline: 0;

  height: 1px;

  background: linear-gradient(to left, transparent, rgba(140, 198, 63, .5), transparent);

}

.footer-grid {

  display: grid;

  grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));

  gap: clamp(26px, 4vw, 46px);

  padding-block-end: clamp(32px, 4vw, 50px);

}

.footer-about { margin-block: 1.1em 1.3em; font-size: .88rem; line-height: 1.85; max-width: 38ch; color: var(--on-dark-muted); }

.footer-col h4 {

  color: #fff;

  font-size: .84rem;

  font-family: var(--font-body);

  font-weight: 500;

  letter-spacing: .02em;

  margin-block-end: 1em;

}

.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5em; }

.footer-col li { margin: 0; }

.footer-col a { font-size: .87rem; color: var(--on-dark-muted); }

.footer-col a:hover { color: var(--green-300); }

.footer-contact li { display: flex; align-items: flex-start; gap: .55em; }

.footer-contact svg { width: 14px; height: 14px; margin-block-start: .4em; color: var(--green-500); flex: none; }

.footer-contact a { direction: ltr; display: inline-block; }



.socials { display: flex; gap: 7px; }

.socials a {

  width: 36px; height: 36px;

  display: grid; place-items: center;

  border-radius: 10px;

  border: 1px solid var(--line-dark);

  color: var(--on-dark-soft);

  transition: all .25s var(--ease);

}

.socials a:hover { color: var(--night-950); background: var(--green-400); border-color: var(--green-400); }

.socials svg { width: 16px; height: 16px; }



.footer-bottom {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: space-between;

  gap: 8px 22px;

  padding-block: 18px;

  border-block-start: 1px solid var(--line-dark-soft);

  font-size: .78rem;

  color: var(--on-dark-muted);

}

.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; margin: 0; padding: 0; }

.footer-bottom li { margin: 0; }

.footer-bottom a { color: var(--on-dark-muted); }

.footer-bottom a:hover { color: var(--green-300); }



/* ---------------------------- 19. Floating / misc ----------------------- */

.float-wa {

  position: fixed;

  inset-block-end: 20px;

  inset-inline-end: 20px;

  z-index: 70;

  display: inline-flex;

  align-items: center;

  gap: .5em;

  padding: .7em 1.05em;

  border-radius: var(--r-pill);

  background: #17A673;

  color: #fff;

  font-size: .85rem;

  font-weight: 500;

  box-shadow: 0 14px 34px rgba(23, 166, 115, .35);

  transition: transform .25s var(--ease), box-shadow .25s var(--ease);

}

.float-wa:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 20px 42px rgba(23, 166, 115, .45); }

.float-wa svg { width: 19px; height: 19px; }



.progress {

  position: fixed;

  inset-block-start: 0;

  inset-inline: 0;

  height: 2px;

  z-index: 95;

  background: linear-gradient(to left, var(--green-400), var(--orange-400));

  transform-origin: right;

  transform: scaleX(0);

  transition: transform .1s linear;

}



.skip-link {

  position: absolute;

  inset-block-start: 10px;

  inset-inline-start: 50%;

  transform: translate(-50%, -140%);

  z-index: 200;

  padding: .65em 1.1em;

  border-radius: var(--r-pill);

  background: var(--night-900);

  color: #fff;

  font-size: .86rem;

  transition: transform .25s var(--ease);

}

.skip-link:focus { transform: translate(-50%, 0); color: #fff; }



.prose { max-width: 74ch; }

.prose h2 { font-size: clamp(1.15rem, 1.6vw, 1.35rem); margin-block: 2em .55em; }

.prose p, .prose li { color: var(--ink-muted); font-size: .95rem; line-height: 1.9; }

.prose ul { padding-inline-start: 1.1em; }

.prose a { color: var(--green-600); text-decoration: underline; text-underline-offset: 3px; }



/* ---------------------------- 20. Reveal -------------------------------- */

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }

.reveal.is-in { opacity: 1; transform: none; }

.reveal[data-delay="1"] { transition-delay: .07s; }

.reveal[data-delay="2"] { transition-delay: .14s; }

.reveal[data-delay="3"] { transition-delay: .21s; }

.reveal[data-delay="4"] { transition-delay: .28s; }

.reveal[data-delay="5"] { transition-delay: .35s; }



/* --------------------------- 21. Responsive ----------------------------- */

@media (max-width: 1120px) {

  .nav { display: none; }

  .burger { display: grid; }

  .header-actions { margin-inline-start: auto; }

  .hero__grid { grid-template-columns: 1fr; }

  .hero .panel { max-width: 520px; }

  .products, .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .contact-grid { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

}



@media (max-width: 880px) {

  .grid--3, .grid--2, .row-item, .products--3 { grid-template-columns: 1fr; }

  .row-item--flip .row-item__media { order: 0; }

  .cta { grid-template-columns: 1fr; }

  .bento__item--wide, .bento__item--tall { grid-column: span 2; grid-row: auto; }

  .form-grid { grid-template-columns: 1fr; }

  .header-actions .btn { display: none; }

  .hero h1 { font-size: clamp(1.9rem, 7vw, 2.6rem); }

  .panel__badge { inset-inline-start: auto; inset-inline-end: 10px; }

}



@media (max-width: 620px) {

  :root { --gutter: 16px; --section-y: 54px; --header-h: 76px; }

  .header-bar { height: 56px; padding-inline: 12px 6px; }

  .brand__sub { display: none; }

  .brand__mark { width: 34px; height: 34px; }

  .brand__name { font-size: .94rem; }

  .hero__actions .btn { width: 100%; }

  .products, .bento, .steps, .cases, .grid--4, .metrics { grid-template-columns: 1fr; }

  .prod__media { aspect-ratio: 16 / 10; }

  .prod__media svg { width: 64px; height: 64px; }

  .bento__item--wide { grid-column: auto; }

  .footer-grid { grid-template-columns: 1fr; gap: 26px; }

  .float-wa span { display: none; }

  .float-wa { padding: .85em; }

  .cta__actions .btn { width: 100%; }

  .marquee__track span { font-size: .68rem; }

}



/* ------------------------- 22. Motion preferences ----------------------- */

@media (prefers-reduced-motion: reduce) {

  html { scroll-behavior: auto; }

  *, *::before, *::after {

    animation-duration: .001ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: .001ms !important;

  }

  .reveal { opacity: 1; transform: none; }

  .marquee__track { animation: none; }

}



/* ------------------------------ 23. Print ------------------------------- */

@media print {

  .site-header, .float-wa, .drawer, .progress, .hero .panel { display: none !important; }

  body { background: #fff; color: #000; }

  .section, .hero, .page-hero { padding-block: 18px; background: #fff !important; color: #000 !important; }

  .hero h1, .page-hero h1, .section--night h2, .section--night h3 { color: #000 !important; }

  a { color: #000; text-decoration: underline; }

}



/* ==========================================================================

   24. Photography layer (added with the real project photos)

   ========================================================================== */



/* Generic frame */

.img-frame {

  position: relative;

  overflow: hidden;

  border-radius: var(--r-lg);

  background: var(--paper-2);

}

.img-frame img {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform .9s var(--ease);

}

.img-frame:hover img { transform: scale(1.04); }



/* --- Hero collage -------------------------------------------------------- */

.hero__media { position: relative; }

.hero__media-main {

  position: relative;

  border-radius: var(--r-xl);

  overflow: hidden;

  border: 1px solid var(--line-dark);

  box-shadow: 0 34px 80px rgba(0, 0, 0, .42);

}

.hero__media-main img { width: 100%; aspect-ratio: 4 / 3.5; object-fit: cover; }

.hero__media-sub {

  position: absolute;

  inset-block-end: -26px;

  inset-inline-start: -22px;

  width: 46%;

  border-radius: var(--r-md);

  overflow: hidden;

  border: 6px solid var(--night-950);

  box-shadow: 0 18px 44px rgba(0, 0, 0, .38);

}

.hero__media-sub img { width: 100%; aspect-ratio: 4 / 3.2; object-fit: cover; }

.hero__chip {

  position: absolute;

  inset-block-start: 20px;

  inset-inline-end: -16px;

  display: flex;

  align-items: center;

  gap: .6em;

  padding: 11px 14px;

  border-radius: 14px;

  background: #fff;

  border: 1px solid var(--line);

  box-shadow: var(--shadow-2);

  color: var(--ink);

}

.hero__chip svg { width: 18px; height: 18px; color: var(--green-600); flex: none; }

.hero__chip b { display: block; font-family: var(--font-display); font-size: 1.02rem; line-height: 1.1; }

.hero__chip span { font-size: .7rem; color: var(--ink-muted); }



/* --- Service rows: photo instead of glyph -------------------------------- */

.row-item__media {

  padding: 0;

  min-height: 0;

  aspect-ratio: 4 / 3;

  border-radius: var(--r-lg);

  overflow: hidden;

  border: 1px solid var(--line);

  background: var(--paper-2);

  box-shadow: var(--shadow-2);

}

.row-item__media img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  transition: transform .9s var(--ease);

}

.row-item:hover .row-item__media img { transform: scale(1.04); }

.row-item__media::after { display: none; }



/* --- Project cards: photo background ------------------------------------- */

.case { background: var(--night-900); }

.case__img {

  position: absolute;

  inset: 0;

  z-index: -3;

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform .9s var(--ease);

}

.case:hover .case__img { transform: scale(1.05); }

.case::before { display: none; }

.case::after {

  background: linear-gradient(to top, rgba(4, 14, 11, .95) 4%, rgba(4, 14, 11, .55) 48%, rgba(4, 14, 11, .15) 100%);

}



/* --- Gallery ------------------------------------------------------------- */

.gallery {

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  grid-auto-rows: 190px;

  gap: 12px;

}

.gallery figure {

  position: relative;

  margin: 0;

  border-radius: var(--r-md);

  overflow: hidden;

  background: var(--paper-2);

}

.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--ease); }

.gallery figure:hover img { transform: scale(1.05); }

.gallery figcaption {

  position: absolute;

  inset-block-end: 0;

  inset-inline: 0;

  padding: 26px 14px 12px;

  font-size: .76rem;

  color: #fff;

  background: linear-gradient(to top, rgba(4, 14, 11, .85), transparent);

  opacity: 0;

  transition: opacity .3s var(--ease);

}

.gallery figure:hover figcaption { opacity: 1; }

.gallery .wide { grid-column: span 2; }

.gallery .tall { grid-row: span 2; }



/* --- Products: photo panel ----------------------------------------------- */

.prod__media {

  background: linear-gradient(160deg, #FFFFFF, var(--paper-2));

  border-block-end: 1px solid var(--line-soft);

}

.prod__media::after { display: none; }

.prod__media svg { color: var(--green-600); }

.prod__tag {

  background: rgba(255, 255, 255, .9);

  border: 1px solid var(--line);

  color: var(--ink-muted);

  backdrop-filter: blur(4px);

}

.prod__media img {

  width: 100%;

  height: 100%;

  object-fit: contain;

  padding: 10px;

  transition: transform .6s var(--ease);

}

.prod:hover .prod__media img { transform: scale(1.04); }



/* --- About / misc photos ------------------------------------------------- */

.photo-strip {

  display: grid;

  grid-template-columns: 1.4fr 1fr;

  gap: 12px;

}

.photo-strip figure { margin: 0; border-radius: var(--r-lg); overflow: hidden; }

.photo-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }

.photo-strip { grid-auto-rows: clamp(240px, 30vw, 400px); }

.photo-strip figure, .photo-strip img { height: 100%; }



/* --- Footer logo chip ---------------------------------------------------- */

.footer-logo {

  display: inline-flex;

  align-items: center;

  padding: 12px 16px;

  border-radius: 14px;

  background: #fff;

}

.footer-logo img { height: 56px; width: 128px; object-fit: contain; }



/* --- Small screens ------------------------------------------------------- */

@media (max-width: 880px) {

  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 160px; }

  .hero__media-sub { width: 52%; inset-block-end: -18px; inset-inline-start: -10px; }

  .hero__chip { inset-inline-end: 8px; }

}

@media (max-width: 620px) {

  .photo-strip { grid-template-columns: 1fr; }

  .photo-strip figure:last-child img { aspect-ratio: 4 / 3; }

  .brand__mark { height: 26px; width: 59px; }

  .brand__name { font-size: .84rem; }

  .brand__sub { display: none; }

  .header-bar { padding-inline-start: 12px; }

}





/* ==========================================================================

   25. Header phone, profile link and the animated hero

   ========================================================================== */



.header-phone {

  display: inline-flex;

  align-items: center;

  gap: .45em;

  padding: .45em .8em;

  border-radius: var(--r-pill);

  border: 1px solid var(--line);

  background: #fff;

  color: var(--ink);

  font-family: var(--font-mono);

  font-size: .8rem;

  font-weight: 500;

  letter-spacing: .01em;

  direction: ltr;

  white-space: nowrap;

  transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);

}

.header-phone:hover { color: var(--green-600); border-color: var(--green-400); background: var(--paper); }

.header-phone svg { width: 15px; height: 15px; color: var(--green-600); flex: none; }



.nav a.nav-link--doc { color: var(--green-600); font-weight: 500; }

.nav a.nav-link--doc::after { content: "↗"; margin-inline-start: .25em; font-size: .8em; opacity: .8; }

.nav a.nav-link--doc:hover { color: var(--green-600); background: rgba(92, 160, 36, .10); }



/* --- Hero with animated photography ------------------------------------- */

.hero--slides {

  min-height: min(94vh, 840px);

  display: flex;

  align-items: center;

  padding-block: calc(var(--header-h) + clamp(54px, 8vw, 96px)) clamp(60px, 8vw, 104px);

  background: var(--night-950);

}

.hero--slides::before {

  content: "";

  position: absolute;

  inset: 0;

  z-index: -2;

  background:

    linear-gradient(to left, rgba(6, 17, 14, .95) 0%, rgba(6, 17, 14, .86) 34%, rgba(6, 17, 14, .52) 68%, rgba(6, 17, 14, .34) 100%),

    linear-gradient(to top, rgba(6, 17, 14, .92) 0%, rgba(6, 17, 14, .10) 42%, transparent 70%);

}

.hero--slides::after { display: none; }



.hero__slides { position: absolute; inset: 0; z-index: -3; overflow: hidden; background: var(--night-950); }

.hero__slide {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  opacity: 0;

  animation: heroFade 32s linear infinite, heroZoom 32s ease-out infinite;

  will-change: opacity, transform;

}

.hero__slide:nth-child(1) { animation-delay: 0s, 0s; }

.hero__slide:nth-child(2) { animation-delay: -6.4s, -6.4s; }

.hero__slide:nth-child(3) { animation-delay: -12.8s, -12.8s; }

.hero__slide:nth-child(4) { animation-delay: -19.2s, -19.2s; }

.hero__slide:nth-child(5) { animation-delay: -25.6s, -25.6s; }



@keyframes heroFade {

  0%   { opacity: 0; }

  2%   { opacity: 1; }

  17%  { opacity: 1; }

  20%  { opacity: 0; }

  100% { opacity: 0; }

}

@keyframes heroZoom {

  0%   { transform: scale(1.02); }

  100% { transform: scale(1.14); }

}



.hero--slides > .wrap { position: relative; z-index: 1; }

.hero__content { max-width: 760px; }

.hero--slides h1 { font-size: clamp(2.15rem, 4.5vw, 3.85rem); }

.hero--slides .lede { max-width: 56ch; color: rgba(238, 245, 236, .82); }

.hero--slides .hero__meta { border-block-start-color: rgba(255, 255, 255, .16); }

.hero--slides .hero__meta li { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .86); }

.hero--slides .hero__meta svg { color: var(--green-300); }



@media (max-width: 1199px) {

  .header-phone span { display: none; }

  .header-phone { padding: .45em; }

}

@media (max-width: 880px) {

  .hero--slides { min-height: 78vh; }

  .hero--slides h1 { font-size: clamp(1.9rem, 7vw, 2.7rem); }

}

@media (max-width: 560px) {

  .header-phone span { display: none; }

  .header-phone { padding: .45em; }

}



/* ==========================================================================

   26. Testimonials & partners (auto-scrolling rails)

   ========================================================================== */

.rail-band {

  overflow: hidden;

  margin-block-start: clamp(22px, 3vw, 34px);

  padding-block: 6px;

  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);

  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);

}

.rail {

  display: flex;

  gap: 16px;

  width: max-content;

  animation: railMove 70s linear infinite;

  will-change: transform;

}

.rail:hover { animation-play-state: paused; }

@keyframes railMove { to { transform: translateX(50%); } }



.rail--partners { animation-duration: 46s; }



/* --- testimonial card ---------------------------------------------------- */

.t-card {

  width: 360px;

  flex: none;

  margin: 0;

  display: flex;

  flex-direction: column;

  gap: .8em;

  padding: 22px;

  border-radius: var(--r-lg);

  background: #fff;

  border: 1px solid var(--line-soft);

  box-shadow: var(--shadow-1);

}

.t-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.stars { color: var(--orange-500); letter-spacing: .1em; font-size: .82rem; }

.t-card__project {

  font-family: var(--font-mono);

  font-size: .66rem;

  color: var(--ink-muted);

  white-space: nowrap;

}

.t-card blockquote {

  margin: 0;

  font-size: .94rem;

  line-height: 1.85;

  color: var(--ink-soft);

}

.t-card figcaption {

  display: flex;

  align-items: center;

  gap: .7em;

  margin-block-start: auto;

  padding-block-start: .9em;

  border-block-start: 1px solid var(--line-soft);

}

.t-avatar {

  width: 38px; height: 38px;

  border-radius: 50%;

  display: grid; place-items: center;

  background: rgba(92, 160, 36, .14);

  color: var(--green-600);

  font-family: var(--font-display);

  font-weight: 600;

  font-size: .88rem;

  flex: none;

}

.t-card b { display: block; font-size: .9rem; color: var(--ink); line-height: 1.3; }

.t-card small { color: var(--ink-muted); font-size: .76rem; }



/* --- partner chip -------------------------------------------------------- */

.section--night .rail-band { mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); }

.p-chip {

  display: flex;

  align-items: center;

  gap: .7em;

  min-width: 196px;

  padding: 14px 20px;

  border-radius: var(--r-md);

  border: 1px solid var(--line-dark);

  background: rgba(255, 255, 255, .045);

  transition: border-color .3s var(--ease), background-color .3s var(--ease);

}

.p-chip:hover { border-color: rgba(140, 198, 63, .45); background: rgba(140, 198, 63, .09); }

.p-mono {

  width: 34px; height: 34px;

  flex: none;

  display: grid; place-items: center;

  border-radius: 9px;

  background: rgba(140, 198, 63, .16);

  color: var(--green-300);

  font-family: var(--font-mono);

  font-size: .7rem;

  letter-spacing: .04em;

}

.p-name {

  color: rgba(255, 255, 255, .84);

  font-family: var(--font-display);

  font-size: .94rem;

  letter-spacing: .01em;

  white-space: nowrap;

}

.p-chip:hover .p-name { color: #fff; }



@media (max-width: 620px) {

  .t-card { width: 288px; padding: 18px; }

  .p-chip { min-width: 168px; padding: 12px 16px; }

}



@media (prefers-reduced-motion: reduce) {

  .rail { animation: none; overflow-x: auto; }

}





/* Reduced motion: show a single static hero image instead of the slideshow */

@media (prefers-reduced-motion: reduce) {

  .hero__slide { animation: none !important; opacity: 0; }

  .hero__slide:first-child { opacity: 1; }

}





/* Dark info panel used inside the "why us" section */

.panel-dark {

  position: relative;

  border-radius: var(--r-lg);

  padding: clamp(22px, 3vw, 30px);

  border: 1px solid var(--line-dark);

  background:

    radial-gradient(520px 300px at 90% 0%, rgba(140, 198, 63, .16), transparent 62%),

    linear-gradient(150deg, var(--night-800), var(--night-950));

  color: var(--on-dark-soft);

  box-shadow: var(--shadow-3);

  overflow: hidden;

}

.panel-dark .metric { background: rgba(255, 255, 255, .05); border-color: var(--line-dark-soft); }

.panel-dark .metric__value { color: #fff; }

.panel-dark .metric__value span { color: var(--green-400); }

.panel-dark .metric__label { color: var(--on-dark-muted); }





/* ==========================================================================

   WordPress layer (theme)

   ========================================================================== */

body { margin: 0; }

html { margin-top: 0 !important; }



.wp-block-group { margin: 0; }

/* الحاوية الرئيسية يجب أن تبقى موسّطة: قاعدة margin:0 أعلاه كانت تلغي auto */

.wp-block-group.wrap { margin-inline: auto; }

.wp-block-heading { margin: 0 0 .5em; }

.wp-block-paragraph { margin: 0 0 1.05em; }

.wp-block-paragraph:last-child { margin-bottom: 0; }

.wp-block-list { margin: 0 0 1.1em; padding-inline-start: 1.2em; }

.wp-block-image img, .wp-block-html img { max-width: 100%; height: auto; }

.wp-block-details { margin: 0; }

.wp-block-html { margin: 0; }



/* Keep imported content visible before JS runs */

.reveal { opacity: 1 !important; transform: none !important; }



/* Menus rendered by WordPress */

.nav .nav-list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }

.nav .nav-list li { margin: 0; }

.nav .nav-list a { display: inline-block; white-space: nowrap; padding: .46em .64em; border-radius: var(--r-pill); font-size: .86rem; color: var(--ink-soft); }

.nav .nav-list a:hover { color: var(--ink); background: rgba(22, 33, 28, .05); }

.nav .nav-list .current-menu-item > a,

.nav .nav-list .current_page_item > a { color: var(--night-900); background: var(--paper-2); font-weight: 500; }



.footer-col .footer-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: .5em; }

.footer-col .footer-menu a { font-size: .87rem; color: var(--on-dark-muted); }

.footer-col .footer-menu a:hover { color: var(--green-300); }



/* Pagination */

.nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }

.nav-links .page-numbers {

  display: inline-grid; place-items: center;

  min-width: 40px; height: 40px; padding-inline: 10px;

  border-radius: var(--r-pill);

  border: 1px solid var(--line);

  color: var(--ink); font-size: .9rem;

}

.nav-links .page-numbers.current { background: var(--night-900); color: #fff; border-color: var(--night-900); }

.nav-links .page-numbers:hover { border-color: var(--green-400); }



/* Comments / forms inside content */

.entry-content { max-width: none; }



/* Editor */

.editor-styles-wrapper { background: var(--paper); }







/* --- Compact header between 1200–1600px ---------------------------------- */

.nav { min-width: 0; }

.nav .nav-list { flex-wrap: nowrap; }

.nav .nav-list li { flex: 0 0 auto; }

.nav .nav-list a { display: inline-block; white-space: nowrap; }

@media (max-width: 1620px) {

  .brand__sub { display: none; }

  .brand__name { max-width: 150px; }

  .nav .nav-list a { font-size: .8rem; padding: .38em .46em; }

  .header-phone { font-size: .74rem; padding: .42em .62em; }

}

@media (max-width: 1499px) {

  .brand__text { display: none; }

  .header-phone span { display: none; }

  .header-phone { padding: .45em; }

  .nav .nav-list a { font-size: .8rem; padding: .4em .52em; }

}

@media (max-width: 1240px) {

  .nav .nav-list a { font-size: .78rem; padding: .36em .42em; }

}





/* Profile link: reserve space for the arrow so it never overlaps the text */

.nav a.nav-link--doc { position: relative; padding-inline-end: 1.45em; }

.nav a.nav-link--doc::after {

  position: absolute;

  inset-inline-end: .45em;

  inset-block-start: 50%;

  transform: translateY(-50%);

  margin: 0;

}





/* Keep the profile item visually identical to the other menu items */

.nav a.nav-link--doc {

  padding-inline-end: .64em;

  color: var(--green-600);

  font-weight: 500;

}

.nav a.nav-link--doc::after { content: none; }





/* ==========================================================================

   إصلاح حاسم: ووردبريس يضيف .wp-block-group__inner-container حول محتوى

   كل مجموعة، فيمنع الشبكات (grid/flex) من العمل. display:contents يجعل

   هذه الحاوية شفافة تخطيطيًا فتصبح البطاقات أبناء مباشرين للشبكة.

   ========================================================================== */

.wp-block-group__inner-container { display: contents; }



/* منع الهوامش التي تضيفها ووردبريس بين عناصر الشبكات */

.bento > *,

.metrics > *,

.grid > *,

.products > *,

.cases > *,

.steps > *,

.rail > *,

.footer-grid > *,

.footer-bottom > * { margin-block-start: 0 !important; }



/* منع أي عرض مقيد تفرضه قواعد البلوكات على أقسام الموقع */

.wp-block-group.is-layout-constrained,

.wp-block-group.is-layout-flow { max-width: none; }





/* --- Ensure the page wrapper stays centred inside block groups ----------- */

.wp-block-group.wrap,

.wp-block-group.wrap > .wp-block-group__inner-container { margin-inline: auto; }





/* ==========================================================================

   صور المنتجات: منع القص نهائيًا

   سبب المشكلة: height:100% على الصورة داخل شبكة غير محددة الارتفاع كان

   يُحسب بعرض الصورة فتزيد عن إطار البطاقة (4:3) فتُقص.

   الحل: تثبيت الصورة داخل الإطار مع object-fit: contain.

   ========================================================================== */

.prod__media { position: relative; }

.prod__media img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: contain;

  object-position: center;

  padding: 12px;

}





/* ==========================================================================

   شبكة أمان: البطاقات الداكنة التي فقدت تنسيقها داخل ووردبريس

   (تحوّل style المضمّن إلى كلاس .panel-dark، وإن نُسي الكلاس تعمل هذه القاعدة)

   ========================================================================== */

.wp-block-group:has(> .wp-block-group__inner-container > .panel__rows) {

  border-radius: var(--r-xl);

  padding: clamp(24px, 3vw, 34px);

  background:

    radial-gradient(520px 300px at 90% 0%, rgba(140, 198, 63, .16), transparent 62%),

    linear-gradient(150deg, var(--night-800), var(--night-950));

  border: 1px solid var(--line-dark);

  color: var(--on-dark-soft);

  box-shadow: var(--shadow-3);

}






/* ==========================================================================

   صور المنتجات: خلفية بيضاء نظيفة بلا إطار ملوّن

   ========================================================================== */

.prod__media {

  background: #FFFFFF;

  border-block-end: 1px solid var(--line-soft);

}

.prod__media::after { display: none; }

.prod__media img { padding: 6px; }

.prod__tag {

  background: #FFFFFF;

  border: 1px solid var(--line-soft);

  color: var(--ink-muted);

}


/* --- Clients strip (logo marquee) ---------------------------------------- */
.rail--clients { animation-duration: 58s; }
.c-logo {
  display: grid;
  place-items: center;
  width: 210px;
  height: 104px;
  margin: 0;
  padding: 14px 20px;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.c-logo img {
  max-width: 100%;
  max-height: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: saturate(.96);
}
@media (max-width: 640px) {
  .c-logo { width: 168px; height: 88px; padding: 10px 14px; }
  .c-logo img { max-height: 52px; }
}

#clients { padding-block: clamp(34px, 4.2vw, 56px); }
#clients .rail-band { mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
#clients .section-head { margin-bottom: clamp(20px, 2.6vw, 32px); }

/* --- Section divider ------------------------------------------------------ */
.divider {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 1220px;
  margin-inline: auto;
  padding: clamp(26px, 3.4vw, 42px) var(--gutter);
  background: var(--paper);
}
.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line) 35%, var(--line) 65%, transparent);
}
.divider span {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--green-500);
  transform: rotate(45deg);
  box-shadow: 0 0 0 7px rgba(140, 198, 63, .10);
}


/* --- Suppliers: logo chips on the dark strip ------------------------------ */
.p-logo {
  display: grid;
  place-items: center;
  width: 208px;
  height: 104px;
  margin: 0;
  padding: 14px 22px;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.p-logo img {
  max-width: 100%;
  max-height: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
}
@media (max-width: 640px) {
  .p-logo { width: 164px; height: 86px; padding: 10px 14px; }
  .p-logo img { max-height: 50px; }
}


/* ==========================================================================
   Mobile polish: product images + header actions (phone / burger)
   ========================================================================== */
.prod__media {
  position: relative;
  background: #fff;
  border-block-end: 1px solid var(--line-soft);
}
.prod__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 8px;
}

@media (max-width: 720px) {
  .prod__media { aspect-ratio: 4 / 3; }
  .prod__media img { padding: 4px; }
  .prod__tag { font-size: .68rem; padding: 4px 9px; }

  /* phone button: comfortable tap target */
  .header-phone {
    min-width: 46px;
    min-height: 46px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    border-color: var(--line);
  }
  .header-phone svg { width: 20px; height: 20px; }

  /* burger: bigger, clearer */
  .burger {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: inline-grid;
    place-content: center;
    gap: 0;
  }
  .burger span {
    width: 21px;
    height: 2px;
    margin: 3.5px auto;
    border-radius: 2px;
  }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

  .site-header .wrap { padding-inline: 12px; }
  .header-actions { gap: 8px; }
}

@media (max-width: 420px) {
  .brand__text { display: none; }
  .brand__mark { width: 62px; height: 29px; }
}


/* ==========================================================================
   ملاحظات المراجعة: اسم الشركة على الجوال · نسبة صور الخزانات · توسيط العناوين
   ========================================================================== */

/* 1) اسم الشركة يظهر على الجوال (بدون السطر الفرعي الإنجليزي) */
@media (max-width: 1499px) {
  .brand__text { display: flex !important; flex-direction: column; }
  .brand__sub { display: none; }
}
@media (max-width: 720px) {
  .brand__name { font-size: .86rem; line-height: 1.15; }
  .brand__mark { width: 54px; height: 26px; }
  .brand { gap: 8px; }
}
@media (max-width: 400px) {
  .brand__name { font-size: .78rem; }
  .brand__mark { width: 46px; height: 24px; }
}

/* 2) صور المنتجات (الخزانات) بنسبة 4:3 على كل المقاسات — بلا قص */
.prod__media { aspect-ratio: 4 / 3; }
.prod__media img { object-fit: contain; padding: 6px; }
@media (max-width: 1120px) and (min-width: 721px) {
  .prod__media { aspect-ratio: 4 / 3; }
}

/* 3) توسيط عناوين: آراء العملاء · المورّدون · العملاء */
#testimonials .section-head,
#partners .section-head,
#clients .section-head {
  text-align: center;
  margin-inline: auto;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#testimonials .section-head .lede,
#partners .section-head .lede,
#clients .section-head .lede { margin-inline: auto; }
#testimonials .section-head .kicker,
#partners .section-head .kicker,
#clients .section-head .kicker { justify-content: center; }


/* --- Map block: address bar under the iframe ------------------------------ */
.map { position: relative; }
.map iframe { display: block; width: 100%; }
.map__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: #fff;
  border-block-start: 1px solid var(--line-soft);
}
.map__addr {
  font-size: .92rem;
  color: var(--ink-soft);
  line-height: 1.6;
}
@media (max-width: 640px) {
  .map__bar { padding: 12px 14px; }
  .map__addr { font-size: .84rem; }
  .map__bar .btn { width: 100%; justify-content: center; }
}