/* ==========================================================================
   Econiva Consulting: stylesheet. Tokens and rules follow DESIGN.md.
   Navy = something you do (clickable, current, focus). Green = what the
   sun yields (simulator bar and figures). No gradients, no shadows. Motion
   only where DESIGN.md "Beweging" allows it. Logical properties throughout: the same sheet serves
   LTR (fr/en/es/de) and RTL (ar).
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  /* colour */
  --paper: #f9faf7;
  --surface: #eef1ea;
  --ink: #0d1b2e;
  --ink-2: #4b5566;
  --border: rgba(13, 27, 46, 0.16);
  /* controls (inputs, secondary button, range) need 3:1 against the page */
  --border-strong: #7a8291;
  --hover: rgba(13, 27, 46, 0.06);
  --accent: #05306c;
  --accent-hover: #03224d;
  --on-accent: #ffffff;
  --sun: #589628;
  --sun-text: #3a7019;
  --night: #061a33;
  --night-text: #eef2f7;
  --night-text-2: #b3bccb;
  --night-border: rgba(238, 242, 247, 0.16);

  /* spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4rem;
  --sp-8: 6rem;

  /* type scale: 14 / 17 / 21 / 27 / 34 / 53 px (13 only for footer micro-headings) */
  --fs-0: 0.8125rem;
  --fs-1: 0.875rem;
  --fs-2: 1.0625rem;
  --fs-3: 1.3125rem;
  --fs-4: 1.6875rem;
  --fs-5: 2.125rem;
  --fs-6: 3.3125rem;
  --h2: clamp(var(--fs-4), 1.2rem + 1.4vw, var(--fs-5));
  --h1: clamp(var(--fs-5), 1.2rem + 3.4vw, var(--fs-6));

  --w-regular: 400;
  --w-medium: 500;
  --w-bold: 700;
  --lh-body: 1.6;
  --lh-prose: 1.7;
  --lh-head: 1.2;
  --track-head: -0.02em;
  --track-label: 0.08em;
  --measure: 65ch;

  /* shape and sizes */
  --radius: 12px;
  --radius-lg: 24px;
  --hit: 2.75rem;
  --control: 3rem;
  --wrap: 74rem;
  --wrap-narrow: 46rem;
  --nav-h: 4rem;

  /* motion */
  --t-ui: 150ms;
  --t-fast: 200ms;
  --t-layout: 300ms;
  --t-signature: 400ms; /* the one confirmation motion: a request sent */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  /* heading face: Readex Pro, one family for Latin and Arabic (DESIGN.md, Typografie) */
  --font-head: "Readex Pro", var(--font-sans);
}

/* Arabic needs more line height and no tracking or uppercase */
html[lang="ar"] {
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Arabic", "SF Pro Display",
    "Segoe UI", "Noto Naskh Arabic", Tahoma, Arial, sans-serif;
  --lh-body: 1.85;
  --lh-prose: 1.9;
  --lh-head: 1.4;
  --track-head: 0;
  --track-label: 0;
}

/* ---------- heading face (self-hosted, variable weight 400 to 700) ---------- */
@font-face {
  font-family: "Readex Pro"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/readex-pro-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Readex Pro"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/readex-pro-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Readex Pro"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/readex-pro-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-block-start: var(--sp-8); -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  line-height: var(--lh-body);
  font-size: var(--fs-2);
  font-weight: var(--w-regular);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul[role="list"], ol[role="list"] { list-style: none; }
::selection { background: var(--sun); color: var(--ink); }

/* ---------- global focus ---------- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.on-dark :focus-visible, .footer :focus-visible { outline-color: var(--night-text); }

/* ---------- typography ---------- */
.h-1, .h-2, .h-3 { font-family: var(--font-head); }
.h-1 { font-size: var(--h1); line-height: var(--lh-head); letter-spacing: var(--track-head); font-weight: var(--w-bold); text-wrap: balance; }
.h-2 { font-size: var(--h2); line-height: var(--lh-head); letter-spacing: var(--track-head); font-weight: var(--w-bold); text-wrap: balance; }
.h-3 { font-size: var(--fs-3); line-height: var(--lh-head); font-weight: var(--w-bold); }
.lead { font-size: var(--fs-3); line-height: var(--lh-body); color: var(--ink-2); text-wrap: pretty; max-inline-size: var(--measure); }
.small { font-size: var(--fs-1); color: var(--ink-2); }
.hero-kicker { font-size: var(--fs-2); font-weight: var(--w-medium); color: var(--ink-2); margin-block-end: var(--sp-3); }
.text-link { font-weight: var(--w-medium); color: var(--accent); text-decoration: underline; text-underline-offset: 4px; display: inline-flex; align-items: center; min-block-size: var(--hit); transition: color var(--t-ui) var(--ease-out); }
.text-link:hover { color: var(--accent-hover); }

/* ---------- layout ---------- */
.wrap { inline-size: min(100% - var(--sp-5), var(--wrap)); margin-inline: auto; }
.wrap-narrow { inline-size: min(100% - var(--sp-5), var(--wrap-narrow)); margin-inline: auto; }
.section { padding-block: var(--sp-7); }
.section-tight { padding-block: var(--sp-6); }
@media (min-width: 768px) {
  .section { padding-block: var(--sp-8); }
  .section-tight { padding-block: var(--sp-7); }
}
.on-dark { background: var(--night); color: var(--night-text); }
.on-dark .lead, .on-dark .small { color: var(--night-text-2); }
.section-head { max-inline-size: var(--wrap-narrow); margin-block-end: var(--sp-6); }
.section-head .lead { margin-block-start: var(--sp-3); }
.section-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); margin-block-end: var(--sp-6); }

