/* =========================================================================
   Saour — homepage extension sections (Testimonials · Contact · Footer)
   RTL, Thmanyah, brand: leaf #4FC27E · blush #FF5777 · sun #FFC247 · ink #131416
   Motion: scroll-reveal (IntersectionObserver) + vertical marquee + hover.
   ========================================================================= */

.sx { --leaf:#4FC27E; --blush:#FF5777; --sun:#FFC247; --ink:#131416;
  --paper:#F1F6F6; --line:rgba(19,20,22,0.08);
  font-family: var(--font-text, system-ui); direction: rtl; }

.sx-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 28px; }

/* ---- scroll reveal -------------------------------------------------------*/
.reveal { opacity: 0; transform: translateY(28px); transition:
  opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay:.06s } .reveal.d2{ transition-delay:.12s }
.reveal.d3 { transition-delay:.18s } .reveal.d4{ transition-delay:.24s }

/* ---- section shell -------------------------------------------------------*/
.sx-section { position: relative; padding: 96px 0; background:
  linear-gradient(160deg,#E6EFEE 0%, #E2E9DF 100%); overflow: hidden; }
.sx-eyebrow { display:inline-block; padding:6px 16px; border:1px solid var(--line);
  border-radius:999px; background:rgba(255,255,255,.6); backdrop-filter:blur(6px);
  font-family:var(--font-display); font-weight:900; font-size:13px; color:var(--ink);
  letter-spacing:.2px; }
.sx-h2 { font-family:var(--font-display); font-weight:900; color:var(--ink);
  font-size:clamp(30px,4vw,46px); line-height:1.08; letter-spacing:-.5px; margin:14px 0 10px; }
.sx-sub { font-family:var(--font-text); font-size:15px; color:rgba(19,20,22,.55);
  max-width:520px; }
.sx-head-center { display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px; }

/* =========================================================================
   TESTIMONIALS — 3 vertical infinite columns
   ========================================================================= */
.tst-cols { margin-top:54px; display:flex; gap:22px; justify-content:center;
  max-height:680px; overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent); }
.tst-col { flex:1; max-width:360px; min-width:0; }
.tst-track { display:flex; flex-direction:column; gap:18px; animation:tst-scroll var(--dur,34s) linear infinite; will-change:transform; }
.tst-col:hover .tst-track { animation-play-state:paused; }
@keyframes tst-scroll { from{ transform:translateY(0) } to{ transform:translateY(-50%) } }

.tst-card { background:rgba(255,255,255,0.55);
  backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,0.6); border-radius:22px;
  padding:24px 22px;
  box-shadow:0 8px 32px -8px rgba(20,40,40,.12), inset 0 1px 0 rgba(255,255,255,0.8), inset 0 -1px 0 rgba(20,40,40,.04);
  transition:transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s; }
