/* ==========================================================================
   شركة المسكون للمقاولات العامة — Al Maskoon General Contracting
   One stylesheet for both directions. Direction-specific values live in custom
   properties that body[dir] flips; only genuinely different things (Arabic
   sizes, no letter-spacing, no uppercase) get an RTL override.
   ========================================================================== */

:root{
  /* Brand — measured off the logo artwork and the company profile, not guessed.
     #490A1A and #731B31 are the two maroons in the logo mark itself;
     #3C171C is the deep band the profile uses behind full-bleed sections. */
  --brand:#731B31;
  --brand-deep:#490A1A;
  --brand-ink:#3C171C;
  --brand-tint:#F6EEEF;
  --sand:#B07A33;          /* warm accent — plant, machinery, desert ground */

  /* Ground. Pure white against a photographic hero reads as a hard cut, so the
     page sits on a warm off-white and the banded sections a shade under it;
     cards stay #fff and lift off both. */
  --bg:#F7F3F0;
  --bg-2:#EFE9E5;
  --line:rgba(60,23,28,.14);
  --line-2:rgba(60,23,28,.30);

  /* Ink */
  --text:#1B1113;
  --muted:#5B4A4E;
  --dim:#6E5C60;
  --on-dark:#F3EDEA;
  --on-dark-muted:#D8CCCB;

  --r:16px;
  --r-sm:10px;
  --maxw:1200px;
  /* The header floats over the hero, so its height is a value both need. */
  --header-h:60px;

  --font-latin:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;
  --font-ar:'IBM Plex Sans Arabic',system-ui,sans-serif;

  /* Entrance offset — content arrives from the reading side. */
  --slide-in:-38px;
  /* Which way the hero veil darkens — towards the side the text sits on. */
  --veil-dir:to right;
  --shadow:0 18px 40px -26px rgba(60,23,28,.45);
  --shadow-lg:0 30px 70px -40px rgba(60,23,28,.6);
}
@media (min-width:860px){:root{--header-h:76px}}

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  /* `clip`, never `hidden`: `hidden` makes a scroll container and breaks
     position:fixed and touch scrolling on iOS. */
  overflow-x:clip;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-latin);
  font-weight:400;
  font-size:clamp(1rem,.955rem + .2vw,1.0625rem);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-x:clip;
}

/* Arabic body copy. 16px on a phone, 18px on a desktop, weight 500: Arabic
   carries meaning in marks and joins that are a fraction of the letter height,
   so it needs more size and more stroke than Latin, not less. 400 renders as
   hairlines. */
body[dir="rtl"]{
  font-family:var(--font-ar);
  font-weight:500;
  font-size:clamp(1rem,.935rem + .3vw,1.125rem);
  line-height:1.78;
  --slide-in:38px;
  --veil-dir:to left;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---------- Display type ---------- */
h1,h2,h3,h4{
  font-family:var(--font-latin);
  font-weight:700;
  line-height:1.16;
  letter-spacing:-.015em;
  margin:0 0 .5em;
  text-wrap:balance;
  color:var(--brand-deep);
}
/* No uppercase, no letter-spacing, and a taller line for Arabic headings. */
body[dir="rtl"] h1,body[dir="rtl"] h2,body[dir="rtl"] h3,body[dir="rtl"] h4{
  font-family:var(--font-ar);
  letter-spacing:0;
  line-height:1.62;
}
body[dir="rtl"] h3,body[dir="rtl"] h4{line-height:1.5}
h1{font-size:clamp(2rem,1.45rem + 2.6vw,3.4rem)}
h2{font-size:clamp(1.6rem,1.25rem + 1.7vw,2.5rem)}
h3{font-size:clamp(1.1rem,1.03rem + .35vw,1.3rem)}
h4{font-size:1rem}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}

.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:16px;position:relative;z-index:1}
@media (min-width:600px){.container{padding-inline:24px}}

