/* ═══════════════════════════════════════════════════════════
   ACME GROUP — theme layer on top of Bootstrap 5.3
   Loaded AFTER bootstrap.min.css. Bootstrap supplies grid,
   navbar, offcanvas, dropdown, collapse, forms and utilities;
   this file supplies the brand.
   ═══════════════════════════════════════════════════════════ */
:root{
  --ink:#08262B;
  --ink-2:#0F3B42;
  --teal:#14565F;
  --brass:#B3822F;
  --brass-ink:#78550F;   /* brass text on light backgrounds — AA at small sizes */
  --brass-lo:#D9B15E;
  --limestone:#EAEDE8;
  --paper:#FAFAF7;
  --line:rgba(8,38,43,.14);
  --muted:rgba(8,38,43,.62);
  --muted-inv:rgba(250,250,247,.66);
  --alert:#A63A2A;

  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",monospace;

  --gut:clamp(20px,5vw,72px);
  --maxw:1320px;
  --r:3px;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* hand Bootstrap our palette so its own components inherit the brand */
  --bs-body-bg:var(--limestone);
  --bs-body-color:var(--ink);
  --bs-body-font-family:var(--sans);
  --bs-body-font-size:1rem;
  --bs-body-line-height:1.65;
  --bs-border-color:var(--line);
  --bs-border-radius:var(--r);
  --bs-link-color:inherit;
  --bs-link-hover-color:inherit;
  --bs-emphasis-color:var(--ink);
  --bs-secondary-color:var(--muted);
  --bs-focus-ring-color:rgba(179,130,47,.4);
}
html[dir="rtl"]{ --display:"IBM Plex Sans Arabic",sans-serif; }

/* one fluid container instead of Bootstrap's stepped max-widths, so the
   layout stays fluid up to 1320px exactly as designed */
.container{max-width:var(--maxw)!important;padding-inline:var(--gut)!important;width:100%}

html{scroll-behavior:smooth;scroll-padding-block-start:96px;overflow-x:clip}
body{-webkit-font-smoothing:antialiased;overflow-x:clip;-webkit-tap-highlight-color:rgba(20,86,95,.16)}
/* older engines without overflow:clip fall back to hidden; sticky degrades to static there */
@supports not (overflow:clip){ body{overflow-x:hidden} .hero{overflow:hidden!important} }

/* ── sticky pinning ──────────────────────────────────────
   The pinned element sits in its own wrapper so the sticky
   offset and the parallax transform never fight each other. */
.sticky-hold{position:sticky;inset-block-start:100px}
@media(max-width:991.98px){ .sticky-hold{position:static;inset-block-start:auto} }
a{text-decoration:none;color:inherit}
p,h1,h2,h3,h4,blockquote{overflow-wrap:break-word}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}
/* Bootstrap sets outline:0 plus a hardcoded blue box-shadow on several
   components (.nav-link:focus-visible ships rgba(13,110,253,.25) — it does not
   even read --bs-focus-ring-color). Replace it with the brand ring. */
.nav-link:focus-visible,.dropdown-item:focus-visible,.btn:focus-visible,
.navbar-toggler:focus-visible,.navbar-brand:focus-visible,
.form-control:focus-visible,.form-select:focus-visible,
.offcanvas .btn:focus-visible,.accordion-button:focus-visible{
  outline:2px solid var(--brass-ink);outline-offset:3px;box-shadow:none;
}
/* on dark panels the ring needs the lighter tone to stay visible */
.acme-menu :focus-visible,.tool :focus-visible,.cta :focus-visible,
.ledger :focus-visible,footer :focus-visible,.util :focus-visible{
  outline-color:var(--brass-lo);
}

/* ── type scale ─────────────────────────────────────────── */
h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-.015em}
.h-xl{font-family:var(--display);font-size:clamp(2.6rem,6.4vw,5.1rem);line-height:1.02;letter-spacing:-.03em}
.h-lg{font-family:var(--display);font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.08;letter-spacing:-.025em}
.h-md{font-family:var(--display);font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.18;letter-spacing:-.02em}
.h-xl em,.h-lg em{font-style:italic;font-weight:300;color:var(--teal)}
html[dir="rtl"] .h-xl,html[dir="rtl"] .h-lg,html[dir="rtl"] .h-md{letter-spacing:0;line-height:1.35;font-weight:500}
html[dir="rtl"] .h-xl em,html[dir="rtl"] .h-lg em{font-style:normal}

.eyebrow{
  font-family:var(--mono);font-size:.685rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass-ink);display:flex;align-items:center;gap:10px;margin:0 0 20px;font-weight:500;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--brass);flex:none}
html[dir="rtl"] .eyebrow{font-family:var(--sans);letter-spacing:0}
.lede{font-size:clamp(1.02rem,1.5vw,1.18rem);color:var(--muted);max-width:56ch;line-height:1.72;margin:0}
.band{padding-block:clamp(72px,9vw,132px)}
/* When two bands share a background there is no colour change to mark the
   join, so the two paddings stack into a void. Collapse the seam and mark
   it with a hairline instead. */
.band.seam-after{padding-block-end:clamp(48px,5.6vw,84px)}
.band.seam-before{padding-block-start:clamp(48px,5.6vw,84px);border-block-start:1px solid var(--line)}
.g-brand{--bs-gutter-x:clamp(32px,5vw,72px)}