/* ---------- skip link ---------- */
.skip-link {
  position: absolute; inset-block-start: -100%; inset-inline-start: var(--sp-3);
  z-index: 200; background: var(--ink); color: var(--paper);
  display: inline-flex; align-items: center; min-block-size: var(--hit);
  padding-inline: var(--sp-3); border-radius: var(--radius);
}
.skip-link:focus { inset-block-start: var(--sp-3); }

/* read by screen readers, not shown */
.sr-only {
  position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- buttons: one primary, one secondary ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-block-size: var(--control);
  padding-inline: var(--sp-4);
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: var(--fs-2); font-weight: var(--w-medium); line-height: 1.2;
  text-align: center;
  transition: background-color var(--t-ui) var(--ease-out), border-color var(--t-ui) var(--ease-out), color var(--t-ui) var(--ease-out), scale var(--t-ui) var(--ease-out);
}
/* press feedback: the button gives a little under the finger, so a tap is felt */
.btn:active { scale: 0.97; }
.btn svg { inline-size: 20px; block-size: 20px; flex-shrink: 0; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--night); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--hover); }
.btn-secondary:active { background: var(--border); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-block-start: var(--sp-5); }

/* ---------- nav: solid sticky header ---------- */
.nav {
  position: sticky; inset-block-start: 0; z-index: 90;
  background: var(--paper);
  border-block-end: 1px solid transparent;
  transition: border-color var(--t-fast) var(--ease-out);
}
.nav.is-scrolled { border-block-end-color: var(--border); }
.nav-inner {
  inline-size: min(100% - var(--sp-5), var(--wrap)); margin-inline: auto;
  min-block-size: var(--nav-h);
  display: flex; align-items: center; gap: var(--sp-2);
}
.nav-inner .brand { margin-inline-end: auto; }
.brand { display: inline-flex; align-items: center; min-block-size: var(--hit); }
.brand img { block-size: var(--sp-6); inline-size: auto; }
.nav-links { display: none; align-items: center; gap: var(--sp-1); }
.nav-links > a, .nav-links .lang-btn {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  min-block-size: var(--hit); padding-inline: var(--sp-2);
  border-radius: var(--radius);
  font-size: var(--fs-2); font-weight: var(--w-medium); color: var(--ink-2);
  transition: background-color var(--t-ui) var(--ease-out), color var(--t-ui) var(--ease-out);
}
.nav-links > a:hover, .nav-links .lang-btn:hover { background: var(--hover); color: var(--ink); }
.nav-links > a[aria-current="page"], .nav-links .lang-btn.is-current {
  color: var(--accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.nav-inner > .btn { display: none; }
.burger { display: block; }
@media (min-width: 1024px) {
  .nav-links { display: flex; }
  .nav-inner > .btn { display: inline-flex; margin-inline-start: var(--sp-2); }
  .burger { display: none; }
}

/* dropdowns: services menu and language switcher */
.lang { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  min-block-size: var(--hit); padding-inline: var(--sp-2);
  border-radius: var(--radius);
  font-size: var(--fs-1); font-weight: var(--w-medium); color: var(--ink-2);
  transition: background-color var(--t-ui) var(--ease-out);
}
.nav-inner > .lang > .lang-btn { border: 1px solid var(--border); padding-inline: var(--sp-3); }
.lang-btn:hover { background: var(--hover); }
.lang-btn svg { inline-size: 16px; block-size: 16px; transition: transform var(--t-fast) var(--ease-out); }
.lang.open .lang-btn svg { transform: rotate(180deg); }
.lang-menu {
  position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + var(--sp-1));
  min-inline-size: 11rem;
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-1);
  opacity: 0; visibility: hidden; transform: translateY(calc(-1 * var(--sp-1)));
  transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out), visibility 0s linear var(--t-ui);
}
.lang.open .lang-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.lang-menu a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  min-block-size: var(--hit); padding-inline: var(--sp-3); border-radius: var(--radius);
  font-size: var(--fs-2); font-weight: var(--w-medium); color: var(--ink);
  transition: background-color var(--t-ui) var(--ease-out);
}
.lang-menu a:hover { background: var(--hover); }
.lang-menu a.active, .lang-menu a[aria-current] { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.lang-menu a.active::after, .lang-menu a[aria-current]::after { content: "✓"; text-decoration: none; }
.drop .lang-menu { inset-inline-end: auto; inset-inline-start: 0; min-inline-size: 16rem; }

/* burger */
.burger {
  position: relative; inline-size: var(--hit); block-size: var(--hit);
  border-radius: var(--radius); border: 1px solid var(--border);
}
.burger span {
  /* physical left with translate(-50%) is direction-symmetric: no RTL override needed */
  position: absolute; left: 50%; inset-block-start: 50%;
  inline-size: 20px; block-size: 2px; background: var(--ink);
  transition: transform var(--t-fast) var(--ease-out);
}
.burger span:nth-child(1) { transform: translate(-50%, calc(-50% - 4px)); }
.burger span:nth-child(2) { transform: translate(-50%, calc(-50% + 4px)); }
body.menu-open .burger span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }

