/* ═══════════════════════════════════════════════════════════
   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{
  /* ── ACME brand palette — Deck s.03, Option 1 (RECOMMENDED) ──
     Do not introduce colours outside this set. Orange is an ACCENT: the deck
     rules forbid it as a background on large areas. */
  --acme-orange:#F49200;      /* protected brand orange — never altered */
  --acme-amber:#F5A623;       /* secondary accent, orange on dark */
  --acme-amber-deep:#8B6914;  /* dark amber — orange TEXT on light, AA-safe */
  --brand-black:#0D0D0D;
  --charcoal:#2A2A2A;
  --dark-grey:#4A4A4A;
  --light-grey:#D0D0D0;
  --off-white:#F5F5F5;
  --cream:#FDF3E0;
  --white:#FFFFFF;

  /* ── semantic roles (what the components actually reference) ── */
  --ink:var(--brand-black);        /* deepest surfaces: footer, utility bar */
  --ink-2:var(--charcoal);         /* large dark bands */
  --teal:var(--dark-grey);         /* secondary dark, hover states */
  --brass:var(--acme-orange);      /* rules, borders, fills, CTAs */
  --brass-lo:var(--acme-amber);    /* orange on dark backgrounds */
  --brass-ink:var(--acme-amber-deep); /* orange text on light backgrounds */
  --limestone:var(--off-white);    /* page background */
  --paper:var(--white);            /* raised surfaces */
  --line:rgba(13,13,13,.13);
  --muted:#4A4A4A;                 /* Dark Grey — 7.7:1 on off-white */
  --muted-inv:rgba(255,255,255,.72);
  --alert:#A63A2A;

  /* ── typography — Deck s.04 ──
     Roboto for headings/titles/digital, Calibri for body/data/UI.
     Carlito is metric-compatible with Calibri for machines without it.
     The brand rules cap a document at two typefaces, so there is no third
     face and no monospace: technical labels use the sans with tracking. */
  --display:"Roboto","Segoe UI",Arial,sans-serif;
  --sans:Calibri,"Carlito","Segoe UI",Arial,sans-serif;
  --mono:Calibri,"Carlito","Segoe UI",Arial,sans-serif;
  --ar:"Noto Sans Arabic",var(--sans);

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

  --bs-body-bg:var(--limestone);
  --bs-body-color:var(--brand-black);
  --bs-body-font-family:var(--sans);
  --bs-body-font-size:1rem;
  --bs-body-line-height:1.6;
  --bs-border-color:var(--line);
  --bs-border-radius:var(--r);
  --bs-link-color:inherit;
  --bs-link-hover-color:inherit;
  --bs-emphasis-color:var(--brand-black);
  --bs-secondary-color:var(--muted);
  --bs-focus-ring-color:rgba(244,146,0,.4);
}
html[dir="rtl"]{ --display:var(--ar); --sans:var(--ar); --mono:var(--ar); }

/* one fluid container instead of Bootstrap's stepped max-widths, so the
   layout stays fluid up to 1320px exactly as designed */
/* one fluid container instead of Bootstrap's stepped max-widths. It widens on
   large displays — 1320 left a lot of dead margin at 1600 and 1920, and the
   deck specifies a 1920 homepage. */
.container{max-width:var(--maxw)!important;padding-inline:var(--gut)!important;width:100%}
@media(min-width:1560px){:root{--maxw:1480px}}
@media(min-width:1800px){:root{--maxw:1660px;--gut:clamp(20px,5vw,88px)}}

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 — Deck s.04 hierarchy, Roboto Bold ───────── */
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:700;letter-spacing:-.01em}
.h-xl{font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,3.4vw,3.7rem);line-height:1.14;letter-spacing:-.02em}
.h-lg{font-family:var(--display);font-weight:700;font-size:clamp(1.75rem,3.6vw,2.75rem);line-height:1.14;letter-spacing:-.015em}
.h-md{font-family:var(--display);font-weight:700;font-size:clamp(1.25rem,2.2vw,1.7rem);line-height:1.22;letter-spacing:-.01em}
/* the serif italic emphasis is gone with the serif — emphasis is now the
   brand orange, which is also how the deck emphasises words in headings */