/* ── scroll reveal ──────────────────────────────────────── */
.rv{opacity:0;transform:translateY(22px);transition:opacity .82s var(--ease),transform .82s var(--ease);transition-delay:calc(var(--i,0)*85ms)}
.rv.in{opacity:1;transform:none}

/* ── buttons: rebuilt on Bootstrap's .btn CSS variables ─── */
.btn{
  --bs-btn-padding-y:14px;--bs-btn-padding-x:26px;
  --bs-btn-font-size:.875rem;--bs-btn-font-weight:500;--bs-btn-border-radius:var(--r);
  --bs-btn-font-family:var(--sans);
  display:inline-flex;align-items:center;justify-content:center;gap:11px;min-height:48px;white-space:nowrap;
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.btn svg{width:14px;height:14px;transition:transform .35s var(--ease);flex:none}
html[dir="rtl"] .btn svg{transform:scaleX(-1)}
.btn:hover svg{transform:translateX(4px)}
html[dir="rtl"] .btn:hover svg{transform:scaleX(-1) translateX(4px)}
.btn-ink{--bs-btn-bg:var(--ink);--bs-btn-color:var(--paper);--bs-btn-border-color:var(--ink);
  --bs-btn-hover-bg:var(--teal);--bs-btn-hover-color:var(--paper);--bs-btn-hover-border-color:var(--teal)}
.btn-brass{--bs-btn-bg:var(--brass);--bs-btn-color:#fff;--bs-btn-border-color:var(--brass);
  --bs-btn-hover-bg:#9C701F;--bs-btn-hover-color:#fff;--bs-btn-hover-border-color:#9C701F}
.btn-outline-ink{--bs-btn-color:var(--ink);--bs-btn-border-color:var(--line);--bs-btn-bg:transparent;
  --bs-btn-hover-bg:rgba(8,38,43,.04);--bs-btn-hover-color:var(--ink);--bs-btn-hover-border-color:var(--ink)}
.btn-outline-paper{--bs-btn-color:var(--paper);--bs-btn-border-color:rgba(250,250,247,.3);--bs-btn-bg:transparent;
  --bs-btn-hover-bg:var(--paper);--bs-btn-hover-color:var(--ink);--bs-btn-hover-border-color:var(--paper)}

/* ═══ scroll progress ═══ */
#prog{position:fixed;inset-block-start:0;inset-inline-start:0;height:2px;width:0;background:var(--brass);z-index:1040;transition:width .1s linear}
.skip{position:absolute;inset-inline-start:-9999px;z-index:2000;background:var(--ink);color:var(--paper);padding:12px 20px;border-radius:var(--r)}
.skip:focus{inset-inline-start:12px;inset-block-start:12px}

/* ═══ UTILITY BAR ═══ */
.util{background:var(--ink);color:var(--muted-inv);font-size:.75rem;letter-spacing:.02em}
.util .container{display:flex;align-items:center;justify-content:space-between;gap:20px;height:38px}
.util a:hover{color:var(--brass-lo)}
.util-l{display:flex;gap:24px;align-items:center}
.util-r{display:flex;gap:18px;align-items:center}
.dot-live{width:6px;height:6px;border-radius:50%;background:#57B87F;display:inline-block;margin-inline-end:7px;animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.lang{border:1px solid rgba(250,250,247,.25);padding:3px 12px;border-radius:2px;font-family:var(--mono);font-size:.72rem;
  background:none;color:inherit;transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.lang:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}

/* ═══ NAVBAR (Bootstrap navbar, brand skin) ═══ */
.navbar.site{
  background:rgba(234,237,232,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-block-end:1px solid transparent;padding:0;z-index:1030;
  transition:border-color .3s,box-shadow .3s;
}
.navbar.site.stuck{border-block-end-color:var(--line);box-shadow:0 1px 24px rgba(8,38,43,.06)}
.navbar.site .container{display:flex;align-items:center;justify-content:space-between;gap:28px;height:78px;transition:height .35s var(--ease);flex-wrap:nowrap}
.navbar.site.stuck .container{height:64px}
.navbar-brand{display:flex;align-items:baseline;gap:12px;flex:none;padding:0;margin:0}
.navbar-brand b{font-family:var(--display);font-size:1.55rem;font-weight:500;letter-spacing:.01em}
.navbar-brand span{font-family:var(--mono);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);padding-inline-start:12px;border-inline-start:1px solid var(--line)}
html[dir="rtl"] .navbar-brand span{font-family:var(--sans);letter-spacing:0}

.navbar.site .navbar-nav{gap:2px;align-items:center;flex-direction:row}
.navbar.site .nav-link,.navbar.site .dropdown-toggle{
  padding:10px 12px!important;font-size:.85rem;color:var(--ink);position:relative;background:none;border:0;
}
.navbar.site .nav-link::after,.navbar.site .dropdown-toggle::after{
  content:"";position:absolute;inset-block-end:4px;inset-inline-start:12px;width:0;height:1px;background:var(--brass);
  border:0;margin:0;transition:width .32s var(--ease);
}
.navbar.site .nav-item:hover .nav-link::after,.navbar.site .nav-link:focus-visible::after{width:calc(100% - 24px)}
.navbar.site .dropdown-menu{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:8px;min-width:250px;margin-block-start:0;
  box-shadow:0 20px 50px rgba(8,38,43,.13);
}
.navbar.site .dropdown-item{display:flex;justify-content:space-between;gap:16px;padding:10px 13px;font-size:.84rem;border-radius:2px;color:var(--ink)}
.navbar.site .dropdown-item:hover,.navbar.site .dropdown-item:focus{background:var(--limestone);color:var(--ink)}
.navbar.site .dropdown-item i{font-family:var(--mono);font-style:normal;font-size:.66rem;color:var(--brass-ink);letter-spacing:.08em}
/* open the dropdown on hover at desktop width, as designed */
@media(min-width:1200px){
  .navbar.site .nav-item.dropdown:hover .dropdown-menu{display:block}
}
.navbar-toggler{
  width:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--r);box-shadow:none!important;transition:border-color .3s;
}
.navbar-toggler:hover{border-color:var(--ink)}
.navbar-toggler b{display:block;width:18px;height:12px;position:relative}
.navbar-toggler b::before,.navbar-toggler b::after{content:"";position:absolute;inset-inline:0;height:1.5px;background:var(--ink);transition:transform .38s var(--ease),top .28s var(--ease)}
.navbar-toggler b::before{top:1px}
.navbar-toggler b::after{top:9px}
.navbar-toggler[aria-expanded="true"] b::before{top:5px;transform:rotate(45deg)}
.navbar-toggler[aria-expanded="true"] b::after{top:5px;transform:rotate(-45deg)}

/* ═══ OFFCANVAS MENU (Bootstrap offcanvas, brand skin) ═══ */
.offcanvas.acme-menu{
  width:min(430px,88vw);background:var(--ink);color:var(--paper);border:0;
  --bs-offcanvas-transition:transform .48s var(--ease);
}
.offcanvas-backdrop.show{opacity:.5;background:var(--ink)}
.acme-menu .offcanvas-header{padding:18px 24px;border-block-end:1px solid rgba(250,250,247,.13);
  justify-content:space-between;gap:16px}
.acme-menu .offcanvas-title{font-family:var(--display);font-size:1.5rem;font-weight:500;min-width:0}
html[dir="rtl"] .acme-menu .offcanvas-title{font-family:var(--sans);font-weight:600}
/* Bootstrap's .offcanvas-header sets no justify-content — it relies on
   .btn-close having margin-left:auto. This replaces .btn-close, so the
   auto margin has to be restored here or the title and button collide. */
.acme-menu .panel-x{width:42px;height:42px;flex:0 0 42px;margin-inline-start:auto;
  border:1px solid rgba(250,250,247,.22);border-radius:var(--r);
  display:grid;place-items:center;background:none;color:inherit;transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.acme-menu .panel-x:hover{background:var(--paper);color:var(--ink)}
.acme-menu .panel-x svg{width:15px;height:15px}
.acme-menu .offcanvas-body{padding:0;display:flex;flex-direction:column}

.dnav{padding:14px 0;flex:1}
.dnav > *{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.offcanvas.show .dnav > *{opacity:1;transform:none;transition-delay:calc(var(--n,0)*55ms + 140ms)}
.dnav a.lvl1,.dnav .acc-btn{
  display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
  padding:15px 24px;font-family:var(--display);font-size:1.3rem;font-weight:400;min-height:52px;
  text-align:start;background:none;border:0;color:inherit;transition:background .25s,padding-inline-start .3s var(--ease);
}
html[dir="rtl"] .dnav a.lvl1,html[dir="rtl"] .dnav .acc-btn{font-family:var(--sans);font-weight:500;font-size:1.15rem}
.dnav a.lvl1:hover,.dnav .acc-btn:hover{background:rgba(250,250,247,.05);padding-inline-start:30px}
.dnav .acc-btn svg{width:13px;height:13px;color:var(--brass-lo);transition:transform .38s var(--ease);flex:none}
.dnav .acc-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.dnav .collapse a,.dnav .collapsing a{
  display:flex;justify-content:space-between;gap:16px;align-items:center;
  padding:12px 24px 12px 40px;font-size:.92rem;color:var(--muted-inv);min-height:46px;transition:color .25s;
}
html[dir="rtl"] .dnav .collapse a,html[dir="rtl"] .dnav .collapsing a{padding:12px 40px 12px 24px}
.dnav .collapse a:hover{color:var(--paper)}
.dnav .collapse i,.dnav .collapsing i{font-family:var(--mono);font-style:normal;font-size:.64rem;letter-spacing:.08em;color:var(--brass-lo)}

.panel-foot{padding:22px 24px 30px;border-block-start:1px solid rgba(250,250,247,.13);display:grid;gap:16px;flex:none}
.panel-foot .btn{width:100%;padding-block:16px}
.panel-contact{display:grid;gap:9px;font-size:.88rem}
.panel-contact a{color:var(--muted-inv);display:flex;align-items:center;gap:10px;min-height:34px}
.panel-contact a:hover{color:var(--brass-lo)}
.panel-contact svg{width:14px;height:14px;color:var(--brass-lo);flex:none}
.panel-foot .lang{justify-self:start;padding:8px 16px}

/* ═══ HERO ═══ */
.hero{padding-block:clamp(48px,7vw,88px) clamp(56px,7vw,96px);position:relative;overflow:clip}
.hero::before{content:"";position:absolute;inset-block-start:-30%;inset-inline-end:-12%;width:62vw;height:62vw;
  background:radial-gradient(circle,rgba(20,86,95,.09),transparent 62%);pointer-events:none;
  transform:translate3d(0,var(--glow-y,0),0)}

/* ── parallax stage for the ledger ──────────────────────
   Three depths: hero copy is fixed, the glow drifts slowly,
   the card moves fastest so it reads as the nearest object. */
.hero .col-lg-5{align-self:stretch}
.ledger-stage{perspective:1300px;will-change:transform}
.ledger-tilt{transform-style:preserve-3d;transition:transform .55s var(--ease);will-change:transform}
.ledger-tilt.live{transition:transform .1s linear}
.hero h1{margin-block:0 26px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-block-start:34px}
.hero-meta{display:flex;gap:28px;flex-wrap:wrap;margin-block-start:44px;padding-block-start:26px;border-block-start:1px solid var(--line)}
.hero-meta div{display:flex;flex-direction:column;gap:2px}
.hero-meta b{font-family:var(--display);font-size:1.75rem;font-weight:400;line-height:1}
html[dir="rtl"] .hero-meta b{font-family:var(--mono)}
.hero-meta small{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
html[dir="rtl"] .hero-meta small{font-family:var(--sans);letter-spacing:0;font-size:.75rem}

/* ── SIGNATURE: the filing ledger ── */
.ledger{background:var(--ink);color:var(--paper);border-radius:var(--r);overflow:hidden;position:relative;
  box-shadow:0 32px 70px -30px rgba(8,38,43,.5);transition:box-shadow .55s var(--ease)}
.ledger-stage:hover .ledger{box-shadow:0 46px 90px -34px rgba(8,38,43,.62)}
/* specular sheen that follows the pointer across the card face */
.ledger::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:var(--r);
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),rgba(217,177,94,.13),transparent 62%);
  opacity:0;transition:opacity .45s var(--ease);
}
.ledger-stage:hover .ledger::after{opacity:1}
.ledger-hd{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 24px;border-block-end:1px solid rgba(250,250,247,.14)}
.ledger-hd h2{font-family:var(--mono);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;font-weight:500}
html[dir="rtl"] .ledger-hd h2{font-family:var(--sans);letter-spacing:0;font-size:.9rem}
.ledger-hd em{font-style:normal;font-size:.68rem;color:var(--muted-inv);display:flex;align-items:center}
/* NOTE: named .ledger-row, not .row — Bootstrap owns .row */
.ledger-row{padding:20px 24px;border-block-end:1px solid rgba(250,250,247,.09);display:grid;grid-template-columns:44px 1fr auto;gap:16px;align-items:start;transition:background .3s}
.ledger-row:hover{background:rgba(250,250,247,.045)}
.ledger-row:last-of-type{border:0}
.code{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--brass-lo);padding-block-start:4px}
.ledger-row h3{font-size:.94rem;font-weight:500;margin-block-end:3px}
.ledger-row p{margin:0;font-size:.76rem;color:var(--muted-inv);font-family:var(--mono);letter-spacing:.01em}
html[dir="rtl"] .ledger-row p{font-family:var(--sans)}
.cd{text-align:end;flex:none}
.cd b{font-family:var(--mono);font-size:1.5rem;font-weight:400;line-height:1;display:block}
.cd small{font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-inv)}
html[dir="rtl"] .cd small{font-family:var(--sans);letter-spacing:0}
.cd.urgent b{color:#E8836F}
.bar{grid-column:1/-1;height:2px;background:rgba(250,250,247,.13);border-radius:2px;overflow:hidden;margin-block-start:4px}
.bar i{display:block;height:100%;width:0;background:var(--brass-lo);transition:width 1.4s var(--ease) .3s}
.ledger-ft{padding:16px 24px;background:rgba(250,250,247,.05);display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ledger-ft p{margin:0;font-size:.76rem;color:var(--muted-inv);max-width:34ch}
.ledger-ft a{font-size:.8rem;color:var(--brass-lo);border-block-end:1px solid rgba(217,177,94,.4);padding-block-end:2px}

/* ═══ MARQUEE ═══ */
.marq{background:var(--ink);color:var(--paper);padding-block:16px;overflow:hidden;position:relative}
.marq::before,.marq::after{content:"";position:absolute;inset-block:0;width:90px;z-index:2;pointer-events:none}
.marq::before{inset-inline-start:0;background:linear-gradient(to right,var(--ink),transparent)}
.marq::after{inset-inline-end:0;background:linear-gradient(to left,var(--ink),transparent)}
html[dir="rtl"] .marq::before{background:linear-gradient(to left,var(--ink),transparent)}
html[dir="rtl"] .marq::after{background:linear-gradient(to right,var(--ink),transparent)}
.marq-track{display:flex;width:max-content;animation:slide 42s linear infinite}
.marq:hover .marq-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
html[dir="rtl"] .marq-track{animation-name:slideR}
@keyframes slideR{to{transform:translateX(50%)}}
.marq-track span{display:flex;align-items:center;gap:34px;padding-inline:17px;font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-inv);white-space:nowrap}
html[dir="rtl"] .marq-track span{font-family:var(--sans);letter-spacing:0;font-size:.85rem}
.marq-track span::after{content:"";width:4px;height:4px;background:var(--brass);border-radius:50%}

/* ═══ SERVICES ═══ */
.svc{background:var(--paper)}
.svc-stick{position:sticky;inset-block-start:120px}
.svc-list{border-block-start:1px solid var(--line)}
.svc-item{
  display:grid;grid-template-columns:52px 1fr 34px;gap:22px;align-items:start;
  padding-block:30px;padding-inline:0 8px;border-block-end:1px solid var(--line);
  position:relative;transition:padding-inline .4s var(--ease);color:var(--ink);
}
.svc-item{--bleed:min(24px,var(--gut))}
.svc-item::before{content:"";position:absolute;inset-block:0;inset-inline:calc(var(--bleed) * -1);background:var(--limestone);opacity:0;transition:opacity .4s var(--ease);z-index:0;border-radius:var(--r)}
.svc-item:hover::before{opacity:1}
.svc-item > *{position:relative;z-index:1}
.svc-item:hover{padding-inline-start:14px}
.svc-item .code{color:var(--brass-ink);padding-block-start:5px}
.svc-item h3{margin-block-end:8px;font-size:1.34rem;font-family:var(--display);font-weight:400}
html[dir="rtl"] .svc-item h3{font-family:var(--sans);font-weight:600;font-size:1.2rem}
.svc-item p{margin:0;font-size:.92rem;color:var(--muted);max-width:52ch}
.svc-tags{display:flex;gap:7px;flex-wrap:wrap;margin-block-start:14px}
.svc-tags b{font-family:var(--mono);font-size:.65rem;font-weight:400;letter-spacing:.05em;padding:4px 9px;border:1px solid var(--line);border-radius:2px;color:var(--muted)}
html[dir="rtl"] .svc-tags b{font-family:var(--sans);letter-spacing:0;font-size:.75rem}
.svc-arrow{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;transition:background-color .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease),transform .4s var(--ease);flex:none}
.svc-arrow svg{width:12px;height:12px}
html[dir="rtl"] .svc-arrow svg{transform:scaleX(-1)}
.svc-item:hover .svc-arrow{background:var(--ink);border-color:var(--ink);color:var(--paper);transform:rotate(-45deg)}
html[dir="rtl"] .svc-item:hover .svc-arrow{transform:rotate(45deg)}