/* mobile overlay: hidden = not focusable */
.menu-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: var(--paper);
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: calc(var(--nav-h) + var(--sp-3)) var(--sp-3) var(--sp-5);
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-fast) var(--ease-out), visibility 0s linear var(--t-fast);
}
body.menu-open .menu-overlay { opacity: 1; visibility: visible; transition-delay: 0s; }
.menu-overlay a.menu-link {
  display: flex; align-items: center; min-block-size: var(--control);
  font-size: var(--fs-3); font-weight: var(--w-bold);
  border-block-end: 1px solid var(--border);
}
.menu-overlay a.menu-link:hover { color: var(--accent); }
/* opening the menu: links settle in from the button, top to bottom, all within 400 ms */
@media (prefers-reduced-motion: no-preference) {
  .menu-overlay a.menu-link { opacity: 0; translate: 0 calc(var(--sp-2) * -1); transition: opacity var(--t-fast) var(--ease-out), translate var(--t-fast) var(--ease-out); }
  body.menu-open .menu-overlay a.menu-link { opacity: 1; translate: none; }
  body.menu-open .menu-overlay a.menu-link:nth-of-type(2) { transition-delay: 25ms; }
  body.menu-open .menu-overlay a.menu-link:nth-of-type(3) { transition-delay: 50ms; }
  body.menu-open .menu-overlay a.menu-link:nth-of-type(4) { transition-delay: 75ms; }
  body.menu-open .menu-overlay a.menu-link:nth-of-type(5) { transition-delay: 100ms; }
  body.menu-open .menu-overlay a.menu-link:nth-of-type(6) { transition-delay: 125ms; }
  body.menu-open .menu-overlay a.menu-link:nth-of-type(n+7) { transition-delay: 150ms; }
}
.menu-overlay .menu-langs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-start: var(--sp-5); }
.menu-overlay .menu-langs a {
  display: inline-flex; align-items: center; min-block-size: var(--hit); padding-inline: var(--sp-3);
  border-radius: var(--radius); border: 1px solid var(--border-strong);
  font-size: var(--fs-1); font-weight: var(--w-medium);
}
.menu-overlay .menu-langs a.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
body.menu-open { overflow: hidden; }

/* ---------- WhatsApp float ---------- */
.wa-float {
  position: fixed; inset-inline-end: var(--sp-3); inset-block-end: var(--sp-3); z-index: 70;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-block-size: var(--control); min-inline-size: var(--control); padding-inline: var(--sp-3);
  background: var(--night); color: var(--night-text);
  border-radius: var(--radius);
  font-weight: var(--w-medium); font-size: var(--fs-1);
  transition: background-color var(--t-ui) var(--ease-out);
}
.wa-float:hover { background: var(--accent-hover); }
.wa-float svg { inline-size: 20px; block-size: 20px; }
.wa-float:focus-visible { outline-color: var(--accent); outline-offset: 2px; }
@media (max-width: 640px) { .wa-float span { display: none; } .wa-float { padding-inline: 0; } }