/* Orange cannot carry large display text on light: #F49200 is 2.2:1 on
   off-white and the AA-safe dark amber goes muddy at that size. So emphasis
   on light stays black and the orange chevron rule carries the accent —
   which is also the deck's "use orange sparingly" rule. On dark grounds the
   amber has plenty of contrast and is used freely. */
.h-xl em,.h-lg em{font-style:normal;font-weight:700;color:inherit}
.cta .h-xl em,.cta .h-lg em,.page-head .h-xl em,.page-head .h-lg em,
.tool .h-lg em,.hero--photo .h-xl em{color:var(--brass-lo)}
html[dir="rtl"] .h-xl,html[dir="rtl"] .h-lg,html[dir="rtl"] .h-md{letter-spacing:0;line-height:1.4}

/* Technical labels. The brand caps a document at two typefaces, so these use
   the sans with tracking and caps instead of a monospace face. */
.eyebrow{
  font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass-ink);display:flex;align-items:center;gap:12px;margin:0 0 18px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--brass);flex:none}
html[dir="rtl"] .eyebrow{letter-spacing:0}
.lede{font-size:clamp(1rem,1.4vw,1.12rem);color:var(--muted);max-width:58ch;line-height:1.7;margin:0}
.band{padding-block:clamp(58px,7.4vw,108px)}
.band.seam-after{padding-block-end:clamp(40px,4.6vw,68px)}
.band.seam-before{padding-block-start:clamp(40px,4.6vw,68px);border-block-start:1px solid var(--line)}
.g-brand{--bs-gutter-x:clamp(32px,5vw,72px)}

/* ── scroll reveal ──────────────────────────────────────── */
.rv{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0)*80ms)}
.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:.9rem;--bs-btn-font-weight:700;--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;line-height:1.2;
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.btn svg{width:15px;height:15px;flex:none;transition:transform .35s var(--ease)}
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(--brand-black);--bs-btn-color:var(--white);--bs-btn-border-color:var(--brand-black);
  --bs-btn-hover-bg:var(--acme-orange);--bs-btn-hover-color:var(--brand-black);--bs-btn-hover-border-color:var(--acme-orange)}
/* White on ACME orange is 2.3:1 — under AA. The deck requires AA, so the
   primary CTA is brand black on orange (8.3:1). */
.btn-brass{--bs-btn-bg:var(--brass);--bs-btn-color:var(--brand-black);--bs-btn-border-color:var(--brass);
  --bs-btn-hover-bg:var(--brand-black);--bs-btn-hover-color:var(--acme-orange);--bs-btn-hover-border-color:var(--brand-black)}
.btn-outline-ink{--bs-btn-color:var(--brand-black);--bs-btn-border-color:var(--line);--bs-btn-bg:transparent;
  --bs-btn-hover-bg:var(--brand-black);--bs-btn-hover-color:var(--white);--bs-btn-hover-border-color:var(--brand-black)}
.btn-outline-paper{--bs-btn-color:var(--white);--bs-btn-border-color:rgba(255,255,255,.4);--bs-btn-bg:transparent;
  --bs-btn-hover-bg:var(--white);--bs-btn-hover-color:var(--brand-black);--bs-btn-hover-border-color:var(--white)}

/* ── the chevron rule — the deck's signature device ─────────
   A full-width orange rule running INTO an open, notched chevron, so the two
   read as one continuous arrow. Proportions taken from the deck: the head is
   roughly eleven times the rule weight tall, and the rule penetrates about a
   third of the way into the notch. Attached in CSS, so no markup carries it. */