/* ═══ DEADLINE TOOL ═══ */
.tool{background:var(--ink);color:var(--paper)}
.tool .lede{color:var(--muted-inv)}
.tool .eyebrow{color:var(--brass-lo)}
.tool .eyebrow::before{background:var(--brass-lo)}
.calc{background:rgba(250,250,247,.055);border:1px solid rgba(250,250,247,.14);border-radius:var(--r);padding:clamp(24px,3.4vw,38px)}
.calc .form-label{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-inv);margin-block-end:12px}
html[dir="rtl"] .calc .form-label{font-family:var(--sans);letter-spacing:0;font-size:.82rem}
.calc .form-select{
  background-color:var(--ink-2);border:1px solid rgba(250,250,247,.2);color:var(--paper);
  border-radius:var(--r);font-size:16px;min-height:52px;padding:15px 44px 15px 16px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23D9B15E' stroke-width='1.6'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:15px;
}
html[dir="rtl"] .calc .form-select{padding:15px 16px 15px 44px;background-position:left 16px center}
.calc .form-select:focus{background-color:var(--ink-2);color:var(--paper);border-color:var(--brass-lo);box-shadow:none}
.calc-out{margin-block-start:26px;padding-block-start:26px;border-block-start:1px solid rgba(250,250,247,.14);opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.calc-out.on{opacity:1;transform:none}
.calc-out span{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-lo);display:block;margin-block-end:8px}
html[dir="rtl"] .calc-out span{font-family:var(--sans);letter-spacing:0;font-size:.82rem}
.calc-out strong{font-family:var(--display);font-size:clamp(1.6rem,3vw,2.3rem);font-weight:400;display:block;line-height:1.1}
html[dir="rtl"] .calc-out strong{font-family:var(--sans);font-weight:600}
.calc-out p{margin:12px 0 0;font-size:.82rem;color:var(--muted-inv)}

