/* ─────────── WENIX KSA landing — shared stylesheet ───────────
   Serves both the Arabic (default, RTL) and English (/en, LTR) pages
   from one file. Every directional rule uses CSS logical properties
   (margin-inline, padding-inline, inset-inline, text-align: start/end)
   instead of left/right, so flipping <html dir> is the only thing that
   needs to change between the two pages — the layout mirrors itself.

   Palette matches the live wenix.co design tokens (index.html's :root
   custom properties, read directly from the built site). Deliberately
   a 3-color system — white, near-black ink, and the one brand green —
   plus the single functional confirm-yellow (semantic, not decorative):
     --primary: hsl(93 56% 46%)    → the brand green
     --foreground: hsl(30 12% 20%) → near-black, warm

   No stock photography — oversized type and number-as-graphic moments
   carry the visual weight instead, on purpose. Cards mostly skip shadow
   (bordered + color-blocked instead) so "shadow on every card" doesn't
   flatten everything to the same weight. ─────────────────────────── */

:root{
  --bg:#FFFFFF;
  --bg-2:#F7F6F2;
  --bg-2-line:#EAE7DE;
  --panel:#FFFFFF;
  --ink: hsl(30 12% 20%);
  --muted: hsl(30 8% 45%);
  --faint: hsl(30 8% 62%);
  --line: hsl(30 8% 88%);
  --line-soft: hsl(30 8% 92%);
  --line-strong: hsl(30 10% 78%);
  --green: hsl(93 56% 46%);
  --green-dark: hsl(93 39% 37%);
  --green-soft: hsl(93 56% 46% / .12);
  --green-soft-2: hsl(93 56% 46% / .06);
  --ink-soft: hsl(30 12% 20% / .08);
  --dark-bg: hsl(30 14% 11%);
  --dark-bg-2: hsl(30 13% 15%);
  --dark-line: hsl(30 10% 24%);
  --confirm-bg: #FFF7D6;
  --confirm-border: #E8D27A;
  --confirm-ink: #6B5A10;
  --shadow: 0 24px 70px rgba(20,18,10,.12);
  --shadow-soft: 0 10px 28px rgba(20,18,10,.08);
  --radius: 1.25rem;
  --sans-en:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display-en:"Space Grotesk",var(--sans-en);
  --sans-ar:"IBM Plex Sans Arabic","Inter",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans-en);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
html[dir="rtl"] body{ font-family:var(--sans-ar); }
h1,h2,h3{ font-family:var(--display-en); margin:0; line-height:1.05; letter-spacing:-.02em; text-wrap:balance; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3{ font-family:var(--sans-ar); font-weight:700; letter-spacing:0; line-height:1.2; }
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer}
:focus-visible{ outline:2px solid var(--green-dark); outline-offset:3px; }

.wrap{ max-width:1120px; margin-inline:auto; padding-inline:28px; }
section{ padding-block:clamp(96px,13vw,160px); position:relative; overflow:clip; scroll-margin-top:76px; }

/* section background variants — this is what makes each block read as
   its own "page" of the site rather than one continuous scroll */