:root{
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 56'%3E%3Cpath d='M6 5 L57 28 L6 51 L6 38 L31 28 L6 18 Z' fill='none' stroke='%23F49200' stroke-width='5.4' stroke-linejoin='miter' stroke-miterlimit='8'/%3E%3C/svg%3E");
  --chev-lo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 56'%3E%3Cpath d='M6 5 L57 28 L6 51 L6 38 L31 28 L6 18 Z' fill='none' stroke='%23F5A623' stroke-width='5.4' stroke-linejoin='miter' stroke-miterlimit='8'/%3E%3C/svg%3E");
  --chev-w:46px;   /* head width */
  --chev-h:42px;   /* head height */
  --chev-bar:4px;  /* rule weight */
}
.chevron-rule,
h2.h-lg,
.page-head h1,
.hero h1{position:relative;padding-block-end:70px}
.chevron-rule::before,
h2.h-lg::before,
.page-head h1::before,
.hero h1::before{
  content:"";position:absolute;
  inset-block-end:calc(6px + (var(--chev-h) - var(--chev-bar)) / 2);
  inset-inline:0 calc(var(--chev-w) * .66);        /* runs into the notch */
  height:var(--chev-bar);background:var(--brass);
}
.chevron-rule::after,
h2.h-lg::after,
.page-head h1::after,
.hero h1::after{
  content:"";position:absolute;inset-block-end:6px;inset-inline-end:0;
  width:var(--chev-w);height:var(--chev-h);
  background:var(--chev) no-repeat center/contain;
}
html[dir="rtl"] .chevron-rule::after,
html[dir="rtl"] h2.h-lg::after,
html[dir="rtl"] .page-head h1::after,
html[dir="rtl"] .hero h1::after{transform:scaleX(-1)}
/* on ink the rule steps up to the lighter amber so it holds against black */
.page-head h1::before,.tool h2::before,.cta h2::before,.tl-ink h2::before,
.hero--photo h1::before,.office-ink h2::before{background:var(--brass-lo)}
.page-head h1::after,.tool h2::after,.cta h2::after,.tl-ink h2::after,
.hero--photo h1::after,.office-ink h2::after{background-image:var(--chev-lo)}
@media(max-width:767.98px){
  :root{--chev-w:34px;--chev-h:31px;--chev-bar:3px}
  .chevron-rule,h2.h-lg,.page-head h1,.hero h1{padding-block-end:54px}
}

/* ── the rule draws itself ──────────────────────────────
   Every heading that carries the device is already a `.rv` element, so the
   animation hangs off the existing reveal trigger — no extra JS, and it can
   never fire before the heading itself is on screen.
   The rule wipes left to right, then the arrowhead catches up. */
.chevron-rule.rv::before,
h2.h-lg.rv::before,
.page-head h1.rv::before,
.hero h1.rv::before{
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .85s cubic-bezier(.62,.02,.24,1) .12s;
}
.chevron-rule.rv.in::before,
h2.h-lg.rv.in::before,
.page-head h1.rv.in::before,
.hero h1.rv.in::before{transform:scaleX(1)}

.chevron-rule.rv::after,
h2.h-lg.rv::after,
.page-head h1.rv::after,
.hero h1.rv::after{
  opacity:0;transform:translateX(-18px);
  transition:opacity .35s var(--ease) .74s, transform .45s cubic-bezier(.34,1.3,.5,1) .74s;
}
.chevron-rule.rv.in::after,
h2.h-lg.rv.in::after,
.page-head h1.rv.in::after,
.hero h1.rv.in::after{opacity:1;transform:translateX(0)}

/* RTL draws from the other end, and the head is already mirrored */
html[dir="rtl"] .chevron-rule.rv::before,
html[dir="rtl"] h2.h-lg.rv::before,
html[dir="rtl"] .page-head h1.rv::before,
html[dir="rtl"] .hero h1.rv::before{transform-origin:100% 50%}
html[dir="rtl"] .chevron-rule.rv::after,
html[dir="rtl"] h2.h-lg.rv::after,
html[dir="rtl"] .page-head h1.rv::after,
html[dir="rtl"] .hero h1.rv::after{transform:scaleX(-1) translateX(-18px)}
html[dir="rtl"] .chevron-rule.rv.in::after,
html[dir="rtl"] h2.h-lg.rv.in::after,
html[dir="rtl"] .page-head h1.rv.in::after,
html[dir="rtl"] .hero h1.rv.in::after{transform:scaleX(-1) translateX(0)}

