/* =========================================================
   On Set — site layer: applies the design system (ds.css) to the live site.
   Loaded last; each section is rebuilt here step by step.
   ========================================================= */
:root { --y: var(--yellow); --y-2: #d9cd00; }
body { font-family: var(--f-ar); }

/* ---------- STEP 1 · loader ---------- */
.loader { gap: 22px; background: #000; }
.loader__mark { width: 132px; height: auto; opacity: 0; animation: loaderIn 1s var(--ease) .1s forwards; }
.loader__word { font-family: var(--f-display); font-size: 28px; opacity: 0; animation: loaderIn 1s var(--ease) .35s forwards; }
.loader__line { width: 180px; height: 2px; background: rgba(255,255,255,.12); }
.loader__line span { background: var(--accent); }
.loader__en { font-family: var(--f-lat); font-size: 9px; letter-spacing: .5em; color: var(--text-3); }
@keyframes loaderIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- STEP 1 · header ---------- */
.nav { padding: 18px var(--gutter); gap: 32px; align-items: center; }
.nav.is-scrolled { background: rgba(0,0,0,.72); border-bottom: 1px solid var(--line); padding-block: 10px; }
.nav__brand img { height: 40px; }
.nav__links { gap: 30px; }
.nav__links a { font-size: 14.5px; font-weight: 500; color: var(--text-2); }
.nav__links a::after { height: 2px; background: var(--accent); }
.nav__actions { display: flex; align-items: center; gap: 10px; }
.nav__wa { width: 44px; height: 44px; background: transparent; }
.nav__wa .ico { font-size: 21px; }
.nav .nav__cta { height: 44px; padding: 0 24px; border: 0; border-radius: 0; font-size: 14.5px; }
.nav .nav__cta:hover { background: #fff; color: #000; }
.nav__burger { margin-inline-start: 0; }

/* ---------- STEP 1 · hero ---------- */
.hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; min-height: 100svh; padding: 0 var(--gutter) clamp(104px, 13vh, 132px); }
/* a soft shade on the text side only, so the stage stays clean */
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(270deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.25) 38%, transparent 60%), linear-gradient(0deg, rgba(0,0,0,.55), transparent 45%); }
.hero__content { max-width: 640px; }
.hero__kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 var(--s-5); color: var(--text-2); }
.hero__dot { width: 8px; height: 8px; background: var(--accent); box-shadow: 0 0 14px var(--accent); }
.hero__title { display: grid; margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(72px, 10.5vw, 168px); line-height: 1.02; text-shadow: 0 12px 60px rgba(0,0,0,.6); }
.hero__title .hl { margin-inline-start: .5em; }
.hero__lead { max-width: 34ch; margin: var(--s-5) 0 var(--s-6); font-size: var(--t-lead); font-weight: 500; line-height: 1.75; color: var(--text-2); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__actions .btn { border-radius: 0; height: 56px; padding: 0 30px; }
.hero__actions .btn:hover { transform: none; }
.hero__actions .btn--ghost { background: rgba(0,0,0,.25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hero__specs { align-self: flex-start; width: 100%; margin: clamp(40px, 7vh, 72px) 0 0; padding-top: var(--s-5); border-top: 1px solid var(--line-2); max-width: 640px; }
.hero__specs .spec { margin: 0; flex: 1; }
.hero__specs dd { margin: 0; }
.hero__specs .spec__value { font-weight: 400; font-size: clamp(26px, 2.4vw, 34px); color: var(--text); }
.hero__specs .spec__label { font-weight: 500; white-space: nowrap; }
.hero__scroll { position: absolute; left: var(--gutter); bottom: clamp(48px, 9vh, 96px); display: grid; justify-items: center; gap: 12px; color: var(--text-3); text-decoration: none; }
.hero__scroll .t-label { writing-mode: vertical-rl; letter-spacing: .4em; }
.hero__scroll i { width: 1px; height: 54px; background: linear-gradient(var(--accent), transparent); transform-origin: top; animation: drip 2s var(--ease) infinite; }

/* ---------- STEP 1 · scene tool bar (icon buttons) ---------- */
.chips.tools { left: var(--gutter); bottom: 24px; gap: 6px; padding: 6px; background: rgba(0,0,0,.45); border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.tools .tool { position: relative; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border: 1px solid transparent; border-radius: 0; background: transparent; color: var(--text-2); cursor: pointer; transition: color .3s, background .3s, border-color .3s; }
.tools .tool i { width: auto; height: auto; border: 0; border-radius: 0; background: none; box-shadow: none; display: grid; }
.tools .tool .ico { font-size: 21px; }
.tools .tool:hover { color: var(--text); border-color: var(--line-2); }
.tools .tool.is-on { color: var(--text); background: rgba(255,242,0,.1); border-color: rgba(255,242,0,.45); }
.tools .tool:not(.is-on) .ico .a { stroke: var(--text-3); }
.tools .tool:not(.is-on) .ico .a.f { fill: var(--text-3); }
.tools .tool--action { background: var(--accent); color: #000; }
.tools .tool--action .ico .a, .tools .tool--action:not(.is-on) .ico .a { stroke: #000; }
.tools .tool--action:hover { background: #fff; color: #000; }
.tool__tip { position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translate(-50%, 4px); padding: 6px 10px; background: #fff; color: #000; font-size: 12px; font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.tool:hover .tool__tip, .tool:focus-visible .tool__tip { opacity: 1; transform: translate(-50%, 0); }
.badge[hidden] { display: none !important; }

@media (max-width: 1200px) { .hero__scroll { display: none; } }
@media (max-width: 960px) {
  .nav__cta, .nav__wa { display: none; }
}
@media (max-width: 720px) {
  .nav { padding: 14px 16px; }
  .nav__brand img { height: 34px; }
  .hero { padding: 0 16px 108px; }
  .hero::before { background: linear-gradient(0deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.45) 45%, transparent 72%); }
  .hero__title { font-size: clamp(64px, 19vw, 96px); }
  .hero__title .hl { margin-inline-start: .3em; }
  .hero__lead { margin: var(--s-4) 0 var(--s-5); font-size: 17px; }
  .hero__actions .btn { flex: 1 1 auto; height: 52px; padding: 0 18px; }
  .hero__specs { margin-top: var(--s-6); padding-top: var(--s-4); }
  .hero__specs .spec { padding-inline: var(--s-3); }
  .hero__specs .spec__value { font-size: 24px; }
  .hero__specs .spec__label { font-size: 11px; }
  .hero__scroll, .hero__city { display: none; }
  .hero__kicker { letter-spacing: .24em; }
  .chips.tools { left: 0; right: 0; width: max-content; margin-inline: auto; bottom: 14px; overflow: visible; }
  .tools .tool { width: 42px; height: 42px; }
  .tool__tip { display: none; }
}

/* ---------- STEP 2 · about (نضبّط لكم الميدان) ---------- */
.about .about__inner { max-width: 600px; }
.about::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(270deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.4) 40%, transparent 62%); }
@media (max-width: 1100px) and (min-width: 721px) { .about .about__inner { padding: var(--s-6); background: rgba(0,0,0,.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line); } }
.about__head { padding-top: var(--s-8); margin-bottom: var(--s-5); }
.about__head .shead__num { left: -.06em; top: 0; }
.about__head .shead__eyebrow { color: var(--text-2); }
.about__head .shead__title { margin-bottom: var(--s-2); text-shadow: 0 10px 40px rgba(0,0,0,.6); }
.about__sub { margin: 0; font-size: var(--t-h3); font-weight: 700; color: var(--text); }
.about__body { margin: 0 0 var(--s-6); padding-inline-start: var(--s-5); border-inline-start: 2px solid var(--accent); font-size: 17px; line-height: 1.9; color: var(--text-2); max-width: 52ch; }
/* infographic: three linked steps */
.about__steps { list-style: none; margin: 0 0 var(--s-6); padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); position: relative; }
.about__steps::before { content: ""; position: absolute; top: 27px; inset-inline: 28px calc(33.333% - 28px); height: 1px; background: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 12px); opacity: .7; }
.about__steps li { position: relative; display: grid; gap: 4px; padding-inline-end: var(--s-4); }
.about__steps li > i { position: relative; z-index: 1; width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: var(--s-3); background: #0b0b0b; border: 1px solid var(--line-2); border-radius: var(--r-s); }
.about__steps li > i .ico { font-size: 26px; }
.about__steps .t-num { font-size: 11px; color: var(--accent); letter-spacing: .2em; justify-self: start; }
.about__steps b { font-size: 17px; font-weight: 700; color: var(--text); line-height: 1.5; }
.about__steps small { font-size: 13.5px; color: var(--text-2); line-height: 1.6; }
/* photo in the N-corner frame */
.about__photo { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-n); border: 1px solid var(--line-2); }
.about__photo img { display: block; width: 100%; aspect-ratio: 21/9; object-fit: cover; transition: transform 1.2s var(--ease); }
.about__photo:hover img { transform: scale(1.04); }
.about__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.7), transparent 55%); pointer-events: none; }
.about__photo figcaption { position: absolute; z-index: 1; bottom: 14px; inset-inline-end: 18px; display: flex; align-items: center; gap: 10px; color: var(--text); direction: ltr; }
.about__photo figcaption span { width: 8px; height: 8px; background: var(--accent); }
@media (max-width: 720px) {
  .about__head { padding-top: var(--s-6); }
  .about__head .shead__num { font-size: 120px; top: -8px; }
  .about__steps { grid-template-columns: 1fr; gap: var(--s-4); }
  .about__steps::before { top: 28px; bottom: 28px; inset-inline: 27px auto; width: 1px; height: auto; background: repeating-linear-gradient(180deg, var(--accent) 0 6px, transparent 6px 12px); }
  .about__steps li { grid-template-columns: 56px 1fr; column-gap: var(--s-4); row-gap: 0; align-items: center; padding: 0; }
  .about__steps li > i { grid-row: span 3; margin: 0; }
  .about__photo img { aspect-ratio: 16/9; }
  .about__photo figcaption { white-space: nowrap; letter-spacing: .22em; font-size: 9px; inset-inline-end: 14px; bottom: 12px; }
}