/* ═══ PROCESS — a real time axis, not a decorative line ═══
   Two playback modes share this CSS:
   · scrubbed  — section pinned, progress driven by scroll (.scrub)
   · timed     — plays once on entry, used on mobile and reduced motion
   Neither uses transition-delay: the stagger comes from when JS adds .on */
.proc{position:relative;margin-block-start:clamp(46px,6vw,84px)}

/* pinning scaffold. JS adds .pinned only when the section fits the viewport,
   so if it can't, the layout stays completely normal. */
.proc-scroll{position:relative}
@media(min-width:992px){
  .proc-scroll.pinned{height:220vh}
  .proc-scroll.pinned .proc-pin{
    position:sticky;inset-block-start:0;min-height:100vh;
    display:flex;flex-direction:column;justify-content:center;
  }
}
.band:has(.proc-scroll.pinned){padding-block:0}

.axis{position:absolute;inset-block-start:64px;inset-inline-start:28px;width:75%;height:1px;background:var(--line)}
.axis i{display:block;height:100%;background:var(--brass);transform:scaleX(var(--p,0));transform-origin:left center}
html[dir="rtl"] .axis i{transform-origin:right center}
/* in timed mode the line eases across on its own; when scrubbing, scroll drives it */
.proc:not(.scrub) .axis i{transition:transform 2.4s cubic-bezier(.62,.02,.24,1)}