/* A grid or flex item defaults to min-width:auto, so it refuses to shrink below
   its longest unbreakable child and pushes the row wider than the screen. */
.grid > *,.split > *,.hero-grid > *,.stats > *,.foot-grid > *,.cta-row > *{min-width:0}

/* ---------- Header ----------
   At the top of the page the header has no background of its own: it sits on
   the hero photograph. Its contents are light in BOTH states, so nothing has to
   change colour mid-scroll — only the plate behind them fades in. The scrim
   below is what guarantees the text is readable over a bright sky before that
   plate exists. */
.site-header{
  position:sticky;top:0;z-index:60;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.site-header::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(26,9,12,.58),rgba(26,9,12,.18) 62%,rgba(26,9,12,0));
  transition:opacity .35s ease;
}
.site-header.scrolled{
  background:rgba(48,17,22,.95);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom-color:rgba(255,255,255,.13);
  box-shadow:0 14px 34px -24px rgba(0,0,0,.85);
}
.site-header.scrolled::before{opacity:0}
.nav{display:flex;align-items:center;gap:12px;height:var(--header-h)}
/* The hero starts under the header, not after it. */
main{margin-top:calc(var(--header-h) * -1)}

/* The brand block is as wide as its widest child, and that is the tagline, not
   the name: "GENERAL CONTRACTING" at .66rem with .14em tracking is ~133px, which
   is what pushed the 320px header 45px past the screen. It is allowed to shrink
   and clip as a safety net, and the tagline is dropped outright below 400px. */
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand img{height:36px;width:auto;flex-shrink:0}
@media (min-width:860px){.brand img{height:42px}}
.brand-name{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand-name .n,.brand-name .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-name .n{font-weight:700;font-size:1.02rem;color:#fff;letter-spacing:-.01em}
.brand-name .t{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}
body[dir="rtl"] .brand-name .n{font-size:1.06rem}
body[dir="rtl"] .brand-name .t{letter-spacing:0;text-transform:none;font-size:.75rem}

.nav-links{display:flex;align-items:center;gap:2px;margin-inline-start:auto}
.nav-links a{
  padding:9px 13px;font-size:.86rem;font-weight:600;
  color:rgba(255,255,255,.88);transition:color .2s;white-space:nowrap;position:relative;
}
body[dir="rtl"] .nav-links a{font-size:.96rem}
.nav-links a:hover,.nav-links a.active{color:#fff}
.nav-links a.active::after{
  content:"";position:absolute;inset-inline:13px;bottom:2px;height:2px;background:#fff;
}

.nav-actions{display:flex;align-items:center;gap:10px;margin-inline-start:14px}

/* ---------- Language switcher ----------
   The label is drawn as text, not as a flag emoji: Windows ships no flag
   glyphs and renders them as bare letters. */
.lang{position:relative}
.lang-btn{
  display:inline-flex;align-items:center;gap:8px;
  min-height:40px;padding:9px 14px;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:#fff;font-family:inherit;font-size:.82rem;font-weight:700;
  line-height:1;transition:border-color .2s,background .2s;
}
body[dir="rtl"] .lang-btn{font-size:.9rem}
.lang-btn:hover{background:rgba(255,255,255,.26);border-color:rgba(255,255,255,.6)}
.lang-caret{
  width:0;height:0;flex-shrink:0;
  border-inline:4px solid transparent;border-top:5px solid #fff;
  transition:transform .2s;
}
.lang.open .lang-caret{transform:rotate(180deg)}
.lang-menu{
  position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:80;
  min-width:172px;padding:6px;
  background:#3A1218;border:1px solid rgba(255,255,255,.16);border-radius:12px;
  box-shadow:0 26px 60px -30px rgba(0,0,0,.9);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.lang.open .lang-menu{opacity:1;visibility:visible;transform:none}
.lang-menu a{
  display:flex;align-items:center;gap:10px;
  min-height:42px;padding:11px 12px;border-radius:8px;
  font-size:.9rem;font-weight:600;color:rgba(255,255,255,.82);transition:background .18s,color .18s;
}
.lang-menu a:hover{background:rgba(255,255,255,.12);color:#fff}
.lang-menu a.is-current{background:rgba(255,255,255,.18);color:#fff}

.burger{
  display:none;width:44px;height:44px;border:1px solid rgba(255,255,255,.34);border-radius:10px;
  background:rgba(255,255,255,.13);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  cursor:pointer;padding:0;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
}
.burger span{display:block;width:18px;height:2px;background:#fff;transition:.25s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 24px;border-radius:99px;
  font-family:inherit;font-size:.9rem;font-weight:700;letter-spacing:-.005em;
  border:1px solid transparent;cursor:pointer;transition:.22s;
  text-align:center;
}
body[dir="rtl"] .btn{letter-spacing:0;font-size:.98rem}
.btn svg{width:18px;height:18px;flex-shrink:0}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-deep)}
.btn-ghost{background:#fff;color:var(--brand-deep);border-color:var(--line-2)}
.btn-ghost:hover{background:var(--brand-tint);border-color:var(--brand)}
/* On the maroon veil a maroon button disappears into it, so over the hero and
   in the header the primary inverts to white — the loudest thing on the page —
   and the secondary drops to an outline. Everywhere else the primary stays
   brand maroon. */
.hero .btn-primary,.site-header .btn-primary{background:#fff;color:var(--brand-deep)}
.hero .btn-primary:hover,.site-header .btn-primary:hover{background:var(--brand-tint)}
.site-header .btn-primary{padding:11px 20px;font-size:.86rem}
body[dir="rtl"] .site-header .btn-primary{font-size:.92rem}
.btn-lg{padding:16px 28px;font-size:.96rem}
body[dir="rtl"] .btn-lg{font-size:1.04rem}
.btn-block{width:100%}
/* On the narrowest phones a long label cannot fit on one line; let it wrap
   rather than force the whole row off the screen. */
@media (max-width:400px){
  .btn{padding:13px 18px}
}

/* On a dark band the buttons invert. */
.on-dark .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.on-dark .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
.on-dark .btn-primary{background:#fff;color:var(--brand-deep)}
.on-dark .btn-primary:hover{background:var(--brand-tint)}

/* ---------- Sections ---------- */
section{padding:clamp(56px,7.5vw,104px) 0;position:relative}
/* The first section after the hero carries the handover: less air above its
   heading than a mid-page section needs, and a warm shadow under the
   photograph's edge so the dark does not stop dead against the off-white. */
#about{padding-top:clamp(34px,4.5vw,64px)}
#about::before{
  content:"";position:absolute;inset-inline:0;top:0;height:150px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(60,23,28,.085),rgba(60,23,28,0));
}
.sec-head{max-width:760px;margin-bottom:clamp(34px,4.5vw,54px)}
.sec-head.center{margin-inline:auto;text-align:center}
/* A heading-only band (the vision statement) has nothing under it, so the
   head's own bottom margin would sit on top of the section padding and leave a
   deep empty stripe. */
.sec-head:only-child{margin-bottom:0}
.sec-head .lead{color:var(--muted);font-size:1.02em;margin-bottom:0}
body[dir="rtl"] .sec-head .lead{line-height:1.8}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  padding:6px 14px;border-radius:99px;
  font-size:.76rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--brand);background:var(--brand-tint);
  margin-bottom:18px;line-height:1.7;
}
body[dir="rtl"] .eyebrow{text-transform:none;letter-spacing:0;font-size:.88rem;font-weight:600}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand);flex-shrink:0}

.band{background:var(--bg-2)}
.band-deep{background:var(--brand-ink);color:var(--on-dark)}
.band-deep h2,.band-deep h3,.band-deep h4{color:#fff}
.band-deep .lead,.band-deep p{color:var(--on-dark-muted)}
.band-deep .eyebrow{background:rgba(255,255,255,.12);color:#fff}
.band-deep .eyebrow::before{background:var(--sand)}

/* ---------- Hero ----------
   A full-bleed photograph. It is served in two crops, not one: a 16:9 landscape
   from tablet width up, and a 3:4 portrait on phones. A wide frame cropped down
   to a phone's shape keeps almost none of a skyline, which is the whole subject
   here — so the phone gets a picture shot for its shape instead. */
/* The height comes from the content on a phone — nothing is forced to fit one
   screen — and from the viewport only once there is room for the picture to be
   worth showing. */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;
  padding-top:calc(var(--header-h) + clamp(30px,6vw,64px));
  padding-bottom:clamp(38px,5vw,64px);
  background:var(--brand-ink);
}
@media (min-width:768px){.hero{min-height:clamp(560px,80vh,760px)}}
.hero > .container{width:100%}

.hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
/* The portrait picture is wider than a phone's hero frame, so `cover` trims the
   sides and a centred crop cuts the flag off at the pole. Held at 34% the flag
   stays whole and the crop comes off the city on the right instead. */
.hero-still{
  position:absolute;inset:0;
  background-repeat:no-repeat;background-size:cover;
  background-position:34% 50%;
  background-image:url('../img/photos/skyline-tall-700.webp');
}
/* A 390px phone at 3x needs ~1170 real pixels, so resolution decides this as
   much as width does — picking by width alone leaves the crop soft. */
@media (min-width:430px),(min-resolution:2dppx){
  .hero-still{background-image:url('../img/photos/skyline-tall-1000.webp')}
}
@media (min-width:768px){
  /* The landscape frame is wider than the picture, so `cover` trims top and
     bottom; holding it at 42% keeps the tower's crown and loses road instead. */
  .hero-still{background-image:url('../img/photos/skyline-wide-1100.webp');background-position:50% 42%}
}
@media (min-width:768px) and (min-resolution:1.5dppx),(min-width:1200px){
  .hero-still{background-image:url('../img/photos/skyline-wide-1440.webp')}
}
@media (min-width:1600px){
  .hero-still{background-image:url('../img/photos/skyline-wide-1920.webp')}
}

/* Readability. The side gradient follows the reading direction, so the words
   always land on the dark end; the bottom gradient carries the hero into the
   page below it. */
.hero-veil{
  position:absolute;inset:0;
  background:
    linear-gradient(to bottom,rgba(45,13,20,.50) 0%,rgba(45,13,20,.26) 28%,rgba(45,13,20,.46) 66%,rgba(45,13,20,.90) 100%),
    linear-gradient(var(--veil-dir),rgba(58,17,25,.90) 0%,rgba(58,17,25,.66) 38%,rgba(58,17,25,.16) 74%,rgba(58,17,25,.30) 100%);
}
@media (max-width:767px){
  /* The phone frame is narrow and the text runs its full width, so a side
     gradient would darken the whole picture. Fade top-to-bottom only. */
  .hero-veil{
    background:linear-gradient(to bottom,rgba(45,13,20,.56) 0%,rgba(45,13,20,.60) 20%,rgba(45,13,20,.64) 48%,rgba(45,13,20,.74) 70%,rgba(45,13,20,.93) 100%);
  }
}

.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(26px,4vw,44px);align-items:center}
.hero-grid > div{max-width:660px}

/* The photograph holds the flag and the tower hard against its left edge, and
   `cover` on a frame wider than the picture can only crop vertically — the
   subject cannot be panned sideways. So from tablet width up the English hero
   puts its text on the right, the side the Arabic one already uses, and the
   veil follows it there. Both languages then show the same picture with the
   same subject standing clear, instead of English text sitting on the flag. */
@media (min-width:768px){
  body[dir="ltr"] .hero-grid{justify-items:end}
  body[dir="ltr"] .hero-grid > div{max-width:620px}
  body[dir="ltr"]{--veil-dir:to left}
}
.hero h1{margin-bottom:18px;color:#fff;text-shadow:0 2px 24px rgba(45,13,20,.5)}
.hero-sub{color:rgba(255,255,255,.93);font-size:1.06em;max-width:46ch;margin-bottom:26px}
body[dir="rtl"] .hero-sub{line-height:1.78;max-width:42ch}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}

/* Phone: a smaller heading so the second line fits whole instead of dropping a
   single word onto a third; full-width primary, secondary under it. */
@media (max-width:600px){
  .hero h1{font-size:clamp(1.62rem,1.08rem + 2.35vw,2.1rem);line-height:1.34;margin-bottom:14px}
  body[dir="rtl"] .hero h1{line-height:1.5}
  .hero-sub{font-size:1em;margin-bottom:22px;max-width:none}
  body[dir="rtl"] .hero-sub{max-width:none}
  .hero .cta-row{gap:10px}
  .hero .cta-row .btn{width:100%}
}

/* The secondary action is deliberately quieter than the primary: an outline,
   no fill, lighter weight. */
.hero .btn-ghost{
  background:transparent;color:#fff;border-color:rgba(255,255,255,.42);font-weight:600;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.hero .btn-ghost:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.8)}

/* Stat strip.
   The separators are the 1px grid gap showing the container's own colour
   through, not a border on each cell: borders leave a stray half-line under
   the second-to-last cell as soon as the row count changes on a phone. */
.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));
  gap:1px;background:rgba(255,255,255,.28);
  border:1px solid rgba(255,255,255,.28);border-radius:var(--r-sm);overflow:hidden;
  margin-top:clamp(30px,4vw,48px);
}
/* The cells are frosted rather than transparent: the 1px gap is what draws the
   separators, and it can only show if the cells themselves are opaque. */