/* ---------- STEP 3 · why (وش يميز شغلنا) ---------- */
.why .why__inner { max-width: 620px; }
.why::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.42) 42%, transparent 64%); }
.why__head { padding-top: var(--s-8); margin-bottom: var(--s-5); }
.why__head .shead__num { left: -.06em; top: 0; }
.why__head .shead__eyebrow { color: var(--text-2); }
.why__head .shead__title { margin: 0; text-shadow: 0 10px 40px rgba(0,0,0,.6); }
.why__lead { display: flex; align-items: center; gap: var(--s-5); margin-bottom: var(--s-5); }
.why__dial { position: relative; flex: none; width: 116px; height: 116px; }
.why__dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.why__dial circle { fill: none; stroke-width: 3; }
.why__track { stroke: rgba(255,255,255,.12); }
.why__arc { stroke: var(--accent); stroke-dasharray: 0 100; stroke-linecap: butt; transition: stroke-dasharray 1.6s var(--ease) .2s; filter: drop-shadow(0 0 6px rgba(255,242,0,.5)); }
.why.in .why__arc { stroke-dasharray: 83 100; }
.why__dial p { position: absolute; inset: 0; margin: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; }
.why__dial .t-num { font-size: 34px; color: var(--text); }
.why__dial .t-num b { font-weight: 400; }
.why__dial small { font-size: 12px; color: var(--text-2); margin-top: 4px; }
.why__sub { margin: 0; font-size: var(--t-h3); font-weight: 700; line-height: 1.55; color: var(--text); }
.why__body { margin: 0 0 var(--s-6); padding-inline-start: var(--s-5); border-inline-start: 2px solid var(--accent); font-size: 17px; line-height: 1.9; color: var(--text-2); }
.why__body b { color: var(--text); font-weight: 700; }
.why__pillars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-n); overflow: hidden; }
.why__pillars li { display: grid; grid-template-columns: 44px 1fr; column-gap: var(--s-4); align-items: center; padding: var(--s-5); background: rgba(8,8,8,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .3s; }
.why__pillars li:hover { background: rgba(255,242,0,.06); }
.why__pillars li > i { grid-row: span 2; display: grid; }
.why__pillars li > i .ico { font-size: 34px; }
.why__pillars b { font-size: 16.5px; font-weight: 700; line-height: 1.5; }
.why__pillars small { font-size: 13px; line-height: 1.6; color: var(--text-2); }
@media (max-width: 1100px) and (min-width: 721px) { .why .why__inner { padding: var(--s-6); background: rgba(0,0,0,.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line); } }
@media (max-width: 720px) {
  .why__head { padding-top: var(--s-6); }
  .why__head .shead__num { font-size: 120px; top: -8px; }
  .why__lead { gap: var(--s-4); }
  .why__dial { width: 92px; height: 92px; }
  .why__dial .t-num { font-size: 26px; }
  .why__sub { font-size: 18px; }
  .why__pillars { grid-template-columns: 1fr; }
  .why__pillars li { padding: var(--s-4); }
}

/* ---------- STEP 4 · path (دربنا) ---------- */
.path .path__inner { max-width: 620px; }
.path::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(270deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.42) 42%, transparent 64%); }
.path__head { padding-top: var(--s-8); margin-bottom: var(--s-4); }
.path__head .shead__num { left: -.06em; top: 0; }
.path__head .shead__eyebrow { color: var(--text-2); }
.path__head .shead__title { margin: 0; text-shadow: 0 10px 40px rgba(0,0,0,.6); }
.path__quote { margin: 0 0 var(--s-7); font-size: clamp(21px, 1.9vw, 27px); font-weight: 700; line-height: 1.6; color: var(--text); }
.path__quote::before { content: "”"; display: block; height: .5em; margin-bottom: var(--s-2); font-family: var(--f-lat-body); font-size: 2.4em; line-height: 1; color: var(--accent); }
/* road timeline: an asphalt strip with a dashed centre line, three stops along it */
.path__road { --stop: 56px; list-style: none; margin: 0 0 var(--s-6); padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); position: relative; }
.path__road::before { content: ""; position: absolute; top: calc(var(--stop) / 2 - 7px); inset-inline: 0; height: 14px; background: #1c1c1c; border-block: 1px solid rgba(255,255,255,.14); }
.path__road::after { content: ""; position: absolute; top: calc(var(--stop) / 2 - .5px); inset-inline: 0; height: 1px; background: repeating-linear-gradient(90deg, var(--accent) 0 10px, transparent 10px 20px); transform-origin: right; transform: scaleX(0); transition: transform 1.8s var(--ease) .2s; }
.path.in .path__road::after { transform: scaleX(1); }
.path__road li { position: relative; display: grid; gap: 4px; padding-inline-end: var(--s-4); }
.path__road li > i { position: relative; z-index: 1; width: var(--stop); height: var(--stop); display: grid; place-items: center; margin-bottom: var(--s-3); background: #0b0b0b; border: 1px solid var(--line-2); border-radius: 50%; }
.path__road li > i .ico { font-size: 25px; }
.path__road li:last-child > i { background: var(--accent); border-color: var(--accent); color: #000; box-shadow: 0 0 24px rgba(255,242,0,.35); }
.path__road li:last-child > i .ico .a { stroke: #000; } .path__road li:last-child > i .ico .a.f { fill: #000; }
.path__road .t-num { font-size: 11px; color: var(--accent); letter-spacing: .2em; justify-self: start; }
.path__road b { font-size: 17px; font-weight: 700; line-height: 1.5; }
.path__road small { font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
.path__photo { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-n); border: 1px solid var(--line-2); }
.path__photo img { display: block; width: 100%; aspect-ratio: 21/9; object-fit: cover; object-position: center 60%; transition: transform 1.2s var(--ease); }
.path__photo:hover img { transform: scale(1.04); }
.path__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.7), transparent 55%); pointer-events: none; }
.path__photo figcaption { position: absolute; z-index: 1; bottom: 14px; inset-inline-end: 18px; display: flex; align-items: center; gap: 10px; color: var(--text); direction: ltr; white-space: nowrap; }
.path__photo figcaption span { width: 8px; height: 8px; background: var(--accent); }
@media (max-width: 1100px) and (min-width: 721px) { .path .path__inner { padding: var(--s-6); background: rgba(0,0,0,.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line); } }
@media (max-width: 720px) {
  .path__head { padding-top: var(--s-6); }
  .path__head .shead__num { font-size: 120px; top: -8px; }
  .path__quote { margin-bottom: var(--s-6); font-size: 20px; }
  .path__road { grid-template-columns: 1fr; gap: var(--s-5); }
  .path__road::before { top: 0; bottom: 0; inset-inline: calc(var(--stop) / 2 - 7px) auto; width: 14px; height: auto; border-block: 0; border-inline: 1px solid rgba(255,255,255,.14); }
  .path__road::after { top: 0; bottom: 0; inset-inline: calc(var(--stop) / 2 - .5px) auto; width: 1px; height: auto; background: repeating-linear-gradient(180deg, var(--accent) 0 10px, transparent 10px 20px); transform-origin: top; transform: scaleY(0); }
  .path.in .path__road::after { transform: scaleY(1); }
  .path__road li { grid-template-columns: var(--stop) 1fr; column-gap: var(--s-4); row-gap: 0; align-items: center; padding: 0; }
  .path__road li > i { grid-row: span 3; margin: 0; }
  .path__photo img { aspect-ratio: 16/9; }
  .path__photo figcaption { font-size: 9px; letter-spacing: .22em; }
}

/* ---------- STEP 5 · offer (وش نقدّم لك) ---------- */
.offer::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 40%, rgba(0,0,0,.6) 100%); }
.offer__head { padding-top: var(--s-8); margin-bottom: var(--s-7); max-width: 720px; }
.offer__head .shead__num { left: auto; right: auto; inset-inline-end: 0; top: 0; }
.offer__head .shead__eyebrow { color: var(--text-2); }
.offer__head .shead__title { margin-bottom: var(--s-2); text-shadow: 0 10px 40px rgba(0,0,0,.6); }
.offer__lead { margin: 0; font-size: var(--t-h3); font-weight: 700; line-height: 1.6; color: var(--text); }
.offer .offer__grid { gap: 1px; background: var(--line); border: 1px solid var(--line-2); border-radius: var(--r-n); overflow: hidden; }
.offer .offer__grid article { display: flex; flex-direction: column; min-height: 230px; padding: var(--s-6) var(--s-6) var(--s-7); background: rgba(6,6,6,.74); }
.offer .offer__grid article:hover { background: rgba(22,21,8,.82); }
.offer .offer__grid article::after { height: 3px; background: var(--accent); }
.offer__grid article > header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: auto; padding-bottom: var(--s-6); }
.offer__grid article > header i { display: grid; }
.offer__grid article > header .ico { font-size: 42px; transition: transform .5s var(--ease); }
.offer__grid article:hover > header .ico { transform: translateY(-3px); }
.offer__grid article > header .t-num { font-size: 12px; letter-spacing: .2em; color: var(--text-3); }
.offer__grid article:hover > header .t-num { color: var(--accent); }
.offer .offer__grid h3 { margin: 0 0 var(--s-2); font-size: 20px; font-weight: 700; line-height: 1.5; }
.offer .offer__grid p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--text-2); }
@media (max-width: 720px) {
  .offer__head { padding-top: var(--s-6); margin-bottom: var(--s-6); }
  .offer__head .shead__num { font-size: 120px; top: -8px; }
  .offer__lead { font-size: 18px; }
  .offer .offer__grid article { display: grid; grid-template-columns: 40px 1fr; column-gap: var(--s-4); min-height: 0; padding: var(--s-4) var(--s-5); }
  .offer__grid article > header { grid-row: span 2; padding: 4px 0 0; margin: 0; }
  .offer__grid article > header .t-num { display: none; }
  .offer__grid article > header .ico { font-size: 32px; }
  .offer .offer__grid p { font-size: 14px; }
  .offer .offer__grid h3 { font-size: 18px; }
}