.step{padding-inline-end:clamp(18px,2.4vw,40px);position:relative}
.when{display:block;font-family:var(--mono);font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);margin-block-end:14px;opacity:0;transform:translateY(6px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),color .4s var(--ease)}
html[dir="rtl"] .when{font-family:var(--sans);letter-spacing:0;font-size:.76rem}
.step.on .when{opacity:1;transform:none;color:var(--brass-ink)}

.num{
  width:56px;height:56px;border-radius:50%;background:var(--limestone);border:1px solid var(--line);
  display:grid;place-items:center;font-family:var(--mono);font-size:.78rem;color:var(--muted);
  position:relative;z-index:2;opacity:0;transform:scale(.72);
  transition:opacity .45s var(--ease),transform .45s cubic-bezier(.34,1.4,.5,1),
             border-color .45s var(--ease),color .45s var(--ease),background .4s var(--ease);
}
.step.on .num{opacity:1;transform:none;border-color:var(--brass);color:var(--ink);background:var(--paper)}
.num::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:1px solid var(--brass);opacity:0;pointer-events:none}
.step.on .num::after{animation:ping 1.15s var(--ease) forwards}
@keyframes ping{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(1.75)}}
.step:hover .num{background:var(--ink);border-color:var(--ink);color:var(--paper);transform:translateY(-3px)}