.bg-tint{ background:var(--bg-2); }
.bg-dark{ background:var(--dark-bg); color:#fff; }
.bg-dark .eyebrow{ color:var(--green); }
.bg-dark h2{ color:#fff; }

/* scroll-reveal — fades/rises in once; respects reduced motion */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ─── nav ─── */
.nav{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.88); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.nav-inner{
  max-width:1120px; margin-inline:auto; padding-inline:28px;
  height:76px; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand img{ width:30px; height:30px; border-radius:8px; }
.brand span{ font-family:var(--display-en); font-weight:700; font-size:17px; color:var(--ink); }
html[dir="rtl"] .brand span{ font-family:var(--sans-ar); }
.nav-links{ display:flex; align-items:center; gap:32px; }
@media (max-width:920px){ .nav-links{ display:none; } }
.nav-links a{
  font-size:13.5px; font-weight:600; color:var(--muted); text-decoration:none;
  transition:color .15s ease;
}
.nav-links a:hover{ color:var(--ink); }
.nav-actions{ display:flex; align-items:center; gap:12px; }
.lang-pill{ display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; font-size:12px; font-weight:700; }
.lang-pill a, .lang-pill span{ padding:7px 13px; text-decoration:none; color:var(--muted); transition:color .15s ease; }
.lang-pill a:hover{ color:var(--ink); }
.lang-pill .current{ background:var(--ink); color:#fff; }
.nav-cta{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--ink); color:#fff; border:none; border-radius:999px;
  padding:11px 20px; font-size:13px; font-weight:700; text-decoration:none;
  transition:background .15s ease, transform .15s ease;
}
.nav-cta:hover{ background:var(--green-dark); transform:translateY(-1px); }
.nav-cta:active{ transform:translateY(0); }
.nav-cta-short{ display:none; }
/* under ~480px the brand text + lang pill + full CTA label no longer fit
   on one row and were overlapping — drop to the short label and trim
   padding instead of letting anything wrap or clip */
@media (max-width:480px){
  .nav-inner{ padding-inline:16px; gap:8px; }
  .brand span{ display:none; }
  .lang-pill{ font-size:11px; }
  .lang-pill a, .lang-pill span{ padding:6px 10px; }
  .nav-cta{ padding:9px 14px; font-size:12.5px; white-space:nowrap; }
  .nav-cta-full{ display:none; }
  .nav-cta-short{ display:inline; }
}

/* ─── confirm banner (unmissable, present until every fact is resolved) ─── */
.confirm-banner{
  background:var(--confirm-bg); border-bottom:1px solid var(--confirm-border);
  color:var(--confirm-ink); font-size:13px; font-weight:600;
  text-align:center; padding:11px 20px;
}
.confirm-banner strong{ font-weight:800; }

/* inline CONFIRM marker — mirrors the source doc's yellow-highlight convention */
.confirm{
  display:inline-block;
  background:var(--confirm-bg);
  border:1px solid var(--confirm-border);
  color:var(--confirm-ink);
  border-radius:6px;
  padding:2px 8px;
  font-weight:700;
  font-size:.92em;
  white-space:normal;
  line-height:1.5;
}
.confirm::before{ content:"⚠ "; }

/* ─── hero — full-bleed Riyadh skyline ───
   Deliberately just 4 elements (eyebrow, headline, lede, CTAs) — no
   trust row or stat card, those duplicate what Guarantee and Who We Are
   already say. Fewer elements means the type can run bigger while still
   fitting one screen: every size/gap is tied to vh so it keeps fitting
   even if a viewport is unusually short, not just unusually narrow. */
.hero{
  min-height:calc(100svh - 76px);
  display:flex; align-items:center;
  padding-block:20px;
  color:#fff;
  background:center/cover no-repeat var(--hero-photo);
  position:relative;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:hsl(30 25% 6% / .74);
}
.hero .wrap{ position:relative; z-index:1; width:100%; }
.hero .eyebrow{ color:var(--green); }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:clamp(11px,1.7vh,13px); font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--green-dark); margin-bottom:clamp(14px,2.4vh,22px);
}
html[dir="rtl"] .eyebrow{ letter-spacing:0; text-transform:none; }
/* width-led, not height-led: min(vw,vh) was picking the smaller of the
   two on wide-but-short windows and making the headline look tiny even
   though there was plenty of horizontal room. Size off width like any
   normal hero; the vh floor below just stops it ballooning on a very
   tall/narrow viewport. */
.hero h1{ font-size:clamp(34px,min(5.8vw,9vh),72px); max-width:16ch; color:#fff; line-height:1.12; }
.hero h1 .accent{ color:var(--green); }
.hero .lede{ margin-top:clamp(16px,2.6vh,28px); max-width:52ch; font-size:clamp(15px,1.3vw,18px); color:hsl(0 0% 100% / .82); }
.hero-ctas{ margin-top:clamp(20px,3.2vh,38px); display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.hero-ctas .btn-primary, .hero-ctas .btn-secondary{ padding-block:clamp(13px,1.6vw,17px); font-size:clamp(14px,1.1vw,15px); }
.btn-primary{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--green); color:#0c1a05; font-weight:800; font-size:15px;
  border:none; border-radius:999px; padding:17px 32px;
  text-decoration:none; transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:0 14px 32px hsl(93 56% 46% / .3);
}
.btn-primary:hover{ transform:translateY(-2px) scale(1.015); box-shadow:0 20px 42px hsl(93 56% 46% / .38); }
.btn-primary:active{ transform:translateY(0) scale(1); }
.btn-secondary{
  display:inline-flex; align-items:center; gap:8px;
  background:hsl(0 0% 100% / .08); color:#fff; font-weight:700; font-size:15px;
  border:1px solid hsl(0 0% 100% / .28); border-radius:999px; padding:16px 30px;
  text-decoration:none; transition:border-color .15s ease, background .15s ease, transform .15s ease;
  backdrop-filter:blur(6px);
}
.btn-secondary:hover{ border-color:hsl(0 0% 100% / .5); background:hsl(0 0% 100% / .14); transform:translateY(-2px); }
.btn-secondary:active{ transform:translateY(0); }

@media (max-width:640px){
  .hero h1{ max-width:none; }
  .hero-ctas{ gap:10px; }
  .hero-ctas .btn-primary, .hero-ctas .btn-secondary{ width:100%; justify-content:center; }
}

/* ─── pain — bold left/top accent bar instead of a shadow ─── */
.pain-grid{ margin-top:52px; display:grid; gap:2px; background:var(--line-soft); border-radius:var(--radius); overflow:hidden; grid-template-columns:repeat(3,1fr); }
@media (max-width:820px){ .pain-grid{ grid-template-columns:1fr; } }
.pain-card{
  background:#fff;
  padding:36px 30px; display:flex; flex-direction:column; gap:14px;
  border-top:3px solid var(--green);
  transition:background .2s ease;
}
.pain-card:nth-child(2){ border-top-color:var(--ink); }
.pain-card:nth-child(3){ border-top-color:var(--ink); }
.pain-card:hover{ background:var(--bg-2); }
.pain-num{ font-family:var(--display-en); font-size:34px; font-weight:800; color:var(--line-strong); line-height:1; }
html[dir="rtl"] .pain-num{ font-family:var(--sans-ar); }
.pain-card h3{ font-size:19px; }
.pain-card p{ color:var(--muted); font-size:14.5px; }

/* ─── what you get ─── */
.feat-list{ margin-top:52px; display:grid; gap:0; }
.feat-row{
  display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:flex-start;
  padding-block:30px; border-top:1px solid var(--line-soft);
  transition:padding-inline-start .2s ease;
}
.feat-row:first-child{ border-top:none; padding-top:0; }
.feat-row:last-child{ padding-bottom:0; }
.feat-row:hover{ padding-inline-start:8px; }
.feat-icon{
  width:50px; height:50px; border-radius:14px; background:var(--green-soft);
  display:flex; align-items:center; justify-content:center; color:var(--green-dark); flex:none;
}
.feat-row:nth-child(even) .feat-icon{ background:var(--ink-soft); color:var(--ink); }
.feat-row h3{ font-size:18px; margin-bottom:6px; }
.feat-row p{ color:var(--muted); font-size:14.5px; max-width:60ch; }

/* ─── how it works — a real photo of the work beside ghost-numeral steps ─── */
.works-grid{ margin-top:56px; display:grid; grid-template-columns:1fr 1.15fr; gap:48px; align-items:center; }
@media (max-width:860px){ .works-grid{ grid-template-columns:1fr; gap:32px; } }
.works-photo{ border-radius:20px; overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow); }
.works-photo img{ width:100%; height:100%; object-fit:cover; }
.works-grid .steps{ margin-top:0; }
.works-grid .step-ghost{ font-size:clamp(38px,4.6vw,60px); width:1.15em; }
.steps{ margin-top:56px; display:grid; gap:0; }
.step-row{
  display:grid; grid-template-columns:auto 1fr; gap:32px; align-items:center;
  padding-block:34px; border-top:1px solid var(--line-soft);
}
.step-row:first-child{ border-top:none; padding-top:0; }
.step-row:last-child{ padding-bottom:0; }
.step-ghost{
  font-family:var(--display-en); font-size:clamp(56px,7vw,92px); font-weight:800;
  line-height:1; color:transparent; -webkit-text-stroke:2px var(--line-strong);
  width:1.3em; flex:none;
}
html[dir="rtl"] .step-ghost{ font-family:var(--sans-ar); -webkit-text-stroke-width:1.6px; }
.step-row h3{ font-size:19px; margin-bottom:8px; }
.step-row p{ color:var(--muted); font-size:15px; max-width:56ch; }

/* ─── price — full-bleed dark band, one unified card ─── */
.price-lede{ margin-top:22px; max-width:64ch; color:hsl(0 0% 100% / .74); font-size:15.5px; }
.price-card{
  margin-top:48px; background:var(--dark-bg-2); border:1px solid var(--dark-line); border-radius:24px;
  padding:clamp(32px,4.5vw,56px);
}
.price-top{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px; }
.price-figure{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.price-num{ font-family:var(--display-en); font-size:clamp(50px,6.4vw,72px); font-weight:800; color:var(--green); line-height:1; }
html[dir="rtl"] .price-num{ font-family:var(--sans-ar); }
.price-unit{ font-size:15px; color:hsl(0 0% 100% / .55); }
.price-card .btn-primary{ flex:none; }
.price-divider{ margin-block:32px; border:none; border-top:1px solid var(--dark-line); }
.price-includes{
  display:grid; grid-template-columns:repeat(2,1fr); gap:16px 32px;
  list-style:none; margin:0; padding:0;
}
@media (max-width:560px){ .price-includes{ grid-template-columns:1fr; } }
.price-includes li{ display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:hsl(0 0% 100% / .82); }
.price-includes svg{ color:var(--green); flex:none; margin-top:2px; }
.price-fine{ margin-top:28px; display:flex; flex-direction:column; gap:10px; }

/* ─── guarantee ─── */
.guarantee-grid{ margin-top:52px; display:grid; gap:24px; grid-template-columns:repeat(3,1fr); }
@media (max-width:820px){ .guarantee-grid{ grid-template-columns:1fr; } }
.g-card{ padding-inline-start:22px; border-inline-start:3px solid var(--green); }
.g-card:nth-child(2){ border-color:var(--ink); }
.g-card:nth-child(3){ border-color:var(--ink); }
.g-card svg{ color:var(--green-dark); margin-bottom:16px; }
.g-card h3{ font-size:17px; margin-bottom:10px; }
.g-card p{ color:var(--muted); font-size:14px; }

/* ─── who we are — oversized stats carry the section, no photo ─── */
.about-block{ font-size:17px; color:var(--muted); max-width:62ch; }
.about-block + .about-block{ margin-top:18px; }
.about-block strong{ color:var(--ink); }
.about-stats{ margin-top:52px; display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line-soft); border-radius:var(--radius); overflow:hidden; }
@media (max-width:640px){ .about-stats{ grid-template-columns:1fr; } }
.about-stat{ background:#fff; padding:34px 28px; }
.about-stat b{ display:block; font-family:var(--display-en); font-size:clamp(44px,5.5vw,64px); color:var(--ink); line-height:1; }
html[dir="rtl"] .about-stat b{ font-family:var(--sans-ar); }
.about-stat:nth-child(1) b{ color:var(--green-dark); }
.about-stat:nth-child(2) b{ color:var(--ink); }
.about-stat span{ display:block; margin-top:10px; font-size:13.5px; color:var(--faint); }

/* ─── faq ─── */
.faq{ margin-top:52px; display:flex; flex-direction:column; }
.faq-item{ border-top:1px solid var(--line-soft); }
.faq-item:last-child{ border-bottom:1px solid var(--line-soft); }
.faq-q{
  width:100%; text-align:start; background:none; border:none;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-block:23px; font-size:16px; font-weight:700; color:var(--ink);
  transition:color .15s ease;
}
.faq-q:hover{ color:var(--green-dark); }
.faq-q svg{ flex:none; transition:transform .2s ease; color:var(--muted); }
.faq-item.open .faq-q svg{ transform:rotate(45deg); }
.faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .25s ease; }
.faq-item.open .faq-a{ grid-template-rows:1fr; }
.faq-a-inner{ overflow:hidden; }
.faq-a p{ padding-bottom:23px; color:var(--muted); font-size:14.5px; max-width:64ch; }

/* ─── final cta — brand-green band ─── */
.final-cta{ text-align:center; background:var(--green-dark); color:#fff; }
.final-cta h2{ font-size:clamp(30px,4.2vw,48px); max-width:19ch; margin-inline:auto; color:#fff; }
.final-cta .hero-ctas{ justify-content:center; margin-top:34px; }
.final-cta .btn-primary{ background:#fff; color:var(--green-dark); box-shadow:0 14px 32px rgba(0,0,0,.18); }
.final-cta .btn-secondary{ border-color:hsl(0 0% 100% / .4); }

/* ─── booking form ─── */
.booking{ display:grid; grid-template-columns:1fr 1fr; gap:64px; margin-top:52px; align-items:start; }
@media (max-width:820px){ .booking{ grid-template-columns:1fr; gap:32px; } }
.booking-intro p{ color:var(--muted); font-size:15px; margin-top:12px; }
.booking-intro ul{ margin:28px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:14px; }
.booking-intro li{ display:flex; gap:11px; align-items:flex-start; font-size:14px; color:var(--muted); }
.booking-intro li svg{ color:var(--green-dark); flex:none; margin-top:2px; }
.booking-form{
  background:#fff; border:1.5px solid var(--ink); border-radius:20px;
  padding:clamp(26px,3vw,38px);
}
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:12.5px; font-weight:700; color:var(--muted); margin-bottom:7px; }
.field input, .field select{
  width:100%; padding:14px 15px; border:1px solid var(--line); border-radius:12px;
  font:inherit; font-size:14.5px; background:var(--bg-2); color:var(--ink);
  transition:border-color .15s ease, background .15s ease;
}
.field input:focus, .field select:focus{ outline:none; border-color:var(--green-dark); background:#fff; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:480px){ .field-row{ grid-template-columns:1fr; } }
.tel-field{ display:flex; }
.tel-prefix{
  display:flex; align-items:center; padding-inline:14px; border:1px solid var(--line);
  border-inline-end:none; border-start-start-radius:12px; border-end-start-radius:12px;
  background:var(--line-soft); font-size:14px; color:var(--muted);
}
html[dir="rtl"] .tel-prefix{ border-inline-end:1px solid var(--line); border-inline-start:none; border-start-start-radius:0; border-end-start-radius:0; border-start-end-radius:12px; border-end-end-radius:12px; }
.tel-field input{ border-start-start-radius:0; border-end-start-radius:0; }
html[dir="rtl"] .tel-field input{ border-start-start-radius:12px; border-end-start-radius:12px; border-start-end-radius:0; border-end-end-radius:0; }
.submit-btn{ width:100%; justify-content:center; margin-top:8px; }
.form-note{ margin-top:16px; font-size:12.5px; color:var(--faint); }
.form-note a{ text-decoration:underline; }
.form-status{ margin-top:16px; font-size:14px; font-weight:600; display:none; }
.form-status.show{ display:block; }
.form-status.ok{ color:var(--green-dark); }
.form-status.err{ color:#b3261e; }

/* ─── footer ─── */
footer{ background:var(--dark-bg); color:hsl(0 0% 100% / .68); padding-block:64px 28px; font-size:14px; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:48px; }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; gap:32px; } }
.footer-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; margin-bottom:16px; }
.footer-brand img{ width:28px; height:28px; border-radius:7px; }
.footer-brand span{ font-family:var(--display-en); font-weight:700; font-size:17px; color:#fff; }
html[dir="rtl"] .footer-brand span{ font-family:var(--sans-ar); }
.footer-col p{ max-width:36ch; line-height:1.7; }
.footer-heading{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:hsl(0 0% 100% / .4); margin-bottom:18px; }
html[dir="rtl"] .footer-heading{ letter-spacing:0; text-transform:none; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
.footer-col a{ text-decoration:none; color:hsl(0 0% 100% / .68); transition:color .15s ease; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{
  margin-top:56px; padding-top:26px; border-top:1px solid hsl(0 0% 100% / .12);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; align-items:flex-start;
}
.footer-bottom .confirm{ max-width:52ch; }

/* ─── misc ─── */
.section-head{ max-width:46ch; }
.section-head .eyebrow{ margin-bottom:18px; }
.section-head h2{ font-size:clamp(30px,4.2vw,46px); }
.section-note{ margin-top:14px; font-size:13.5px; color:var(--muted); }
.bg-dark .section-note{ color:hsl(0 0% 100% / .72); }