/* ---------- home hero: the bill-first simulator (DESIGN.md signature) ---------- */
.hero { padding-block: var(--sp-6) var(--sp-7); }
@media (min-width: 768px) { .hero { padding-block: var(--sp-7) var(--sp-8); } }
.hero-grid { display: grid; gap: var(--sp-6); align-items: start; }
.hero-grid > * { min-inline-size: 0; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-7); } }
.hero .lead { margin-block-start: var(--sp-4); }

/* amounts with a word in them ("480 à 640 DH", "480 إلى 640 درهم") take their direction
   from their first letter, so ranges read the right way round in Arabic too */
.num { unicode-bidi: plaintext; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* bill input */
.sim-input { margin-block-start: var(--sp-5); }
.sim-input label { display: block; font-weight: var(--w-medium); }
.sim-value { font-family: var(--font-head); font-size: var(--h1); line-height: var(--lh-head); font-weight: var(--w-bold); letter-spacing: var(--track-head); margin-block: var(--sp-2) var(--sp-3); font-variant-numeric: tabular-nums; }
.sim-value output { direction: ltr; unicode-bidi: isolate; }
.sim-value span { font-family: var(--font-sans); font-size: var(--fs-3); font-weight: var(--w-regular); color: var(--ink-2); letter-spacing: 0; }
input[type="range"].sim-range {
  --fill: 12%;
  inline-size: 100%; block-size: var(--hit);
  appearance: none; -webkit-appearance: none;
  background: transparent; cursor: pointer;
}
/* the filled part is sun: the share of the scale the visitor has dialled in */
input[type="range"].sim-range::-webkit-slider-runnable-track {
  block-size: var(--sp-2); border-radius: var(--sp-1); border: 1px solid var(--border-strong);
  background: linear-gradient(to right, var(--sun) var(--fill), var(--surface) var(--fill));
}
html[dir="rtl"] input[type="range"].sim-range::-webkit-slider-runnable-track { background: linear-gradient(to left, var(--sun) var(--fill), var(--surface) var(--fill)); }
input[type="range"].sim-range::-moz-range-track { block-size: var(--sp-2); border-radius: var(--sp-1); border: 1px solid var(--border-strong); background: var(--surface); }
input[type="range"].sim-range::-moz-range-progress { block-size: var(--sp-2); border-radius: var(--sp-1); background: var(--sun); }
input[type="range"].sim-range::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  inline-size: 28px; block-size: 28px;
  margin-block-start: calc((var(--sp-2) - 28px) / 2 - 1px);
  border-radius: 50%; background: var(--ink); border: 3px solid var(--paper);
  transition: scale var(--t-ui) var(--ease-out);
}
input[type="range"].sim-range::-moz-range-thumb { inline-size: var(--sp-4); block-size: var(--sp-4); border-radius: 50%; background: var(--ink); border: 3px solid var(--paper); transition: scale var(--t-ui) var(--ease-out); }
/* the thumb grows while held: it shows the slider has hold of the drag */
input[type="range"].sim-range:active::-webkit-slider-thumb { scale: 1.15; }
input[type="range"].sim-range:active::-moz-range-thumb { scale: 1.15; }
.range-ends { display: flex; justify-content: space-between; font-size: var(--fs-1); color: var(--ink-2); }

/* the bill card: your bill, split into what the sun pays and what is left */
.bill { background: var(--surface); border-radius: var(--radius-lg); padding: var(--sp-5); }
@media (min-width: 640px) { .bill { padding: var(--sp-6); } }
.bill-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); padding-block-end: var(--sp-3); border-block-end: 1px dashed var(--border-strong); }
.bill-head b { font-family: var(--font-head); font-size: var(--fs-3); }
.bill-bar { display: flex; block-size: var(--sp-6); margin-block: var(--sp-4) var(--sp-3); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border-strong); background: var(--paper); }
.bill-bar .sure { inline-size: 60%; background: var(--sun); }
/* hatched = the uncertain band of the estimate (60 to 80 %) */
.bill-bar .maybe { inline-size: 20%; background: repeating-linear-gradient(135deg, var(--sun) 0 3px, var(--paper) 3px 8px); }
.bill-legend { display: grid; gap: var(--sp-2); }
.bill-legend li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--sp-3); }
.sw { display: inline-block; inline-size: 12px; block-size: 12px; border-radius: 3px; margin-inline-end: var(--sp-2); vertical-align: -1px; border: 1px solid var(--border-strong); background: var(--paper); }
.sw-sun { background: var(--sun); }
.bill-legend b { font-weight: var(--w-bold); }
.sunny b, .sunny dd { color: var(--sun-text); }
.bill-figures { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-4); margin-block: var(--sp-5); padding-block-start: var(--sp-4); border-block-start: 1px dashed var(--border-strong); }
.bill-figures dt { font-size: var(--fs-1); color: var(--ink-2); }
.bill-figures dd { font-family: var(--font-head); font-size: var(--fs-3); font-weight: var(--w-bold); line-height: var(--lh-head); }
/* the yearly saving answers the hero question, so it gets the full row */
.bill-figures div:first-child { grid-column: 1 / -1; }
.bill-figures div:first-child dd { font-size: var(--fs-5); white-space: normal; }
.bill .btn { inline-size: 100%; }
.bill-note { margin-block-start: var(--sp-3); }