.step .body{padding-block-start:24px;opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.step.on .body{opacity:1;transform:none;transition-delay:.1s}
.step h3{font-size:1.06rem;font-weight:500;margin-block-end:8px}
.step p{margin:0;font-size:.875rem;color:var(--muted);max-width:34ch}

/* ═══ FIGURES ═══ */
.fig-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-block-end:20px;border-block-end:1px solid var(--ink)}
.fig-head .eyebrow{margin:0}
.fig-head em{font-family:var(--mono);font-style:normal;font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
html[dir="rtl"] .fig-head em{font-family:var(--sans);letter-spacing:0;font-size:.8rem}
/* kept as a native CSS grid rather than a Bootstrap .row: subgrid is what
   keeps the four figures on shared baselines, and Bootstrap rows are flex */
.figures{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:auto auto auto auto}
.fig{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;position:relative;
  padding:clamp(26px,3vw,38px) clamp(18px,2.2vw,34px) 0}
.fig:first-child{padding-inline-start:0}
.fig + .fig{border-inline-start:1px solid var(--line)}
@supports not (grid-template-rows: subgrid){
  .fig{display:flex;flex-direction:column}
  .fig-src{margin-block-start:auto}
}
.fig-n{margin:0;display:flex;align-items:baseline;gap:2px;line-height:.92}
.fig-n b{font-family:var(--display);font-size:clamp(2.7rem,5.2vw,4.3rem);font-weight:400;
  letter-spacing:-.045em;font-variant-numeric:tabular-nums;transition:color .45s var(--ease)}
html[dir="rtl"] .fig-n b{font-family:var(--mono);letter-spacing:-.02em}
.fig-n i{font-family:var(--display);font-style:normal;font-size:clamp(1.4rem,2.6vw,2.1rem);color:var(--brass-ink);letter-spacing:-.02em}
html[dir="rtl"] .fig-n i{font-family:var(--sans);font-size:1.15rem;padding-inline-start:6px}
.fig:hover .fig-n b{color:var(--teal)}
.fig-rule{display:block;height:1px;background:var(--line);margin-block:18px 16px;overflow:hidden;align-self:start}
.fig-rule em{display:block;height:100%;width:0;background:var(--brass);transition:width 1.5s var(--ease)}
.figures.in .fig-rule em{width:100%;transition-delay:calc(var(--i,0)*150ms + 250ms)}
.fig-l{margin:0;font-size:.95rem;line-height:1.5;color:var(--ink);max-width:24ch;align-self:start}
.fig-src{margin:0;padding-block:22px 0;font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;
  color:var(--muted);display:flex;align-items:center;gap:8px;align-self:start}
html[dir="rtl"] .fig-src{font-family:var(--sans);letter-spacing:0;font-size:.76rem}
.fig-src::before{content:"";width:5px;height:5px;border:1px solid var(--brass);border-radius:50%;flex:none}

/* ═══ LEADERSHIP ═══ */
.lead-row{min-height:min(780px,88vh)}
.lead-row > [class*=col-]{align-self:stretch;display:flex;flex-direction:column;justify-content:center}
/* the pinned column must start at the top — centring it parks the element
   mid-column and sticky can then only use the slack below it (half the travel) */
.lead-row > [class*=col-]:first-child{justify-content:flex-start}
@media(max-width:991.98px){ .lead-row{min-height:0} }
.portrait{aspect-ratio:4/5;max-height:min(520px,64vh);width:100%;margin-inline:auto;background:linear-gradient(155deg,var(--ink-2),var(--ink));border-radius:var(--r);display:grid;place-items:center;position:relative;overflow:hidden}
.portrait::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(179,130,47,.22),transparent 58%)}
.portrait i{font-family:var(--display);font-style:normal;font-size:clamp(4rem,9vw,7rem);color:rgba(250,250,247,.16);letter-spacing:-.04em}
.portrait em{position:absolute;inset-block-end:20px;inset-inline-start:22px;font-style:normal;font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--brass-lo);z-index:1}
html[dir="rtl"] .portrait em{font-family:var(--sans);letter-spacing:0}
blockquote{margin:0;font-family:var(--display);font-size:clamp(1.4rem,2.6vw,2.05rem);line-height:1.34;font-weight:300;letter-spacing:-.02em}
html[dir="rtl"] blockquote{font-family:var(--sans);font-weight:400;line-height:1.7;letter-spacing:0}
.sig{margin-block-start:30px;padding-block-start:22px;border-block-start:1px solid var(--line)}
.sig b{display:block;font-size:.94rem;font-weight:500}
.sig small{font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
html[dir="rtl"] .sig small{font-family:var(--sans);letter-spacing:0;font-size:.82rem}

/* ═══ EVENT ═══ */
.event{background:var(--paper)}
.ev-card{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--limestone)}
.ev-img{background:linear-gradient(140deg,var(--teal),var(--ink));min-height:280px;position:relative;overflow:hidden;height:100%}
.ev-img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.ev-body{padding:clamp(26px,3.4vw,46px)}
.ev-tag{display:inline-flex;font-family:var(--mono);font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;color:var(--brass-ink);border:1px solid var(--brass);padding:4px 10px;border-radius:2px;margin-block-end:18px}
html[dir="rtl"] .ev-tag{font-family:var(--sans);letter-spacing:0;font-size:.76rem}
.ev-body h3{margin-block-end:10px}
.ev-body p{color:var(--muted);font-size:.94rem;margin:0}
.ev-cd{display:flex;gap:22px;margin-block:26px;padding-block:20px;border-block:1px solid var(--line)}
.ev-cd div{text-align:center}
.ev-cd b{font-family:var(--mono);font-size:1.55rem;font-weight:400;display:block;line-height:1}
.ev-cd small{font-family:var(--mono);font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
html[dir="rtl"] .ev-cd small{font-family:var(--sans);letter-spacing:0;font-size:.74rem}

/* ═══ TESTIMONIALS ═══ */
.tst-head{display:flex;align-items:end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-block-end:44px}
.tst-nav{display:flex;gap:9px}
.tst-nav button{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;background:none;color:inherit;transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.tst-nav button:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.tst-nav svg{width:13px;height:13px}
html[dir="rtl"] .tst-nav svg{transform:scaleX(-1)}
.tst-rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-block-end:6px;margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut)}
.tst-rail::-webkit-scrollbar{display:none}
.tst{flex:0 0 min(420px,82vw);scroll-snap-align:start;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,2.8vw,34px);display:flex;flex-direction:column}
.stars{color:var(--brass-ink);letter-spacing:3px;font-size:.85rem;margin-block-end:16px}
.tst p{margin:0 0 22px;font-size:.94rem;color:var(--muted);line-height:1.72;flex:1}
.tst b{font-size:.9rem;font-weight:500}
.tst small{display:block;font-family:var(--mono);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-block-start:3px}
html[dir="rtl"] .tst small{font-family:var(--sans);letter-spacing:0;font-size:.78rem}