/* ---------- STEP 6 · services (خدماتنا) ---------- */
.svc .sec__bg { opacity: .28; filter: saturate(.6) blur(2px); }
.svc__head { padding-top: var(--s-8); margin-bottom: var(--s-7); max-width: 720px; }
.svc__head .shead__num { left: auto; inset-inline-end: 0; top: 0; }
.svc__head .shead__eyebrow { color: var(--text-2); }
.svc__head .shead__title { margin-bottom: var(--s-2); }
.svc__lead { margin: 0; font-size: var(--t-h3); font-weight: 700; line-height: 1.6; }
.svc__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line-2); border-radius: var(--r-n); overflow: hidden; }
.svc__grid li { position: relative; display: flex; flex-direction: column; min-height: 216px; padding: var(--s-5); background: rgba(6,6,6,.82); transition: background .35s; }
.svc__grid li::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.svc__grid li:hover { background: rgba(22,21,8,.9); }
.svc__grid li:hover::after { transform: scaleX(1); }
.svc__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: auto; padding-bottom: var(--s-4); }
.svc__top .ico { font-size: 40px; transition: transform .5s var(--ease); }
.svc__grid li:hover .svc__top .ico { transform: translateY(-3px); }
.svc__top .t-num { font-size: 12px; letter-spacing: .2em; color: var(--text-3); }
.svc__grid li:hover .t-num { color: var(--accent); }
.svc__grid h3 { margin: 0 0 6px; font-size: 19px; font-weight: 700; line-height: 1.45; }
.svc__grid p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--text-2); }
.svc__grid li > .t-label { margin-top: var(--s-3); font-size: 9px; letter-spacing: .28em; direction: ltr; text-align: right; }
.svc__grid .svc__cta { padding: 0; background: var(--accent); }
.svc__grid .svc__cta:hover { background: #fff; }
.svc__grid .svc__cta::after { content: none; }
.svc__cta a { flex: 1; display: flex; flex-direction: column; padding: var(--s-5) var(--s-5) var(--s-6); color: #000; text-decoration: none; }
.svc__cta .t-label { color: rgba(0,0,0,.55); direction: ltr; text-align: right; }
.svc__cta b { margin-top: auto; font-size: 22px; font-weight: 900; line-height: 1.45; }
.svc__go { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s-4); font-weight: 700; font-size: 15px; }
.svc__go .ico { font-size: 20px; transition: transform .3s var(--ease); }
.svc__cta a:hover .svc__go .ico { transform: translateX(-4px); }
@media (max-width: 1100px) { .svc__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) { .svc__grid { grid-template-columns: repeat(2, 1fr); } .svc__grid .svc__cta { grid-column: 1 / -1; } }
@media (max-width: 720px) {
  .svc__head { padding-top: var(--s-6); margin-bottom: var(--s-6); }
  .svc__head .shead__num { font-size: 120px; top: -8px; }
  .svc__lead { font-size: 18px; }
  .svc__grid { grid-template-columns: 1fr; }
  .svc__grid li { display: grid; grid-template-columns: 40px 1fr; column-gap: var(--s-4); min-height: 0; padding: var(--s-4) var(--s-5); }
  .svc__top { grid-row: span 3; padding: 4px 0 0; margin: 0; }
  .svc__top .t-num { display: none; }
  .svc__top .ico { font-size: 32px; }
  .svc__grid h3 { font-size: 17px; margin: 0; }
  .svc__grid p { font-size: 13.5px; }
  .svc__grid li > .t-label { display: none; }
  .svc__grid .svc__cta { display: flex; padding: 0; }
  .svc__cta b { margin-top: var(--s-3); font-size: 20px; }
}

/* ---------- pages: one section on screen at a time ---------- */
html.paged { scroll-behavior: auto; }
html.paged, html.paged body { height: 100%; overflow: hidden; }
.paged main { position: fixed; inset: 0; z-index: 5; }
.paged main > .sec { position: absolute; inset: 0; min-height: 0; height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  align-items: flex-start; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(18px);
  transition: opacity .45s var(--ease), transform .6s var(--ease), visibility 0s .45s; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }
.paged main > .sec.is-page { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity .7s var(--ease) .25s, transform .9s var(--ease) .25s, visibility 0s; }
.paged main > .sec > .sec__inner { margin-block: auto; }
/* column-flex pages must start at the top, or tall content overflows upward out of reach (auto margins still centre short pages) */
.paged main > .sec:not(.sec--hero), .paged #partners, .paged #contact { justify-content: flex-start; }
.paged main > .sec--hero { align-items: stretch; }
.paged main > .sec--contact { align-items: stretch; }
.paged .sec__bg { position: fixed; }
.paged .sec::-webkit-scrollbar { width: 6px; } .paged .sec::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); }
.paged .scroll-hint, .paged .hero__scroll { display: none; }
.nav__links a.is-active { color: var(--text); }
.drawer a.is-active { color: var(--accent); }