@media(prefers-reduced-motion:reduce){
  .chevron-rule.rv::before,h2.h-lg.rv::before,.page-head h1.rv::before,.hero h1.rv::before{transform:scaleX(1)}
  .chevron-rule.rv::after,h2.h-lg.rv::after,.page-head h1.rv::after,.hero h1.rv::after{opacity:1;transform:none}
  html[dir="rtl"] .chevron-rule.rv::after,html[dir="rtl"] h2.h-lg.rv::after,
  html[dir="rtl"] .page-head h1.rv::after,html[dir="rtl"] .hero h1.rv::after{transform:scaleX(-1)}
}

/* the eyebrow's little dash is redundant now the chevron rule carries the
   device, and the deck sets its own eyebrows as plain orange caps */
.eyebrow::before{content:none}
.eyebrow{gap:0}

/* ═══ 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:.72rem;letter-spacing:.015em}
.util .container{display:flex;align-items:center;justify-content:space-between;gap:24px;height:42px}
.util a:hover{color:var(--brass-lo)}
.util-l{display:flex;gap:30px;align-items:center}
.util-r{display:flex;gap:22px;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}}
/* The switcher was 72%-white text in a 2.1:1 border — technically legible but
   it did not read as a control. Brand orange at full strength is 7.5:1 on the
   ink bar and unmistakably interactive. */
.lang{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--acme-orange);color:var(--acme-orange);background:none;
  padding:6px 14px;border-radius:2px;min-height:32px;
  font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.02em;
  flex:none;white-space:nowrap;   /* the utility bar was squeezing it on mobile */
  transition:background-color .25s var(--ease),color .25s var(--ease);
}
.lang svg{width:13px;height:13px;flex:none}
.lang:hover,.lang:focus-visible{background:var(--acme-orange);color:var(--brand-black)}

/* ═══ 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:background-color .34s var(--ease),border-color .34s var(--ease),box-shadow .34s var(--ease);
}
.navbar.site.stuck{border-block-end-color:var(--line);box-shadow:0 1px 24px rgba(8,38,43,.06)}
/* The header height stays CONSTANT. It used to shrink 78px -> 64px on scroll,
   but the header is in flow, so shrinking it removed 14px from the document
   and yanked everything below upward — a visible jump at the exact moment the
   state flipped. The stuck state is signalled by background and shadow only. */
.navbar.site .container{display:flex;align-items:center;justify-content:space-between;gap:28px;height:78px;flex-wrap:nowrap}
/* ── brand lockup ────────────────────────────────────────
   Reconstruction of the supplied artwork: triangular A, monoline CME, orange
   rule and the pipe-separated strapline, all in one SVG so the proportions
   stay locked at any size. `currentColor` drives the CME and strapline, so the
   reversed version is just a colour change — the orange never moves.
   REPLACE with the official AI/SVG before launch. */
.acme-logo{display:block;width:100%;height:auto;color:var(--brand-black)}
.navbar-brand{display:block;flex:none;padding:0;margin:0;width:132px}
.acme-menu .offcanvas-title .acme-logo,.acme-menu .offcanvas-title{width:124px;color:var(--white)}
footer .acme-logo{width:176px;color:var(--white);margin-block-end:22px}
/* the deck sets a 120px minimum width for digital use */
@media(max-width:575.98px){ .navbar-brand{width:112px} }