/* ═══ INSIGHTS ═══ */
.ins{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s var(--ease);display:flex;flex-direction:column;height:100%}
.ins:hover{transform:translateY(-5px);box-shadow:0 26px 50px -26px rgba(8,38,43,.3)}
.ins-img{aspect-ratio:16/10;background:linear-gradient(140deg,var(--teal),var(--ink));position:relative;overflow:hidden}
.ins-img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .7s var(--ease)}
.ins:hover .ins-img img{transform:scale(1.05)}
.ins-body{padding:24px;flex:1;display:flex;flex-direction:column}
.ins-cat{display:flex;gap:7px;margin-block-end:14px}
.ins-cat b{font-family:var(--mono);font-size:.6rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--brass-ink)}
html[dir="rtl"] .ins-cat b{font-family:var(--sans);letter-spacing:0;font-size:.74rem}
.ins h3{font-size:1.06rem;font-weight:500;line-height:1.36;margin-block-end:14px;flex:1}
.ins time{font-family:var(--mono);font-size:.68rem;color:var(--muted);letter-spacing:.05em}
html[dir="rtl"] .ins time{font-family:var(--sans);letter-spacing:0}

/* ═══ CTA ═══ */
.cta{background:var(--ink);color:var(--paper);position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset-block-start:-40%;inset-inline-start:-8%;width:56vw;height:56vw;background:radial-gradient(circle,rgba(179,130,47,.15),transparent 62%)}
.cta .container{position:relative;z-index:1}
.cta .lede{color:var(--muted-inv)}
.nl{display:flex;gap:10px;margin-block-start:24px;flex-wrap:wrap}
.nl .form-control{flex:1;min-width:210px;padding:14px 16px;background:rgba(250,250,247,.07);border:1px solid rgba(250,250,247,.2);color:var(--paper);border-radius:var(--r);font-size:16px;min-height:52px}
.nl .form-control::placeholder{color:rgba(250,250,247,.42)}
.nl .form-control:focus{background:rgba(250,250,247,.07);color:var(--paper);border-color:var(--brass-lo);box-shadow:none}
.cta-note{font-size:.75rem;color:rgba(250,250,247,.45);margin:14px 0 0}