/* side index = page list */
.index button { display: flex; align-items: center; gap: 10px; padding: 3px 0; background: none; border: 0; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; }
.index li { pointer-events: auto; }
.index li.is-active button span { opacity: 1; transform: none; color: var(--text); }

/* pager: previous / page number / next page */
.pager { position: fixed; z-index: 20; right: var(--gutter); bottom: 24px; display: flex; align-items: center; gap: 6px; padding: 6px; background: rgba(0,0,0,.45); border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: opacity .4s; }
.pager__btn { width: 44px; height: 44px; display: grid; place-items: center; background: transparent; color: var(--text); border: 1px solid var(--line-2); cursor: pointer; transition: border-color .3s, opacity .3s; }
.pager__btn:hover { border-color: var(--accent); } .pager__btn:disabled { opacity: .3; cursor: default; }
.pager__btn .ico, .pager__next .ico { font-size: 20px; }
.pager__num { padding: 0 10px; font-size: 11px; letter-spacing: .2em; color: var(--text-3); }
.pager__next { height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 16px 0 14px; background: var(--accent); color: #000; border: 0; cursor: pointer; font-family: var(--f-ar); transition: background .3s; }
.pager__next:hover { background: #fff; }
.pager__next .ico .a { stroke: #000; }
.pager__lbl { font-size: 11px; font-weight: 500; opacity: .6; }
.pager__next b { font-size: 14.5px; font-weight: 700; }
body.garage-on .pager { opacity: 0; pointer-events: none; }
/* keep page content clear of the fixed bars */
.paged main > .sec:not(.sec--hero) { padding-bottom: 110px; }
@media (max-width: 720px) {
  .pager { right: 16px; left: 16px; bottom: 70px; justify-content: space-between; padding: 4px; }
  .pager__btn, .pager__next { height: 40px; } .pager__btn { width: 40px; }
  .pager__lbl { display: none; }
  .paged main > .sec:not(.sec--hero) { padding-bottom: 150px; }
  .paged .hero { padding-bottom: 150px; }
}

/* ---------- STEP 7 · fleet page (configurator layout: van on the left, panel on the right) ---------- */
.paged main > .sec--fleet { min-height: 0; padding-top: 92px; }
.sec--fleet .sec__inner.fleet { max-width: 480px; margin-block: 0 auto; }
.sec--fleet::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(270deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.35) 30%, transparent 46%); }
.fleet__head { padding-top: var(--s-6); margin-bottom: var(--s-4); }
.fleet__head .shead__num { left: -.06em; top: 0; font-size: clamp(110px, 12vw, 190px); }
.fleet__head .shead__eyebrow { color: var(--text-2); }
.fleet__head .shead__title { margin: 0; font-size: clamp(44px, 4.6vw, 70px); }
.fleet__lead { margin: 0; font-size: 16px; font-weight: 500; color: var(--text-2); }
/* van picker: five colour-coded tabs */
.sec--fleet .fleet__tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; margin: 0 0 var(--s-4); background: var(--line); border: 1px solid var(--line-2); }
.sec--fleet .fleet__tab { position: relative; display: grid; justify-items: center; gap: 2px; padding: 10px 4px 9px; border: 0; border-radius: 0; background: rgba(0,0,0,.62); color: var(--text-2); cursor: pointer; transition: background .3s, color .3s; }
.sec--fleet .fleet__tab::before { width: 8px; height: 8px; border-radius: 0; transform: rotate(45deg); }
.sec--fleet .fleet__tab::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--c); transform: scaleX(0); transition: transform .4s var(--ease); }
.sec--fleet .fleet__tab b { font-family: var(--f-display); font-size: 21px; line-height: 1.5; }
.sec--fleet .fleet__tab:hover { color: var(--text); background: rgba(20,20,20,.8); }
.sec--fleet .fleet__tab[aria-selected="true"] { color: var(--text); background: rgba(20,20,20,.9); }
.sec--fleet .fleet__tab[aria-selected="true"]::after { transform: none; }
/* the card */
.sec--fleet .fleet__card { position: relative; padding: var(--s-5); background: rgba(6,6,6,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line-2); border-radius: var(--r-n); }
.sec--fleet .fleet__card::before { content: ""; position: absolute; top: 0; inset-inline: var(--r) 0; height: 3px; background: var(--c); }
.sec--fleet .fleet__kicker { margin: 0; font-size: 9.5px; letter-spacing: .3em; color: var(--c); direction: ltr; text-align: right; }
.sec--fleet .fleet__name { margin: 2px 0 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(44px, 4vw, 60px); line-height: 1.25; }
.fleet__type { margin: 0 0 var(--s-3); font-size: 15px; font-weight: 700; color: var(--c); }
.sec--fleet .fleet__desc { margin: 0 0 var(--s-4); font-size: 15.5px; line-height: 1.8; color: var(--text-2); }
.fleet__acts { display: flex; gap: 8px; margin-bottom: var(--s-4); }
.fleet__acts .btn { flex: 1; height: 50px; padding: 0 14px; border-radius: 0; font-size: 14.5px; }
.fleet__acts .btn[hidden] { display: none; }
.sec--fleet .fleet__lists { max-height: 200px; padding-inline-end: 4px; scrollbar-color: var(--c) transparent; }
.sec--fleet .fleet__lists h4 { display: flex; align-items: center; justify-content: space-between; margin: var(--s-3) 0 var(--s-2); font-size: 13.5px; }
.sec--fleet .fleet__lists h4::before { content: none; }
.sec--fleet .fleet__lists h4 small { font-size: 10px; letter-spacing: .2em; color: var(--c); }
.sec--fleet .fleet__lists ul { columns: auto; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.sec--fleet .fleet__lists li { padding: 4px 10px; font-size: 12.5px; color: var(--text); background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.sec--fleet .fleet__lists li::before { content: none; }
.sec--fleet .fleet__note { font-size: 12.5px; } .sec--fleet .fleet__note b { color: var(--c); }
.sec--fleet .fleet__photo { margin: var(--s-4) 0 0; border: 0; overflow: hidden; border-radius: var(--r-s); }
.sec--fleet .fleet__photo img { aspect-ratio: 16/7; }
.sec--fleet .fleet__photo figcaption { top: 10px; right: 10px; padding: 3px 8px; font-size: 8.5px; color: var(--text); background: rgba(0,0,0,.6); border: 0; direction: ltr; }
/* showroom arrows over the stage (left half), sharp like the rest */
.showroom { left: var(--gutter); width: calc(100% - 480px - var(--gutter) * 3); bottom: 28px; }
.sr-arrow { border-radius: 0; } .sr-arrow--next { box-shadow: none; }
.sr-label small { color: var(--c, var(--accent)); }
.sr-label b { font-family: var(--f-display); }
@media (max-width: 1100px) { .showroom { width: auto; right: calc(480px + var(--gutter) * 2); } }
@media (max-width: 900px) {
  .sec--fleet .sec__inner.fleet { max-width: none; }
  .sec--fleet::before { background: linear-gradient(0deg, rgba(0,0,0,.75), transparent 60%); }
  .sec--fleet .fleet__tabs { margin-bottom: 46svh; }
  .showroom { left: 16px; right: 16px; width: auto; bottom: 16px; }
  body[data-sec="fleet"] .pager { display: none; }
  .showroom .sr-label { visibility: hidden; }
}
@media (max-width: 720px) {
  .paged main > .sec--fleet { padding-top: 76px; }
  .sec--fleet .fleet__tab b { font-size: 17px; }
  .sec--fleet .fleet__card { padding: var(--s-4); }
  .fleet__acts { flex-direction: column; }
}
body[data-sec="fleet"] .chips.tools { opacity: 0; pointer-events: none; }

/* ---------- STEP 12 · partners (شركاؤنا) ---------- */
.partners::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.72) 45%); }
.partners__head { padding-top: var(--s-8); margin-bottom: var(--s-6); max-width: 760px; }
.partners__head .shead__num { left: auto; inset-inline-end: 0; top: 0; }
.partners__head .shead__eyebrow { color: var(--text-2); }
.partners__head .shead__title { margin-bottom: var(--s-2); }
.partners__lead { margin: 0; font-size: var(--t-h3); font-weight: 700; line-height: 1.6; }
.partners__bar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-6); flex-wrap: wrap; margin-bottom: var(--s-5); padding-bottom: var(--s-4); border-bottom: 1px solid var(--line-2); }
.partners__stats { margin: 0; } .partners__stats dd { margin: 0; } .partners__stats .spec__value { font-weight: 400; }
.partners__filter { display: flex; gap: 1px; background: var(--line); border: 1px solid var(--line-2); }
.partners__filter button { height: 44px; padding: 0 18px; border: 0; background: rgba(0,0,0,.55); color: var(--text-2); font-family: var(--f-ar); font-size: 14px; font-weight: 700; cursor: pointer; transition: background .3s, color .3s; }
.partners__filter button:hover { color: var(--text); }
.partners__filter button[aria-selected="true"] { background: var(--accent); color: #000; }
.partners__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line-2); border-radius: var(--r-n); overflow: hidden; }
.partners__grid li { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 0.8; background: rgba(8,8,8,.78); transition: background .35s; }
.partners__grid li[hidden] { display: none; }
.partners__grid li::after { content: ""; position: absolute; inset: auto 0 0 0; height: 2px; background: var(--accent); transform: scaleX(0); transition: transform .4s var(--ease); }
.partners__grid li:hover { background: rgba(26,24,10,.9); }
.partners__grid li:hover::after { transform: none; }
.partners__grid img { width: 72%; height: 72%; object-fit: contain; opacity: .78; transition: opacity .3s, transform .4s var(--ease); }
.partners__grid li:hover img { opacity: 1; transform: scale(1.06); }
.partners.in .partners__grid li { animation: pIn .6s var(--ease) both; animation-delay: calc(min(var(--i), 40) * 18ms); }
@keyframes pIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 1100px) { .partners__grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 720px) {
  .partners__head { padding-top: var(--s-6); }
  .partners__head .shead__num { font-size: 120px; top: -8px; }
  .partners__lead { font-size: 17px; }
  .partners__bar { flex-direction: column; align-items: stretch; gap: var(--s-4); }
  .partners__filter button { flex: 1; padding: 0 8px; font-size: 13px; }
  .partners__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- STEP 13 · where (وين حنّا) ---------- */
.where::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(270deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.5) 45%, rgba(0,0,0,.3) 100%); }
.where__inner { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: var(--s-8); align-items: center; }
.where__head { padding-top: var(--s-8); margin-bottom: var(--s-5); }
.where__head .shead__num { left: -.06em; top: 0; }
.where__head .shead__eyebrow { color: var(--text-2); }
.where__head .shead__title { margin: 0; }
.where__body { margin: 0 0 var(--s-5); padding-inline-start: var(--s-5); border-inline-start: 2px solid var(--accent); font-size: 18px; line-height: 1.9; color: var(--text-2); }
.where__body b { color: var(--text); }
.where__hq { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-5); padding: var(--s-4) var(--s-5); background: rgba(0,0,0,.5); border: 1px solid var(--line-2); border-radius: var(--r-s); }
.where__hq > i { display: grid; } .where__hq .ico { font-size: 34px; }
.where__hq small { display: block; color: var(--text-3); direction: ltr; text-align: right; }
.where__hq b { font-size: 17px; }
.where__dirs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.where__dirs li { display: grid; grid-template-columns: 34px 1fr; column-gap: var(--s-3); padding: var(--s-3) var(--s-4); background: rgba(8,8,8,.72); }
.where__dirs .t-num { grid-row: span 2; align-self: center; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--accent); color: var(--accent); font-size: 12px; }
.where__dirs b { font-size: 15px; } .where__dirs small { font-size: 12.5px; color: var(--text-2); }
.where__map { margin: 0; padding: var(--s-5); background: rgba(0,0,0,.35); border: 1px solid var(--line); border-radius: var(--r-n); }
.where .ksa__land { fill: rgba(255,255,255,.05); stroke: rgba(255,255,255,.5); stroke-width: 1.4; stroke-linejoin: round; }
.where .ksa__label { font-size: 13px; }
.where .ksa__label--hq { font-size: 16px; }
.where .ksa__route { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .85; }
.where.in .ksa__route { animation: routeDraw 1.1s var(--ease) both; animation-delay: calc(.3s + var(--i) * 70ms); }
.where .ksa__stop { opacity: 0; }
.where.in .ksa__stop { animation: stopIn .5s var(--ease) both; animation-delay: calc(.9s + var(--i) * 70ms); }
@keyframes routeDraw { to { stroke-dashoffset: 0; } }
@keyframes stopIn { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 1000px) { .where__inner { grid-template-columns: 1fr; gap: var(--s-6); } }
@media (max-width: 720px) {
  .where__head { padding-top: var(--s-6); }
  .where__head .shead__num { font-size: 120px; top: -8px; }
  .where__body { font-size: 16px; }
  .where__map { padding: var(--s-3); }
}