.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}
/* 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);
}
.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}
.hero-meta small{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ── 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}
.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}
.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)}
.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}
.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:700}
.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)}
.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.rv.in[data-plx]{transform:translate3d(0,var(--plx,0px),0);will-change:transform}
.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}
.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}
/* direct child only — the CTA inside the panel has its own span, and this rule
   was overwriting its colour and casing */
.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}
.calc-out strong{font-family:var(--display);font-size:clamp(1.6rem,3vw,2.3rem);font-weight:400;display:block;line-height:1.1}
.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)}
.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)}
/* 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:3px;line-height:.92;white-space:nowrap}
/* a leading unit (AED) takes the same treatment as a trailing one (yrs, +) and
   sits ahead of the quantity, so a currency figure keeps the same visual weight
   as a bare count instead of wrapping onto a second line */
.fig-u{margin-inline-end:5px}
.fig:hover .fig-u{color:var(--brass)}
.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)}
.fig-n i{font-family:var(--display);font-weight:700;font-style:normal;font-size:clamp(1.4rem,2.6vw,2.1rem);color:var(--brass-ink);letter-spacing:-.02em}
.fig{transition:background-color .45s var(--ease),transform .45s var(--ease)}
.fig:hover{transform:translateY(-3px)}
/* the numbers rise as the row reveals, staggered with the rule that follows */
.fig-n,.fig-l{opacity:0;transform:translateY(12px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.fig-n{transition-delay:calc(var(--i,0)*120ms)}
.fig-l{transition-delay:calc(var(--i,0)*120ms + 220ms)}
.figures.in .fig-n,.figures.in .fig-l{opacity:1;transform:none}
.fig-src{opacity:0;transition:opacity .5s var(--ease),color .45s var(--ease);
  transition-delay:calc(var(--i,0)*120ms + 340ms)}
.figures.in .fig-src{opacity:1}
.fig:hover,.fig:focus-within{background:var(--cream)}
.fig:hover .fig-n b,.fig:focus-within .fig-n b{color:var(--brass-ink)}
.fig:hover .fig-n i{color:var(--brass)}
/* the divider either side of the hovered column picks up the accent */
.fig:hover,.fig:hover + .fig{border-inline-start-color:rgba(244,146,0,.5)}
.fig:hover .fig-src{color:var(--ink)}
.fig:hover .fig-src::before{background:var(--brass)}
.fig-n b,.fig-n i,.fig-src,.fig-src::before{transition:color .45s var(--ease),background-color .45s var(--ease)}
.fig,.fig + .fig{transition:background-color .45s var(--ease),border-color .45s var(--ease)}
.fig-rule{display:block;height:1px;background:var(--line);margin-block:18px 16px;overflow:hidden;
  align-self:start;transition:height .3s var(--ease)}
.fig:hover .fig-rule{height:2px}
.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}
.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:var(--charcoal);border-radius:var(--r);display:grid;place-items:center;position:relative;overflow:hidden}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block}
.portrait::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(13,13,13,.5),transparent 45%)}
.portrait i{font-family:var(--display);font-weight:700;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}
blockquote{margin:0;font-family:var(--display);font-size:clamp(1.4rem,2.6vw,2.05rem);line-height:1.34;font-weight:400;letter-spacing:-.02em}
.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)}

/* ═══ 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}
.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 div{position:relative}
.ev-cd b{font-family:var(--mono);font-size:1.55rem;font-weight:400;display:block;line-height:1;
  font-variant-numeric:tabular-nums}
/* a changed value drops into place; the old one is already gone, so this reads
   as the digit turning over rather than two numbers crossfading */
.ev-cd b.roll{animation:cd-roll .5s var(--ease)}
@keyframes cd-roll{
  0%{transform:translateY(-.5em);opacity:0}
  55%{opacity:1}
  100%{transform:none;opacity:1}
}
/* the separator ticks with it, so the row has a pulse even at a glance */
.ev-cd div + div::before{content:"";position:absolute;inset-inline-start:-12px;inset-block-start:.42em;
  inline-size:3px;block-size:3px;border-radius:50%;background:var(--line);
  transition:background-color .4s var(--ease)}
