/* ==========================================================================
   AD PHASE — "تيست" service page
   Hirekit-style hero · Aeline-style bento · process rows · 2-column steps.
   Brand palette only (themes.css tokens + the palette literals #1B4A41 / #EEF1EA).
   ========================================================================== */

/* ---------------------------------------------------------------- 1. HERO */
.tst-hero{
  padding: calc(var(--header-h) + 4px) clamp(8px, 1.2vw, 16px) 0;
}
.tst-panel{
  --tp-bg: #0D1712;                    /* site dark background (same as the home hero) */
  --tp-ink: #EEF1EA;
  --tp-soft: #B9C4BB;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--sp-6);
  height: clamp(580px, calc(100svh - var(--header-h) - 16px), 780px);
  grid-template-rows: minmax(0, 1fr);
  padding-inline: clamp(24px, 5vw, 84px);
  border-radius: clamp(28px, 3.2vw, 46px);
  background:
    radial-gradient(60% 55% at 72% 30%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 62%),
    radial-gradient(90% 90% at 50% 0%, rgba(27,74,65,.30), transparent 60%),
    var(--tp-bg);
  border: 1px solid rgba(238,241,234,.09);
  color: var(--tp-ink);
  overflow: hidden;
  isolation: isolate;
}
/* faint square grid — same as the home hero's background */
.tst-panel::before{
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(238,241,234,.085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238,241,234,.085) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(80% 80% at 50% 45%, #000 20%, transparent 85%);
          mask-image: radial-gradient(80% 80% at 50% 45%, #000 20%, transparent 85%);
}
.tst-copy{ align-self: center; padding-block: var(--sp-8); position: relative; z-index: 2; }

.tst-trust{ display: inline-flex; align-items: center; gap: .9rem; margin-bottom: var(--sp-5); font-weight: 600; font-size: 0.95rem; color: var(--tp-ink); }
.tst-avs{ display: inline-flex; }
.tst-avs i{
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font-style: normal; font-weight: 800; font-size: 1.0625rem;
  border: 3px solid var(--tp-bg); margin-inline-end: -14px;
}
.tst-avs i:nth-child(1){ background: var(--brand); color: var(--on-brand); }
.tst-avs i:nth-child(2){ background: #EEF1EA; color: #0D1712; }
.tst-avs i:nth-child(3){ background: #123128; color: var(--brand); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 40%, transparent) inset; }

.tst-copy h1{
  font-size: var(--fs-display);
  line-height: 1.1; letter-spacing: -.01em; margin: 0 0 var(--sp-4); color: var(--tp-ink);
}
.tst-copy h1 .tst-acc{ color: var(--brand); }
.tst-copy .lead{ color: var(--tp-soft); max-width: 52ch; font-size: var(--fs-lead); line-height: 1.8; margin: 0 0 var(--sp-6); }

.tst-ctas{ display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.tst-btn{
  display: inline-flex; align-items: center; gap: .9rem;
  min-height: 62px; padding: .5rem .55rem .5rem 1.7rem; border-radius: 999px;
  font-weight: 700; font-size: 1.0625rem; text-decoration: none; cursor: pointer;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background .3s;
}
.tst-btn--main{ background: var(--brand); color: var(--on-brand); padding-inline-start: 1.7rem; padding-inline-end: .55rem; }
.tst-btn--main .go{
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: #123128; color: var(--brand); transition: transform .3s var(--ease-out);
}
.tst-btn--main .go svg{ width: 18px; height: 18px; }
.tst-btn--main:hover{ transform: translateY(-2px); box-shadow: 0 14px 34px -10px color-mix(in srgb, var(--brand) 55%, transparent); }
.tst-btn--main:hover .go{ transform: translateX(-4px); }
.tst-btn--line{ padding-inline: 1.9rem; color: var(--tp-ink); border: 1.5px solid rgba(238,241,234,.55); background: transparent; }
.tst-btn--line:hover{ background: rgba(238,241,234,.1); border-color: var(--tp-ink); }
.tst-btn:focus-visible{ outline: 3px solid var(--brand); outline-offset: 3px; }

/* scrolling photo columns */
.tst-cols{
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  overflow: hidden; direction: ltr; min-height: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.tst-col{ display: flex; flex-direction: column; animation: tstUp 48s linear infinite; will-change: transform; }
.tst-col.rev{ animation-direction: reverse; animation-duration: 56s; }
.tst-cols:hover .tst-col{ animation-play-state: paused; }
.tst-grp{ display: flex; flex-direction: column; gap: 18px; padding-bottom: 18px; }
@keyframes tstUp{ from{ transform: translateY(0); } to{ transform: translateY(-50%); } }

.tst-card{
  position: relative; border-radius: clamp(24px, 2.6vw, 36px); overflow: hidden;
  background: #07100B; border: 1px solid rgba(238,241,234,.10);
  aspect-ratio: 1 / 1;
}
.tst-card.tall{ aspect-ratio: 4 / 5; }
.tst-card img{ width: 100%; height: 100%; object-fit: contain; display: block; }
.tst-card.cover img{ object-fit: cover; }
.tst-card.art{ background: radial-gradient(80% 60% at 50% 40%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%), #07100B; }
.tst-card.art img{ padding: 8%; }
.tst-chip{
  position: absolute; inset-inline: 14px; bottom: 14px; direction: rtl;
  display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border-radius: 999px;
  background: rgba(13,23,18,.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(238,241,234,.14); color: #EEF1EA; font-size: 0.85rem; font-weight: 600;
}
.tst-chip::before{ content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 10px var(--brand); flex-shrink: 0; }
.tst-chip span{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tst-chip b{ margin-inline-start: auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 18%, transparent); color: var(--brand); font-size: 0.78rem; }

/* ----------------------------------------------------- 2. BENTO (services) */
.tst-bento{
  margin-top: var(--sp-7);
  display: grid; grid-template-columns: 1fr 1.55fr; gap: 10px;
  padding: 10px; border-radius: 34px;
  background: var(--bg-soft); border: 1px solid var(--line);
}
.tst-b{
  position: relative; overflow: hidden; border-radius: 26px;
  background: var(--bg-elevated); border: 1px solid var(--line);
  padding: clamp(22px, 2.4vw, 36px); display: grid; align-content: start; gap: var(--sp-4);
}
.tst-b--tall{ grid-row: span 2; grid-template-rows: auto 1fr; min-height: 720px; }
.tst-b--wide{ grid-template-columns: minmax(0, 1fr) minmax(220px, 44%); align-items: center; gap: var(--sp-5); min-height: 350px; }
.tst-ico{ width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--brand); color: var(--on-brand); }
.tst-ico svg{ width: 22px; height: 22px; }
.tst-b h3{ font-size: var(--fs-card); line-height: 1.15; margin: var(--sp-4) 0 .1em; }
.tst-b p{ color: var(--ink-soft); max-width: 40ch; margin: 0; }
.tst-pill{
  display: inline-flex; align-items: center; gap: .6em; margin-top: var(--sp-4);
  padding: .85em 1.5em; border-radius: 999px; font-weight: 700; font-size: 0.85rem; color: var(--ink);
  background: var(--glass-bg-2); border: 1px solid var(--line-strong); text-decoration: none;
  transition: background .3s, color .3s, border-color .3s;
}
.tst-pill span{ display: inline-block; transition: transform .3s var(--ease-out); }
.tst-pill:hover{ background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.tst-pill:hover span{ transform: translateX(-5px); }

/* floating mini UI cards */
.tst-art{ position: relative; min-height: 270px; align-self: stretch; }
.tst-b--tall .tst-art{ min-height: 340px; }
.tst-mc{
  position: absolute; width: 62%; padding: 14px 15px; border-radius: 16px; font-size: 0.78rem; line-height: 1.5;
  box-shadow: 0 22px 40px -16px rgba(0,0,0,.55);
  transition: transform .6s var(--ease-out);
}
.tst-mc small{ display: block; opacity: .7; font-size: 0.78rem; }
.tst-mc b{ font-weight: 700; }
.tst-mc.d{ background: #123128; color: #EEF1EA; border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent); inset-inline-start: 0; top: 8%; transform: rotate(-6deg); z-index: 1; }
.tst-mc.l{ background: #EEF1EA; color: #0D1712; inset-inline-end: 0; bottom: 6%; transform: rotate(4deg); z-index: 2; }
.tst-b:hover .tst-mc.d{ transform: rotate(-9deg) translate(-6px,-4px); }
.tst-b:hover .tst-mc.l{ transform: rotate(2deg) translate(6px,4px); }
.tst-b--tall .tst-mc{ width: 66%; }
.tst-big{ display: block; font-family: var(--font-display); font-weight: 800; font-size: 2rem; line-height: 1.1; letter-spacing: -.03em; color: var(--brand); margin-top: .2em; direction: ltr; text-align: right; }
.tst-row{ display: flex; align-items: center; justify-content: space-between; gap: .6em; padding: .45em 0; border-top: 1px solid rgba(13,23,18,.1); }
.tst-row:first-of-type{ border-top: 0; }
.tst-ok{ width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; background: #123128; color: var(--brand); flex-shrink: 0; }
.tst-ok svg{ width: 10px; height: 10px; }
.tst-meter{ height: 7px; border-radius: 99px; background: rgba(13,23,18,.12); overflow: hidden; margin-top: .55em; }
.tst-meter i{ display: block; height: 100%; width: var(--v); background: #1B4A41; border-radius: inherit; }
.tst-tags{ display: flex; flex-wrap: wrap; gap: .35em; margin-top: .6em; }
.tst-tags span{ padding: .25em .7em; border-radius: 999px; font-size: 0.78rem; font-weight: 700; background: color-mix(in srgb, var(--brand) 18%, transparent); color: #EEF1EA; border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent); }
.tst-mc.l .tst-tags span{ background: rgba(27,74,65,.1); color: #1B4A41; border-color: rgba(27,74,65,.25); }
.tst-mini-bars{ display: flex; align-items: flex-end; gap: 5px; height: 54px; margin-top: .6em; }
.tst-mini-bars i{ flex: 1; border-radius: 5px 5px 2px 2px; background: rgba(27,74,65,.25); height: var(--h); }
.tst-mini-bars i:last-child{ background: #1B4A41; }
.tst-sw{ display: flex; gap: 6px; margin-top: .7em; }
.tst-sw i{ flex: 1; height: 46px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(13,23,18,.12); }
.tst-q{ background: rgba(238,241,234,.12); border-radius: 10px; padding: .55em .75em; margin-top: .5em; }

/* ------------------------------------------- 4. TWO-COLUMN PROCESS (tight) */
.tst-sec--tight{ padding-block: var(--sp-7); }
.tst-proc{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-8); margin-top: var(--sp-6); }
.tst-proc .process-list{ position: relative; }
.tst-proc .process-step{ grid-template-columns: 84px 1fr; gap: var(--sp-4); padding-block: var(--sp-4); }
.tst-proc .process-step .n{ font-size: 1.9rem; }
.tst-proc .process-step h3{ font-size: 1.125rem; margin-bottom: .3em; }
.tst-proc .process-step p{ font-size: 0.95rem; line-height: 1.75; max-width: 46ch; }
.tst-proc .process-list:last-child .process-step:first-child{ border-top: 1px solid var(--line); }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1000px){
  .tst-panel{ grid-template-columns: 1fr; grid-template-rows: auto 440px; height: auto; padding-bottom: 0; }
  .tst-copy{ padding-block: var(--sp-7) var(--sp-5); }
  .tst-cols{ height: 440px; margin-inline: calc(-1 * clamp(24px, 5vw, 84px)); padding-inline: clamp(24px, 5vw, 84px); }
  .tst-bento{ grid-template-columns: 1fr; }
  .tst-b--tall{ grid-row: auto; min-height: 0; }
  .tst-proc{ grid-template-columns: 1fr; }
  .tst-proc .process-list:last-child .process-step:first-child{ border-top: 0; }
}
@media (max-width: 640px){
  .tst-chip{ inset-inline: 8px; bottom: 8px; padding: .45rem .7rem; font-size: 0.78rem; gap: .45rem; }
  .tst-chip::before{ width: 8px; height: 8px; }
  .tst-chip b{ display: none; }
  .tst-b--wide{ grid-template-columns: 1fr; }
  .tst-art, .tst-b--tall .tst-art{ min-height: 280px; }
  .tst-btn{ min-height: 56px; }
  .tst-proc .process-step{ grid-template-columns: 56px 1fr; }
  .tst-proc .process-step .n{ font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce){
  .tst-col{ animation: none; }
  .tst-mc, .tst-btn, .tst-pill span{ transition: none; }
}

/* ------------------------------------------ 5. TESTIMONIALS — looping slider */
.tst-loop{
  margin-top: var(--sp-5); overflow: hidden; direction: ltr;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.tst-loop__row{ display: flex; width: max-content; animation: sdLoop 55s linear infinite; will-change: transform; }
.tst-loop:hover .tst-loop__row, .tst-loop:focus-within .tst-loop__row{ animation-play-state: paused; }
.tst-loop__grp{ display: flex; gap: var(--sp-4); padding-inline-end: var(--sp-4); }
.tst-loop .sd-quote{
  flex: 0 0 clamp(300px, 36vw, 560px); margin: 0; direction: rtl;
  padding: clamp(22px, 2.4vw, 40px); display: flex; flex-direction: column; scroll-snap-align: none;
}
.tst-loop .sd-quote p{ font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); line-height: 1.85; }
.tst-loop .sd-quote p::before{ font-size: 3rem; margin-bottom: var(--sp-3); }
.tst-loop .sd-quote footer{ margin-top: auto; padding-top: var(--sp-5); }
@media (prefers-reduced-motion: reduce){
  .tst-loop{ overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .tst-loop__row{ animation: none; }
  .tst-loop__grp[aria-hidden="true"]{ display: none; }
}

/* ------------------------------------------------ WIDE PAGE · tighter rhythm */
.tst-wide{
  --container: 100%;                             /* full width … */
  --gutter: clamp(10px, 1.2vw, 18px);            /* … with a very small side padding */
}
.tst-wide .sd-sec{ padding-block: clamp(1.75rem, 3.2vw, 3rem); }
.tst-wide .tst-sec--tight{ padding-block: clamp(1.25rem, 2.4vw, 2.25rem); }
.tst-wide .section-pad{ padding-block: clamp(1.75rem, 3.2vw, 3rem); }
.tst-wide .sd-sec[style*="padding-top:0"]{ padding-top: 0; }
.tst-wide .sd-cta{ padding-block: clamp(3rem, 6vw, 5rem); }
.tst-wide .sd-block{ padding-block: var(--sp-5); gap: var(--sp-6); }
.tst-wide .sd-head p{ margin-top: var(--sp-3); }
.tst-wide .tst-bento{ margin-top: var(--sp-5); }
.tst-wide .tst-proc{ margin-top: var(--sp-4); }
.tst-wide .sd-related{ margin-top: var(--sp-5); }
.tst-wide .site-footer{ padding-block: var(--sp-7) var(--sp-5); }
.tst-wide .tst-panel{ padding-inline: clamp(20px, 3.2vw, 56px); }
.tst-wide .sd-head{ max-width: 980px; }
.tst-wide .section-pad > .container{ max-width: none !important; }   /* FAQ was capped at 900px */
@media (max-width: 1000px){
  .tst-wide .tst-cols{ margin-inline: calc(-1 * clamp(20px, 3.2vw, 56px)); padding-inline: clamp(20px, 3.2vw, 56px); }
}