/* ---------- STEP 14 · contact (راسلنا وازهلها) ---------- */
.contact::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.8) 50%); }
.contact .contact__inner { max-width: 1240px; width: 100%; display: block; margin-inline: auto; }
.contact__head { padding-top: var(--s-7); margin-bottom: var(--s-6); }
.contact__head .shead__num { left: auto; inset-inline-end: 0; top: 0; }
.contact__head .shead__eyebrow { color: var(--text-2); }
.contact__head .shead__title { margin: 0 0 var(--s-2); font-size: clamp(56px, 7vw, 112px); line-height: 1.15; }
.contact__lead { margin: 0; font-size: var(--t-h3); font-weight: 700; color: var(--text-2); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s-5); align-items: start; }
/* project request */
.brief { padding: var(--s-6); background: rgba(8,8,8,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line-2); border-radius: var(--r-n); }
.brief__kicker { margin: 0; color: var(--accent); direction: ltr; text-align: right; }
.brief__title { margin: 2px 0 var(--s-5); font-size: var(--t-h2); font-weight: 900; }
.brief__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.field { display: grid; gap: 6px; margin: 0 0 var(--s-4); padding: 0; border: 0; min-width: 0; }
.field > span, .field legend { font-size: 13px; font-weight: 700; color: var(--text-2); padding: 0; margin-bottom: 6px; }
.field input, .field select, .field textarea { width: 100%; height: 48px; padding: 0 14px; background: rgba(255,255,255,.04); color: var(--text); border: 1px solid var(--line-2); border-radius: 0; font-family: var(--f-ar); font-size: 15px; outline: none; transition: border-color .25s, background .25s; }
.field textarea { height: auto; padding: 12px 14px; resize: vertical; min-height: 92px; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%); background-position: 18px 21px, 12px 21px; background-size: 6px 6px; background-repeat: no-repeat; }
.field select option { background: #111; color: var(--text); }
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); background: rgba(255,242,0,.05); }
.field input[type="date"] { color-scheme: dark; }
.chips-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.pick { position: relative; cursor: pointer; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; font-size: 13px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); transition: border-color .2s, background .2s, color .2s; }
.pick .ico { font-size: 16px; }
.pick:hover span { border-color: var(--text-3); }
.pick input:checked + span { border-color: var(--accent); background: rgba(255,242,0,.12); color: #fff; }
.pick input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.brief__err { margin: 0 0 var(--s-3); color: #ff8a7a; font-size: 13.5px; }
.brief__acts { display: flex; gap: 8px; }
.brief__acts .btn { flex: 1; border-radius: 0; height: 54px; }
.brief__acts .btn--primary .ico .a { stroke: #000; } .brief__acts .btn--primary .ico .a.f { fill: #000; }
/* channels */
.channels { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line-2); border-radius: var(--r-n); overflow: hidden; }
.channel { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); background: rgba(8,8,8,.78); color: var(--text); text-decoration: none; transition: background .3s; }
.channel > i { display: grid; } .channel .ico { font-size: 26px; }
.channel small { display: block; color: var(--text-3); direction: ltr; text-align: right; }
.channel b { font-size: 15px; font-weight: 700; }
.channel:hover { background: rgba(26,24,10,.9); }
.channel--wa { background: var(--accent); color: #000; }
.channel--wa small { color: rgba(0,0,0,.55); } .channel--wa .ico .a { stroke: #000; } .channel--wa .ico .a.f { fill: #000; }
.channel--wa:hover { background: #fff; }
/* fleet card → request shortcut */
.fleet__ask { display: inline-flex; align-items: center; gap: 6px; margin: -6px 0 var(--s-3); color: var(--c); font-weight: 700; font-size: 14px; text-decoration: none; }
.fleet__ask .ico { font-size: 16px; transition: transform .3s var(--ease); } .fleet__ask:hover .ico { transform: translateX(-4px); }
/* footer */
.contact .foot { max-width: 1240px; margin: var(--s-8) auto 0; padding: var(--s-5) 0 var(--s-6); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-3) var(--s-6); color: var(--text-3); }
.foot__logo { height: 34px; width: auto; }
.contact .foot__en { text-align: center; }
.contact .foot__credit { grid-column: 1 / -1; font-size: 10.5px; color: rgba(244,244,242,.35); }
@media (max-width: 1000px) { .contact__grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .contact__head { padding-top: var(--s-6); }
  .contact__head .shead__num { font-size: 120px; top: -8px; }
  .contact__lead { font-size: 17px; }
  .brief { padding: var(--s-4); }
  .brief__row { grid-template-columns: 1fr; gap: 0; }
  .brief__acts { flex-direction: column; }
  .contact .foot { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}