/* ==========================================================================
   EL BADRY STEEL — GLOBAL BRAND LAYER
   Premium corporate header, RTL drawer, footer.
   Parent-theme chrome is suppressed, not edited.
   ========================================================================== */

/* --- suppress the legacy theme chrome --- */
.header-container,
#top-header,
#main-header,
#mh-secondary-menu,
#main-footer { display: none !important; }

body { padding-block-start: 0 !important; }
html, body { overflow-x: clip; max-inline-size: 100%; }
body.ebs-lock { overflow: hidden; }

/* --- skip link --- */
.ebs-skip {
  position: absolute; inset-inline-start: -9999px; inset-block-start: 0; z-index: 1200;
  padding: 12px 22px; background: var(--ebs-ink-900,#0E1113); color: #fff; text-decoration: none;
}
.ebs-skip:focus { inset-inline-start: 0; }

/* ==========================  HEADER  ========================== */

.ebs-hd {
  position: sticky; inset-block-start: 0; z-index: 900;
  background: #fff;
  border-block-end: 1px solid var(--ebs-ink-200,#C9CFD4);
  font-family: var(--ebs-font-ar,'IBM Plex Sans Arabic','Segoe UI',Tahoma,sans-serif);
  transition: box-shadow 200ms ease;
}
.ebs-hd.is-stuck { box-shadow: 0 1px 12px rgb(14 17 19 / .07); }

.ebs-hd__inner {
  inline-size: 100%; max-inline-size: 1320px; margin-inline: auto;
  padding-inline: clamp(16px,3.4vw,32px);
  block-size: 84px;
  display: flex; align-items: center; gap: clamp(16px,2.6vw,40px);
  transition: block-size 200ms ease;
}
.ebs-hd.is-stuck .ebs-hd__inner { block-size: 68px; }

/* --- logo --- */
.ebs-logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; flex: none; }
.ebs-logo__mark { flex: none; display: block; }
.ebs-logo__word { display: flex; flex-direction: column; line-height: 1.02; font-family: var(--ebs-font-la,'IBM Plex Sans EBS',system-ui,sans-serif); }
.ebs-logo__w1 { font-size: 1.02rem; font-weight: 600; letter-spacing: .14em; color: var(--ebs-ink-900,#0E1113); }
.ebs-logo__w2 { font-size: 1.02rem; font-weight: 400; letter-spacing: .38em; color: var(--ebs-ink-600,#3D4650); }
.ebs-logo--dark-bg .ebs-logo__w1 { color: #fff; }
.ebs-logo--dark-bg .ebs-logo__w2 { color: rgb(255 255 255 / .72); }

/* --- desktop nav --- */
.ebs-hd__nav { margin-inline-start: auto; }
.ebs-hd__nav ul { display: flex; align-items: center; gap: clamp(14px,2vw,34px); margin: 0; padding: 0; list-style: none; }
.ebs-hd__nav a {
  display: block; padding-block: 10px; position: relative;
  font-size: 1.0rem; font-weight: 500; text-decoration: none;
  color: var(--ebs-ink-900,#0E1113); white-space: nowrap;
}
.ebs-hd__nav a::after {
  content: ''; position: absolute; inset-block-end: 0; inset-inline-start: 0;
  inline-size: 0; block-size: 2px; background: var(--ebs-accent,#C8161C);
  transition: inline-size 200ms ease;
}
.ebs-hd__nav a:hover::after,
.ebs-hd__nav a[aria-current="page"]::after { inline-size: 100%; }
.ebs-hd__nav a[aria-current="page"] { color: var(--ebs-accent,#C8161C); }

.ebs-hd__actions { display: flex; align-items: center; gap: 12px; flex: none; }
.ebs-hd__cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: 44px; padding-inline: 22px;
  background: var(--ebs-accent,#C8161C); color: #fff;
  font-size: .95rem; font-weight: 600; text-decoration: none; border-radius: 2px;
  transition: background-color 180ms ease; white-space: nowrap;
}
.ebs-hd__cta:hover { background: var(--ebs-accent-hover,#A31116); color: #fff; }

/* --- burger --- */
.ebs-burger {
  display: none; inline-size: 46px; block-size: 46px; padding: 11px;
  background: none; border: 1px solid var(--ebs-ink-200,#C9CFD4); border-radius: 2px; cursor: pointer;
}
.ebs-burger span { display: block; block-size: 2px; background: var(--ebs-ink-900,#0E1113); margin-block: 4px; }

/* ==========================  DRAWER  ========================== */

.ebs-scrim {
  position: fixed; inset: 0; z-index: 1000;
  display: none; background: rgb(14 17 19 / .5); opacity: 0; transition: opacity 220ms ease;
}
.ebs-scrim.is-open { display: block; opacity: 1; }
.ebs-scrim.is-visible { display: block; }

.ebs-drawer[hidden]{display:none!important}
.ebs-scrim[hidden]{display:none!important}
.ebs-drawer {
  position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 1001;
  inline-size: min(86vw, 360px); background: #fff;
  display: none; flex-direction: column;
  transform: translateX(100%);          /* RTL: drawer enters from the right edge */
  transition: transform 240ms cubic-bezier(.22,.61,.36,1);
  overflow-y: auto; overscroll-behavior: contain;
  font-family: var(--ebs-font-ar,'IBM Plex Sans Arabic',sans-serif);
}
[dir="ltr"] .ebs-drawer { transform: translateX(-100%); }
.ebs-drawer.is-open { display: flex; transform: translateX(0); }
.ebs-drawer.is-visible { display: flex; }

.ebs-drawer__top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px; border-block-end: 1px solid var(--ebs-ink-200,#C9CFD4);
}
.ebs-drawer__close {
  inline-size: 44px; block-size: 44px; font-size: 1.9rem; line-height: 1;
  background: none; border: 0; cursor: pointer; color: var(--ebs-ink-600,#3D4650);
}
.ebs-drawer__nav { list-style: none; margin: 0; padding: 8px 0; }
.ebs-drawer__nav a {
  display: block; padding: 15px 20px; min-block-size: 48px;
  font-size: 1.08rem; font-weight: 500; text-decoration: none;
  color: var(--ebs-ink-900,#0E1113); border-block-end: 1px solid var(--ebs-ink-100,#E5E8EA);
}
.ebs-drawer__nav a[aria-current="page"] {
  color: var(--ebs-accent,#C8161C);
  box-shadow: inset 3px 0 0 var(--ebs-accent,#C8161C);
}
[dir="rtl"] .ebs-drawer__nav a[aria-current="page"] { box-shadow: inset -3px 0 0 var(--ebs-accent,#C8161C); }

.ebs-drawer__foot { margin-block-start: auto; padding: 20px; display: grid; gap: 10px; }
.ebs-drawer__cta {
  display: flex; align-items: center; justify-content: center; min-block-size: 50px;
  background: var(--ebs-accent,#C8161C); color: #fff; font-weight: 600;
  text-decoration: none; border-radius: 2px;
}
.ebs-drawer__tel {
  display: flex; align-items: center; justify-content: center; min-block-size: 46px;
  border: 1px solid var(--ebs-ink-200,#C9CFD4); border-radius: 2px;
  color: var(--ebs-ink-900,#0E1113); text-decoration: none; font-weight: 600;
}

/* ==========================  FOOTER  ========================== */

.ebs-ft {
  background: var(--ebs-ink-900,#0E1113); color: #fff;
  font-family: var(--ebs-font-ar,'IBM Plex Sans Arabic',sans-serif);
  margin-block-start: 0;
}
.ebs-ft__inner {
  inline-size: 100%; max-inline-size: 1320px; margin-inline: auto;
  padding: clamp(40px,6vw,72px) clamp(16px,3.4vw,32px);
  display: grid; gap: clamp(28px,4vw,56px);
  grid-template-columns: 1.4fr 1fr 1fr;
}
.ebs-ft__desc { margin: 16px 0 0; color: var(--ebs-ink-200,#C9CFD4); font-size: .96rem; max-inline-size: 34ch; }
.ebs-ft__h { margin: 0 0 14px; font-size: .82rem; font-weight: 600; letter-spacing: .06em; color: rgb(255 255 255 / .58); }
.ebs-ft ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ebs-ft a { color: #fff; text-decoration: none; font-size: .98rem; }
.ebs-ft a:hover { color: var(--ebs-accent,#C8161C); }
.ebs-ft__addr { color: var(--ebs-ink-200,#C9CFD4); font-size: .96rem; line-height: 1.7; }
.ebs-ft__bar {
  border-block-start: 1px solid rgb(255 255 255 / .12);
  padding: 18px clamp(16px,3.4vw,32px);
}
.ebs-ft__bar p { margin: 0 auto; max-inline-size: 1320px; font-size: .85rem; color: rgb(255 255 255 / .55); }

/* ==========================  FOCUS  ========================== */

.ebs-hd a:focus-visible, .ebs-hd button:focus-visible,
.ebs-drawer a:focus-visible, .ebs-drawer button:focus-visible,
.ebs-ft a:focus-visible {
  outline: 3px solid var(--ebs-accent,#C8161C); outline-offset: 3px; border-radius: 2px;
}
.ebs-ft a:focus-visible { outline-color: #fff; }

/* ==========================  RESPONSIVE  ========================== */

/* Tablet: the five Arabic labels + CTA stop fitting comfortably below ~1080px. */
@media (max-width: 1080px) {
  .ebs-hd__nav { display: none; }
  .ebs-burger { display: block; }
  .ebs-hd__actions { margin-inline-start: auto; }
  .ebs-hd__inner { block-size: 76px; }
  .ebs-hd.is-stuck .ebs-hd__inner { block-size: 64px; }
}

@media (max-width: 860px) {
  .ebs-ft__inner { grid-template-columns: 1fr 1fr; }
  .ebs-ft__brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .ebs-hd__inner { block-size: 68px; gap: 10px; padding-inline: 14px; }
  .ebs-hd.is-stuck .ebs-hd__inner { block-size: 60px; }
  .ebs-hd__cta { display: none; }          /* CTA lives in the drawer on phones */
  .ebs-logo__mark { width: 28px; height: 28px; }
  .ebs-logo__w1, .ebs-logo__w2 { font-size: .86rem; }
  .ebs-logo__w2 { letter-spacing: .3em; }
  .ebs-ft__inner { grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
  .ebs-logo__w1, .ebs-logo__w2 { font-size: .76rem; }
  .ebs-logo__w2 { letter-spacing: .22em; }
  .ebs-logo { gap: 8px; }
  .ebs-logo__mark { width: 24px; height: 24px; }
  .ebs-hd__inner { padding-inline: 10px; gap: 6px; }
  .ebs-burger { inline-size: 40px; block-size: 40px; padding: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .ebs-drawer, .ebs-scrim, .ebs-hd, .ebs-hd__inner, .ebs-hd__nav a::after { transition: none; }
}

/* The hidden attribute must win over the component display rules above. */
.ebs-drawer[hidden], .ebs-scrim[hidden] { display: none !important; }
.ebs-drawer:not(.is-open) { pointer-events: none; }
.ebs-drawer.is-open { pointer-events: auto; }

/* ---------- Authoritative header containment ----------
   The parent theme applies negative horizontal margins to container rows,
   which pushed the header row ~20px outside the viewport at 320px.
   One rule, no stacked overrides. */
.ebs-hd { box-sizing: border-box; inline-size: 100%; }
.ebs-hd__inner {
  box-sizing: border-box;
  margin-inline: auto !important;
  max-inline-size: min(1320px, 100%) !important;
  justify-content: space-between;
}
.ebs-hd__actions { margin: 0; margin-inline-start: auto; }
.ebs-burger { margin: 0 !important; flex: none; }
.ebs-hd *, .ebs-ft * { box-sizing: border-box; }

/* ---------- Corporate content pages ---------- */
.ebs-pg { background: var(--ebs-paper,#F7F6F4); padding-block: clamp(40px,6vw,88px); }
.ebs-pg__wrap { max-inline-size: 760px; margin-inline: auto; padding-inline: clamp(16px,5vw,32px);
  font-family: var(--ebs-font-ar,'IBM Plex Sans Arabic',sans-serif); line-height: 1.9; color: var(--ebs-ink-600,#3D4650); }
.ebs-pg__eyebrow { display:flex; align-items:center; gap:12px; margin:0 0 12px; font-size:.82rem; font-weight:600; color:var(--ebs-accent,#C8161C); }
.ebs-pg__eyebrow::before { content:''; inline-size:30px; block-size:2px; background:currentColor; flex:none; }
.ebs-pg__h1 { margin:0 0 16px; font-size:clamp(1.9rem,4.4vw,3rem); line-height:1.25; font-weight:600; color:var(--ebs-ink-900,#0E1113); }
.ebs-pg__h2 { margin:clamp(32px,4vw,52px) 0 12px; font-size:clamp(1.2rem,2.2vw,1.55rem); font-weight:600; color:var(--ebs-ink-900,#0E1113); }
.ebs-pg__lede { font-size:clamp(1.02rem,1.6vw,1.18rem); color:var(--ebs-ink-600,#3D4650); }
.ebs-pg p { margin:0 0 14px; }
.ebs-pg__list { margin:0 0 14px; padding-inline-start:1.1em; display:grid; gap:7px; }
.ebs-pg__list strong { color:var(--ebs-ink-900,#0E1113); }
.ebs-pg__link { color:var(--ebs-accent,#C8161C); font-weight:600; text-decoration:none; }
.ebs-pg__link:hover { text-decoration:underline; }
.ebs-pg__actions { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 12px; }
.ebs-pg__btn { display:inline-flex; align-items:center; justify-content:center; min-block-size:48px; padding-inline:24px;
  background:var(--ebs-accent,#C8161C); color:#fff; font-weight:600; text-decoration:none; border-radius:2px; border:1px solid transparent; }
.ebs-pg__btn:hover { background:var(--ebs-accent-hover,#A31116); color:#fff; }
.ebs-pg__btn--ghost { background:transparent; color:var(--ebs-ink-900,#0E1113); border-color:var(--ebs-ink-200,#C9CFD4); }
.ebs-pg__btn--ghost:hover { background:var(--ebs-ink-900,#0E1113); color:#fff; }
.ebs-pg__meta { font-size:.95rem; color:var(--ebs-ink-400,#6B7680); }
@media (max-width:480px){ .ebs-pg__btn { inline-size:100%; } }

/* ---------- Homepage hero (static, no carousel) ---------- */
.ebs-hero { background: var(--ebs-ink-900,#0E1113); color:#fff; padding-block: clamp(56px,10vw,132px); }
.ebs-hero__inner { max-inline-size:1100px; margin-inline:auto; padding-inline:clamp(16px,5vw,32px);
  font-family: var(--ebs-font-ar,'IBM Plex Sans Arabic',sans-serif); }
.ebs-hero__eyebrow { margin:0 0 14px; font-family:var(--ebs-font-la,system-ui,sans-serif);
  font-size:.82rem; font-weight:600; letter-spacing:.28em; color:var(--ebs-accent,#C8161C); }
.ebs-hero__h1 { margin:0 0 16px; font-size:clamp(2rem,5.4vw,3.6rem); line-height:1.22; font-weight:600; color:#fff; max-inline-size:18ch; }
.ebs-hero__lede { margin:0 0 28px; font-size:clamp(1rem,1.8vw,1.22rem); color:var(--ebs-ink-200,#C9CFD4); max-inline-size:52ch; line-height:1.85; }
.ebs-hero__actions { display:flex; flex-wrap:wrap; gap:12px; margin:0; }
.ebs-hero .ebs-pg__btn--ghost { color:#fff; border-color:rgb(255 255 255 / .45); }
.ebs-hero .ebs-pg__btn--ghost:hover { background:#fff; color:var(--ebs-ink-900,#0E1113); }
@media (max-width:480px){ .ebs-hero__h1{max-inline-size:none} .ebs-hero__actions .ebs-pg__btn{inline-size:100%} }

/* ==========================================================================
   TYPEFACE — Cairo (SIL OFL), self-hosted, variable weight 200-1000.
   Declared here rather than in tokens.css because this file is excluded
   from LiteSpeed CSS optimisation: the @font-face and the token override
   can never be tree-shaken out of a per-page UCSS bundle.
   Cairo covers Arabic and Latin in one family, so both directions share
   identical metrics and colour.
   ========================================================================== */

@font-face {
  font-family: Cairo EBS;
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url(/wp-content/themes/mharty-ebs/assets/fonts/cairo-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: Cairo EBS;
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url(/wp-content/themes/mharty-ebs/assets/fonts/cairo-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;
}
@font-face {
  font-family: Cairo EBS;
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url(/wp-content/themes/mharty-ebs/assets/fonts/cairo-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-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ebs-font-ar: Cairo EBS, Segoe UI, Tahoma, system-ui, sans-serif;
  --ebs-font-la: Cairo EBS, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --ebs-font-body: var(--ebs-font-ar);
}

/* 16px base for every El Badry component. Cairo runs slightly small at a
   given size, so body copy is pinned at 16 rather than a fluid clamp. */
.ebs-wrap, .ebs-pg__wrap, .ebs-hero__inner, .ebs-idx__body { font-size: 16px; }
.ebs-sec__lede, .ebs-pg__lede { font-size: clamp(1rem, 1.4vw, 1.125rem); }
.ebs-cap__d, .ebs-caps__d { font-size: 1rem; }

/* ==========================================================================
   MEDIA-LED CONTENT SECTIONS
   Real project photography is the only credibility lever the company has
   (P05 benchmark §2). These components exist to put it on the corporate
   pages. Full-bleed is reserved for the 1920px Ain Sokhna set; everything
   else stays contained so nothing is ever upscaled.
   ========================================================================== */

.ebs-sec, .ebs-hero, .ebs-band, .ebs-wide,
.ebs-sec *, .ebs-hero *, .ebs-band *, .ebs-wide * { box-sizing: border-box; }

/* ---------- Section shell & rhythm ---------- */

.ebs-sec { padding-block: clamp(52px, 7.5vw, 112px); }
.ebs-sec--paper { background: var(--ebs-paper,#F7F6F4); }
.ebs-sec--white { background: var(--ebs-white,#FFFFFF); }
.ebs-sec--ink   { background: var(--ebs-ink-900,#0E1113); }
.ebs-sec--head  { padding-block: clamp(40px, 6vw, 84px); }
.ebs-sec--tight { padding-block: clamp(24px, 4vw, 56px); }

.ebs-wrap {
  inline-size: 100%; max-inline-size: 1320px; margin-inline: auto;
  padding-inline: clamp(16px, 3.4vw, 32px);
  font-family: var(--ebs-font-ar,'IBM Plex Sans Arabic','Segoe UI',Tahoma,sans-serif);
  line-height: 1.9; color: var(--ebs-ink-600,#3D4650);
}
.ebs-wrap--narrow { max-inline-size: 1100px; }
.ebs-sec--ink .ebs-wrap { color: var(--ebs-ink-200,#C9CFD4); }

.ebs-sec__eyebrow {
  display: flex; align-items: center; gap: 12px; margin: 0 0 12px;
  font-size: .82rem; font-weight: 600; color: var(--ebs-accent,#C8161C);
}
.ebs-sec__eyebrow::before { content:''; inline-size:30px; block-size:2px; background:currentColor; flex:none; }
.ebs-sec__h1 { margin:0 0 16px; font-size:clamp(1.9rem,4.4vw,3rem); line-height:1.25; font-weight:600; color:var(--ebs-ink-900,#0E1113); text-wrap:balance; }
.ebs-sec__h2 { margin:0 0 14px; font-size:clamp(1.5rem,3vw,2.2rem); line-height:1.3;  font-weight:600; color:var(--ebs-ink-900,#0E1113); text-wrap:balance; }
.ebs-sec--ink .ebs-sec__h1, .ebs-sec--ink .ebs-sec__h2 { color:#fff; }
.ebs-sec__lede { margin:0; font-size:clamp(1.02rem,1.6vw,1.18rem); max-inline-size:62ch; }
.ebs-sec__more { margin:clamp(22px,3vw,34px) 0 0; }
.ebs-sec__meta { margin:16px 0 0; font-size:.95rem; color:var(--ebs-ink-400,#6B7680); }
.ebs-sec--ink .ebs-sec__meta { color:rgb(255 255 255 / .58); }
.ebs-sec__actions { display:flex; flex-wrap:wrap; gap:10px; margin:clamp(20px,3vw,28px) 0 0; }
.ebs-sec--ink .ebs-pg__btn--ghost { color:#fff; border-color:rgb(255 255 255 / .45); }
.ebs-sec--ink .ebs-pg__btn--ghost:hover { background:#fff; color:var(--ebs-ink-900,#0E1113); }
.ebs-sec p { margin: 0 0 14px; }
.ebs-sec p:last-child { margin-block-end: 0; }

/* ---------- Hero with a full-bleed photograph ----------
   Only the Ain Sokhna set is 1920px wide; nothing else may be used here. */

.ebs-hero--img {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: end;
  /* Cinematic: the photograph owns the first screen. svh keeps mobile
     stable while the browser chrome collapses; vh is the fallback. */
  min-block-size: clamp(520px, 80vh, 800px);
  min-block-size: clamp(520px, calc(100svh - 84px), 820px);
  padding-block: clamp(72px, 11vw, 132px);
  background: var(--ebs-ink-900,#0E1113);
}
.ebs-hero__media { position:absolute; inset:0; z-index:-2; }
.ebs-hero__img { display:block; inline-size:100%; block-size:100%; object-fit:cover; object-position:50% 44%; }
.ebs-hero__scrim {
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to bottom,
      rgb(14 17 19 / .42) 0%,
      rgb(14 17 19 / .28) 26%,
      rgb(14 17 19 / .62) 62%,
      rgb(14 17 19 / .90) 100%),
    radial-gradient(120% 90% at 50% 100%, rgb(14 17 19 / .34) 0%, rgb(14 17 19 / 0) 65%);
}
.ebs-hero--img .ebs-hero__inner {
  /* Grid item: without an explicit size the inherited auto margins would
     shrink-wrap the text instead of centring a full-width column. */
  inline-size: 100%; justify-self: center;
  max-inline-size: 1320px; padding-inline: clamp(16px,3.4vw,32px);
}
.ebs-hero--img .ebs-hero__eyebrow {
  margin-block-end: 20px; font-size: .9rem; letter-spacing: .34em;
}
.ebs-hero--img .ebs-hero__h1 {
  margin-block-end: 22px;
  font-size: clamp(2.35rem, 6.2vw, 4.4rem);
  line-height: 1.14; max-inline-size: 17ch;
  text-shadow: 0 2px 28px rgb(14 17 19 / .38);
}
.ebs-hero--img .ebs-hero__lede {
  color: rgb(255 255 255 / .92);
  font-size: clamp(1.05rem, 1.9vw, 1.35rem);
  max-inline-size: 54ch; margin-block-end: 34px;
  text-shadow: 0 1px 18px rgb(14 17 19 / .42);
}
/* A short accent rule under the copy — the one accent moment in the hero. */
.ebs-hero--img .ebs-hero__inner::after {
  content: ''; display: block; inline-size: 64px; block-size: 3px;
  background: var(--ebs-accent,#C8161C); margin-block-start: clamp(28px,4vw,44px);
}
.ebs-hero__actions { display:flex; flex-wrap:wrap; gap:12px; margin:0; }

/* ---------- Full-bleed image band (1920px sources only) ---------- */

.ebs-band {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: center;
  min-block-size: clamp(240px, 32vw, 420px);
  background: var(--ebs-ink-900,#0E1113);
}
.ebs-band__media { position:absolute; inset:0; z-index:-2; }
.ebs-band__img { display:block; inline-size:100%; block-size:100%; object-fit:cover; object-position:50% 50%; }
.ebs-band__scrim { position:absolute; inset:0; z-index:-1; background: rgb(14 17 19 / .62); }
.ebs-band__text {
  margin: 0; color:#fff; font-weight:600; text-wrap:balance;
  font-size: clamp(1.15rem, 2.4vw, 1.9rem); line-height:1.65; max-inline-size: 28ch;
}

/* ---------- Contained wide image (1280px ceiling sources) ---------- */

.ebs-wide { margin-inline:auto; max-inline-size:1280px; padding-inline:clamp(16px,3.4vw,32px); }
.ebs-wide__img {
  display:block; inline-size:100%; block-size:auto; max-block-size:52vh;
  object-fit:cover; border-radius:2px; background:var(--ebs-ink-100,#E5E8EA);
}

/* ---------- Capability block: image + heading + two lines ---------- */

.ebs-cap { display:grid; gap:clamp(20px,3.2vw,52px); align-items:center; grid-template-columns:1.2fr .8fr; }
.ebs-cap--flip { grid-template-columns:.8fr 1.2fr; }
.ebs-cap + .ebs-cap { margin-block-start: clamp(40px,6vw,88px); }
.ebs-cap__fig { margin:0; overflow:hidden; border-radius:2px; background:var(--ebs-ink-100,#E5E8EA); }
.ebs-cap__img {
  display:block; inline-size:100%; block-size:100%; aspect-ratio:16/9; object-fit:cover;
  transition: transform 400ms var(--ebs-ease,cubic-bezier(.22,.61,.36,1));
}
.ebs-cap__fig:hover .ebs-cap__img { transform: scale(1.03); }
/* Alternating side. Grid order is inline-direction aware, so RTL mirrors itself. */
.ebs-cap--flip .ebs-cap__fig { order: 2; }
.ebs-cap__n { margin:0 0 10px; font-family:var(--ebs-font-la,system-ui,sans-serif);
  font-size:.8125rem; font-weight:600; letter-spacing:.18em; color:var(--ebs-accent,#C8161C); }
.ebs-cap__t { margin:0 0 10px; font-size:clamp(1.25rem,2.2vw,1.65rem); font-weight:600; color:var(--ebs-ink-900,#0E1113); }
.ebs-cap__d { margin:0; max-inline-size:46ch; }

/* ---------- Capability strip (no images — restraint, per benchmark §6) ---------- */

.ebs-caps {
  display:grid; gap:clamp(16px,2vw,26px); margin-block-start:clamp(26px,3.4vw,42px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}
.ebs-caps__item { padding-block-start:16px; border-block-start:2px solid var(--ebs-ink-200,#C9CFD4); }
.ebs-caps__n { margin:0 0 8px; font-family:var(--ebs-font-la,system-ui,sans-serif);
  font-size:.78rem; font-weight:600; letter-spacing:.18em; color:var(--ebs-accent,#C8161C); }
.ebs-caps__t { margin:0 0 6px; font-size:1.05rem; font-weight:600; line-height:1.5; color:var(--ebs-ink-900,#0E1113); }
.ebs-caps__d { margin:0; font-size:.94rem; line-height:1.8; }

/* ---------- Text beside a contained photograph ---------- */

.ebs-split { display:grid; gap:clamp(22px,3.4vw,56px); align-items:center; grid-template-columns:1.1fr .9fr; }
.ebs-split--flip { grid-template-columns:.9fr 1.1fr; }
.ebs-split--flip .ebs-split__fig { order:-1; }
.ebs-split__fig { margin:0; overflow:hidden; border-radius:2px; background:var(--ebs-ink-100,#E5E8EA); }
.ebs-split__img { display:block; inline-size:100%; block-size:100%; aspect-ratio:3/2; object-fit:cover; }

/* ---------- Projects index card ----------
   Moved here from case-study.css: this file is excluded from LiteSpeed
   CSS optimisation, so the component survives UCSS tree-shaking and is
   available to /projects/ and the corporate pages alike. One definition. */
.ebs-idx__header { padding-block-end: clamp(24px, 4vw, 40px); }
.ebs-idx__grid {
  display: grid;
  gap: clamp(18px, 2.6vw, 32px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}
.ebs-idx__card { margin: 0; }
.ebs-idx__link {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--ebs-ink-200, #C9CFD4);
  border-radius: 2px;
  overflow: hidden;
  transition: border-color 180ms ease, transform 300ms cubic-bezier(.22,.61,.36,1);
}
.ebs-idx__link:hover { border-color: var(--ebs-ink-600, #3D4650); transform: translateY(-2px); }
.ebs-idx__fig { margin: 0; overflow: hidden; background: var(--ebs-ink-100, #E5E8EA); }
.ebs-idx__img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 400ms cubic-bezier(.22,.61,.36,1);
}
.ebs-idx__link:hover .ebs-idx__img { transform: scale(1.03); }
.ebs-idx__body { padding: clamp(18px, 2.4vw, 26px); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ebs-idx__title { margin: 0; font-size: clamp(1.05rem, 1.7vw, 1.3rem); font-weight: 600; line-height: 1.5; }
.ebs-idx__meta { margin: 0; font-size: .9rem; color: var(--ebs-ink-400, #6B7680); }
.ebs-idx__cta {
  margin-block-start: auto;
  padding-block-start: 12px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ebs-accent, #C8161C);
}
@media (prefers-reduced-motion: reduce) {
  .ebs-idx__link, .ebs-idx__img { transition: none; }
  .ebs-idx__link:hover { transform: none; }
  .ebs-idx__link:hover .ebs-idx__img { transform: none; }
}

/* ---------- Project cards on corporate pages ----------
   The component itself is case-study.css .ebs-idx__card, rendered by the
   same PHP as /projects/. Only the track count changes: four verified
   projects read better as two large pairs than as a 3+1 orphan row. */

.ebs-idx__grid.ebs-idx__grid--pair {
  grid-template-columns: repeat(2, minmax(0,1fr));
  margin-block-start: clamp(26px,3.4vw,42px);
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .ebs-cap, .ebs-cap--flip { grid-template-columns:1fr; gap:18px; }
  .ebs-cap--flip .ebs-cap__fig { order:0; }
  .ebs-cap + .ebs-cap { margin-block-start: clamp(36px,7vw,56px); }
  .ebs-split, .ebs-split--flip { grid-template-columns:1fr; }
  .ebs-split--flip .ebs-split__fig { order:0; }
}

@media (max-width: 640px) {
  .ebs-idx__grid.ebs-idx__grid--pair { grid-template-columns:1fr; }
  .ebs-hero--img {
    min-block-size: clamp(480px, 86vh, 700px);
    min-block-size: clamp(480px, calc(100svh - 68px), 720px);
    padding-block: clamp(56px, 14vw, 88px);
  }
  .ebs-sec__actions .ebs-pg__btn, .ebs-hero__actions .ebs-pg__btn { inline-size:100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ebs-cap__img { transition:none; }
  .ebs-cap__fig:hover .ebs-cap__img { transform:none; }
}

/* ==========================================================================
   LANGUAGE SWITCHER + LTR
   Two text labels, never a flag. Arabic is authored first; English is the
   mirrored case, handled entirely by the logical properties already in use.
   ========================================================================== */

.ebs-lang { display: flex; align-items: center; gap: 2px; flex: none; }
.ebs-lang__item {
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: 36px; min-inline-size: 38px; padding-inline: 8px;
  font-family: var(--ebs-font-la, system-ui, sans-serif);
  font-size: .78rem; font-weight: 600; letter-spacing: .08em;
  color: var(--ebs-ink-400, #6B7680); text-decoration: none; border-radius: 2px;
  transition: color 180ms ease;
}
.ebs-lang__item:hover { color: var(--ebs-ink-900, #0E1113); }
.ebs-lang__item.is-current { color: var(--ebs-ink-900, #0E1113); position: relative; }
.ebs-lang__item.is-current::after {
  content: ""; position: absolute; inset-block-end: 4px; inset-inline: 8px;
  block-size: 2px; background: var(--ebs-accent, #C8161C);
}
.ebs-lang--hd { margin-inline-end: 4px; padding-inline-end: 12px;
  border-inline-end: 1px solid var(--ebs-ink-200, #C9CFD4); }
.ebs-lang--drawer { justify-content: center; margin-block-end: 4px; }
.ebs-lang--drawer .ebs-lang__item { min-block-size: 44px; min-inline-size: 56px; font-size: .9rem; }

@media (max-width: 560px) { .ebs-lang--hd { display: none; } }

/* Latin copy wants tighter leading than Arabic — 1.9 is an Arabic figure. */
[dir="ltr"] .ebs-wrap,
[dir="ltr"] .ebs-pg__wrap,
[dir="ltr"] .ebs-cs { line-height: 1.65; }
[dir="ltr"] .ebs-sec__lede,
[dir="ltr"] .ebs-hero__lede { max-inline-size: 68ch; }
[dir="ltr"] .ebs-cs__back-arrow { transform: none; }

/* ==========================================================================
   TYPEFACE ENFORCEMENT — last block in the file, deliberately.
   The parent theme sets font-family directly on h1-h3 (Noto Kufi Arabic),
   and a declaration on the element beats inheritance from the component
   wrapper. The class is repeated to raise specificity above the theme's
   descendant selectors instead of reaching for !important.
   Cairo covers Arabic and Latin, so one family serves both directions.
   ========================================================================== */

.ebs-hero.ebs-hero,   .ebs-band.ebs-band,   .ebs-sec.ebs-sec,
.ebs-cs.ebs-cs,       .ebs-pg.ebs-pg,       .ebs-hd.ebs-hd,     .ebs-ft.ebs-ft,
.ebs-hero.ebs-hero *, .ebs-band.ebs-band *, .ebs-sec.ebs-sec *,
.ebs-cs.ebs-cs *,     .ebs-pg.ebs-pg *,     .ebs-hd.ebs-hd *,   .ebs-ft.ebs-ft * {
  font-family: var(--ebs-font-ar, "Cairo EBS", "Segoe UI", Tahoma, system-ui, sans-serif);
}

/* 16px body copy. Restated here so it survives the component rules above. */
.ebs-sec.ebs-sec p,
.ebs-sec.ebs-sec .ebs-caps__d,
.ebs-sec.ebs-sec .ebs-cap__d,
.ebs-pg.ebs-pg p,
.ebs-cs.ebs-cs .ebs-cs__body p { font-size: 1rem; }

.ebs-sec.ebs-sec .ebs-sec__lede { font-size: clamp(1rem, 1.4vw, 1.125rem); }
.ebs-idx__body .ebs-idx__title  { font-size: clamp(1.05rem, 1.6vw, 1.25rem); }
.ebs-cs.ebs-cs .ebs-cs__lede    { font-size: clamp(1rem, 1.5vw, 1.125rem); }

/* ---------- Projects index: five verified projects ----------
   The corporate pages keep the two-up pair; only the index needs a third
   track so five cards read as 3 + 2 instead of leaving an orphan. */
.ebs-idx.ebs-idx .ebs-container { max-inline-size: 1320px; }
.ebs-idx__grid.ebs-idx__grid--trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) {
  .ebs-idx__grid.ebs-idx__grid--trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ebs-idx__grid.ebs-idx__grid--trio { grid-template-columns: 1fr; }
}

/* ==========================================================================
   TEMPLATE CHROME — floating widgets
   The magazine share tray is not a B2B contractor control; it goes. The
   WhatsApp quick-contact stays (it is the strongest regional conversion
   channel) but is rebuilt in the brand: ink surface, single accent, the
   2px engineered radius, and a real touch target.
   ========================================================================== */

.mh_share,
.mh_share_float,
.mh-app-nav { display: none !important; }

.mh_quick_form_item .mh_quick_form_button.whatsapp,
.mh_quick_form_button.mh-social-whatsapp {
  background: var(--ebs-ink-900, #0E1113) !important;
  border: 1px solid rgb(255 255 255 / .16) !important;
  border-radius: 2px !important;
  inline-size: 52px !important;
  block-size: 52px !important;
  box-shadow: 0 8px 24px rgb(14 17 19 / .22) !important;
  transition: background-color 180ms ease, transform 180ms ease !important;
}
.mh_quick_form_item .mh_quick_form_button.whatsapp:hover,
.mh_quick_form_button.mh-social-whatsapp:hover {
  background: var(--ebs-accent, #C8161C) !important;
  transform: translateY(-2px);
}
.mh_quick_form_button.mh-social-whatsapp i,
.mh_quick_form_button.whatsapp i { color: #fff !important; }

@media (prefers-reduced-motion: reduce) {
  .mh_quick_form_button.mh-social-whatsapp { transition: none !important; }
  .mh_quick_form_button.mh-social-whatsapp:hover { transform: none; }
}

/* ---------- Floating WhatsApp, brand-built ---------- */
.mh_quick_form_item,
.mh_quick_form_button,
.mh_quick_form { display: none !important; }

.ebs-wa {
  position: fixed; z-index: 950;
  inset-block-end: clamp(16px, 3vw, 28px);
  inset-inline-end: clamp(16px, 3vw, 28px);
  inline-size: 54px; block-size: 54px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ebs-ink-900, #0E1113); color: #fff;
  border: 1px solid rgb(255 255 255 / .18); border-radius: 2px;
  box-shadow: 0 10px 28px rgb(14 17 19 / .26);
  text-decoration: none;
  transition: background-color 180ms ease, transform 180ms ease;
}
.ebs-wa:hover { background: var(--ebs-accent, #C8161C); color: #fff; transform: translateY(-2px); }
.ebs-wa:focus-visible { outline: 3px solid var(--ebs-accent, #C8161C); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .ebs-wa { transition: none; }
  .ebs-wa:hover { transform: none; }
}

/* ==========================================================================
   BUTTONS — rebuilt
   The template shipped flat rectangles with a hairline ghost that read as
   disabled. These carry real weight, a directional cue on the primary action,
   and a ghost with enough border contrast to look clickable.
   Declared late and with doubled specificity so the theme cannot win.
   ========================================================================== */

.ebs-pg__btn.ebs-pg__btn,
.ebs-cs .ebs-btn.ebs-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-block-size: 52px;
  padding-block: 12px;
  padding-inline: 30px;
  font-family: var(--ebs-font-ar, "Cairo EBS", sans-serif);
  font-size: 1rem; font-weight: 600; line-height: 1.2;
  text-decoration: none; border-radius: 2px;
  border: 1px solid transparent;
  background: var(--ebs-accent, #C8161C); color: #fff;
  transition: background-color 180ms ease, border-color 180ms ease,
              color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

/* Directional cue on the primary action only — logical, so RTL mirrors it. */
.ebs-pg__btn.ebs-pg__btn:not(.ebs-pg__btn--ghost)::after,
.ebs-cs .ebs-btn--primary.ebs-btn--primary::after {
  content: "";
  inline-size: 7px; block-size: 7px; flex: none;
  border-inline-end: 2px solid currentColor;
  border-block-start: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 180ms ease, margin 180ms ease;
  opacity: .9;
}
[dir="rtl"] .ebs-pg__btn.ebs-pg__btn:not(.ebs-pg__btn--ghost)::after,
[dir="rtl"] .ebs-cs .ebs-btn--primary.ebs-btn--primary::after { transform: rotate(-135deg); }

.ebs-pg__btn.ebs-pg__btn:hover,
.ebs-cs .ebs-btn--primary.ebs-btn--primary:hover {
  background: var(--ebs-accent-hover, #A31116); color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgb(200 22 28 / .26);
}
.ebs-pg__btn.ebs-pg__btn:hover::after { margin-inline-start: 4px; }

/* Ghost on a light ground: a real border, not a hairline. */
.ebs-pg__btn--ghost.ebs-pg__btn--ghost {
  background: transparent;
  color: var(--ebs-ink-900, #0E1113);
  border-color: var(--ebs-ink-900, #0E1113);
  box-shadow: none;
}
.ebs-pg__btn--ghost.ebs-pg__btn--ghost:hover {
  background: var(--ebs-ink-900, #0E1113); color: #fff;
  border-color: var(--ebs-ink-900, #0E1113);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgb(14 17 19 / .22);
}

/* Ghost on ink: inherit the inverse treatment. */
.ebs-sec--ink .ebs-pg__btn--ghost.ebs-pg__btn--ghost,
.ebs-hero .ebs-pg__btn--ghost.ebs-pg__btn--ghost,
.ebs-cs .ebs-btn--ghost.ebs-btn--ghost {
  color: #fff; border-color: rgb(255 255 255 / .55); background: transparent;
}
.ebs-sec--ink .ebs-pg__btn--ghost.ebs-pg__btn--ghost:hover,
.ebs-hero .ebs-pg__btn--ghost.ebs-pg__btn--ghost:hover,
.ebs-cs .ebs-btn--ghost.ebs-btn--ghost:hover {
  background: #fff; color: var(--ebs-ink-900, #0E1113); border-color: #fff;
  box-shadow: 0 10px 22px rgb(0 0 0 / .28);
}

.ebs-pg__btn.ebs-pg__btn:focus-visible,
.ebs-cs .ebs-btn.ebs-btn:focus-visible {
  outline: 3px solid var(--ebs-accent, #C8161C); outline-offset: 3px;
}
.ebs-sec--ink .ebs-pg__btn:focus-visible,
.ebs-hero .ebs-pg__btn:focus-visible { outline-color: #fff; }

/* Header CTA gets the same language at a compact scale. */
.ebs-hd__cta.ebs-hd__cta {
  min-block-size: 46px; padding-inline: 24px; border-radius: 2px;
  font-weight: 600; letter-spacing: 0;
  transition: background-color 180ms ease, box-shadow 180ms ease;
}
.ebs-hd__cta.ebs-hd__cta:hover { box-shadow: 0 8px 18px rgb(200 22 28 / .3); }

@media (prefers-reduced-motion: reduce) {
  .ebs-pg__btn.ebs-pg__btn, .ebs-cs .ebs-btn.ebs-btn { transition: none; }
  .ebs-pg__btn.ebs-pg__btn:hover, .ebs-cs .ebs-btn.ebs-btn:hover { transform: none; }
}

/* Square template bullets were still showing through on prose lists. */
.ebs-pg__list.ebs-pg__list, .ebs-sec .ebs-pg__list {
  list-style: none; padding-inline-start: 0;
}
.ebs-pg__list.ebs-pg__list > li {
  position: relative; padding-inline-start: 20px;
}
.ebs-pg__list.ebs-pg__list > li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .78em;
  inline-size: 8px; block-size: 2px; background: var(--ebs-accent, #C8161C);
}

/* ==========================================================================
   FOOTER — rebuilt
   Four structured columns with hairline separators, accent-ruled headings,
   and the phone promoted to the primary conversion element.
   ========================================================================== */

.ebs-ft { background: var(--ebs-ink-900, #0E1113); color: #fff; }

.ebs-ft__inner {
  inline-size: 100%; max-inline-size: 1320px; margin-inline: auto;
  padding: clamp(48px, 6.5vw, 88px) clamp(16px, 3.4vw, 32px) clamp(40px, 5vw, 68px);
  display: grid; gap: clamp(30px, 3.4vw, 56px);
  grid-template-columns: 1.5fr 1fr 1fr 1.35fr;
  align-items: start;
}

.ebs-ft__brand { max-inline-size: 34ch; }
.ebs-ft__desc {
  margin: 18px 0 0; color: var(--ebs-ink-200, #C9CFD4);
  font-size: .98rem; line-height: 1.85;
}
.ebs-ft__telwrap { margin: 26px 0 0; display: flex; flex-direction: column; gap: 6px; }
.ebs-ft__tel {
  font-family: var(--ebs-font-la, system-ui, sans-serif);
  font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 600;
  color: #fff; text-decoration: none; letter-spacing: .01em;
  transition: color 180ms ease;
}
.ebs-ft__tel:hover { color: var(--ebs-accent, #C8161C); }

/* Column headings carry the same accent rule as section eyebrows. */
.ebs-ft__h {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 18px; padding: 0;
  font-size: .8rem; font-weight: 600; letter-spacing: .04em;
  color: #fff; text-transform: none;
}
.ebs-ft__h::before {
  content: ""; inline-size: 18px; block-size: 2px; flex: none;
  background: var(--ebs-accent, #C8161C);
}

.ebs-ft ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ebs-ft a { color: var(--ebs-ink-200, #C9CFD4); text-decoration: none; font-size: .98rem; }
.ebs-ft__col a { position: relative; display: inline-block; transition: color 180ms ease; }
.ebs-ft__col a::after {
  content: ""; position: absolute; inset-block-end: -3px; inset-inline-start: 0;
  inline-size: 0; block-size: 1px; background: var(--ebs-accent, #C8161C);
  transition: inline-size 200ms ease;
}
.ebs-ft__col a:hover { color: #fff; }
.ebs-ft__col a:hover::after { inline-size: 100%; }

/* Contact rows: quiet label above a strong value. */
.ebs-ft__rows { gap: 16px; }
.ebs-ft__rows li { display: flex; flex-direction: column; gap: 3px; }
.ebs-ft__k {
  font-size: .74rem; font-weight: 600; letter-spacing: .06em;
  color: rgb(255 255 255 / .45);
}
.ebs-ft__addr { color: var(--ebs-ink-200, #C9CFD4); font-size: .98rem; line-height: 1.7; }

.ebs-ft__bar { border-block-start: 1px solid rgb(255 255 255 / .12); }
.ebs-ft__bar-inner {
  max-inline-size: 1320px; margin-inline: auto;
  padding: 18px clamp(16px, 3.4vw, 32px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.ebs-ft__copy { margin: 0; font-size: .85rem; color: rgb(255 255 255 / .5); }
.ebs-ft__legal { font-size: .85rem; color: rgb(255 255 255 / .5); }
.ebs-ft__legal:hover { color: #fff; }

.ebs-ft a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 2px; }

@media (max-width: 1080px) {
  .ebs-ft__inner { grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 48px); }
  .ebs-ft__brand { grid-column: 1 / -1; max-inline-size: none; }
}
@media (max-width: 560px) {
  .ebs-ft__inner { grid-template-columns: 1fr; }
  .ebs-ft__bar-inner { justify-content: flex-start; }
}

/* ---------- corrections ---------- */

/* The chevron used logical borders, which flip in RTL and cancelled the
   rotation, leaving it pointing down. Physical borders keep one shape;
   only the rotation changes per direction. */
.ebs-pg__btn.ebs-pg__btn:not(.ebs-pg__btn--ghost)::after,
.ebs-cs .ebs-btn--primary.ebs-btn--primary::after {
  border-inline-end: 0; border-block-start: 0;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
}
[dir="rtl"] .ebs-pg__btn.ebs-pg__btn:not(.ebs-pg__btn--ghost)::after,
[dir="rtl"] .ebs-cs .ebs-btn--primary.ebs-btn--primary::after { transform: rotate(-135deg); }

/* dir="ltr" on the digits made those boxes stretch, so the numbers drifted
   to the far edge of the column. Shrink-wrap them instead. */
.ebs-ft__telwrap { align-items: flex-start; }
.ebs-ft__rows li > a,
.ebs-ft__rows li > span,
.ebs-ft__tel { align-self: flex-start; }

/* An earlier rule centred every <p> inside the bottom bar. */
.ebs-ft__bar .ebs-ft__copy { margin: 0; max-inline-size: none; }

/* .ebs-pg was never added to the border-box rule, so min-block-size stacked
   on top of the padding and buttons rendered 78px there but 52px elsewhere. */
.ebs-pg, .ebs-pg *, .ebs-ft, .ebs-ft * { box-sizing: border-box; }

/* ==========================================================================
   PREMIUM POLISH — contact composition, header proportions, footer weight
   Everything is scoped to ebs- classes. No element selectors, no new fonts,
   no JS. Existing components are refined, not replaced.
   ========================================================================== */

/* ---------- Contact: editorial split ---------- */

.ebs-ct__split {
  display: grid; align-items: center;
  gap: clamp(28px, 4vw, 64px);
  grid-template-columns: 1.05fr .95fr;
}
.ebs-ct__body { max-inline-size: 52ch; }
.ebs-ct__fig {
  margin: 0; overflow: hidden; border-radius: 2px;
  background: var(--ebs-ink-100, #E5E8EA);
  /* a quiet frame rather than a floating card */
  box-shadow: 0 1px 0 var(--ebs-ink-200, #C9CFD4);
}
.ebs-ct__img {
  display: block; inline-size: 100%; block-size: 100%;
  aspect-ratio: 4 / 3; object-fit: cover;
}

/* ---------- Contact: action grid ----------
   One connected band of four items, not four floating boxes. */

.ebs-act {
  display: grid; margin-block-start: clamp(26px, 3.4vw, 40px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--ebs-ink-200, #C9CFD4);
  border-radius: 2px; overflow: hidden;
  background: var(--ebs-white, #fff);
}
.ebs-act__item {
  display: flex; flex-direction: column; gap: 6px;
  padding: clamp(20px, 2.4vw, 30px);
  text-decoration: none; color: inherit;
  border-inline-start: 1px solid var(--ebs-ink-200, #C9CFD4);
  transition: background-color 180ms ease;
}
.ebs-act__item:first-child { border-inline-start: 0; }
.ebs-act__item:not(.is-static):hover { background: var(--ebs-paper, #F7F6F4); }
.ebs-act__item:not(.is-static):hover .ebs-act__ico { color: var(--ebs-accent, #C8161C); }
.ebs-act__item:not(.is-static):hover .ebs-act__v { color: var(--ebs-accent, #C8161C); }
.ebs-act__item:focus-visible { outline: 3px solid var(--ebs-accent, #C8161C); outline-offset: -3px; }

.ebs-act__ico {
  inline-size: 26px; block-size: 26px; margin-block-end: 4px;
  color: var(--ebs-ink-400, #6B7680);
  transition: color 180ms ease;
}
.ebs-act__ico svg { inline-size: 100%; block-size: 100%; display: block; }
.ebs-act__k {
  font-size: .74rem; font-weight: 600; letter-spacing: .05em;
  color: var(--ebs-ink-400, #6B7680);
}
.ebs-act__v {
  font-size: 1rem; font-weight: 600; line-height: 1.6;
  color: var(--ebs-ink-900, #0E1113);
  transition: color 180ms ease;
}
.ebs-act__item.is-static .ebs-act__v { font-weight: 500; color: var(--ebs-ink-600, #3D4650); }

/* ---------- Contact: project brief panel ---------- */

.ebs-brief {
  list-style: none; margin: clamp(26px, 3.4vw, 40px) 0 0; padding: 0;
  border-block-start: 1px solid var(--ebs-ink-200, #C9CFD4);
}
.ebs-brief__item {
  display: grid; grid-template-columns: auto 1fr;
  gap: clamp(16px, 2.2vw, 30px); align-items: baseline;
  padding-block: clamp(18px, 2.2vw, 26px);
  border-block-end: 1px solid var(--ebs-ink-200, #C9CFD4);
}
.ebs-brief__n {
  font-family: var(--ebs-font-la, system-ui, sans-serif);
  font-size: .8125rem; font-weight: 600; letter-spacing: .16em;
  color: var(--ebs-accent, #C8161C);
}
.ebs-brief__t {
  margin: 0 0 4px; font-size: 1.08rem; font-weight: 600; line-height: 1.5;
  color: var(--ebs-ink-900, #0E1113);
}
.ebs-brief__d { margin: 0; font-size: 1rem; color: var(--ebs-ink-600, #3D4650); }

/* ---------- Header proportions ---------- */

.ebs-hd__inner { block-size: 88px; gap: clamp(14px, 2.2vw, 34px); }
.ebs-hd.is-stuck .ebs-hd__inner { block-size: 70px; }
.ebs-logo__mark { inline-size: 40px; block-size: 40px; }
.ebs-logo { gap: 13px; }
.ebs-logo__w1 { font-size: 1.09rem; letter-spacing: .15em; }
.ebs-logo__w2 { font-size: 1.09rem; letter-spacing: .40em; }
.ebs-hd__nav ul { gap: clamp(15px, 2.1vw, 34px); }
.ebs-hd__nav a { font-size: 1rem; font-weight: 500; padding-block: 12px; }

/* ---------- Language switcher ---------- */

.ebs-lang--hd {
  margin-inline-end: 2px; padding-inline-end: 16px;
  border-inline-end: 1px solid var(--ebs-ink-200, #C9CFD4);
}
.ebs-lang__item {
  min-block-size: 34px; min-inline-size: 34px; padding-inline: 7px;
  font-size: .8rem; letter-spacing: .1em;
}
.ebs-lang__item.is-current::after { inset-inline: 7px; block-size: 2px; inset-block-end: 5px; }

/* ---------- Footer weight ---------- */

.ebs-ft__inner { padding-block: clamp(56px, 7vw, 96px) clamp(44px, 5.5vw, 72px); }
.ebs-ft__logo .ebs-logo__mark { inline-size: 42px; block-size: 42px; }
.ebs-ft__logo .ebs-logo__w1, .ebs-ft__logo .ebs-logo__w2 { font-size: 1.14rem; }
.ebs-ft__desc { margin-block-start: 20px; max-inline-size: 32ch; color: rgb(255 255 255 / .62); }
/* Quieter headings so the values, not the labels, carry the eye. */
.ebs-ft__h {
  margin-block-end: 20px; font-size: .74rem; letter-spacing: .07em;
  color: rgb(255 255 255 / .5);
}
.ebs-ft__h::before { inline-size: 14px; }
.ebs-ft ul { gap: 13px; }
.ebs-ft a { font-size: 1rem; color: rgb(255 255 255 / .78); }
.ebs-ft__col a:hover { color: #fff; }
.ebs-ft__rows { gap: 18px; }
.ebs-ft__rows .ebs-act__v, .ebs-ft__rows a { font-weight: 500; }
.ebs-ft__addr { color: rgb(255 255 255 / .78); }
.ebs-ft__telwrap { margin-block-start: 30px; }
.ebs-ft__bar-inner { padding-block: 22px; }

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .ebs-act { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ebs-act__item:nth-child(odd) { border-inline-start: 0; }
  .ebs-act__item:nth-child(n + 3) { border-block-start: 1px solid var(--ebs-ink-200, #C9CFD4); }
}
@media (max-width: 900px) {
  .ebs-ct__split { grid-template-columns: 1fr; gap: 26px; }
  .ebs-ct__body { max-inline-size: none; }
  .ebs-ct__img { aspect-ratio: 16 / 10; }
}
@media (max-width: 620px) {
  .ebs-act { grid-template-columns: 1fr; }
  .ebs-act__item { border-inline-start: 0; }
  .ebs-act__item + .ebs-act__item { border-block-start: 1px solid var(--ebs-ink-200, #C9CFD4); }
  .ebs-hd__inner { block-size: 72px; }
  .ebs-hd.is-stuck .ebs-hd__inner { block-size: 64px; }
  .ebs-logo__mark { inline-size: 34px; block-size: 34px; }
  .ebs-logo__w1, .ebs-logo__w2 { font-size: .92rem; }
  .ebs-brief__item { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 380px) {
  .ebs-logo__w1, .ebs-logo__w2 { font-size: .82rem; }
  .ebs-logo__w2 { letter-spacing: .26em; }
  .ebs-logo__mark { inline-size: 30px; block-size: 30px; }
  .ebs-logo { gap: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .ebs-act__item, .ebs-act__ico, .ebs-act__v { transition: none; }
}

/* ==========================================================================
   APP LAYER — bottom action bar, safe areas, mobile density
   Shown on phones and tablets only. Desktop is untouched.
   ========================================================================== */

.ebs-tab { display: none; }

@media (max-width: 1079px) {
  .ebs-tab {
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 940;
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: rgb(14 17 19 / .94);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
    border-block-start: 1px solid rgb(255 255 255 / .12);
    padding-block-end: env(safe-area-inset-bottom, 0px);
  }
  .ebs-tab__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; min-block-size: 58px; padding-block: 9px 7px;
    color: rgb(255 255 255 / .62); text-decoration: none;
    font-family: var(--ebs-font-ar, "Cairo EBS", sans-serif);
    transition: color 160ms ease;
  }
  .ebs-tab__ico { inline-size: 23px; block-size: 23px; }
  .ebs-tab__ico svg { inline-size: 100%; block-size: 100%; display: block; }
  .ebs-tab__l { font-size: .72rem; font-weight: 500; line-height: 1; }
  .ebs-tab__item.is-current { color: #fff; }
  .ebs-tab__item.is-current .ebs-tab__ico { color: var(--ebs-accent, #C8161C); }
  .ebs-tab__item:active { color: #fff; }
  .ebs-tab__item:focus-visible { outline: 2px solid var(--ebs-accent, #C8161C); outline-offset: -3px; }

  /* Clear the bar so nothing is trapped underneath it. */
  body { padding-block-end: calc(58px + env(safe-area-inset-bottom, 0px)); }
  .ebs-wa { inset-block-end: calc(72px + env(safe-area-inset-bottom, 0px)); }

  /* Header keeps the quote action reachable instead of hiding it. */
  .ebs-hd__cta { display: inline-flex; }
}

@media (max-width: 560px) {
  .ebs-hd__cta.ebs-hd__cta {
    min-block-size: 40px; padding-inline: 14px; font-size: .86rem;
  }
  .ebs-lang--hd { display: flex; padding-inline-end: 10px; margin-inline-end: 0; }
  .ebs-lang__item { min-inline-size: 28px; padding-inline: 4px; font-size: .72rem; }
}

@media (max-width: 400px) {
  .ebs-hd__cta.ebs-hd__cta { padding-inline: 11px; font-size: .8rem; }
  .ebs-lang--hd { display: none; }
}

/* Installed app: no browser chrome, so give the header a little more top room. */
.ebs-standalone .ebs-hd { padding-block-start: env(safe-area-inset-top, 0px); }

/* ==========================================================================
   MOBILE DENSITY — desktop rhythm leaves dead space on a phone
   ========================================================================== */

@media (max-width: 620px) {
  .ebs-sec { padding-block: clamp(40px, 9vw, 60px); }
  .ebs-sec--head { padding-block: clamp(30px, 7vw, 46px); }
  .ebs-sec--tight { padding-block: clamp(20px, 5vw, 32px); }
  .ebs-sec__h1 { font-size: clamp(1.75rem, 8.2vw, 2.3rem); line-height: 1.22; }
  .ebs-sec__h2 { font-size: clamp(1.35rem, 6.4vw, 1.7rem); }
  .ebs-sec__lede { font-size: 1rem; line-height: 1.85; }
  .ebs-sec__actions { gap: 10px; }
  .ebs-caps { gap: 14px; margin-block-start: 22px; }
  .ebs-cap + .ebs-cap { margin-block-start: 34px; }
  .ebs-brief__item { padding-block: 16px; }
  .ebs-idx__grid { gap: 16px; }
  .ebs-band { min-block-size: 220px; }
  .ebs-band__text { font-size: 1.15rem; }
  .ebs-ft__inner { padding-block: 44px 32px; gap: 30px; }
  .ebs-ft__telwrap { margin-block-start: 22px; }
}

/* The hero should read as one confident screen, not a scroll trap. */
@media (max-width: 620px) {
  .ebs-hero--img {
    min-block-size: clamp(440px, 78svh, 620px);
    padding-block: clamp(48px, 12vw, 76px);
  }
  .ebs-hero--img .ebs-hero__h1 { font-size: clamp(2rem, 9.2vw, 2.7rem); line-height: 1.16; }
  .ebs-hero--img .ebs-hero__lede { font-size: 1rem; margin-block-end: 26px; }
  .ebs-hero--img .ebs-hero__inner::after { margin-block-start: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .ebs-tab__item { transition: none; }
}

/* ==========================================================================
   MOBILE FOOTER — rebuilt density
   Stacked into one column the footer became a scroll of oversized links.
   On phones it collapses to: compact brand · contact · two-up link grid.
   Type, gaps and the logo all step down; nothing is centred or oversized.
   ========================================================================== */

/* The theme's scroll-to-top and our WhatsApp button both floated over the
   footer. The tab bar already carries WhatsApp, so only one stays. */
.mhc_scroll_top { display: none !important; }

@media (max-width: 1079px) {
  .ebs-wa { display: none; }
}

@media (max-width: 760px) {
  .ebs-ft__inner {
    grid-template-columns: 1fr 1fr;
    gap: 30px 22px;
    padding: 38px clamp(16px, 4.6vw, 24px) 26px;
  }

  /* Brand: one compact band, not a hero. */
  .ebs-ft__brand { grid-column: 1 / -1; max-inline-size: none; }
  .ebs-ft__logo .ebs-logo__mark { inline-size: 32px; block-size: 32px; }
  .ebs-ft__logo .ebs-logo__w1,
  .ebs-ft__logo .ebs-logo__w2 { font-size: .95rem; }
  .ebs-ft__desc {
    margin-block-start: 12px; font-size: .9rem; line-height: 1.75;
    max-inline-size: 42ch; color: rgb(255 255 255 / .58);
  }
  .ebs-ft__telwrap { margin-block-start: 16px; gap: 3px; }
  .ebs-ft__tel { font-size: 1.22rem; }
  .ebs-ft__k { font-size: .68rem; }

  /* Contact block leads — it is the reason anyone reaches the footer. */
  .ebs-ft__contact { grid-column: 1 / -1; order: -1; }
  .ebs-ft__rows { gap: 12px; }

  /* The two link lists sit side by side instead of stacking. */
  .ebs-ft__h { margin-block-end: 12px; font-size: .68rem; }
  .ebs-ft__h::before { inline-size: 12px; }
  .ebs-ft ul { gap: 9px; }
  .ebs-ft a { font-size: .92rem; }
  .ebs-ft__addr { font-size: .9rem; line-height: 1.6; }

  .ebs-ft__bar-inner { padding-block: 15px; gap: 8px; }
  .ebs-ft__copy, .ebs-ft__legal { font-size: .78rem; }
}

@media (max-width: 400px) {
  .ebs-ft__inner { gap: 26px 16px; }
  .ebs-ft a { font-size: .88rem; }
  .ebs-ft__tel { font-size: 1.14rem; }
}

/* ==========================================================================
   TAB BAR — WhatsApp becomes the fourth action
   The quote page is already one tap away from the header CTA on every page,
   so the bar carries the direct channel instead of duplicating it.
   ========================================================================== */

@media (max-width: 1079px) {
  .ebs-tab__item--wa { color: rgb(255 255 255 / .82); }
  .ebs-tab__item--wa .ebs-tab__ico { color: var(--ebs-accent, #C8161C); }
  .ebs-tab__item--wa:active { color: #fff; }
}

/* The contact block already leads with the number on mobile; the brand
   column repeating it was pure duplication. Desktop keeps both. */
@media (max-width: 760px) {
  .ebs-ft__telwrap { display: none; }
  .ebs-ft__brand { order: -2; }
  .ebs-ft__contact { order: -1; }
  .ebs-ft__desc { margin-block-end: 2px; }
}

/* ==========================================================================
   LANGUAGE SWITCHER — flags, fixed order
   direction:ltr pins AR before EN in both languages; without it the flex row
   mirrors and the two codes swap sides between AR and EN.
   ========================================================================== */

.ebs-lang { direction: ltr; gap: 4px; }
.ebs-lang__flag {
  inline-size: 21px; block-size: 14px; flex: none; display: block; border-radius: 2px;
}
.ebs-lang__full { display: none; }

.ebs-lang__item {
  gap: 6px; border-radius: 2px;
  color: var(--ebs-ink-400, #6B7680);
}
.ebs-lang__item .ebs-lang__flag { opacity: .55; transition: opacity 160ms ease; }
.ebs-lang__item:hover .ebs-lang__flag { opacity: 1; }
.ebs-lang__item.is-current .ebs-lang__flag { opacity: 1; }
.ebs-lang__code { font-size: .74rem; font-weight: 600; letter-spacing: .06em; }

/* Header: compact, and visible at every width — it was hidden under 400px. */
.ebs-lang--hd { display: flex !important; }
.ebs-lang--hd .ebs-lang__item { min-block-size: 32px; min-inline-size: 0; padding-inline: 6px; }

@media (max-width: 560px) {
  .ebs-lang--hd { padding-inline-end: 8px; margin-inline-end: 0; }
  .ebs-lang--hd .ebs-lang__code { display: none; }
  .ebs-lang--hd .ebs-lang__item { padding-inline: 5px; }
  .ebs-lang--hd .ebs-lang__flag { inline-size: 24px; block-size: 16px; }
}

/* ==========================================================================
   DRAWER — app-grade menu
   Rows were 79px of empty space with 17px type. Tighter, with a directional
   marker, a labelled language block and a real action footer.
   ========================================================================== */

.ebs-drawer { inline-size: min(88vw, 380px); }

.ebs-drawer__top {
  padding: 16px 20px; border-block-end: 1px solid var(--ebs-ink-200, #C9CFD4);
}
.ebs-drawer__close {
  inline-size: 40px; block-size: 40px; font-size: 1.6rem; border-radius: 2px;
  color: var(--ebs-ink-900, #0E1113);
}
.ebs-drawer__close:hover { background: var(--ebs-paper, #F7F6F4); }

.ebs-drawer__nav { padding: 6px 0; }
.ebs-drawer__nav a {
  display: flex; align-items: center; justify-content: space-between;
  min-block-size: 56px; padding: 0 20px;
  font-size: 1.02rem; font-weight: 500; line-height: 1.4;
  border-block-end: 1px solid var(--ebs-ink-100, #E5E8EA);
  transition: background-color 160ms ease, color 160ms ease;
}
.ebs-drawer__nav li:last-child a { border-block-end: 0; }
.ebs-drawer__nav a::after {
  content: ""; inline-size: 6px; block-size: 6px; flex: none; opacity: .32;
  border-right: 1.8px solid currentColor; border-top: 1.8px solid currentColor;
  transform: rotate(45deg);
}
[dir="rtl"] .ebs-drawer__nav a::after { transform: rotate(-135deg); }
.ebs-drawer__nav a:hover { background: var(--ebs-paper, #F7F6F4); }
.ebs-drawer__nav a[aria-current="page"] {
  color: var(--ebs-accent, #C8161C); font-weight: 600;
  background: color-mix(in srgb, var(--ebs-accent, #C8161C) 5%, transparent);
}

.ebs-drawer__foot {
  padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px));
  display: grid; gap: 10px;
  border-block-start: 1px solid var(--ebs-ink-200, #C9CFD4);
  background: var(--ebs-paper, #F7F6F4);
}
.ebs-drawer__lbl {
  margin: 0; font-size: .7rem; font-weight: 600; letter-spacing: .07em;
  color: var(--ebs-ink-400, #6B7680);
}

/* Language block inside the drawer: full names, real rows, flags visible. */
.ebs-lang--drawer {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-block-end: 6px; justify-content: stretch;
}
.ebs-lang--drawer .ebs-lang__item {
  min-block-size: 46px; padding-inline: 12px; gap: 9px;
  justify-content: flex-start;
  border: 1px solid var(--ebs-ink-200, #C9CFD4);
  background: #fff; border-radius: 2px;
}
.ebs-lang--drawer .ebs-lang__code { display: none; }
.ebs-lang--drawer .ebs-lang__full {
  display: block; font-size: .92rem; font-weight: 600; letter-spacing: 0;
}
.ebs-lang--drawer .ebs-lang__item.is-current {
  border-color: var(--ebs-ink-900, #0E1113);
  background: var(--ebs-ink-900, #0E1113); color: #fff;
}
.ebs-lang--drawer .ebs-lang__item.is-current::after { display: none; }
.ebs-lang--drawer .ebs-lang__flag { inline-size: 24px; block-size: 16px; }

.ebs-drawer__cta {
  min-block-size: 52px; font-size: 1rem; border-radius: 2px;
  gap: 10px;
}
.ebs-drawer__tel {
  min-block-size: 48px; border-radius: 2px; font-size: 1rem;
  background: #fff;
}
.ebs-drawer__wa {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-block-size: 48px; border-radius: 2px;
  border: 1px solid var(--ebs-ink-200, #C9CFD4); background: #fff;
  color: var(--ebs-ink-900, #0E1113); text-decoration: none;
  font-weight: 600; font-size: 1rem;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.ebs-drawer__wa svg { inline-size: 20px; block-size: 20px; flex: none; }
.ebs-drawer__wa:hover { background: var(--ebs-ink-900, #0E1113); color: #fff; border-color: var(--ebs-ink-900, #0E1113); }

@media (prefers-reduced-motion: reduce) {
  .ebs-drawer__nav a, .ebs-drawer__wa, .ebs-lang__flag { transition: none; }
}

/* Owner placement: Arabic on the right, English on the left — pinned with an
   explicit direction so it stays identical in both language versions. */
.ebs-lang { direction: rtl; }
.ebs-lang--drawer { direction: rtl; }

/* ==========================================================================
   DRAWER + LANGUAGE — corrections
   ========================================================================== */

/* 1. The header switcher was being hidden under 400px by an earlier rule.
      The owner wants the language visible in the interface on mobile. */
@media (max-width: 400px) {
  .ebs-lang--hd { display: flex !important; }
  .ebs-lang--hd .ebs-lang__item { padding-inline: 4px; }
  .ebs-lang--hd .ebs-lang__flag { inline-size: 22px; block-size: 15px; }
  .ebs-hd__cta.ebs-hd__cta { padding-inline: 10px; font-size: .78rem; }
  .ebs-hd__inner { gap: 6px; padding-inline: 10px; }
}

/* 2. Full-width menu on phones. An 88% drawer left a sliver of the page
      showing at the edge, which read as a broken page width. */
@media (max-width: 480px) {
  .ebs-drawer { inline-size: 100%; }
}

/* 3. The close row scrolled out of reach once the menu content overflowed
      on a short viewport. Pin it, and let only the list scroll. */
.ebs-drawer {
  display: none;
  grid-template-rows: auto 1fr auto;
}
.ebs-drawer.is-open, .ebs-drawer.is-visible { display: grid; }
.ebs-drawer__top {
  position: sticky; inset-block-start: 0; z-index: 2;
  background: #fff;
}
.ebs-drawer > nav { overflow-y: auto; overscroll-behavior: contain; min-block-size: 0; }
.ebs-drawer__foot { position: sticky; inset-block-end: 0; z-index: 2; margin-block-start: 0; }

/* 4. Language buttons must fill the row in the menu. */
.ebs-lang--drawer.ebs-lang--drawer {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  justify-content: stretch;
}
.ebs-lang--drawer.ebs-lang--drawer .ebs-lang__item {
  min-inline-size: 0; justify-content: center;
}

/* ==========================================================================
   HEADER — language toggle + premium quote action
   ========================================================================== */

/* Language becomes a single switch: it shows the language you will move TO,
   which halves the space the control used to take in the header bar.
   The drawer keeps the explicit two-option picker. */
.ebs-lang--hd { border-inline-end: 0; padding-inline-end: 0; margin-inline-end: 4px; }
.ebs-lang--hd .ebs-lang__item.is-current { display: none; }
.ebs-lang--hd .ebs-lang__item {
  gap: 7px; min-block-size: 38px; padding-inline: 11px;
  border: 1px solid var(--ebs-ink-200, #C9CFD4); border-radius: 2px;
  color: var(--ebs-ink-600, #3D4650);
  transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease;
}
.ebs-lang--hd .ebs-lang__item .ebs-lang__flag { opacity: 1; }
.ebs-lang--hd .ebs-lang__item:hover {
  border-color: var(--ebs-ink-900, #0E1113);
  color: var(--ebs-ink-900, #0E1113);
  background: var(--ebs-paper, #F7F6F4);
}
.ebs-lang--hd .ebs-lang__code { display: inline; font-size: .76rem; }

/* The quote action: engineered, not a flat red slab.
   Deeper ground, real height, a hairline top edge that catches light, and
   the same directional chevron the page CTAs use. */
.ebs-hd__cta.ebs-hd__cta {
  position: relative;
  display: inline-flex; align-items: center; gap: 9px;
  min-block-size: 44px; padding-inline: 22px;
  background: var(--ebs-accent, #C8161C);
  border: 1px solid var(--ebs-accent-hover, #A31116);
  border-radius: 2px;
  font-size: .95rem; font-weight: 600; letter-spacing: 0; color: #fff;
  box-shadow: 0 1px 0 rgb(255 255 255 / .18) inset, 0 2px 6px rgb(200 22 28 / .18);
  transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.ebs-hd__cta.ebs-hd__cta::after {
  content: ""; inline-size: 6px; block-size: 6px; flex: none; opacity: .95;
  border-right: 2px solid currentColor; border-top: 2px solid currentColor;
  transform: rotate(45deg); transition: margin 180ms ease;
}
[dir="rtl"] .ebs-hd__cta.ebs-hd__cta::after { transform: rotate(-135deg); }
.ebs-hd__cta.ebs-hd__cta:hover {
  background: var(--ebs-accent-hover, #A31116); color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgb(255 255 255 / .2) inset, 0 8px 18px rgb(200 22 28 / .3);
}
.ebs-hd__cta.ebs-hd__cta:hover::after { margin-inline-start: 3px; }
.ebs-hd__cta.ebs-hd__cta:focus-visible { outline: 3px solid var(--ebs-ink-900, #0E1113); outline-offset: 2px; }

@media (max-width: 560px) {
  .ebs-hd__cta.ebs-hd__cta { min-block-size: 40px; padding-inline: 15px; font-size: .86rem; gap: 7px; }
  .ebs-hd__cta.ebs-hd__cta::after { inline-size: 5px; block-size: 5px; }
  .ebs-lang--hd .ebs-lang__item { min-block-size: 36px; padding-inline: 9px; }
}
@media (max-width: 400px) {
  .ebs-hd__cta.ebs-hd__cta { padding-inline: 12px; font-size: .8rem; }
  .ebs-hd__cta.ebs-hd__cta::after { display: none; }
  .ebs-lang--hd .ebs-lang__item { padding-inline: 7px; gap: 5px; }
  .ebs-lang--hd .ebs-lang__code { font-size: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ebs-hd__cta.ebs-hd__cta { transition: none; }
  .ebs-hd__cta.ebs-hd__cta:hover { transform: none; }
}

/* The critical inline style forces the drawer to flex with !important, so the
   scroll region has to be expressed in flex terms: only the list scrolls,
   the close row and the action footer stay pinned. */
.ebs-drawer > nav { flex: 1 1 auto; overflow-y: auto; min-block-size: 0; overscroll-behavior: contain; }
.ebs-drawer__top { flex: 0 0 auto; }
.ebs-drawer__foot { flex: 0 0 auto; }

/* ==========================================================================
   LOGO SCALE — larger and more legible in every context
   The single-item language toggle freed enough header width to grow the
   lockup without crowding the row.
   ========================================================================== */

.ebs-logo { gap: 14px; }
.ebs-logo__mark { inline-size: 46px; block-size: 46px; }
.ebs-logo__w1 { font-size: 1.28rem; font-weight: 600; letter-spacing: .13em; }
.ebs-logo__w2 { font-size: 1.28rem; font-weight: 400; letter-spacing: .38em; }
.ebs-logo__word { line-height: 1.06; }

.ebs-hd__inner { block-size: 96px; }
.ebs-hd.is-stuck .ebs-hd__inner { block-size: 74px; }

/* Footer lockup a touch larger still — it is the closing brand statement. */
.ebs-ft__logo .ebs-logo__mark { inline-size: 50px; block-size: 50px; }
.ebs-ft__logo .ebs-logo__w1, .ebs-ft__logo .ebs-logo__w2 { font-size: 1.34rem; }

/* Drawer header lockup. */
.ebs-drawer__logo .ebs-logo__mark { inline-size: 42px; block-size: 42px; }
.ebs-drawer__logo .ebs-logo__w1, .ebs-drawer__logo .ebs-logo__w2 { font-size: 1.18rem; }

@media (max-width: 1080px) {
  .ebs-hd__inner { block-size: 84px; }
  .ebs-hd.is-stuck .ebs-hd__inner { block-size: 70px; }
}

@media (max-width: 620px) {
  .ebs-logo__mark { inline-size: 40px; block-size: 40px; }
  .ebs-logo { gap: 11px; }
  /* Tighter tracking on STEEL: 0.38em is a display setting and it smears
     at phone sizes. */
  .ebs-logo__w1 { font-size: 1.08rem; letter-spacing: .11em; }
  .ebs-logo__w2 { font-size: 1.08rem; letter-spacing: .3em; }
  .ebs-hd__inner { block-size: 76px; }
  .ebs-hd.is-stuck .ebs-hd__inner { block-size: 66px; }
  .ebs-ft__logo .ebs-logo__mark { inline-size: 40px; block-size: 40px; }
  .ebs-ft__logo .ebs-logo__w1, .ebs-ft__logo .ebs-logo__w2 { font-size: 1.1rem; }
}

@media (max-width: 400px) {
  .ebs-logo__mark { inline-size: 36px; block-size: 36px; }
  .ebs-logo { gap: 9px; }
  .ebs-logo__w1 { font-size: .96rem; letter-spacing: .09em; }
  .ebs-logo__w2 { font-size: .96rem; letter-spacing: .24em; }
  .ebs-hd__inner { block-size: 72px; padding-inline: 9px; gap: 5px; }
}

/* 320px: the enlarged lockup plus CTA plus toggle overran the row. It was
   masked by overflow-x:clip rather than visibly broken, which is worse.
   Step everything down so the row genuinely fits. */
@media (max-width: 360px) {
  .ebs-hd__inner { padding-inline: 8px; gap: 4px; block-size: 68px; }
  .ebs-logo { gap: 7px; }
  .ebs-logo__mark { inline-size: 32px; block-size: 32px; }
  .ebs-logo__w1 { font-size: .84rem; letter-spacing: .07em; }
  .ebs-logo__w2 { font-size: .84rem; letter-spacing: .2em; }
  .ebs-hd__cta.ebs-hd__cta { min-block-size: 36px; padding-inline: 9px; font-size: .74rem; }
  .ebs-lang--hd .ebs-lang__item { min-block-size: 34px; padding-inline: 5px; gap: 4px; }
  .ebs-lang--hd .ebs-lang__flag { inline-size: 19px; block-size: 13px; }
  .ebs-lang--hd .ebs-lang__code { display: none; }
  .ebs-burger { inline-size: 36px; block-size: 36px; padding: 8px; }
}

/* 400–480px (large phones): the enlarged lockup pushed the header row 1px
   past the container. Trim the lockup and the CTA so the row has real
   breathing space rather than sitting exactly on the limit. */
@media (min-width: 401px) and (max-width: 480px) {
  .ebs-logo__mark { inline-size: 38px; block-size: 38px; }
  .ebs-logo { gap: 9px; }
  .ebs-logo__w1 { font-size: 1rem; letter-spacing: .1em; }
  .ebs-logo__w2 { font-size: 1rem; letter-spacing: .26em; }
  .ebs-hd__cta.ebs-hd__cta { padding-inline: 13px; font-size: .84rem; }
  .ebs-hd__inner { gap: 8px; }
}

/* ==========================================================================
   LOGO — never wrap
   The wordmark was collapsing to three lines (EL / BADRY / STEEL) on phones
   because the flex row squeezed it. Pin it to a single line per row, and on
   small phones drop the wordmark entirely: the EB monogram is designed to
   stand alone, which is the whole point of a monogram.
   ========================================================================== */

.ebs-logo { flex: 0 0 auto; }
.ebs-logo__w1, .ebs-logo__w2 { white-space: nowrap; }
.ebs-logo__word { flex: 0 0 auto; }

/* Mark-only lockup on phones — no wrap risk, and the header breathes. */
@media (max-width: 520px) {
  .ebs-logo__word { display: none; }
  .ebs-logo__mark { inline-size: 44px; block-size: 44px; }
  .ebs-logo { gap: 0; }
  .ebs-hd__inner { block-size: 72px; gap: 8px; padding-inline: 12px; }
  /* space reclaimed from the wordmark goes back to the actions */
  .ebs-hd__cta.ebs-hd__cta { min-block-size: 42px; padding-inline: 18px; font-size: .9rem; }
  .ebs-lang--hd .ebs-lang__item { min-block-size: 38px; padding-inline: 10px; }
  .ebs-lang--hd .ebs-lang__code { display: inline; font-size: .74rem; }
  .ebs-burger { inline-size: 42px; block-size: 42px; padding: 10px; }
}

@media (max-width: 360px) {
  .ebs-logo__mark { inline-size: 40px; block-size: 40px; }
  .ebs-hd__inner { padding-inline: 10px; gap: 6px; }
  .ebs-hd__cta.ebs-hd__cta { padding-inline: 13px; font-size: .82rem; }
  .ebs-lang--hd .ebs-lang__code { display: none; }
}

/* The drawer still shows the full lockup — there is room for it there. */
.ebs-drawer__logo .ebs-logo__word { display: flex; }

/* ==========================================================================
   MOBILE / TABLET HEADER — logo · language · menu
   The quote action leaves the bar entirely below desktop. It already exists
   in the drawer, in the bottom tab bar (WhatsApp) and at the end of every
   page, so crowding it into a 390px row bought nothing and cost the logo
   its space. This is how the benchmarked contractor sites handle it.
   ========================================================================== */

@media (max-width: 1079px) {
  .ebs-hd__cta { display: none !important; }

  /* Wordmark comes back — there is room for it now. */
  .ebs-logo__word { display: flex !important; }
  .ebs-logo { gap: 12px; }
  .ebs-logo__mark { inline-size: 44px; block-size: 44px; }
  .ebs-logo__w1 { font-size: 1.14rem; letter-spacing: .12em; }
  .ebs-logo__w2 { font-size: 1.14rem; letter-spacing: .32em; }

  .ebs-hd__inner { block-size: 78px; gap: 12px; padding-inline: clamp(14px, 4vw, 24px); }
  .ebs-hd.is-stuck .ebs-hd__inner { block-size: 68px; }

  .ebs-lang--hd .ebs-lang__item { min-block-size: 40px; padding-inline: 11px; }
  .ebs-lang--hd .ebs-lang__code { display: inline; font-size: .78rem; }
  .ebs-burger { inline-size: 44px; block-size: 44px; padding: 11px; }
}

@media (max-width: 480px) {
  .ebs-logo__mark { inline-size: 40px; block-size: 40px; }
  .ebs-logo { gap: 10px; }
  .ebs-logo__w1 { font-size: 1.02rem; letter-spacing: .1em; }
  .ebs-logo__w2 { font-size: 1.02rem; letter-spacing: .27em; }
  .ebs-hd__inner { block-size: 72px; padding-inline: 14px; gap: 10px; }
}

@media (max-width: 360px) {
  .ebs-logo__mark { inline-size: 36px; block-size: 36px; }
  .ebs-logo__w1 { font-size: .92rem; letter-spacing: .08em; }
  .ebs-logo__w2 { font-size: .92rem; letter-spacing: .22em; }
  .ebs-hd__inner { padding-inline: 11px; gap: 8px; }
  .ebs-lang--hd .ebs-lang__code { display: none; }
}