.stat{padding:20px 18px;background:rgba(26,9,12,.56);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.stat .num{font-weight:700;font-size:1.5rem;line-height:1.2;color:#fff}
body[dir="rtl"] .stat .num{font-size:1.35rem}
.stat .lbl{color:rgba(255,255,255,.84);font-size:.88rem;margin-top:4px;line-height:1.55}
body[dir="rtl"] .stat .lbl{font-size:.95rem}

/* ---------- Split ---------- */
.split{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,56px);align-items:center}
@media (min-width:860px){.split{grid-template-columns:1fr 1fr}}
@media (min-width:860px){.split.narrow-media{grid-template-columns:1.25fr .75fr}}
.split-media{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);background:var(--bg-2)}
.split-media img{width:100%;height:auto}

/* ---------- Cards ---------- */
.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}

.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:.28s;display:flex;flex-direction:column;
}
.card:hover{border-color:var(--line-2);box-shadow:var(--shadow);transform:translateY(-3px)}
.card-media{aspect-ratio:16/10;overflow:hidden;background:var(--bg-2)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .card-media img{transform:scale(1.045)}
.card-body{padding:22px 20px 24px}
.card-body h3{margin-bottom:9px}
.card-body p{color:var(--muted);font-size:.95em;margin-bottom:0}
body[dir="rtl"] .card-body p{line-height:1.75}

/* Plain cards — no photo, used for goals and competencies */
.tile{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:26px 22px;transition:.28s;
}
.tile:hover{border-color:var(--line-2);box-shadow:var(--shadow)}
.band-deep .tile{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.band-deep .tile:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);box-shadow:none}
.tile h3{margin-bottom:8px;font-size:1.08rem}
.tile p{color:var(--muted);font-size:.95em;margin-bottom:0}
.band-deep .tile p{color:var(--on-dark-muted)}
.tile .ic{
  width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:var(--brand-tint);margin-bottom:16px;
}
.band-deep .tile .ic{background:rgba(255,255,255,.12)}
.tile .ic svg{width:23px;height:23px;fill:none;stroke:var(--brand);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.band-deep .tile .ic svg{stroke:var(--sand)}

/* ---------- Check list ---------- */
.check-list{list-style:none;padding:0;margin:0}
.check-list li{position:relative;padding-inline-start:28px;margin-bottom:13px;color:var(--muted)}
.check-list li:last-child{margin-bottom:0}
.check-list li::before{
  content:"";position:absolute;inset-inline-start:0;top:.62em;
  width:12px;height:12px;border-radius:3px;background:var(--brand);opacity:.85;
}
.band-deep .check-list li{color:var(--on-dark-muted)}
.band-deep .check-list li::before{background:var(--sand)}
body[dir="rtl"] .check-list li{line-height:1.78}

/* ---------- Equipment strip ---------- */
.eq-list{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.eq-list li{padding-inline-start:0}
.eq-list h4{color:#fff;font-size:1.02rem;margin-bottom:5px}
.eq-list p{color:var(--on-dark-muted);font-size:.95em;margin:0}

/* ---------- CTA band ---------- */
.cta-band{
  border-radius:var(--r);background:var(--brand-deep);color:#fff;
  padding:clamp(34px,5vw,60px);text-align:center;position:relative;overflow:hidden;
}
.cta-band h2{color:#fff;margin-bottom:14px}
.cta-band p{color:var(--on-dark-muted);max-width:60ch;margin-inline:auto;margin-bottom:28px}
.cta-band .cta-row{justify-content:center}
/* The band is dark, so the buttons invert — a maroon primary on a maroon band
   is barely a button at all. */
.cta-band .btn-primary{background:#fff;color:var(--brand-deep)}
.cta-band .btn-primary:hover{background:var(--brand-tint)}
.cta-band .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.cta-band .btn-ghost:hover{background:rgba(255,255,255,.14);border-color:#fff}

/* ---------- Contact ---------- */
.contact-tile{
  display:flex;gap:14px;align-items:flex-start;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:20px;transition:.28s;
}
.contact-tile:hover{border-color:var(--line-2);box-shadow:var(--shadow)}
.contact-tile > span:last-child{flex:1;min-width:0}
.contact-tile .ic{width:24px;height:24px;flex-shrink:0;margin-top:2px}
.contact-tile .ic svg{width:24px;height:24px;fill:none;stroke:var(--brand);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.contact-tile h4{margin:0 0 4px;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
body[dir="rtl"] .contact-tile h4{letter-spacing:0;text-transform:none;font-size:.92rem}
.contact-tile p{margin:0;color:var(--text);font-weight:600;font-size:.98em}
/* A phone number or an email address is an LTR run even on an RTL page — the
   "+" belongs on the left and the digit groups must not reorder. The BOX still
   aligns to the reading side, or the footer column would have half its links
   on the right and the number alone on the left. */
.ltr{direction:ltr;font-variant-numeric:tabular-nums}
body[dir="rtl"] .ltr{text-align:right}
body[dir="ltr"] .ltr{text-align:left}

/* ---------- Footer ---------- */
.site-footer{background:var(--brand-ink);color:var(--on-dark-muted);padding:56px 0 24px}
.site-footer .brand-name .n{color:#fff}
.site-footer .brand-name .t{color:rgba(255,255,255,.6)}
.foot-grid{display:grid;grid-template-columns:1fr;gap:34px;margin-bottom:38px}
@media (min-width:700px){.foot-grid{grid-template-columns:1.6fr 1fr 1.1fr}}
.foot-brand p{color:var(--on-dark-muted);font-size:.94em;max-width:40ch;margin-top:16px}
.foot-col h4{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:14px}
body[dir="rtl"] .foot-col h4{letter-spacing:0;text-transform:none;font-size:.92rem}
.foot-col a,.foot-col span{display:block;color:var(--on-dark-muted);font-size:.95em;padding:5px 0;transition:color .2s}
.foot-col a:hover{color:#fff}
.foot-col .ltr{direction:ltr;text-align:start}
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.14);padding-top:20px;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  color:rgba(255,255,255,.62);font-size:.86em;
}

/* ---------- Floating WhatsApp ---------- */
.wa-float{
  position:fixed;bottom:18px;inset-inline-end:18px;z-index:70;
  width:52px;height:52px;border-radius:50%;background:#1FA855;
  display:grid;place-items:center;
  box-shadow:0 12px 30px -10px rgba(31,168,85,.7),0 0 0 3px rgba(255,255,255,.22);
  transition:transform .25s;
}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:27px;height:27px;fill:#fff}
@media (max-width:600px){
  .wa-float{width:48px;height:48px;bottom:14px;inset-inline-end:14px}
  .wa-float svg{width:25px;height:25px}
  /* It is fixed, so it will sit over whatever is at the bottom of the screen.
     The one place that is unacceptable is the last line of the page, so the
     footer keeps a button's worth of clearance under it. */
  .foot-bottom{padding-bottom:46px}
}

/* ---------- Reveal ----------
   The distance lives in a custom property that body[dir] flips, NOT in a
   duplicated body[dir="rtl"] rule: a direction-qualified selector would
   outrank `.reveal.in` and leave RTL pages permanently offset. */
.reveal{opacity:1;transform:none}
html.js .reveal{
  opacity:0;transform:translateX(var(--slide-in));
  transition:opacity .7s cubic-bezier(.22,.85,.3,1),transform .8s cubic-bezier(.22,.85,.3,1);
}
html.js .reveal.in{opacity:1;transform:none}

html.js .hero h1,html.js .hero .hero-sub,
html.js .hero .cta-row,html.js .hero .stats{
  opacity:0;transform:translateX(var(--slide-in));
  transition:opacity .75s cubic-bezier(.22,.85,.3,1),transform .85s cubic-bezier(.22,.85,.3,1);
}
html.js .hero h1{transition-delay:.06s}
html.js .hero .hero-sub{transition-delay:.18s}
html.js .hero .cta-row{transition-delay:.30s}
html.js .hero .stats{transition-delay:.42s}
html.js.ready .hero h1,html.js.ready .hero .hero-sub,
html.js.ready .hero .cta-row,html.js.ready .hero .stats{
  opacity:1;transform:none;
}

@media (prefers-reduced-motion:reduce){
  html.js .reveal,
  html.js .hero h1,html.js .hero .hero-sub,
  html.js .hero .cta-row,html.js .hero .stats
  {opacity:1!important;transform:none!important;transition:none!important}
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .burger{display:flex}
  .nav-links{
    position:fixed;inset-inline:0;top:var(--header-h);flex-direction:column;align-items:stretch;gap:0;
    background:rgba(48,17,22,.98);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(255,255,255,.14);padding:6px 16px 18px;margin:0;
    transform:translateY(-160%);transition:transform .3s ease;
    max-height:calc(100dvh - var(--header-h));overflow-y:auto;
    box-shadow:0 24px 50px -30px rgba(0,0,0,.9);
  }
  .nav-links.open{transform:translateY(0)}
  /* 48px of target height each, which is the reason for the padding here. */
  .nav-links a{padding:14px 2px;font-size:1rem;border-bottom:1px solid rgba(255,255,255,.09)}
  .nav-links a:last-child{border-bottom:none}
  .nav-links a.active::after{inset-inline:2px;bottom:6px}
  .nav-actions{margin-inline-start:auto}
  .nav-actions .btn{display:none}
}
@media (max-width:600px){
  .cta-row .btn{width:100%}
  .hero .cta-row .btn{width:100%}
}
@media (max-width:400px){
  .brand-name .t{display:none}
  .brand-name{line-height:1.25}
}
@media (max-width:360px){
  .brand img{height:34px}
  .brand-name .n{font-size:.94rem}
  .nav-actions{gap:7px;margin-inline-start:8px}
  .lang-btn{padding:9px 10px;gap:6px}
}