/* trust strip under the hero */
.trust {
  margin-block-start: var(--sp-7);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4);
  border-block-start: 1px solid var(--border); padding-block-start: var(--sp-4);
}
@media (min-width: 768px) { .trust { grid-template-columns: repeat(4, 1fr); } }
.trust b { display: block; font-family: var(--font-head); font-size: var(--fs-5); line-height: var(--lh-head); font-weight: var(--w-bold); }
.trust li > span { font-size: var(--fs-1); color: var(--ink-2); }

/* ---------- services: divider list ---------- */
.svc-list { border-block-start: 1px solid var(--border); }
.svc-list li { border-block-end: 1px solid var(--border); }
.svc-row {
  display: grid; gap: var(--sp-1); align-items: baseline;
  padding: var(--sp-4) var(--sp-2); margin-inline: calc(-1 * var(--sp-2));
  transition: background-color var(--t-ui) var(--ease-out);
}
@media (min-width: 768px) { .svc-row { grid-template-columns: 1fr 2fr; gap: var(--sp-5); } }
.svc-row p { color: var(--ink-2); max-inline-size: var(--measure); }
.svc-row:hover { background: var(--hover); }
/* hover and focus draw the title's underline from its first letter (right to left in Arabic);
   it runs over every line of a wrapped title in reading order */
.draw-line {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 0 1px;
  padding-block-end: 2px;
  transition: background-size var(--t-fast) var(--ease-out);
}
html[dir="rtl"] .draw-line { background-position: right bottom; }
.svc-row:hover .draw-line, .svc-row:focus-visible .draw-line,
.post-card:hover .draw-line, .draw-line:focus-visible { background-size: 100% 1px; }

/* ---------- dark section: figures and points ---------- */
.stat-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.stat, .point { border-block-start: 1px solid var(--night-border); padding-block-start: var(--sp-3); }
.stat-num { display: block; font-family: var(--font-head); font-size: var(--h1); line-height: var(--lh-head); font-weight: var(--w-bold); }
.stat-unit { font-style: normal; font-size: var(--fs-3); font-weight: var(--w-medium); color: var(--night-text-2); }
.stat-label { display: block; margin-block-start: var(--sp-2); font-size: var(--fs-2); color: var(--night-text-2); max-inline-size: 28ch; }
.stat-src { margin-block-start: var(--sp-5); font-size: var(--fs-1); color: var(--night-text-2); }
.point-title { font-size: var(--fs-3); line-height: var(--lh-head); font-weight: var(--w-bold); }
.point-text { margin-block-start: var(--sp-2); color: var(--night-text-2); }