/* ═══ FOOTER ═══ */
footer{background:var(--ink);color:var(--muted-inv);padding-block:clamp(50px,6vw,80px) 0;border-block-start:1px solid rgba(250,250,247,.1)}
footer h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-lo);margin-block-end:20px;font-weight:500}
html[dir="rtl"] footer h4{font-family:var(--sans);letter-spacing:0;font-size:.82rem}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
footer a{font-size:.88rem;transition:color .25s}
footer a:hover{color:var(--brass-lo)}
.ft-brand b{font-family:var(--display);font-size:1.6rem;color:var(--paper);display:block;margin-block-end:14px;font-weight:500}
html[dir="rtl"] .ft-brand b{font-family:var(--sans);font-weight:600}
.ft-brand p{font-size:.86rem;margin:0 0 22px;max-width:34ch}
.offices{display:grid;gap:16px}
.office b{display:block;color:var(--paper);font-size:.84rem;font-weight:500;margin-block-end:3px}
.office span{font-size:.78rem;line-height:1.6;display:block}
.socials{display:flex;gap:9px}
.socials a{width:36px;height:36px;border:1px solid rgba(250,250,247,.2);border-radius:50%;display:grid;place-items:center;transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.socials a:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.socials svg{width:15px;height:15px}
.ft-bot{margin-block-start:56px;padding-block:24px;border-block-start:1px solid rgba(250,250,247,.1);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.76rem}

/* ═══ FLOATING WHATSAPP ═══ */
.float{position:fixed;inset-block-end:20px;inset-inline-end:20px;z-index:1035;display:flex;align-items:center;gap:10px;background:var(--ink);color:var(--paper);padding:13px 20px;border-radius:40px;box-shadow:0 14px 34px rgba(8,38,43,.3);font-size:.85rem;font-weight:500;transform:translateY(90px);transition:transform .5s var(--ease),background .3s}
.float.on{transform:none}
.float:hover{background:var(--teal);color:var(--paper)}
.float svg{width:17px;height:17px}

/* ═══ RESPONSIVE — aligned to Bootstrap's breakpoints ═══ */
@media(max-width:1199.98px){
  .svc-stick{position:static}
}
@media(max-width:991.98px){
  .portrait{max-width:340px}
  .proc{margin-block-start:40px}
  .axis{inset-block:20px 40px;inset-inline-start:28px;width:1px;height:auto}
  .axis i{width:100%;height:100%;transform:scaleY(var(--p,0));transform-origin:center top}
  html[dir="rtl"] .axis i{transform-origin:center top}
  .step{display:grid;grid-template-columns:56px 1fr;column-gap:24px;padding-inline-end:0;padding-block-end:34px}
  .when{grid-column:2;grid-row:1;margin-block-end:0;align-self:center}
  .num{grid-column:1;grid-row:1/span 2}
  .step .body{grid-column:2;grid-row:2;padding-block-start:8px}
  .step p{max-width:none}
}
@media(max-width:900px){
  .util-l span,.util-r span{display:none}
  .hero-meta{display:grid;grid-template-columns:1fr 1fr;gap:22px 18px}
  .figures{grid-template-columns:1fr 1fr;grid-template-rows:repeat(8,auto)}
  .fig:nth-child(-n+2){border-block-end:1px solid var(--line);padding-block-end:clamp(24px,3vw,32px)}
  .fig:nth-child(odd){padding-inline-start:0}
  .fig:nth-child(3),.fig:nth-child(4){padding-block-start:clamp(26px,3vw,36px)}
  .fig:nth-child(3){border-inline-start:0}
  .tst-head{margin-block-end:30px}
}
@media(max-width:767.98px){
  .h-xl{font-size:clamp(2.15rem,8.6vw,3rem)}
  .util-l a:not(.p){display:none}
  .ev-cd{gap:16px}
  .ledger-row{grid-template-columns:38px 1fr auto;gap:12px;padding-inline:18px}
  .ledger-hd,.ledger-ft{padding-inline:18px}
  .ledger-ft{flex-direction:column;align-items:flex-start;gap:10px}
  .hero-cta .btn,.nl .btn{flex:1}
  .svc-item{grid-template-columns:44px 1fr;gap:16px}
  .svc-arrow{display:none}
  .tst-nav{display:none}
  .tst{flex:0 0 88vw}
  .float{inset-block-end:14px;inset-inline-end:14px;padding:12px 16px}
}
@media(max-width:575.98px){
  .figures{grid-template-columns:1fr;grid-template-rows:auto}
  .fig{grid-row:auto;display:flex;flex-direction:column;padding:26px 0 24px!important;border-inline-start:0!important;border-block-end:1px solid var(--line)}
  .fig:last-child{border-block-end:0}
  .fig-l{max-width:none}
  .fig-src{padding-block-start:16px}
  .hero-meta{gap:18px 14px}
  .float span{display:none}
  .float{padding:14px;border-radius:50%}
}
/* touch tap targets: nothing interactive under ~44px */
@media(max-width:991.98px){
  .util .container{height:44px}
  .util a{display:inline-flex;align-items:center;min-height:40px}
  .lang{min-height:38px;display:inline-flex;align-items:center;padding-inline:14px}
  footer ul{gap:0}
  footer ul a{display:flex;align-items:center;min-height:44px}
  .socials a{width:44px;height:44px}
  .ledger-ft a{display:inline-flex;align-items:center;min-height:44px}
}

/* short phones: keep the menu CTA above the fold */
@media(max-height:760px){
  .dnav{padding:6px 0}
  .dnav a.lvl1,.dnav .acc-btn{padding-block:11px;font-size:1.12rem;min-height:44px}
  .dnav .collapse a{padding-block:9px;min-height:40px}
  .acme-menu .offcanvas-header{padding-block:14px}
  .panel-foot{padding:16px 24px 22px;gap:12px}
  .panel-foot .btn{padding-block:13px;min-height:46px}
  .panel-contact{font-size:.84rem;gap:6px}
}
@media(hover:none){
  .svc-item:hover{padding-inline-start:0}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
  .dnav > *{opacity:1;transform:none}
  .ledger-stage,.ledger-tilt{transform:none!important;perspective:none}
  .ledger::after{display:none}
  .proc-scroll.pinned{height:auto!important}
  .proc-scroll.pinned .proc-pin{position:static!important;min-height:0!important}
  .step .when,.step .num,.step .body{opacity:1;transform:none}
}