.tst-card:hover { transform:translateY(-4px); box-shadow:0 22px 50px -16px rgba(20,40,40,.18), inset 0 1px 0 rgba(255,255,255,0.9); }
.tst-quote { font-family:var(--font-text); font-size:15px; line-height:1.7; color:#2a2d2e; }
.tst-who { display:flex; align-items:center; gap:12px; margin-top:18px; }
.tst-av { width:46px; height:46px; border-radius:50%; object-fit:cover;
  border:2px solid rgba(79,194,126,.35); background:#eef4f1; flex-shrink:0; }
.tst-name { font-family:var(--font-display); font-weight:900; font-size:15px; color:var(--ink); }
.tst-role { font-family:var(--font-text); font-size:12.5px; color:rgba(19,20,22,.5); margin-top:1px; }
.tst-star { color:var(--sun); font-size:13px; letter-spacing:1px; margin-top:10px; }

@media (max-width:1000px){ .tst-col.col3{ display:none } }
@media (max-width:680px){ .tst-col.col2{ display:none } .sx-section{ padding:72px 0 } }

/* =========================================================================
   CONTACT — write/call row + (SNA lookup + map) | form
   ========================================================================= */
.ct-top { text-align:center; }
.ct-rows { margin-top:42px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.ct-row2 { display:grid; grid-template-columns:1fr 1fr; }
.ct-chan { display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:26px 28px; }
.ct-chan + .ct-chan { border-right:1px solid var(--line); }
.ct-chan small { font-family:var(--font-text); font-size:13px; color:rgba(19,20,22,.5); display:block; }
.ct-chan b { font-family:var(--font-display); font-weight:900; font-size:19px; color:var(--ink); }
.ct-chan .ct-ic { width:46px; height:46px; border-radius:12px; background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:transform .25s cubic-bezier(.22,1,.36,1), background .25s; }
.ct-chan:hover .ct-ic { transform:translateY(-3px) rotate(-6deg); background:var(--leaf); }

.ct-grid { margin-top:6px; display:grid; grid-template-columns:1fr 1fr; column-gap:52px; align-items:stretch; }
.ct-left { padding:40px 0; display:flex; flex-direction:column; }
.ct-right { padding:40px 44px 40px 36px; border-right:1px solid var(--line); }
.ct-where { font-family:var(--font-display); font-weight:900; font-size:22px; color:var(--ink); margin-bottom:16px; }

/* SNA lookup */
.sna { margin-bottom:14px; }
.sna-row { display:flex; gap:8px; }
.sna-input { flex:1; height:50px; border:1px solid var(--line); border-radius:14px;
  padding:0 16px; font-family:var(--font-text); font-size:14px; background:#fff; outline:none;
  transition:border-color .2s, box-shadow .2s; }
.sna-input:focus { border-color:var(--leaf); box-shadow:0 0 0 3px rgba(79,194,126,.15); }
.sna-btn { height:50px; padding:0 20px; border:none; border-radius:14px; background:var(--ink);
  color:#fff; font-family:var(--font-display); font-weight:900; font-size:14px; cursor:pointer;
  white-space:nowrap; transition:transform .18s, background .2s; }
.sna-btn:hover { background:var(--leaf); transform:translateY(-1px); }
.sna-btn:active { transform:translateY(0) scale(.98); }
.sna-help { font-size:12px; color:rgba(19,20,22,.45); margin:8px 2px 0; font-family:var(--font-text); }
.sna-status { margin-top:10px; font-size:13px; font-family:var(--font-display); font-weight:900;
  border-radius:12px; padding:10px 14px; display:none; }
.sna-status.show { display:block; }
.sna-status.info { background:rgba(79,194,126,.10); color:#2f7d54; }
.sna-status.success { background:rgba(79,194,126,.14); color:#268a52; }
.sna-status.error { background:rgba(255,87,119,.12); color:#d23a57; }

.ct-map-wrap { border:1px solid var(--line); border-radius:18px; overflow:hidden;
  box-shadow:0 14px 40px -18px rgba(20,40,40,.25); flex:1; min-height:360px; display:flex; }
#saourMap { flex:1; height:100%; width:100%; min-height:360px; background:#e9eee9; }
.saour-map-pin { background:none; border:none; }

/* "locate me" map control */
.saour-locate { width:42px; height:42px; border-radius:12px; border:1px solid var(--line);
  background:#fff; color:var(--ink); cursor:pointer; display:flex; align-items:center;
  justify-content:center; box-shadow:0 4px 14px rgba(20,40,40,.22); margin:12px;
  transition:transform .18s, background .2s, color .2s; }
.saour-locate:hover { background:var(--leaf); color:#fff; transform:translateY(-2px); }
.saour-locate:active { transform:translateY(0) scale(.96); }
.saour-locate.loading svg { animation:saour-spin 1s linear infinite; }
@keyframes saour-spin { to { transform:rotate(360deg); } }

/* form */
.cf-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cf-field { margin-bottom:16px; }
.cf-label { display:block; font-family:var(--font-display); font-weight:900; font-size:13px;
  color:var(--ink); margin-bottom:7px; }
.cf-input, .cf-textarea { width:100%; border:1px solid var(--line); border-radius:14px;
  background:#fff; padding:13px 16px; font-family:var(--font-text); font-size:14px; color:var(--ink);
  outline:none; box-sizing:border-box; transition:border-color .2s, box-shadow .2s; }
.cf-input:focus, .cf-textarea:focus { border-color:var(--leaf); box-shadow:0 0 0 3px rgba(79,194,126,.15); }
.cf-textarea { min-height:120px; resize:vertical; }
.cf-consent { display:flex; gap:10px; align-items:flex-start; font-family:var(--font-text);
  font-size:12.5px; color:rgba(19,20,22,.6); line-height:1.55; margin:6px 0 18px; }
.cf-consent input { margin-top:3px; accent-color:var(--leaf); width:16px; height:16px; }
.cf-consent a { color:var(--blush); text-decoration:underline; }
.cf-submit { width:100%; height:54px; border:none; border-radius:16px; background:var(--ink);
  color:#fff; font-family:var(--font-display); font-weight:900; font-size:17px; cursor:pointer;
  transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .25s, background .25s; }
.cf-submit:hover { transform:translateY(-2px); background:var(--leaf);
  box-shadow:0 16px 36px -12px rgba(79,194,126,.5); }
.cf-submit:disabled { opacity:.55; cursor:default; transform:none; box-shadow:none; }
.cf-note { margin-top:12px; text-align:center; font-family:var(--font-display); font-weight:900;
  font-size:14px; min-height:20px; }
.cf-note.ok { color:#268a52 } .cf-note.err{ color:#d23a57 }

@media (max-width:860px){
  .ct-grid, .ct-row2 { grid-template-columns:1fr; }
  .ct-right { border-right:none; border-top:1px solid var(--line); padding:32px 0; }
  .ct-left { padding:32px 0; }
  .ct-chan + .ct-chan { border-right:none; border-top:1px solid var(--line); }
  .cf-grid2 { grid-template-columns:1fr; }
}

/* =========================================================================
   FOOTER (adapted from the supplied @efferd footer-14)
   ========================================================================= */
.ft { position:relative; background:var(--ink); color:#e9edec; border-top:1px solid rgba(255,255,255,.06);
  font-family:var(--font-text); }
.ft.light { background:#F1F6F6; color:#1c1f20; }
.ft-inner { max-width:1180px; margin:0 auto; padding:64px 28px; }
.ft-grid { display:grid; gap:46px; grid-template-columns:repeat(4,1fr); }
.ft h2 { font-family:var(--font-display); font-weight:900; font-size:28px; letter-spacing:-.5px;
  margin-bottom:14px; color:inherit; }
.ft h3 { font-family:var(--font-display); font-weight:900; font-size:16px; margin-bottom:16px; color:inherit; }
.ft p.muted { color:rgba(233,237,236,.6); font-size:14px; line-height:1.7; margin-bottom:18px; }
.ft.light p.muted { color:rgba(28,31,32,.6); }
.ft-news { position:relative; }
.ft-news input { width:100%; height:46px; border-radius:999px; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05); color:inherit; padding:0 56px 0 18px; outline:none; font-family:var(--font-text);
  font-size:14px; transition:border-color .2s, box-shadow .2s; box-sizing:border-box; }
.ft.light .ft-news input { border-color:var(--line); background:#fff; }
.ft-news input:focus { border-color:var(--leaf); box-shadow:0 0 0 3px rgba(79,194,126,.18); }
.ft-news button { position:absolute; left:5px; top:5px; width:36px; height:36px; border-radius:50%;
  border:none; background:var(--leaf); color:#fff; cursor:pointer; display:flex; align-items:center;
  justify-content:center; transition:transform .2s; }
.ft-news button:hover { transform:scale(1.08); }
.ft-glow { position:absolute; left:-10px; top:-6px; width:96px; height:96px; border-radius:50%;
  background:rgba(79,194,126,.18); filter:blur(34px); pointer-events:none; }
.ft-links { display:flex; flex-direction:column; gap:10px; }
.ft-links a, .ft-legal a { color:inherit; opacity:.72; font-size:14px; text-decoration:none;
  transition:opacity .2s, color .2s; width:fit-content; }
.ft-links a:hover, .ft-legal a:hover { opacity:1; color:var(--leaf); }
.ft-addr { font-style:normal; line-height:1.9; font-size:14px; opacity:.78; }
.ft-soc { display:flex; gap:10px; margin-bottom:22px; }
.ft-soc a { width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center; color:inherit;
  transition:transform .2s, background .2s, color .2s, border-color .2s; }
.ft.light .ft-soc a { border-color:var(--line); }
.ft-soc a:hover { transform:translateY(-3px); background:var(--leaf); color:#fff; border-color:var(--leaf); }
.ft-toggle { display:flex; align-items:center; gap:10px; color:inherit; }
.ft-switch { position:relative; width:46px; height:26px; border-radius:999px; border:none; cursor:pointer;
  background:rgba(255,255,255,.18); transition:background .25s; }
.ft.light .ft-switch { background:rgba(0,0,0,.12); }
.ft-switch i { position:absolute; top:3px; right:3px; width:20px; height:20px; border-radius:50%;
  background:#fff; transition:transform .25s cubic-bezier(.22,1,.36,1); }
.ft-switch.on i { transform:translateX(-20px); }
.ft-bar { margin-top:48px; padding-top:26px; border-top:1px solid rgba(255,255,255,.08);
  display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap; }
.ft.light .ft-bar { border-top-color:var(--line); }
.ft-copy { font-size:13.5px; opacity:.62; }
.ft-brand-mark { font-family:var(--font-display); font-weight:900; color:var(--leaf); }
.ft-legal { display:flex; gap:18px; font-size:13.5px; }
@media (max-width:980px){ .ft-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .ft-grid{ grid-template-columns:1fr } .ft-bar{ flex-direction:column; align-items:flex-start } }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1!important; transform:none!important }
  .tst-track{ animation:none!important }
}

/* =========================================================================
   TYPE SPLIT — content stays Serif Text; UI "chrome" uses Serif Display.
   (Weight is forced to Black 900 globally in colors_and_type.css.)
   ========================================================================= */
.sx-eyebrow, .ct-chan small,
.sna-input, .sna-btn, .sna-help, .sna-status,
.cf-label, .cf-input, .cf-textarea, .cf-consent, .cf-submit, .cf-note,
.tst-role,
.ft-news input, .ft-links a, .ft-legal a, .ft-copy {
  font-family: var(--font-chrome);
}