/* ---------- process timeline ---------- */
.steps { list-style: none; counter-reset: step; display: grid; gap: 0; }
.step { counter-increment: step; border-block-start: 1px solid var(--border-strong); padding-block: var(--sp-3) var(--sp-4); }
.step::before {
  content: counter(step, decimal-leading-zero);
  display: block; margin-block-end: var(--sp-2);
  font-size: var(--fs-1); font-weight: var(--w-bold); color: var(--ink-2);
}
.step h3 { font-size: var(--fs-3); line-height: var(--lh-head); font-weight: var(--w-bold); margin-block-end: var(--sp-2); }
.step p { color: var(--ink-2); }
@media (min-width: 900px) {
  .steps { grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--sp-5); border-block-start: 1px solid var(--border-strong); }
  .step { border-block-start: 0; padding-block: var(--sp-4) 0; }
}
/* The line over the steps draws in ink as you scroll: scroll position tells the
   process (Design.md B5), time never does. Browsers without scroll timelines and
   reduced motion keep the static rule above. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* stacked: each step draws its own rule as it rises into view */
    @media (max-width: 899px) {
      .step { position: relative; }
      .step::after { content: ""; animation-timeline: view(); }
    }
    /* columns: one line across the whole row */
    @media (min-width: 900px) {
      .steps { position: relative; view-timeline: --steps block; }
      .steps::before { content: ""; animation-timeline: --steps; }
    }
    .step::after, .steps::before {
      position: absolute; inset-inline: 0; inset-block-start: -1px; block-size: 2px;
      background: var(--ink); transform-origin: left center;
      /* longhands: the animation shorthand would reset animation-timeline */
      animation-name: step-line; animation-timing-function: linear; animation-fill-mode: both;
      animation-range: entry 100% cover 50%;
    }
    html[dir="rtl"] .step::after, html[dir="rtl"] .steps::before { transform-origin: right center; }
  }
}
@keyframes step-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- sun path (home "why" section, service "how" sections) ----------
   The sun crosses its day as the section scrolls through the view: sunrise when the
   section enters, sunset when it leaves (Design.md B5). Without scroll timelines or with
   reduced motion it stands still at noon, half its path drawn. */
.sun-path { display: block; inline-size: 100%; block-size: auto; margin-block-end: var(--sp-5); overflow: visible; }
.sun-track, .sun-trail { fill: none; stroke-linecap: round; }
.sun-track { stroke: var(--night-border); stroke-width: 2; stroke-dasharray: 0.004 0.012; }
.sun-trail { stroke: var(--sun); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 0.5; }
.sun-disc { fill: var(--sun); transform-box: view-box; transform-origin: 500px 1217px; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sun-day { view-timeline: --sun-day block; }
    .sun-trail, .sun-disc {
      animation-timeline: --sun-day; animation-range: entry 50% exit 50%;
      animation-timing-function: linear; animation-fill-mode: both;
    }
    .sun-trail { animation-name: sun-trail; }
    .sun-disc { animation-name: sun-disc; }
  }
}
/* ±23.5° is the arc's half angle: asin(480 / 1202) */
@keyframes sun-disc { from { transform: rotate(-23.5deg); } to { transform: rotate(23.5deg); } }
@keyframes sun-trail { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ---------- testimonials ---------- */
.quotes { display: grid; gap: var(--sp-5); }
@media (min-width: 900px) { .quotes { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } }
.quote blockquote { font-size: var(--fs-2); color: var(--ink); text-wrap: pretty; }
.quote figcaption { margin-block-start: var(--sp-3); font-size: var(--fs-1); color: var(--ink-2); }
.quote figcaption b { font-weight: var(--w-bold); color: var(--ink); }
.quote figcaption b::after { content: " · "; font-weight: var(--w-regular); color: var(--ink-2); }

/* ---------- FAQ: divider list ---------- */
.faq-layout { display: grid; gap: var(--sp-5); }
@media (min-width: 900px) { .faq-layout { grid-template-columns: 1fr 2fr; gap: var(--sp-7); } }
.faq { border-block-start: 1px solid var(--border); }
.faq details { border-block-end: 1px solid var(--border); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  min-block-size: var(--control); padding-block: var(--sp-3);
  font-weight: var(--w-medium); font-size: var(--fs-2);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq-x { position: relative; flex-shrink: 0; inline-size: var(--sp-4); block-size: var(--sp-4); transition: transform var(--t-fast) var(--ease-out); }
.faq-x::before, .faq-x::after {
  content: ""; position: absolute; left: 50%; inset-block-start: 50%;
  inline-size: 16px; block-size: 2px; background: currentColor; translate: -50% -50%;
}
.faq-x::after { rotate: 90deg; }
.faq details[open] .faq-x { transform: rotate(45deg); }
/* the answer opens from the question instead of appearing at once */
@supports selector(::details-content) {
  @media (prefers-reduced-motion: no-preference) {
    .faq details { interpolate-size: allow-keywords; }
    .faq details::details-content {
      block-size: 0; overflow: clip;
      transition: block-size var(--t-layout) var(--ease-out), content-visibility var(--t-layout) allow-discrete;
    }
    .faq details[open]::details-content { block-size: auto; }
  }
}
.faq-a { padding-block-end: var(--sp-4); color: var(--ink-2); max-inline-size: var(--measure); }
.faq-a p + p { margin-block-start: var(--sp-2); }

/* ---------- blog: text post cards ---------- */
.post-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 760px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }
.post-card {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-2);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--sp-4);
}
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-1); color: var(--ink-2); }
.post-meta .tag { color: var(--ink); font-weight: var(--w-bold); }
.post-card h3 { font-size: var(--fs-3); line-height: var(--lh-head); font-weight: var(--w-bold); }
.post-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); }
.post-card h3 a:focus-visible { outline: none; }
.post-card h3 a:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 2px; }
.post-card p { color: var(--ink-2); }