.ev-cd.is-soon div + div::before{background:var(--brass);
  animation:cd-pulse 2s var(--ease) infinite}
@keyframes cd-pulse{0%,100%{opacity:.35}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .ev-cd b.roll{animation:none}
  .ev-cd.is-soon div + div::before{animation:none}
}
.ev-cd small{font-family:var(--mono);font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}

/* ═══ 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(26px,2.8vw,36px);display:flex;flex-direction:column;position:relative;
  transition:border-color .4s var(--ease),box-shadow .4s var(--ease)}
/* the quote mark sits behind the text as texture, not as a bullet in front of it */
.tst::before{content:"\201C";position:absolute;inset-block-start:-14px;inset-inline-end:18px;
  font-family:var(--display);font-size:7rem;line-height:1;color:var(--cream);pointer-events:none}
.tst:hover{border-color:rgba(13,13,13,.26);box-shadow:0 12px 34px rgba(13,13,13,.07)}
.tst>*{position:relative}
/* attribution reads as a person, not a caption */
.tst-by{display:flex;align-items:center;gap:13px;padding-block-start:20px;border-block-start:1px solid var(--line)}
.tst-mark{flex:none;inline-size:40px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:var(--ink-2);color:var(--paper);font-family:var(--mono);font-size:.72rem;letter-spacing:.06em}
.stars{color:var(--brass-ink);letter-spacing:4px;font-size:.92rem;margin-block-end:18px}
.tst p{margin:0 0 24px;font-size:.98rem;color:var(--ink);line-height:1.7;flex:1}
.tst b{font-size:.9rem;font-weight:500}
.tst small{display:block;font-family:var(--mono);font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-block-start:2px}

/* ═══ 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)}
/* the supplied post artwork is 3:4 with the headline at the top — a 16:10 crop
   would cut the type off, so the card carries the art at its own ratio */
.ins-img{aspect-ratio:3/4;background:var(--light-grey);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)}
.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}

/* ═══ 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}
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}
.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){
  /* direct children only — the language label is a span inside the button */
  .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}
}

@media(prefers-reduced-motion:reduce){
  /* figures: values present, nothing travels */
  .fig-n,.fig-l,.fig-src{opacity:1;transform:none;transition:none}
  .fig:hover{transform:none}
}

/* ══ Instagram strip ══
   Six square tiles, each a link out to the profile. Static markup rather than
   a script: the site has no backend, so a live feed would mean either a
   third-party embed or a build step with a Graph API token. Both are noted in
   the handover; this renders, indexes and works with JS off in the meantime. */
.ig{background:var(--paper)}
.ig-head{display:grid;gap:22px;margin-block-end:clamp(26px,3vw,38px)}
.ig-head h2{margin:0;max-width:22ch}
.ig-grid{display:grid;gap:clamp(8px,1vw,14px);grid-template-columns:repeat(2,1fr)}
/* the source art is 9:16 reel covers, so a square tile would cut the headline
   off both ends; 4:5 is Instagram's own grid ratio and crops far less */
.ig-tile{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r);
  background:var(--ink-2)}
.ig-tile img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;
  transition:transform .7s var(--ease)}
.ig-tile:hover img,.ig-tile:focus-visible img{transform:scale(1.06)}
/* the caption is the alt text made visible, so the tile says something even
   before anyone hovers on a touch screen */
.ig-veil{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  gap:10px;padding:clamp(12px,1.4vw,18px);color:var(--paper);
  background:linear-gradient(to top,rgba(13,13,13,.92),rgba(13,13,13,.55) 45%,rgba(13,13,13,.15));
  opacity:0;transition:opacity .4s var(--ease)}