/* ---------- article ---------- */
/* Reading progress: a line along the top edge fills as the article scrolls past, from
   its first line to its last (Design.md B5, scroll position, never time). Hidden where
   scroll timelines are missing and with reduced motion. */
.read-progress { display: none; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .read { view-timeline: --read block; }
    .read-progress {
      display: block; position: fixed; inset-inline: 0; inset-block-start: 0; z-index: 95;
      block-size: 3px; background: var(--ink); transform-origin: left center;
      animation-name: step-line; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: --read; animation-range: contain 0% contain 100%;
    }
    html[dir="rtl"] .read-progress { transform-origin: right center; }
  }
}
.article-head { padding-block: var(--sp-6) var(--sp-5); }
.article-head .post-meta { margin-block-end: var(--sp-3); }
.article-head .lead { margin-block-start: var(--sp-3); }
.article-body { padding-block-end: var(--sp-7); }
.prose { max-inline-size: var(--measure); font-size: var(--fs-2); line-height: var(--lh-prose); }
.prose > * + * { margin-block-start: var(--sp-3); }
.prose h2 { font-size: var(--fs-4); line-height: var(--lh-head); letter-spacing: var(--track-head); font-weight: var(--w-bold); margin-block-start: var(--sp-6); }
.prose h3 { font-size: var(--fs-3); line-height: var(--lh-head); font-weight: var(--w-bold); margin-block-start: var(--sp-5); }
.prose a { color: var(--accent); font-weight: var(--w-medium); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--accent-hover); }
.prose ul, .prose ol { padding-inline-start: var(--sp-4); }
.prose li + li { margin-block-start: var(--sp-1); }
.prose blockquote { padding-inline-start: var(--sp-5); font-size: var(--fs-3); font-style: italic; color: var(--ink-2); }
html[lang="ar"] .prose blockquote { font-style: normal; }
.prose table { inline-size: 100%; border-collapse: collapse; font-size: var(--fs-1); }
.prose table th, .prose table td { border: 1px solid var(--border); padding: var(--sp-2) var(--sp-3); text-align: start; }
.prose table th { background: var(--surface); font-weight: var(--w-bold); }
.prose .table-scroll { overflow-x: auto; }
.key-fact { border-radius: var(--radius); background: var(--surface); padding: var(--sp-3) var(--sp-4); }
.article-cta {
  margin-block-start: var(--sp-6);
  border-radius: var(--radius-lg); background: var(--surface);
  padding: var(--sp-5);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3);
}
.article-cta b { display: block; font-size: var(--fs-3); }
.article-cta span { display: block; color: var(--ink-2); }
.article-foot { margin-block-start: var(--sp-5); }

/* breadcrumb */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-1); color: var(--ink-2); margin-block-end: var(--sp-3); }
.crumbs a { display: inline-flex; align-items: center; min-block-size: var(--hit); text-decoration: underline; text-underline-offset: 3px; }
.crumbs a:hover { color: var(--ink); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--surface); border-radius: var(--radius-lg); padding: var(--sp-6) var(--sp-5); }
@media (min-width: 768px) { .cta-band { padding: var(--sp-7) var(--sp-6); } }
.cta-band .h-2 { max-inline-size: 24ch; }
.cta-band .lead { margin-block-start: var(--sp-3); }

/* ---------- inner page hero ---------- */
.page-hero { padding-block: var(--sp-6) var(--sp-6); }
@media (min-width: 768px) { .page-hero { padding-block: var(--sp-7); } }
.page-hero .lead { margin-block-start: var(--sp-3); }
.page-hero .section-head { margin-block-end: var(--sp-6); }
.check-list { display: grid; gap: var(--sp-2); margin-block-start: var(--sp-4); }
.check-list li { display: flex; gap: var(--sp-2); align-items: flex-start; color: var(--ink-2); }
.check-list li svg { inline-size: 20px; block-size: 20px; flex-shrink: 0; margin-block-start: var(--sp-1); }
.check-list li b { color: var(--ink); }
.panel { background: var(--surface); border-radius: var(--radius-lg); padding: var(--sp-5); }
.panel .h-3 { margin-block-end: var(--sp-3); }
.panel .check-list { margin-block-start: 0; }
.split { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 960px) { .split { grid-template-columns: 1fr 1fr; gap: var(--sp-7); } }

/* ---------- contact ---------- */
.contact-grid { display: grid; gap: var(--sp-6); }
@media (min-width: 960px) { .contact-grid { grid-template-columns: 1fr 1.1fr; gap: var(--sp-7); } }
.contact-list { display: grid; gap: var(--sp-4); align-content: start; }
.contact-item { display: flex; align-items: flex-start; gap: var(--sp-3); }
.contact-item > svg { inline-size: 24px; block-size: 24px; flex-shrink: 0; color: var(--ink-2); margin-block-start: var(--sp-1); }
.contact-k { display: block; font-size: var(--fs-1); color: var(--ink-2); }
.contact-v { display: block; }
a.contact-v { display: inline-flex; align-items: center; min-block-size: var(--hit); text-decoration: underline; text-underline-offset: 4px; }
a.contact-v:hover { color: var(--accent); }
.form { display: grid; gap: var(--sp-3); align-content: start; }
.form-row { display: grid; gap: var(--sp-3); }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }
.field label { display: block; font-size: var(--fs-1); font-weight: var(--w-medium); margin-block-end: var(--sp-1); }
.field-opt { font-weight: var(--w-regular); color: var(--ink-2); }
.field input, .field select, .field textarea {
  inline-size: 100%; min-block-size: var(--control);
  font: inherit; font-size: var(--fs-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius); border: 1px solid var(--border-strong);
  background: var(--paper); color: var(--ink);
  transition: border-color var(--t-ui) var(--ease-out);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-2); }
.field textarea { min-block-size: calc(var(--control) * 3); resize: vertical; }
.form .btn { justify-self: start; }
.form-sent { color: var(--ink); font-weight: var(--w-medium); max-inline-size: var(--measure); }
.form-sent[hidden] { display: none; }
.form-sent [data-sent] { display: flex; align-items: center; gap: var(--sp-3); }
.form-sent [data-sent][hidden] { display: none; }
.sent-mark { flex-shrink: 0; inline-size: var(--sp-6); block-size: auto; }
.sent-sun { fill: var(--sun); }
.sent-roof { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* the brand's confirmation motion: the request is sent, the sun rises over the roof */
@media (prefers-reduced-motion: no-preference) {
  .form-sent [data-sent]:not([hidden]) .sent-sun { animation: sun-rise var(--t-signature) var(--ease-out) both; }
}
@keyframes sun-rise { from { transform: translateY(9px); } to { transform: none; } }

/* ---------- footer ---------- */
.footer { background: var(--night); color: var(--night-text-2); padding-block: var(--sp-7) var(--sp-4); }
.footer a:hover { color: var(--night-text); text-decoration: underline; text-underline-offset: 4px; }
.footer-grid { display: grid; gap: var(--sp-5); margin-block-end: var(--sp-6); }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.footer p.small { color: var(--night-text-2); max-inline-size: 30ch; }
.footer h3 { color: var(--night-text); font-size: var(--fs-0); letter-spacing: var(--track-label); text-transform: uppercase; margin-block-end: var(--sp-2); font-weight: var(--w-bold); }
html[lang="ar"] .footer h3 { text-transform: none; font-size: var(--fs-1); }
.footer ul a { display: inline-flex; align-items: center; min-block-size: var(--hit); }
.footer-bottom {
  border-block-start: 1px solid var(--night-border);
  padding-block-start: var(--sp-4);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3);
  font-size: var(--fs-1);
}
.footer-langs { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.footer-langs a { display: inline-flex; align-items: center; min-block-size: var(--hit); padding-inline: var(--sp-3); border-radius: var(--radius); border: 1px solid var(--night-border); }
.footer-langs a.active { border-color: var(--night-text); color: var(--night-text); }

/* ---------- page transitions ----------
   Moving between pages cross-fades the content while the header and the
   WhatsApp button stay put, so it reads as one site. Browsers without
   cross-document view transitions navigate as before. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.nav { view-transition-name: site-nav; }
.wa-float { view-transition-name: wa-float; }
::view-transition-group(*) { animation-duration: var(--t-layout); }
::view-transition-old(root) { animation-duration: var(--t-layout); animation-timing-function: ease-in; }
::view-transition-new(root) { animation-duration: var(--t-layout); animation-timing-function: var(--ease-out); }

/* ---------- motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}

/* print */
@media print { .nav, .wa-float, .menu-overlay { display: none !important; } }