.ig-tile:hover .ig-veil,.ig-tile:focus-visible .ig-veil{opacity:1}
.ig-mark{position:absolute;inset-block-start:clamp(12px,1.4vw,18px);inset-inline-end:clamp(12px,1.4vw,18px)}
.ig-mark svg{width:20px;height:20px}
.ig-cap{font-size:.82rem;line-height:1.45}
.ig-note{margin:18px 0 0;font-size:.76rem;color:var(--muted)}
.ig .btn svg{width:16px;height:16px}

@media(min-width:768px){
  .ig-grid{grid-template-columns:repeat(3,1fr)}
  .ig-head{grid-template-columns:1fr auto;align-items:end}
  .ig-head .btn{justify-self:end}
}
@media(min-width:1200px){
  .ig-grid{grid-template-columns:repeat(6,1fr)}
}
@media(prefers-reduced-motion:reduce){
  .ig-tile img{transition:none}
  .ig-tile:hover img{transform:none}
}

/* ══ Services mega menu ══
   73 sub-services will not fit a single dropdown column, so the panel goes
   full-width with one column per service line. Sub-services are links to the
   line's page rather than 73 separate pages, which do not exist. */
/* data-bs-display="static" keeps popper from pinning this to the toggle. The
   dropdown li goes position:static so the panel resolves against the navbar
   container and can centre across it instead of hanging off one nav item. */
.navbar.site > .container{position:relative}
.navbar.site .nav-item.dropdown{position:static}
.navbar.site .dropdown-menu.mega{inset-inline:0;margin-inline:auto;transform:none;
  inline-size:min(1320px,94vw);max-width:none;
  padding:clamp(22px,2.2vw,32px) clamp(22px,2.2vw,32px) 0;margin-block-start:10px}
.dropdown-menu.mega .mega-grid{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(6px,0.8vw,14px)}
.mega-head{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);
  font-size:.9rem;font-weight:500;padding-block-end:9px;margin-block-end:10px;
  border-block-end:1px solid var(--line);transition:color .3s var(--ease)}
.mega-head i{flex:none;font-family:var(--mono);font-style:normal;font-size:.56rem;letter-spacing:.08em;
  color:var(--brass-ink);border:1px solid rgba(179,130,47,.4);border-radius:var(--r);
  padding:3px 6px;line-height:1}
.mega-head:hover{color:var(--brass-ink)}
.mega-col ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.mega-col li a{display:block;text-decoration:none;color:var(--muted);font-size:.82rem;
  line-height:1.45;padding-block:2px;
  transition:color .25s var(--ease),padding-inline-start .25s var(--ease)}
.mega-col li a:hover{color:var(--ink);padding-inline-start:5px}
/* the panel closes with two routes out: help for someone who does not know
   which desk they need, and the full index for someone who does */
.mega-foot{display:grid;margin:clamp(20px,2.2vw,28px) calc(clamp(22px,2.2vw,32px) * -1) 0;
  border-block-start:1px solid var(--line)}
@media(min-width:768px){ .mega-foot{grid-template-columns:1fr auto} }
.mega-help,.mega-all{display:flex;align-items:center;gap:10px;text-decoration:none;
  padding:15px clamp(22px,2.2vw,32px);transition:background-color .3s var(--ease)}
.mega-help{flex-direction:column;align-items:flex-start;gap:3px}
.mega-help-k{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brass-ink)}
.mega-help-v{font-size:.86rem;color:var(--ink)}
.mega-help:hover{background:var(--cream)}
.mega-all{justify-content:center;background:var(--cream);color:var(--ink);
  font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase}
.mega-all svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.mega-all:hover{background:var(--brass)}
.mega-all:hover svg{transform:translateX(4px)}
html[dir="rtl"] .mega-all svg{transform:scaleX(-1)}
html[dir="rtl"] .mega-all:hover svg{transform:scaleX(-1) translateX(4px)}

/* the whole column responds, so 73 links read as eight groups rather than one
   undifferentiated list */
.mega-col{padding:10px 12px;border-radius:var(--r);align-self:start;
  transition:background-color .3s var(--ease)}
.mega-col:hover{background:var(--cream)}
.mega-col:hover .mega-head{color:var(--brass-ink)}
.mega-col:hover .mega-head i{border-color:var(--brass);color:var(--brass-ink)}
/* a marker rather than a padding jump: the row no longer shifts under the cursor */
.mega-col li a{position:relative;padding-inline-start:11px}
.mega-col li a::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.62em;
  inline-size:4px;block-size:1px;background:var(--brass);opacity:0;
  transition:opacity .25s var(--ease),inline-size .25s var(--ease)}
.mega-col li a:hover::before{opacity:1;inline-size:7px}

/* the panel arrives rather than appearing */
.navbar.site .dropdown-menu.mega{opacity:0;transform:translateY(-8px);
  transition:opacity .22s var(--ease),transform .22s var(--ease)}
.navbar.site .dropdown-menu.mega.show{opacity:1;transform:none}
@media(min-width:1200px){
  /* keyboard users get the same panel as mouse users */
  .navbar.site .nav-item.dropdown:focus-within .dropdown-menu.mega{display:block;opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .navbar.site .dropdown-menu.mega{transition:none}
  .mega-col li a::before,.mega-all svg{transition:none}
}
@media(max-width:1399.98px){
  .dropdown-menu.mega .mega-grid{grid-template-columns:repeat(3,1fr)}
}

/* ══ Parallax layers ══
   A decorative layer inside the two ink bands, offset by the parallax module
   in acme.js. The layer is oversized on purpose: it travels, so it must still
   cover the band at both ends of its range. Content sits above it because
   .tool .container and footer .container already carry their own stacking. */
.tool,footer{position:relative;overflow:clip;isolation:isolate}
.plx{position:absolute;inset-block:-22% -22%;inset-inline:0;z-index:-1;pointer-events:none;
  background:url("../img/ribbon-static.svg") no-repeat;
  background-size:auto 158%;background-position:97% 50%;opacity:.42;
  will-change:transform;transform:translate3d(0,var(--plx,0px),0)}
/* the footer layer sits between the logo column and the link columns,
   where nothing competes with it */
footer .plx{background-position:28% 50%;opacity:.22;background-size:auto 128%}
.tool .container,footer .container{position:relative;z-index:1}

@media(max-width:767.98px){
  /* the layer costs more than it gives on a phone, where the bands are short */
  .plx{display:none}
}
@media(prefers-reduced-motion:reduce){
  .plx{transform:none}
}

/* ══ Footer reveal ══
   Near the end of the page the footer pins to the bottom of the viewport and
   the last section scrolls up over it, so the footer is uncovered rather than
   scrolled to. A spacer holds the footer's space while it is out of flow, so
   the document height never changes and the scroll position never jumps. */
footer.pinned{position:fixed;inset-block-end:0;inset-inline:0;z-index:0}
.footer-spacer{height:0}
/* The reference reveals a teal footer under a light section, so the seam is
   obvious. Here both bands are ink, so a soft drop shadow reads as nothing:
   the edge needs a hairline as well, and the shadow has to be much darker
   than the surface it falls on. */
.footer-cover{position:relative;z-index:2;
  border-block-end:1px solid rgba(250,250,247,.16);
  box-shadow:0 22px 44px -14px rgba(0,0,0,.85)}
/* every other section stays above the pinned footer; the two scroll-pinned
   blocks are left alone because they manage their own fixed layers */
body > section:not(.footer-cover),
main > section:not(.footer-cover){position:relative;z-index:1}
/* the homepage process band pins its own layer and must stay unconfined */
body > section:has(.proc-scroll){z-index:auto}
main{position:relative;z-index:1}
main:has(.footer-cover){z-index:auto}

@media(max-width:767.98px){
  footer.pinned{position:relative}
  .footer-spacer{height:0!important}
  .footer-cover{box-shadow:none}
}
@media(prefers-reduced-motion:reduce){
  footer.pinned{position:relative}
  .footer-cover{box-shadow:none}
}