@font-face{font-family:"IBM Plex Sans";src:url("/assets/fonts/IBMPlexSans-Regular.woff2?v=6c4126c99b") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"IBM Plex Sans";src:url("/assets/fonts/IBMPlexSans-Medium.woff2?v=87d5a281d4") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"IBM Plex Sans";src:url("/assets/fonts/IBMPlexSans-Bold.woff2?v=cf86b70bd5") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/assets/fonts/IBMPlexSansArabic-Regular.woff2?v=4f1ea5e841") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F;}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/assets/fonts/IBMPlexSansArabic-Medium.woff2?v=34dfaa19c8") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F;}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/assets/fonts/IBMPlexSansArabic-Bold.woff2?v=682eb94582") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F;}
@font-face{font-family:"AM Switch AR";src:url("/assets/fonts/am-switch-ar.woff2?v=adaa3e1825") format("woff2");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0600-06FF;}
/* ==========================================================================
   ALMALIH TAX AND B.KEEPING FOR TAX CONSULTANCIES L.L.C S.O.C
   Design Tokens  v2.0  (2026-09-22)
   ONE NAME EVERYWHERE — the registered legal name. There is no separate trade name.
   59 characters: set it on two lines outside body copy (see --am-name-* below).
   SINGLE SOURCE OF TRUTH. Vocabulary unified with the official brand
   identity standard (--am-*). Navy #1F2455 structure, Gold #F6B128 accent
   (<= 10% of any page, one hero gold element per screen).
   No gradients. No pure black. Never hard-code a hex value in a component.
   ========================================================================== */

:root {
  /* ---- Core palette ---- */
  --am-navy:      #1F2455;  /* headings, header/footer bands, primary buttons, table headers */
  --am-gold:      #F6B128;  /* the single accent: thin bar / one key figure / one CTA */
  --am-ink:       #14173A;  /* body text ("black") */
  --am-text-2:    #6B7180;  /* secondary text */
  --am-bg:        #FFFFFF;
  --am-bg-alt:    #F7F8FA;  /* panels, stripes */
  --am-border:    #DDE1E8;
  --am-on-navy:   #FFFFFF;  /* text and marks sitting ON navy — not a page background */

  /* ---- Tints ---- */
  --am-navy-t1:   #E3E5F4;
  --am-navy-t2:   #F2F3FA;
  --am-gold-t1:   #FDEECB;
  --am-gold-t2:   #FFF8EC;

  /* ---- Semantic ---- */
  --am-success:   #1F9D63;
  --am-warning:   #E09C1C;
  --am-error:     #D23B3B;

  /* ---- Badge pairs: tint background + darkened ink.
     The semantic colours above are brand-level and fail WCAG 1.4.3 as 12px text
     on their own tints (success 3.07:1, error 3.99:1 — floor is 4.5:1).
     These darkened inks are for badge labels ONLY; the semantic tokens stay as they are. ---- */
  --am-success-tint: #E5F5EC;  --am-success-ink: #155E3C;  /* 6.89:1 */
  --am-warning-ink:  #8A5D00;                              /* 5.01:1 on --am-gold-t1 */
  --am-error-tint:   #FBE7E7;  --am-error-ink:   #8B2222;  /* 7.53:1 */

  /* ---- Type ---- */
  --am-font-ar:   "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  --am-font-lat:  "IBM Plex Sans", "Segoe UI", Tahoma, Arial, sans-serif;
  --am-font-body: "IBM Plex Sans Arabic", "IBM Plex Sans", "Segoe UI", Tahoma, sans-serif;

  /* ---- Fixed type scale (px, not rem) ---- */
  --am-fs-12: 12px; --am-fs-14: 14px; --am-fs-16: 16px; --am-fs-18: 18px;
  --am-fs-22: 22px; --am-fs-28: 28px; --am-fs-36: 36px; --am-fs-48: 48px;

  /* ---- Company name: 59 characters, always set on two lines ---- */
  --am-leading-name: 1.25;

  /* ---- Spacing (4px base) ---- */
  --am-sp-1: 4px;  --am-sp-2: 8px;  --am-sp-3: 12px; --am-sp-4: 16px;
  --am-sp-6: 24px; --am-sp-8: 32px; --am-sp-12: 48px; --am-sp-16: 64px;

  /* ---- Radius / shadow ---- */
  --am-r-sm: 4px; --am-r-btn: 8px; --am-r-card: 14px; --am-r-full: 999px;
  --am-shadow:    0 2px 8px rgba(31,36,85,0.08);
  --am-shadow-lg: 0 4px 16px rgba(31,36,85,0.14);

  /* ---- Focus ring (token PAIR - see .am :focus-visible in house.css) ----
     Two rings, because no single colour clears WCAG 1.4.11 (3:1) on every
     surface this system puts a control on. Measured, vs white / bg-alt /
     navy / gold: gold 1.87 / 1.76 / 7.79 / 1.00, navy 14.57 / 13.71 / 1.00
     / 7.79, white 1.00 / 1.06 / 14.57 / 1.87. The pair below takes the best
     of the two on every surface, so the worst case is 7.79. Do not collapse
     it to one colour. */
  --am-focus-inner: var(--am-bg);    /* reads on dark surfaces (navy band) */
  --am-focus-outer: var(--am-navy);  /* reads on light surfaces (page, bg-alt) */

  /* ---- Logo sizes (fixed by the standard) ---- */
  --am-logo-letterhead: 156px;
  --am-logo-invoice:    128px;
  --am-logo-web:        108px;
  --am-logo-signature:   68px;
  --am-logo-min:         28px;

  /* ======================================================================
     COMPATIBILITY ALIASES — v1 vocabulary (Jun 2026), retained so older
     files keep rendering. Do NOT use these in new work; use --am-* above.
     Scheduled for review once no file references them.
     ====================================================================== */
  --almalih-navy:        var(--am-navy);
  --almalih-gold:        var(--am-gold);
  --navy-900:            var(--am-ink);
  --navy-800:            var(--am-navy);
  --navy-700:            #2B3170;
  --navy-600:            #3A4191;
  --navy-500:            #4D56B0;
  --navy-300:            #9AA0D6;
  --navy-100:            var(--am-navy-t1);
  --navy-50:             var(--am-navy-t2);
  --gold-700:            #C98A12;
  --gold-600:            var(--am-warning);
  --gold-500:            var(--am-gold);
  --gold-300:            #FBD083;
  --gold-100:            var(--am-gold-t1);
  --gold-50:             var(--am-gold-t2);
  --white:               var(--am-bg);
  --gray-50:             var(--am-bg-alt);
  --gray-100:            #EEF0F4;
  --gray-200:            var(--am-border);
  --gray-300:            #C2C8D4;
  --gray-400:            #98A0B0;
  --gray-500:            var(--am-text-2);
  --gray-600:            #4B5160;
  --gray-700:            #343945;
  --gray-800:            #21252E;
  --gray-900:            #12141A;
  --color-bg:            var(--am-bg);
  --color-surface:       var(--am-bg);
  --color-surface-alt:   var(--am-bg-alt);
  --color-text:          var(--am-ink);
  --color-text-muted:    var(--am-text-2);
  --color-text-invert:   var(--am-bg);
  --color-primary:       var(--am-navy);
  --color-primary-hover: #2B3170;
  --color-accent:        var(--am-gold);
  --color-accent-hover:  var(--am-warning);
  --color-border:        var(--am-border);
  --color-success:       var(--am-success);
  --color-warning:       var(--am-warning);
  --color-danger:        var(--am-error);
  --color-info:          #3A4191;
  --font-latin:          var(--am-font-lat);
  --font-arabic:         var(--am-font-ar);
  --font-body:           var(--am-font-body);
  --text-xs:   var(--am-fs-12); --text-sm:  var(--am-fs-14); --text-base: var(--am-fs-16);
  --text-lg:   var(--am-fs-18); --text-xl:  var(--am-fs-22); --text-2xl:  var(--am-fs-28);
  --text-3xl:  var(--am-fs-36); --text-4xl: var(--am-fs-48);
  --leading-tight: 1.2; --leading-normal: 1.5;
  --weight-regular: 400; --weight-medium: 500; --weight-bold: 700;
  --space-1: var(--am-sp-1); --space-2: var(--am-sp-2); --space-3: var(--am-sp-3);
  --space-4: var(--am-sp-4); --space-5: var(--am-sp-6); --space-6: var(--am-sp-8);
  --space-8: var(--am-sp-12); --space-10: var(--am-sp-16);
  --radius-sm: var(--am-r-sm); --radius-md: var(--am-r-btn);
  --radius-lg: var(--am-r-card); --radius-pill: var(--am-r-full);
  --shadow-sm: var(--am-shadow); --shadow-md: var(--am-shadow-lg);
  --shadow-lg: 0 12px 32px rgba(31,36,85,0.16);
}

/* ==========================================================================
   ALMALIH — House patterns. The accepted component vocabulary.
   Scope everything under .am. Arabic-first / RTL by default.
   Mirrors the official brand identity standard; do not diverge.
   ========================================================================== */

body.am {
  font-family: var(--am-font-body);
  color: var(--am-ink);
  background: var(--am-bg);
  font-size: var(--am-fs-16);
  line-height: 1.5;
  direction: rtl;
  margin: 0;
}
/* Latin-only pages: set dir="ltr" on <html> and font-family:var(--am-font-lat) on body */

.am h1, .am h2, .am h3 {
  color: var(--am-navy); line-height: 1.2; font-weight: 700;
  font-family: var(--am-font-ar);
  /* Logical margins: a heading needs air ABOVE it, more than below. Physical
     `margin: 0 0 X` left every heading flush against the block before it. */
  margin-inline: 0;
  margin-block-end: var(--am-sp-4);
}
.am h1 { font-size: var(--am-fs-36); margin-block-start: 0; }
.am h2 { margin-block-start: var(--am-sp-8); }
.am h3 { margin-block-start: var(--am-sp-6); }
/* A heading that opens a page, a card or a section starts flush. */
.am h1:first-child, .am h2:first-child, .am h3:first-child,
.am .card > :first-child, .am .stat > :first-child { margin-block-start: 0; }
.am h2 { font-size: var(--am-fs-28); }
.am h3 { font-size: var(--am-fs-22); }
.am .lat-head { font-family: var(--am-font-lat); font-weight: 700; letter-spacing: 0.04em; }
.am .text-2 { color: var(--am-text-2); }
.am .page { max-width: 960px; margin: 0 auto; padding: var(--am-sp-12); }

/* ---- Focus: ONE rule for every focusable element ----
   :focus-visible, never :focus - the ring stays off mouse clicks, so the
   resting weight of the system is unchanged. Text inputs still show it on
   click because browsers always treat them as needing a visible indicator.
   The double ring is background-independent: inner reads on dark, outer on
   light. Worst measured case 7.79:1 (on the gold button), floor is 3.0.
   Never restyle focus per component - change the token pair instead. */
.am :focus-visible {
  outline: 2px solid var(--am-focus-outer);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--am-focus-inner);
}

/* the house card — the ONLY accepted card pattern */
.am .card {
  background: var(--am-bg);
  border: 1px solid var(--am-border);
  border-radius: var(--am-r-card);
  padding: var(--am-sp-6);
  box-shadow: var(--am-shadow);
}
.am .card--featured { border-top: 4px solid var(--am-gold); } /* the signature gold bar */

/* buttons — one primary per screen */
.am .btn {
  display: inline-block; border-radius: var(--am-r-btn);
  padding: var(--am-sp-3) var(--am-sp-6);
  font-size: var(--am-fs-16); font-weight: 500; text-decoration: none;
  font-family: inherit; line-height: inherit; /* form controls do not inherit these */
  border: 1px solid var(--am-navy); color: var(--am-navy); background: var(--am-bg);
  cursor: pointer;
}
.am .btn--primary { background: var(--am-navy); color: var(--am-on-navy); border-color: var(--am-navy); }
.am .btn--gold { background: var(--am-gold); color: var(--am-navy); border-color: var(--am-gold); font-weight: 700; }
/* Prefer <button class="btn" disabled> - it drops out of the tab order natively.
   .btn--disabled is ONLY for cases where an <a> is unavoidable, and there the markup
   must also carry tabindex="-1" and aria-disabled="true": pointer-events blocks the
   mouse but leaves a link tabbable and Enter-activatable. */
.am .btn[disabled], .am .btn--disabled { opacity: .45; pointer-events: none; }

/* header / footer bands */
.am .band { background: var(--am-navy); color: var(--am-on-navy); padding: var(--am-sp-4) var(--am-sp-12); }
.am .band .accent { color: var(--am-gold); }
.am .rule-gold { height: 4px; background: var(--am-gold); border: 0; margin: 0; }

/* tables — financial style */
.am table { border-collapse: collapse; width: 100%; font-size: var(--am-fs-14); }
.am th { background: var(--am-navy); color: var(--am-on-navy); font-weight: 700; padding: var(--am-sp-3) var(--am-sp-4); text-align: start; }
.am td { border-bottom: 1px solid var(--am-border); padding: var(--am-sp-3) var(--am-sp-4); }
.am tr:nth-child(even) td { background: var(--am-bg-alt); }
.am td.num, .am .num { font-family: var(--am-font-lat); font-variant-numeric: tabular-nums; direction: ltr; text-align: end; }
.am .total-row td { border-top: 2px solid var(--am-navy); font-weight: 700; background: var(--am-gold-t2); }

/* badges */
.am .badge { display: inline-block; border-radius: var(--am-r-full); padding: 2px var(--am-sp-3); font-size: var(--am-fs-12); font-weight: 500; }
.am .badge--success { background: var(--am-success-tint); color: var(--am-success-ink); }
.am .badge--warning { background: var(--am-gold-t1); color: var(--am-warning-ink); }
.am .badge--error   { background: var(--am-error-tint); color: var(--am-error-ink); }

/* form inputs */
.am label { display: block; font-size: var(--am-fs-14); font-weight: 500; color: var(--am-navy); margin-bottom: var(--am-sp-2); }
.am input, .am select, .am textarea {
  width: 100%; box-sizing: border-box;
  font-family: var(--am-font-body); font-size: var(--am-fs-16); color: var(--am-ink);
  background: var(--am-bg); border: 1px solid var(--am-border);
  border-radius: var(--am-r-btn); padding: var(--am-sp-3) var(--am-sp-4);
}
.am input:focus-visible, .am select:focus-visible, .am textarea:focus-visible {
  border-color: var(--am-navy); /* ring itself comes from .am :focus-visible */
}
.am input[disabled] { background: var(--am-bg-alt); color: var(--am-text-2); }
.am .field-hint  { font-size: var(--am-fs-12); color: var(--am-text-2); margin-top: var(--am-sp-1); }
.am .field-error { font-size: var(--am-fs-12); color: var(--am-error); margin-top: var(--am-sp-1); }
.am input.is-error { border-color: var(--am-error); }

/* stat tile */
/* Grid + justify-items:start puts both children on the tile's START side (right in RTL,
   left in LTR). The figure keeps direction:ltr so a bare "-144,450" is never reordered to
   "144,450-" - text-align on the figure would resolve against that ltr, so alignment
   lives on the tile instead. (text-align:match-parent would do it, but Chrome lacks it.) */
.am .stat { background: var(--am-bg-alt); border-radius: var(--am-r-card); padding: var(--am-sp-6); display: grid; justify-items: start; }
.am .stat .stat-label { font-size: var(--am-fs-14); color: var(--am-text-2); margin-bottom: var(--am-sp-2); }
.am .stat .stat-value { font-family: var(--am-font-lat); font-size: var(--am-fs-28); font-weight: 700; color: var(--am-navy); direction: ltr; }

/* ==========================================================================
   almalih.ae — site layer on top of the design system (tokens.css + house.css).
   Rules: tokens only (no hex), type scale 12–48, 4px spacing scale, logical
   properties only (the same CSS serves LTR English and RTL Arabic).

   Two parts (2026-09-27): first the approved a-v2 design (mockups/a-v2/style.css: the royal
   masthead and footer, the home page, the shared vocabulary: .container, .zone, .split, .head,
   .kicker, .btn, .link-arrow, .steps, .ledger), then the inner-page layer of the previous
   "annual report" build (chapters, openers, plates, forms, articles), kept until those pages are
   restyled. Nothing in the second part may restyle the chrome or the home.
   ========================================================================== */

/* inner-page measures (the a-v2 part sets --gutter and --container) */
:root { --measure: 68ch; --section-y: var(--am-sp-12); }
@media (min-width: 64em) { :root { --section-y: var(--am-sp-16); } }

/* ==========================================================================
   PART 1 — the approved design (mockups/a-v2/style.css, verbatim from its :root; only the asset
   paths changed). See mockups/a-v2/notes.md for the decisions behind it.
   ========================================================================== */
:root {
  --site-font: "IBM Plex Sans", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --gutter: var(--am-sp-4);
  --container: 1280px;
  --text-col: 640px;              /* hero text column at >= 64em */
  --zone-y: var(--am-sp-8);
  /* Type roles that step up one notch on the wide canvas (>= 100em). */
  --t-body: var(--am-fs-16); --t-small: var(--am-fs-14); --t-fine: var(--am-fs-12);
  --t-lead: var(--am-fs-18); --t-h3: var(--am-fs-22); --t-h3-lead: var(--am-fs-28);
  --t-no: var(--am-fs-28); --t-no-lead: var(--am-fs-36);
  /* Derived surfaces on navy, local to the mockup (see site.css --rule-on-navy). All are the
     navy-t1 token at an alpha; the no-color-mix fallback is the solid token. */
  --rule-on-navy: var(--am-navy-t1);   /* hairlines: 24% */
  --edge-on-navy: var(--am-navy-t1);   /* control borders: 60% (>= 3:1 on the veiled hero) */
  --hover-on-navy: var(--am-navy-t2);  /* hover wash on the strip: 10% */
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  :root {
    --rule-on-navy: color-mix(in srgb, var(--am-navy-t1) 24%, transparent);
    --edge-on-navy: color-mix(in srgb, var(--am-navy-t1) 60%, transparent);
    --hover-on-navy: color-mix(in srgb, var(--am-navy-t1) 10%, transparent);
  }
}
/* On dark zones swap the focus pair so the OUTER ring is white; a white control on navy
   otherwise hides both rings. .royal = masthead, booking band, footer, declared once here (2026-09-26);
   the board is zone--navy without .royal. The paper card restores the default pair. */
.hero, .zone--navy, .royal { --am-focus-outer: var(--am-bg); --am-focus-inner: var(--am-navy); }
.zone--navy .lead-tile { --am-focus-outer: var(--am-navy); --am-focus-inner: var(--am-bg); }
@media (min-width: 40em) { :root { --gutter: var(--am-sp-6); --zone-y: var(--am-sp-12); } }
@media (min-width: 64em) { :root { --gutter: var(--am-sp-12); --zone-y: var(--am-sp-16); } }
/* Arabic small and fine text one step up (TYP-01): Plex Arabic's tooth height is about 60% of Plex Sans's x-height, so a
   14px Arabic line reads like 8px Latin. (0,2,0) beats the 100em :root block, where the values are the same (16/14). */
:root:lang(ar) { --t-fine: var(--am-fs-14); --t-small: var(--am-fs-16); }
@media (min-width: 100em) {
  :root {
    --gutter: var(--am-sp-16); --container: 1520px; --text-col: 720px;
    --t-body: var(--am-fs-18); --t-small: var(--am-fs-16); --t-fine: var(--am-fs-14);
    --t-lead: var(--am-fs-22); --t-h3: var(--am-fs-28); --t-h3-lead: var(--am-fs-36);
    --t-no: var(--am-fs-36); --t-no-lead: var(--am-fs-48);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body.am { font-family: var(--site-font); font-size: var(--t-body); direction: inherit; overflow-x: clip; }
.am h1, .am h2, .am h3 { font-family: var(--site-font); text-wrap: balance; margin: 0; }
.am :is(h1, h2, h3):lang(ar) { line-height: 1.35; } /* sanctioned Arabic exception (as on the live site) */
.am p { margin: 0; text-wrap: pretty; }
.am ul, .am ol { margin: 0; padding: 0; list-style: none; }
.am a { color: var(--am-navy); text-underline-offset: 3px; text-decoration-thickness: 1px; }
img { max-width: 100%; height: auto; display: block; }
.icon { flex: none; vertical-align: middle; }
[dir="rtl"] .icon--dir { transform: scaleX(-1); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.num { font-family: var(--am-font-lat); font-variant-numeric: tabular-nums lining-nums; direction: ltr; unicode-bidi: isolate; }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.zone { padding-block: var(--zone-y); }
.zone--navy { background: var(--am-navy); color: var(--am-on-navy); }
.zone--alt { background: var(--am-bg-alt); }
.zone--navy :is(h2, h3) { color: var(--am-on-navy); }

/* A navy zone with a faint duotone photo under a deep veil: texture for the wide
   canvas, never a picture to look at. Text sits on the veil (>= .86 -> white 10:1+). */
.zone--photo { position: relative; isolation: isolate; }
.zone__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.zone__media img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 30%; }
.zone__media::after { content: ""; position: absolute; inset: 0; background: var(--am-navy); opacity: .86; }

/* Full-bleed hairline: a rule that runs to the viewport edges from inside a container. */
.bleed-rule { position: relative; }
.bleed-rule::before { content: ""; position: absolute; inset-block-start: -1px; inset-inline: calc(50% - 50vw); block-size: 1px; background: var(--rule-on-navy); }

/* Skip link: a paper chip on the royal masthead (2026-09-26; a navy box vanished into the band). Fixed so it stays
   reachable at any scroll position; the focus pair is swapped so the outer ring is white on navy. */
.skip-link { position: fixed; inset-inline-start: var(--am-sp-4); inset-block-start: -100px; z-index: 100; background: var(--am-bg); color: var(--am-navy) !important; padding: var(--am-sp-3) var(--am-sp-4); border-radius: var(--am-r-btn); text-decoration: none; --am-focus-outer: var(--am-bg); --am-focus-inner: var(--am-navy); }
.skip-link:focus { inset-block-start: var(--am-sp-4); }

/* Kicker: a short rule + label. Arabic: no tracking, no case. */
.kicker { display: flex; align-items: center; gap: var(--am-sp-3); font-size: var(--t-fine); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--am-text-2); margin-block-end: var(--am-sp-3); }
.kicker:lang(ar) { font-size: var(--t-small); letter-spacing: 0; text-transform: none; }
/* the kicker carries no leading line (owner, 2026-09-27) */
.zone--navy .kicker, .hero .kicker { color: var(--am-navy-t1); }

/* Buttons: house .btn, layout tweaks only */
.am .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--am-sp-2); min-height: 48px; text-align: center; }
.am .btn--on-navy { background: var(--am-on-navy); color: var(--am-navy); border-color: var(--am-on-navy); font-weight: 700; }
.am .btn--ghost { background: transparent; color: var(--am-on-navy); border-color: var(--edge-on-navy); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--am-sp-3); }
.btn-row > .btn { flex: 1 1 100%; }
@media (min-width: 40em) { .btn-row > .btn { flex: 0 1 auto; } }
.link-arrow { display: inline-flex; align-items: center; gap: var(--am-sp-2); min-height: 44px; font-weight: 500; text-decoration: none; text-wrap: balance; } /* no single word on the last line (VIS-08) */
.am .zone--navy .link-arrow { color: var(--am-on-navy); }
@media (hover: hover) {
  .link-arrow:hover { text-decoration: underline; }
  .link-arrow .icon--dir { transition: transform .25s var(--ease); }
  .link-arrow:hover .icon--dir { transform: translateX(4px); }
  [dir="rtl"] .link-arrow:hover .icon--dir { transform: scaleX(-1) translateX(4px); }
  .am .btn--primary:hover { background: var(--am-ink); border-color: var(--am-ink); }
  .am .btn--on-navy:hover, .am .btn--ghost:hover { text-decoration: underline; text-underline-offset: 4px; }
}

/* ---- Header v4: the navy masthead ----
   The owner rejected the white bar. The whole header is navy (the sanctioned .band surface) with
   the official reversed logo: a utility strip, a hairline, the main bar (white nav, an outlined CTA
   so the hero below keeps the one primary button), and the services panel dropping as white paper.
   Condensing only folds the strip and shrinks the logo (108 -> 68); nothing changes colour.
   The header is FIXED (not sticky): its height changes when it condenses, and a sticky element
   that changes height moves the whole page under the reader. body reserves the expanded height. */
:root {
  --header-condensed: calc(var(--am-logo-signature) + 2 * var(--am-sp-2));                                   /* 84: bar only, condensed */
  --header-expanded: calc(var(--am-logo-signature) + 2 * var(--am-sp-3) + 1px); /* 68 + 24 + thread = 93: the contact strip left the masthead (owner, 2026-09-27) */
}
@media (min-width: 64em) { :root { --header-expanded: calc(var(--am-logo-web) + 2 * var(--am-sp-4) + 1px); } } /* 108 + 32 + 1 = 141 */
body.am { padding-block-start: var(--header-expanded); }
/* ---- The "royal" surface: masthead, booking band, footer ----
   Taken from the owner-approved Document Suite v2.9 (documents/templates/invoice-header.dc.html) at his
   request on 2026-09-26, then extended to the two closing bands so the page opens and closes on the same
   surface: a dark navy gradient (ink -> navy -> doc-navy-700), a fine ±45° gold lattice at 5%, a soft gold
   lit corner, and a gold thread where a band meets the page. What the web version changes against the
   paper recipe, after the header-v5 critique (2026-09-26): translucent gold over navy renders BROWN
   (30% gold hairlines = 1.7:1 ochre, a 20% gold glow = a warm smudge), so the seams are one 1px thread of
   solid gold (6.6:1, the document suite's 3px metal bar at hairline weight; a thread, not a hero element),
   the inner divisions are the neutral 24% rule, and the lit corner is navy-t1 light. The 6% mark is a
   watermark for the footer only: in the masthead it sat inside the official logo's clear space. The gold
   budget (the lead tile's bar, the booking button) is unchanged. The lattice (5%, 15px pitch) is the
   owner's "lines behind it" and stays as on paper. The gradient angle is logical (--royal-angle, mirrored in
   RTL so the ink end sits at the logo corner in both languages) and the footer's seal sits in the bottom-end
   corner, never flipped (2026-09-26).
   Stacking: the band isolates, the art sits at z-index -1 (above the band's own background, below
   everything else), and the content is NOT positioned, so an absolutely positioned child (the services
   panel) still spans the band, not its container.
   Markup: <x class="royal"><div class="royal__bg" aria-hidden="true"></div> ...content...</x> */
:root { --doc-navy-700: #2B3170; /* = --am-doc-navy-700 (documents.css) */ --gold-thread: 1px solid var(--am-gold); }
.royal { position: relative; isolation: isolate; background: var(--am-navy); color: var(--am-on-navy);
  --royal-angle: 155deg;                                                  /* ink at the logo corner, lit corner opposite */
  --royal-glow: 340px; --royal-glow-x: -100px; --royal-glow-y: -140px;   /* the invoice recipe's placement */
  --royal-mark: 0px; --royal-mark-img: none; }                            /* the mark is opt-in: the footer sets image, size, offsets */
[dir="rtl"] .royal { --royal-angle: 205deg; } /* 360 - 155: the paper recipe is LTR only (2026-09-26) */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .royal { background:
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--am-gold) 5%, transparent) 0 1px, transparent 1px 15px),
    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--am-gold) 5%, transparent) 0 1px, transparent 1px 15px),
    linear-gradient(var(--royal-angle), var(--am-ink) 0%, var(--am-navy) 62%, var(--doc-navy-700) 100%);
    background-color: var(--am-navy); } /* the shorthand resets it to transparent; forced colours drops the images (A11Y-2) */
}
.royal__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.royal__bg::before { content: ""; position: absolute; inset-inline-end: var(--royal-glow-x); inset-block-start: var(--royal-glow-y); inline-size: var(--royal-glow); block-size: var(--royal-glow); background: radial-gradient(circle, color-mix(in srgb, var(--am-navy-t1) 12%, transparent), transparent 68%); }
/* the seal: bottom-END corner (free of text at >= 64em in both languages), placed by logical inset and never
   flipped: a brand mark is not mirrored in RTL (2026-09-26) */
.royal__bg::after { content: ""; position: absolute; inset-inline-end: var(--royal-mark-x, 0px); inset-block-end: var(--royal-mark-y, 0px); inline-size: var(--royal-mark); block-size: var(--royal-mark); background: var(--royal-mark-img) no-repeat center / contain; opacity: .06; }
@media (max-width: 47.99em) { .royal__bg::before { display: none; } } /* on phones the lit corner covered the strip's end */
@media (max-width: 63.99em) { .royal__bg::after { display: none; } } /* under 64em the 2-column footer puts the contact list in the end corner */

.site-header { position: fixed; inset-inline: 0; top: 0; z-index: 20; border-block-end: var(--gold-thread); } /* colour and focus pair come from .royal */
/* short viewports (phone landscape, 400% zoom): the masthead scrolls away instead of taking a quarter to half of the screen
   (M5, A11Y-3); body keeps its padding, so nothing shifts, and .royal stays the containing block of the art and the panel */
@media (max-height: 30em) { .site-header { position: absolute; } }


/* main bar */
.site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--am-sp-4); padding-block: var(--am-sp-3); transition: padding .3s var(--ease); }
.brand-lockup { display: flex; align-items: center; gap: var(--am-sp-6); min-inline-size: 0; }
.brand { display: inline-flex; flex: none; }
.brand__img { height: var(--am-logo-signature); width: auto; transition: height .3s var(--ease); }
.brand__descriptor { display: none; }
.nav-toggle { display: inline-flex; align-items: center; gap: var(--am-sp-2); min-height: 44px; padding: 0 var(--am-sp-3); background: transparent; color: var(--am-on-navy); border: 1px solid var(--edge-on-navy); border-radius: var(--am-r-btn); font: inherit; font-weight: 500; cursor: pointer; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: inline; }
.site-nav { display: none; }
.site-nav.is-open { display: block; }
.site-nav__list a { text-decoration: none; color: var(--am-on-navy); font-weight: 500; }
.lang-switch { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--am-sp-3); font-weight: 500; text-decoration: none; border: 1px solid var(--edge-on-navy); border-radius: var(--am-r-btn); color: var(--am-on-navy); }
/* in the condensed bar the switch is text with a separator, so the CTA stays the bar's only outlined pill */
.site-header .lang-switch--nav { color: var(--am-on-navy); border-color: transparent; padding-inline: var(--am-sp-2); } /* colour beats `.am a { color: navy }` */
.lang-switch--nav::after { content: ""; inline-size: 1px; block-size: var(--am-sp-6); background: var(--rule-on-navy); margin-inline-start: var(--am-sp-3); }
@media (hover: hover) { .lang-switch--nav:hover { border-color: var(--edge-on-navy); } }
/* phones: the switch sits in the bar beside the menu button, as text with a separator (the strip that carried it left the
   masthead at the owner's request, 2026-09-27); from 64em the nav's own switch takes over and this group is hidden */
.site-header__tools { display: flex; align-items: center; gap: var(--am-sp-2); }
.site-header .lang-switch--bar { color: var(--am-on-navy); border-color: transparent; padding-inline: var(--am-sp-2); }
.lang-switch--bar::after { content: ""; inline-size: 1px; block-size: var(--am-sp-6); background: var(--rule-on-navy); margin-inline-start: var(--am-sp-2); }
@media (min-width: 64em) { .site-header__tools { display: none; } }
@media (hover: hover) { .lang-switch--bar:hover { border-color: var(--edge-on-navy); } }
.mega-toggle { display: inline-flex; align-items: center; justify-content: center; inline-size: 44px; min-block-size: 44px; background: transparent; color: var(--am-on-navy); border: 0; border-radius: var(--am-r-btn); cursor: pointer; }
html:not(.js) .mega-toggle { display: none; } /* inert without JS at every width */
.mega-toggle .icon { transition: transform .2s var(--ease); }
.has-mega.is-open .mega-toggle .icon { transform: rotate(180deg); }
/* the services panel: white paper on desktop (colours below), an accordion inside the navy menu on phones */
.mega a { text-decoration: none; font-weight: 500; }
.mega__title { font-size: var(--am-fs-14); font-weight: 700; margin-block-end: var(--am-sp-2); }
.mega__lead { font-size: var(--am-fs-14); margin-block-end: var(--am-sp-3); max-width: 40ch; }
.mega ul { display: grid; }
.mega li a { display: flex; align-items: center; gap: var(--am-sp-3); min-block-size: 44px; padding-inline: var(--am-sp-1); padding-block: var(--am-sp-2); border-block-end: 1px solid var(--rule-on-navy); font-size: var(--am-fs-16); color: var(--am-on-navy); } /* padding-block: a wrapped label clears its divider (VIS-06) */
.mega li:last-child a { border-block-end: 0; }
/* 01-05: number and title on one baseline at the title's size, as on the home strip */
.mega li a:has(> .no) { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; align-content: center; column-gap: var(--am-sp-3); }
.mega li a .no { font-family: var(--am-font-lat); font-size: 1em; font-weight: 500; font-variant-numeric: tabular-nums lining-nums; color: var(--am-navy-t1); unicode-bidi: isolate; }
.mega__title, .mega__foot .link-arrow { color: var(--am-on-navy); }
.mega__lead { color: var(--am-navy-t1); }
.mega__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--am-sp-2) var(--am-sp-6); margin-block-start: var(--am-sp-4); padding-block-start: var(--am-sp-3); border-block-start: 1px solid var(--rule-on-navy); }
@media (hover: hover) { .mega li a:hover { background: var(--hover-on-navy); } }
/* No JS below 64em: the toggle is inert, so show the menu (and the services list) instead of hiding
   them, and let the header scroll with the page (an always-open menu cannot be fixed). */
@media (max-width: 63.9375em) {
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .site-nav, html:not(.js) .mega { display: block; }
  html:not(.js) .site-header { position: relative; } /* scrolls with the page and stays the containing block for .royal__bg */
  html:not(.js) body.am { padding-block-start: 0; }
  /* the open menu drops BELOW the bar (the nav is a flex child of the bar) and scrolls within the viewport */
  .site-header__bar { flex-wrap: wrap; }
  .site-nav { flex: 1 1 100%; order: 3; border-block-start: 1px solid var(--rule-on-navy); margin-block-start: var(--am-sp-3); padding-block: var(--am-sp-3) var(--am-sp-6); }
  /* the nav's cap = viewport - bar - the bar's wrap gap (sp-4) - the nav's own margin (sp-3), so the bar's bottom padding
     and the gold thread stay inside the fold with the services accordion open (2026-09-26) */
  .js .site-nav.is-open { max-block-size: calc(100vh - var(--header-expanded) - var(--am-sp-4) - var(--am-sp-3)); max-block-size: calc(100dvh - var(--header-expanded) - var(--am-sp-4) - var(--am-sp-3)); overflow-y: auto; overscroll-behavior: contain; padding-inline: var(--am-sp-1); }
  /* condensed: the bar is 84, not 93; --header-condensed excludes the 1px thread (--header-expanded includes both rules) */
  .js.is-condensed .site-nav.is-open { max-block-size: calc(100vh - var(--header-condensed) - 1px - var(--am-sp-4) - var(--am-sp-3)); max-block-size: calc(100dvh - var(--header-condensed) - 1px - var(--am-sp-4) - var(--am-sp-3)); }
  .site-nav__actions .btn { inline-size: 100%; }
  .site-nav__list { display: grid; }
  .site-nav__list > li { border-block-end: 1px solid var(--rule-on-navy); }
  .site-nav__list > li > a { display: flex; align-items: center; min-height: 48px; padding-inline: var(--am-sp-1); }
  .has-mega { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .has-mega > a { grid-column: 1; }
  .mega { grid-column: 1 / -1; display: none; padding-block: var(--am-sp-2) var(--am-sp-4); }
  .has-mega.is-open .mega { display: block; }
  .mega__grid { display: grid; gap: var(--am-sp-4); }
  .mega .container { width: auto; }
  .mega li a { padding-inline-start: var(--am-sp-4); }
  .mega__foot { margin-block-start: var(--am-sp-3); }
  .site-nav__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--am-sp-3); margin-block-start: var(--am-sp-4); }
  .site-nav__actions .lang-switch--nav { display: none; } /* on phones the bar's own switch (.lang-switch--bar) carries it */
  .lang-switch--nav::after { display: none; } /* the separator pairs it with the CTA only when they share a row */
}
@media (min-width: 64em) {
  .brand__img { height: var(--am-logo-web); }
  .site-header__bar { padding-block: var(--am-sp-4); gap: var(--am-sp-8); }
  .nav-toggle { display: none; }
  .site-nav, .site-nav.is-open { display: flex; align-items: center; gap: var(--am-sp-6); }
  .site-nav__list { display: flex; align-items: center; gap: var(--am-sp-1); }
  .site-nav__list > li { display: flex; align-items: center; }
  .site-nav__list > li > a { position: relative; display: inline-flex; align-items: center; min-height: 48px; padding-inline: var(--am-sp-3); }
  .site-nav__list > li > a::after { content: ""; position: absolute; inset-inline: var(--am-sp-3); inset-block-end: var(--am-sp-2); block-size: 2px; background: var(--am-on-navy); transform: scaleX(0); transform-origin: 0 50%; transition: transform .25s var(--ease); }
  [dir="rtl"] .site-nav__list > li > a::after { transform-origin: 100% 50%; }
  .site-nav__list > li > a:hover::after, .site-nav__list > li > a[aria-current]::after, .has-mega.is-open > a::after { transform: scaleX(1); }
  .has-mega > a { padding-inline-end: var(--am-sp-1); }
  .mega-toggle { inline-size: 32px; margin-inline-start: calc(-1 * var(--am-sp-1)); }
  .site-nav__actions { display: flex; align-items: center; gap: var(--am-sp-3); }
  .site-nav__actions .btn { white-space: nowrap; } /* 'Book a free consultation' stays one line at 1024 (VIS-02) */
  .lang-switch--nav { display: inline-flex; } /* always in the bar since the strip left (2026-09-27) */
  /* the services panel: white paper, full width under the bar. Hover is driven by the script (same
     state as the button, so aria-expanded and the chevron follow); the bridge hangs from the Services
     link (as wide as the item + its chevron) only while the panel is open, so the pointer can cross the
     gap and nothing else in the bar is covered. Without JS, CSS hover. */
  /* top: 100% + the 1px thread: the header's border lies outside the box the % resolves against, so the open panel
     no longer covers the seam (2026-09-26) */
  .mega { position: absolute; inset-inline: 0; top: calc(100% + 1px); background: var(--am-bg); color: var(--am-ink); border-block-end: 1px solid var(--am-border); box-shadow: var(--am-shadow-lg); padding-block: var(--am-sp-8); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s; --am-focus-outer: var(--am-navy); --am-focus-inner: var(--am-bg); }
  .has-mega.is-open > a::before, html:not(.js) .has-mega:hover > a::before { content: ""; position: absolute; inset-inline: 0 calc(-1 * (var(--am-sp-8) - var(--am-sp-1))); top: 100%; block-size: var(--am-sp-12); }
  .has-mega.is-open .mega, html:not(.js) .has-mega:hover .mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .mega__grid { display: grid; grid-template-columns: 5fr 3fr 3fr; column-gap: var(--am-sp-12); row-gap: var(--am-sp-6); align-items: start; }
  .mega__col--lead { grid-row: 1 / span 2; padding-inline-end: var(--am-sp-12); border-inline-end: 1px solid var(--am-border); }
  .mega__col:nth-child(4) { grid-column: 2; grid-row: 2; }
  .mega__col--lead li a { font-size: var(--am-fs-18); min-block-size: 48px; color: var(--am-navy); }
  /* paper colours */
  .mega li a { color: var(--am-ink); border-block-end-color: var(--am-border); }
  .mega li a .no, .mega__lead { color: var(--am-text-2); }
  .mega__title, .mega__foot .link-arrow { color: var(--am-navy); }
  .mega__foot { border-block-start-color: var(--am-navy); }
  @media (hover: hover) { .mega li a:hover { background: var(--am-navy-t2); } }
}
@media (min-width: 80em) {
  /* the nav is centred between the lockup and the CTA, so the bar has no void on wide screens */
  .site-nav, .site-nav.is-open { flex: 1 1 auto; min-inline-size: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .site-nav__list { justify-self: center; }
  .brand__descriptor { display: grid; gap: var(--am-sp-1); padding-inline-start: var(--am-sp-6); border-inline-start: 1px solid var(--rule-on-navy); font-size: var(--t-small); line-height: 1.5; } /* steps with the nav at 100em */
  .brand__descriptor span:first-child { color: var(--am-on-navy); font-weight: 500; }
  .brand__descriptor span:last-child { color: var(--am-navy-t1); }
}
@media (min-width: 100em) { .site-nav__list > li > a { font-size: var(--am-fs-18); } .brand-lockup { gap: var(--am-sp-8); } }

/* condensed: the logo drops to 68px, the bar lifts */
.is-condensed .site-header { box-shadow: var(--am-shadow-lg); }
.is-condensed .site-header__bar { padding-block: var(--am-sp-2); }
.is-condensed .brand__img { height: var(--am-logo-signature); }
.is-condensed .brand__descriptor { display: none; }

/* ---- Hero: a cover. ----
   < 64em: photo on top (16:9), text below on solid navy, then the contents strip.
   >= 64em: text on a .55 navy panel over the whole-photo .40 veil (.73 combined),
   min-height up to 720px; the contents strip closes the cover edge to edge. */
/* overflow-clip-margin + z-index keep the strip's 4px focus ring visible at the hero's bottom edge */
.hero { position: relative; isolation: isolate; z-index: 1; overflow: clip; overflow-clip-margin: var(--am-sp-1); background: var(--am-navy); color: var(--am-on-navy); }
.hero__media { position: relative; aspect-ratio: 16 / 9; }
.hero__media picture, .hero__media img { display: block; inline-size: 100%; block-size: 100%; }
.hero__media img { object-fit: cover; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: var(--am-navy); opacity: 0.40; }
.hero__panel { padding-block: var(--am-sp-6) var(--am-sp-8); padding-inline: var(--gutter); }
.am .hero h1 { color: var(--am-on-navy); font-size: var(--am-fs-28); margin-block: 0 var(--am-sp-4); max-width: 18ch; }
.hero__lead { font-size: var(--am-fs-16); color: var(--am-navy-t1); margin-block-end: var(--am-sp-6) !important; max-width: 56ch; }
@media (min-width: 40em) { .am .hero h1 { font-size: var(--am-fs-36); } .hero__lead { font-size: var(--am-fs-18); } }
@media (min-width: 64em) {
  /* The cover fills the first screen (up to 900px). Its photo row is at least as tall as the panoramic plate
     (ratio 2.488, see make.mjs), so the skyline is never cropped vertically: on the owner's 2000x1000 the
     water sits just above the fold and the contents strip begins at its edge (owner, 2026-09-26). */
  .hero { --hero-wide-ratio: 2.488; display: grid; grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, var(--text-col)) minmax(0, calc(var(--container) - var(--text-col))) minmax(var(--gutter), 1fr); grid-template-rows: minmax(calc(100vw / var(--hero-wide-ratio)), 1fr) auto; min-block-size: min(calc(100svh - var(--header-expanded)), 900px); }
  .hero__media { position: absolute; inset: 0; z-index: -2; aspect-ratio: auto; grid-column: 1 / -1; grid-row: 1 / 2; } /* the photo ends where the strip begins */
  .hero__media img { object-position: 50% 50%; }
  .hero::before { content: ""; grid-column: 1 / 3; grid-row: 1; z-index: -1; background: var(--am-navy); opacity: 0.55; border-inline-end: 1px solid var(--rule-on-navy); }
  .hero__panel { grid-column: 2; grid-row: 1; align-self: center; padding-block: var(--am-sp-16); padding-inline: 0 var(--am-sp-12); }
  .hero__index { grid-column: 1 / -1; grid-row: 2; }
}
/* 64–80em: a narrower text column so the tower stays on the open side (checked at 1024
   and 1280 in both directions; the crop is centred, never mirrored). */
@media (min-width: 64em) and (max-width: 79.99em) {
  :root { --text-col: 480px; }
  .hero__panel { padding-inline-end: var(--am-sp-6); }
  .hero .btn-row > .btn { flex: 1 1 auto; max-inline-size: 320px; } /* two equal buttons, no ragged stack */
}
@media (min-width: 80em) { .am .hero h1 { font-size: var(--am-fs-48); } }
@media (min-width: 100em) { .hero__lead { font-size: var(--am-fs-22); } }
.hero .btn-row { gap: var(--am-sp-3); }

/* the contents strip: 01–05 on solid navy, the seam between cover and board */
.hero__index { background: var(--am-navy); border-block-start: 1px solid var(--rule-on-navy); }
.hero__index ol.container { display: grid; margin-inline: auto; } /* beats `.am ol { margin: 0 }` */
.hero__index li { border-block-end: 1px solid var(--rule-on-navy); }
/* number + label read as one line (owner, 2026-09-27): a grid row centred in the cell, the number and the
   label on one baseline at the label's own size; the arrow (no baseline of its own) is centred in an implicit third column, so no empty track or gap is left where it is hidden */
.hero__index a { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; align-content: center; column-gap: var(--am-sp-3); min-block-size: 56px; padding-inline: var(--am-sp-1); color: var(--am-on-navy); text-decoration: none; font-size: var(--t-small); font-weight: 500; }
.hero__index .no { font-family: var(--am-font-lat); font-size: 1em; font-weight: 500; font-variant-numeric: tabular-nums lining-nums; color: var(--am-navy-t1); unicode-bidi: isolate; }
.hero__index .icon { grid-column: 3; align-self: center; color: var(--am-navy-t1); }
@media (max-width: 47.99em) { .hero__index a { padding-inline-end: var(--am-sp-16); } } /* the arrows clear the fixed .wa-fab (UX-10) */
@media (hover: hover) { .hero__index a:hover { background: var(--hover-on-navy); } .hero__index a:hover .icon { color: var(--am-on-navy); } }
@media (min-width: 64em) {
  .hero__index ol { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .hero__index li { border-block-end: 0; border-inline-start: 1px solid var(--rule-on-navy); }
  .hero__index li:first-child { border-inline-start: 0; }
  .hero__index a { min-block-size: 72px; padding-inline: var(--am-sp-4); font-size: var(--t-body); }
  .hero__index .icon { display: none; }
}
@media (min-width: 64em) and (max-width: 79.99em) { /* after the 64em block so it wins: no label wraps at 1024 */
  .hero__index a { font-size: var(--am-fs-14); padding-inline: var(--am-sp-3); } /* equal cells at every width (owner, 2026-09-27) */
}
/* anchor targets from the strip: clear the condensed bar and the 16px reveal translate */
.tile, .lead-tile { scroll-margin-block-start: calc(var(--am-sp-8) - var(--am-sp-3)); } /* + the 96px html scroll-padding = 116 */

/* ---- Band head: kicker + h2 + lead, sits BESIDE its content on desktop ---- */
.head h2 { font-size: var(--am-fs-28); }
.head .lead { font-size: var(--t-body); color: var(--am-text-2); margin-block-start: var(--am-sp-4); max-width: 44ch; }
.zone--navy .head .lead { color: var(--am-navy-t1); }
.head .meta { margin-block-start: var(--am-sp-4); font-size: var(--t-small); font-weight: 500; color: var(--am-navy); }
.zone--navy .head .meta { color: var(--am-on-navy); }
@media (min-width: 64em) { .head h2 { font-size: var(--am-fs-36); } }
.split { display: grid; gap: var(--am-sp-8); }
@media (min-width: 64em) {
  .split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--am-sp-8); row-gap: 0; align-items: start; }
  /* the head travels with its content instead of leaving its column empty */
  .split > .head { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-condensed) + var(--am-sp-8)); } /* 116px: clears the condensed bar */
  .split > .split__body { grid-column: 5 / -1; }
}

/* ---- Advisory & CFO board (navy + a faint camel caravan on the dunes: the owner's pick, 2026-09-27) ---- */
.board { border-block-start: 1px solid var(--rule-on-navy); }
/* the caravan walks along the lower third of the plate: keep it under the tiles, the empty sky leaves the canvas */
.board .zone__media img { object-position: 50% 65%; }
.board__top { display: grid; gap: var(--am-sp-8); }
@media (min-width: 64em) {
  .board__top { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--am-sp-8); align-items: stretch; }
  .board__top > .head { grid-column: 1 / span 4; align-self: stretch; display: flex; flex-direction: column; }
  .board__top > .head .head__foot { margin-block-start: auto; }
  .board__top > .lead-tile { grid-column: 5 / -1; }
}
.tile__no { display: block; font-family: var(--am-font-lat); font-size: var(--t-no); font-weight: 400; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--am-navy-t1); unicode-bidi: isolate; }
.head__foot { display: grid; gap: var(--am-sp-1); padding-block-start: var(--am-sp-4); margin-block-start: var(--am-sp-6); border-block-start: 1px solid var(--rule-on-navy); }
.head__foot .meta { margin: 0; }
.tile h3 { font-size: var(--t-h3); color: var(--am-on-navy); }
.tile__value { font-size: var(--t-small); color: var(--am-navy-t1); }
.tile__label { font-size: var(--t-fine); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--am-navy-t1); }
.tile__label:lang(ar) { font-size: var(--t-small); letter-spacing: 0; text-transform: none; }
.ruled { border-block-start: 1px solid var(--rule-on-navy); }
.ruled li { display: flex; gap: var(--am-sp-3); align-items: baseline; padding-block: var(--am-sp-2); border-block-end: 1px solid var(--rule-on-navy); font-size: var(--t-small); color: var(--am-on-navy); }
/* ruled lists: rows are divided by their hairlines, no dash bullet (owner, 2026-09-27) */
.tile__note { font-size: var(--t-fine); color: var(--am-navy-t1); }

/* The lead tile: CFO services as PAPER on navy — the house card with its gold bar,
   the one gold element on this screen. Navy/ink text inside. */
.lead-tile { display: grid; gap: var(--am-sp-6); padding: var(--am-sp-6); background: var(--am-bg); color: var(--am-ink); border: 1px solid var(--am-border); border-block-start: 4px solid var(--am-gold); border-radius: var(--am-r-card); box-shadow: var(--am-shadow-lg); }
.lead-tile__intro { display: grid; gap: var(--am-sp-3); align-content: start; }
.zone--navy .lead-tile h3 { font-size: var(--t-h3-lead); color: var(--am-navy); }
.lead-tile .tile__no { font-size: var(--t-no-lead); color: var(--am-text-2); } /* 4.88:1, the card's one secondary grey */
.lead-tile .tile__value { font-size: var(--t-body); color: var(--am-ink); }
.lead-tile .tile__label { color: var(--am-text-2); }
.lead-tile__list { display: grid; gap: var(--am-sp-3); align-content: start; }
.lead-tile .ruled { border-block-start-color: var(--am-navy); }
.lead-tile .ruled li { font-size: var(--t-body); padding-block: var(--am-sp-3); color: var(--am-ink); border-block-end-color: var(--am-border); }
.lead-tile .ruled li::before { background: var(--am-navy); }
.lead-tile .ruled li:last-child { border-block-end: 0; }
.lead-tile__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--am-sp-3) var(--am-sp-6); padding-block-start: var(--am-sp-4); border-block-start: 1px solid var(--am-border); }
.lead-tile__for { font-size: var(--t-small); color: var(--am-text-2); max-width: 56ch; }
.lead-tile__for strong { color: var(--am-navy); font-weight: 700; }
.am .zone--navy .lead-tile .link-arrow { color: var(--am-navy); }
@media (min-width: 48em) {
  .lead-tile { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--am-sp-8); padding: var(--am-sp-8); }
  .lead-tile__foot { grid-column: 1 / -1; }
}
@media (min-width: 100em) { .lead-tile { padding: var(--am-sp-12); column-gap: var(--am-sp-12); } }

.tiles { display: grid; margin-block-start: var(--am-sp-8); border-block-start: 1px solid var(--rule-on-navy); }
.tile { display: flex; flex-direction: column; gap: var(--am-sp-3); padding-block: var(--am-sp-6); border-block-end: 1px solid var(--rule-on-navy); }
.tile .ruled { margin-block-start: var(--am-sp-1); }
.tile .link-arrow { margin-block-start: auto; }
/* deliverables: a <details> disclosure on phones; from 40em the script swaps it for a plain
   div + label (no dead tab stop, no "expanded" disclosure that cannot collapse). Without JS
   the <details open> shows everything at every width. */
.tile__more summary { display: flex; align-items: center; justify-content: space-between; gap: var(--am-sp-3); min-block-size: 44px; list-style: none; cursor: pointer; border-block-start: 1px solid var(--rule-on-navy); }
.tile__more summary::-webkit-details-marker { display: none; }
.tile__more summary .icon { color: var(--am-navy-t1); transition: transform .2s ease; }
.tile__more[open] summary .icon { transform: rotate(180deg); }
.tile__more[open] summary { border-block-start: 0; }
.tile__more > .tile__label { margin-block-end: var(--am-sp-3); }
@media (min-width: 40em) {
  .tile__more summary { min-block-size: 0; cursor: default; pointer-events: none; border-block-start: 0; margin-block-end: var(--am-sp-3); }
  .tile__more summary .icon { display: none; }
}
@media (min-width: 40em) and (max-width: 63.99em) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--am-sp-8); }
}
@media (min-width: 64em) {
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); margin-block-start: var(--am-sp-12); border-block-start: 0; }
  .tiles::after { content: ""; position: absolute; inset-block-end: calc(-1 * var(--zone-y)); inset-inline: calc(50% - 50vw); block-size: 1px; background: var(--rule-on-navy); }
  .tile { padding: var(--am-sp-8) var(--am-sp-6) 0; border-block-end: 0; border-inline-start: 1px solid var(--rule-on-navy); }
  @supports (grid-template-rows: subgrid) {
    /* number, title, value, deliverables, link (then the valuation note) line up across all four columns */
    .tile { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: var(--am-sp-3); align-content: start; }
    .tile__more { align-self: start; }
    .tile .link-arrow { grid-row: 5; align-self: start; margin: 0; }
    .tile__note { grid-row: 6; padding-block-start: var(--am-sp-3); border-block-start: 1px solid var(--rule-on-navy); }
  }
  .tile:first-child { border-inline-start: 0; padding-inline-start: 0; }
  .tile:last-child { padding-inline-end: 0; }
}
/* the home board's compact cards (02-05: number, title, value, one "Details" link); the full tiles are on /services/ */
@media (min-width: 64em) {
  .tiles--compact { grid-template-rows: repeat(4, auto); }
  @supports (grid-template-rows: subgrid) {
    /* each card is its own column: the value sits right under its title, only the links share the bottom line (2026-09-27) */
    .tiles--compact .tile { grid-row: span 4; display: flex; flex-direction: column; }
    .tiles--compact .tile .link-arrow { margin-block-start: auto; }
  }
}

/* ---- Practice groups: a ruled ledger on bg-alt ---- */
.ledger { border-block-start: 2px solid var(--am-navy); }
.ledger__group { display: grid; gap: var(--am-sp-3); padding-block: var(--am-sp-6); border-block-end: 1px solid var(--am-navy); }
.ledger__group:last-child { border-block-end: 0; padding-block-end: 0; }
.ledger__gh h3 { font-size: var(--t-h3); }
.ledger__gh p { font-size: var(--t-small); color: var(--am-text-2); margin-block-start: var(--am-sp-2); }
.ledger__rows { border-block-start: 1px solid var(--am-border); }
.ledger__rows li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--am-sp-1) var(--am-sp-4); align-items: center; padding-block: var(--am-sp-3); border-block-end: 1px solid var(--am-border); }
.ledger__rows li:last-child { border-block-end: 0; }
.ledger__rows a { font-weight: 700; font-size: var(--t-body); color: var(--am-navy); text-decoration: none; }
.ledger__rows a::after { content: ""; position: absolute; inset: 0; }
.ledger__rows p { grid-column: 1; font-size: var(--t-small); color: var(--am-text-2); }
.ledger__rows .icon { grid-column: 2; grid-row: 1 / span 2; color: var(--am-navy); }
@media (hover: hover) { .ledger__rows li:hover a { text-decoration: underline; } .ledger__rows li:hover { background: var(--am-bg); } }
@media (min-width: 48em) {
  .ledger__group { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--am-sp-8); align-items: start; }
  .ledger__rows { border-block-start: 0; }
  /* hover surface inset by 12px on every side; the hairline moves to a pseudo so it keeps the text width */
  .ledger__rows li { padding-inline: var(--am-sp-3); margin-inline: calc(-1 * var(--am-sp-3)); border-radius: var(--am-r-sm); border-block-end: 0; }
  .ledger__rows li::before { content: ""; position: absolute; inset-inline: var(--am-sp-3); inset-block-end: 0; block-size: 1px; background: var(--am-border); }
  .ledger__rows li:last-child::before { display: none; }
  .ledger__rows li:first-child { margin-block-start: calc(-1 * var(--am-sp-3)); }
}

/* ---- About: a LIGHT split on navy-t2 (navy text) — portrait + positioning + highlights,
   with the key figures on a navy slab (48px tabular numerals). Breaks the navy run. ---- */
.zone--tint { background: var(--am-navy-t2); color: var(--am-ink); border-block-start: 1px solid var(--am-border); }
.zone--tint { --am-text-2: var(--gray-600); } /* text-2 is only 4.41:1 on navy-t2; gray-600 is 7.47:1 (C5) */
.zone--tint .kicker { color: var(--am-navy); }
.zone--tint h2, .zone--tint h3 { color: var(--am-navy); }
.about { display: grid; gap: var(--am-sp-8); }
.founder { display: grid; gap: var(--am-sp-4); align-content: start; padding-block-start: var(--am-sp-8); border-block-start: 1px solid var(--am-border); }
.founder__id { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--am-sp-4); align-items: end; }
.founder__photo { position: relative; border-radius: var(--am-r-sm); background: var(--am-navy-t1); aspect-ratio: 4 / 5; border: 1px solid var(--am-border); }
.founder__photo img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 20%; border-radius: inherit; }
.founder__name { font-size: var(--t-h3); font-weight: 700; line-height: 1.2; color: var(--am-navy); }
.founder__role { font-size: var(--t-small); color: var(--am-ink); margin-block-start: var(--am-sp-1) !important; }
.founder__bio { font-size: var(--t-small); color: var(--am-ink); }
.founder__meta { display: flex; flex-wrap: wrap; gap: var(--am-sp-2); font-size: var(--t-small); color: var(--am-navy); padding-block: var(--am-sp-3); border-block: 1px solid var(--am-border); }
.founder__meta span:first-child { color: var(--am-navy); font-weight: 500; }
.about__text { display: grid; gap: var(--am-sp-6); align-content: start; }
.highlights__label { margin-block-end: var(--am-sp-3) !important; color: var(--am-navy); }
.about__text .standfirst { font-size: var(--t-lead); color: var(--am-ink); max-width: 60ch; }
.about__text .standfirst:lang(ar) { line-height: 1.8; }
/* Arabic leads: 1ch is the Latin zero, far wider than an Arabic letter, so the ch caps held 85-93 characters (TYP-04) */
.about__text .standfirst:lang(ar), .about__overview .standfirst:lang(ar), .leadership__bio .standfirst:lang(ar), .svc-cover .lead:lang(ar) { max-width: 32em; }
@media (max-width: 39.99em) { .about__text .standfirst { font-size: var(--am-fs-16); } }
.highlights { display: grid; gap: 0 var(--am-sp-8); border-block-start: 1px solid var(--am-navy); }
.highlights li { padding-block: var(--am-sp-4); border-block-end: 1px solid var(--am-border); }
.highlights h3 { font-size: var(--t-lead); margin-block-end: var(--am-sp-1); }
.highlights p { font-size: var(--t-small); color: var(--am-ink); }
@media (min-width: 40em) { .highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: var(--am-sp-6) var(--am-sp-1); background: var(--am-navy); color: var(--am-on-navy); border-radius: var(--am-r-sm); }
.figures > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding-inline: var(--am-sp-3); border-inline-start: 1px solid var(--rule-on-navy); } /* flex-end = top in column-reverse: numerals share one baseline */
.figures > div:first-child { border-inline-start: 0; }
.figures dd { margin: 0; font-family: var(--am-font-lat); font-size: var(--am-fs-36); font-weight: 400; line-height: 1.2; font-variant-numeric: tabular-nums lining-nums; color: var(--am-on-navy); }
.figures dd span { direction: ltr; unicode-bidi: isolate; }
.figures dt { font-size: var(--t-small); color: var(--am-navy-t1); margin-block-start: var(--am-sp-1); }
.about__links { display: flex; flex-wrap: wrap; gap: 0 var(--am-sp-6); }
@media (min-width: 40em) and (max-width: 63.99em) { .founder__id { grid-template-columns: 160px minmax(0, 1fr); } }
/* the home's large-taxpayer line sits right under the slab, one short line (owner, 2026-09-27) */
.figures-group { display: grid; gap: var(--am-sp-3); }
.figures__note { margin: 0; font-size: var(--t-small); font-weight: 500; color: var(--am-navy); }
@media (min-width: 40em) { .figures { padding: var(--am-sp-8) var(--am-sp-6); } .figures dd { font-size: var(--am-fs-48); } .figures > div { padding-inline: var(--am-sp-8); } }
@media (min-width: 64em) {
  .about { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--am-sp-8); }
  .founder { grid-column: 1 / span 4; grid-row: 1; padding-block-start: 0; border-block-start: 0; max-inline-size: 320px; }
  /* a real portrait: full column width, name and role beneath */
  .founder__id { grid-template-columns: 1fr; gap: var(--am-sp-6); }
  .founder__photo { max-inline-size: 320px; }
  .about__text { grid-column: 5 / -1; grid-row: 1; }
}

/* ---- Sectors + process (white) ---- */
.lead-inline { font-size: var(--t-body); color: var(--am-text-2); margin-block-end: var(--am-sp-4) !important; max-width: 68ch; }
.sector-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block-start: 1px solid var(--am-navy); }
.sector-grid li { display: flex; align-items: center; gap: var(--am-sp-3); min-block-size: 64px; padding: var(--am-sp-3) var(--am-sp-4); border-block-end: 1px solid var(--am-border); border-inline-start: 1px solid var(--am-border); font-size: var(--t-body); font-weight: 500; line-height: 1.2; color: var(--am-navy); }
.sector-grid li:nth-child(2n + 1) { border-inline-start: 0; padding-inline-start: 0; }
.sector-grid li:lang(ar) { line-height: 1.5; }
/* sectors: no dash bullet (owner, 2026-09-27) */
/* seven sectors (2026-09-27): no lone cell in a half-empty row. Two columns: an odd last cell takes the
   whole row. Four columns from 80em (4 + 3; narrower, "Restaurants and hospitality" breaks on three lines):
   the last cell of a three-cell row spans two, so every row closes. */
.sector-grid li:last-child:nth-child(2n + 1) { grid-column: 1 / -1; }
@media (min-width: 64em) {
  .sector-grid li { font-size: var(--t-lead); min-block-size: 80px; padding-inline: var(--am-sp-6); }
  .sector-grid li:nth-child(2n + 1) { padding-inline-start: 0; }
}
@media (min-width: 80em) {
  .sector-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sector-grid li:nth-child(2n + 1) { border-inline-start: 1px solid var(--am-border); padding-inline-start: var(--am-sp-6); }
  .sector-grid li:nth-child(4n + 1) { border-inline-start: 0; padding-inline-start: 0; }
  .sector-grid li:last-child:nth-child(2n + 1) { grid-column: auto; }
  .sector-grid li:last-child:nth-child(4n + 3) { grid-column: span 2; }
}
.split + .split { margin-block-start: var(--am-sp-8); padding-block-start: var(--am-sp-8); border-block-start: 1px solid var(--am-border); }
/* side by side, the body's own navy rule (.steps / .svc-list) is the only seam line (VIS-05) */
@media (min-width: 64em) { .split + .split { margin-block-start: var(--am-sp-12); padding-block-start: var(--am-sp-12); border-block-start: 0; } }
.steps { display: grid; gap: 0 var(--am-sp-6); border-block-start: 1px solid var(--am-navy); counter-reset: step; }
.steps li { counter-increment: step; padding-block: var(--am-sp-4); border-block-end: 1px solid var(--am-border); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--am-sp-1) var(--am-sp-4); align-items: baseline; }
.steps li::before { content: counter(step, decimal-leading-zero); grid-row: 1 / span 2; font-family: var(--am-font-lat); font-size: var(--t-no); font-weight: 400; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--am-navy); }
.steps h3 { font-size: var(--t-lead); }
.steps p { font-size: var(--t-small); color: var(--am-text-2); }
@media (min-width: 40em) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps li { display: block; border-block-end: 0; padding-block-end: 0; }
  .steps li::before { display: block; margin-block-end: var(--am-sp-2); }
  .steps h3 { margin-block-end: var(--am-sp-1); }
}

/* ---- CTA band: the Al Fahidi creek photo under the veil, the royal lattice above it (owner, 2026-09-26),
   one gold button; the gold thread seams it to the footer. The band grows on wide screens so both the wind
   towers and the water show; the lattice moves onto the art layer because the photo covers the band's own background. ---- */
.cta { border-block-end: var(--gold-thread); }
.cta .zone__media img { object-position: 50% 48%; }
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .cta .royal__bg { background:
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--am-gold) 5%, transparent) 0 1px, transparent 1px 15px),
    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--am-gold) 5%, transparent) 0 1px, transparent 1px 15px); }
}
@media (min-width: 64em) { .cta { min-block-size: 440px; display: grid; align-content: center; } }
.cta__inner { display: grid; gap: var(--am-sp-6); align-items: center; }
.cta h2 { font-size: var(--am-fs-28); margin-block-end: var(--am-sp-2); }
.cta p { color: var(--am-navy-t1); font-size: var(--t-lead); max-width: 56ch; }
/* every 22px Arabic lead on the standfirst's 1.8, room for harakat (TYP-05) */
.am :is(.hero__lead, .svc-cover .lead, .cta p):lang(ar) { line-height: 1.8; }
@media (min-width: 64em) { .cta__inner { grid-template-columns: minmax(auto, max-content) auto; justify-content: start; column-gap: var(--am-sp-16); } .cta h2 { font-size: var(--am-fs-36); } }

/* ---- Footer (as live, on the royal surface; the art scales to the taller band) ---- */
.site-footer { padding-block: var(--am-sp-12) var(--am-sp-8);
  --royal-glow: 640px; --royal-glow-x: -200px; --royal-glow-y: -256px;
  --royal-mark-img: url("/assets/img/mark-white.svg?v=03606983b9"); --royal-mark: 320px; --royal-mark-x: -72px; --royal-mark-y: -88px; } /* the only band with the watermark */
.site-footer a { color: var(--am-on-navy); text-decoration: none; }
@media (hover: hover) { .site-footer a:hover { text-decoration: underline; } }
.footer-grid { display: grid; gap: var(--am-sp-8); }
@media (min-width: 48em) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 75em) {
  .footer-grid { grid-template-columns: 3fr 2fr 5fr 3fr; }
  /* the 11 services in two independent columns (the five advisory ones, then the six others, UX-08): multi-column
     layout, so a wrapped item in one column never stretches a row in the other (2026-09-27) */
  .footer-grid > div:nth-child(3) ul { display: block; columns: 2; column-gap: var(--am-sp-6); }
  .footer-grid > div:nth-child(3) li { break-inside: avoid; }
  .footer-grid > div:nth-child(3) li:nth-child(6) { break-before: column; }
}
.footer-brand img { height: var(--am-logo-signature); width: auto; margin-block-end: var(--am-sp-8); }
.legal-name { font-size: var(--t-small); font-weight: 700; line-height: var(--am-leading-name); margin-block-end: var(--am-sp-3) !important; }
.site-footer p { color: var(--am-navy-t1); font-size: var(--t-small); }
.site-footer .legal-name { color: var(--am-on-navy); }
.site-footer h2 { color: var(--am-on-navy); font-size: var(--t-body); margin: 0 0 var(--am-sp-4); } /* a step above the links (TYP-02) */
.site-footer ul { display: grid; gap: var(--am-sp-2); font-size: var(--t-small); }
.site-footer ul a, .footer-place { display: flex; align-items: center; gap: var(--am-sp-2); min-height: 44px; } /* full-width targets on phones */
.site-footer ul { gap: 0; }
/* the compact 32px rows for a mouse only: touch tablets keep the 44px full-row targets above (M8) */
@media (min-width: 48em) and (hover: hover) and (pointer: fine) { .site-footer ul a, .footer-place { display: inline-flex; min-height: 32px; } .site-footer ul { gap: var(--am-sp-2); } }
/* the services column (M3): a closed disclosure on phones (site.js), a plain column from 48em; no-JS keeps it open */
.footer-services summary { display: flex; align-items: center; justify-content: space-between; gap: var(--am-sp-3); min-block-size: 44px; list-style: none; cursor: pointer; }
.footer-services summary::-webkit-details-marker { display: none; }
.site-footer .footer-services summary h2 { margin: 0; }
.footer-services summary .icon { color: var(--am-navy-t1); transition: transform .2s ease; }
.footer-services[open] summary .icon { transform: rotate(180deg); }
details.footer-services[open] > ul { margin-block-start: var(--am-sp-2); }
@media (min-width: 48em) {
  .footer-services summary { min-block-size: 0; cursor: default; pointer-events: none; }
  .footer-services summary .icon { display: none; }
  .site-footer .footer-services summary h2 { margin-block-end: var(--am-sp-4); }
  details.footer-services[open] > ul { margin-block-start: 0; }
}
.footer-bottom { border-block-start: 1px solid var(--rule-on-navy); margin-block-start: var(--am-sp-8); padding-block-start: var(--am-sp-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--am-sp-2) var(--am-sp-6); font-size: var(--t-fine); color: var(--am-navy-t1); }
.footer-bottom a { display: inline-flex; align-items: center; position: relative; min-block-size: 44px; padding-block: var(--am-sp-3); margin-block: calc(-1 * var(--am-sp-3)); } /* 44px hit box, no layout change (A11Y-5) */

/* ---- Motion: quiet, opacity/translate only, gated on .js so no-JS shows everything ----
   Load: the hero copy rises (kicker, h1, lead, buttons, then the strip). Never the photo.
   Scroll: [data-reveal] blocks rise as they enter, 70ms stagger via --i (set by script). */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.js .hero__panel > * { animation: rise .7s var(--ease) both; }
.js .hero__panel > :nth-child(2) { animation-delay: 90ms; }
.js .hero__panel > :nth-child(3) { animation-delay: 180ms; }
.js .hero__panel > :nth-child(4) { animation-delay: 270ms; }
.js .hero__index { animation: rise .7s var(--ease) 360ms both; }
.js .lead-tile { animation: rise .7s var(--ease) 450ms both; } /* the star rises on load: it straddles the fold on tall screens, so it never waits for a scroll */
.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}
@media print {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .js .hero__panel > *, .js .hero__index, .js .lead-tile { animation: none; }
  /* the royal bands print flat: ink on paper, no gradient, lattice or photo; the fixed masthead becomes static
     (Firefox repeats a fixed header on every page); the reversed logo keeps a navy chip (2026-09-26) */
  .royal { background: none; color: var(--am-ink); border-block-end-color: var(--am-navy); }
  .royal__bg, .royal .zone__media, .site-nav, .nav-toggle, .mega-toggle, .mega, .skip-link, .cta .btn-row, body::after { display: none; }
  .site-header { position: static; box-shadow: none; }
  body.am { padding-block-start: 0; }
  /* (0,2,x): beats .zone--navy :is(h2, h3), .site-footer h2, .site-footer .legal-name, .site-nav__list a */
  .royal :is(h2, h3, p, a, li, span, .legal-name, .footer-bottom, .brand__descriptor span) { color: var(--am-ink); }
  .footer-bottom { border-color: var(--am-border); }
  .brand__img, .footer-brand img { background: var(--am-navy); padding: var(--am-sp-2); print-color-adjust: exact; }
}
@media (forced-colors: active) {
  .hero::before, .zone__media::after { opacity: 1; }
  .royal__bg { display: none; } /* no art in forced colours: the mark would be the only thing left */
  .brand__img, .footer-brand img { forced-color-adjust: none; background-color: var(--am-navy); }
  .kicker::before, .sector-grid li::before, .ruled li::before { forced-color-adjust: none; background: CanvasText; }
}

/* ==========================================================================
   PART 1b — the Services page in the home's language (2026-09-27). It reuses the home's vocabulary
   (.zone--photo, .head, .hero__index, .board, .lead-tile, .tiles, .split, .steps, .cta); only what the
   page adds is here. No dash decorations: rows are divided by hairlines only (owner, 2026-09-27).
   ========================================================================== */
/* empty targets for the legacy anchors (#advisory, #planning-forecasting): out of flow, so they never take a grid cell */
.anchor { position: absolute; inline-size: 1px; block-size: 1px; pointer-events: none; }
.svc { scroll-margin-block-start: calc(var(--am-sp-8) - var(--am-sp-3)); } /* clears the 16px reveal translate, like .tile */

/* cover: navy over the business plate (86% veil), the contents strip closes it edge to edge */
.svc-cover { padding-block-end: 0; }
.svc-cover__grid { display: grid; gap: var(--am-sp-6); padding-block-end: var(--zone-y); }
.am .svc-cover h1 { font-size: var(--am-fs-36); color: var(--am-on-navy); }
.svc-cover__aside { display: grid; gap: var(--am-sp-4); justify-items: start; }
.svc-cover .lead { font-size: var(--t-lead); color: var(--am-navy-t1); max-width: 56ch; }
.svc-cover .meta { font-size: var(--t-small); font-weight: 500; color: var(--am-on-navy); }
.svc-cover .btn-row { inline-size: 100%; margin-block-start: var(--am-sp-2); }
.am .svc-cover .lead a { color: var(--am-on-navy); } /* the thanks lead's WhatsApp link */
@media (min-width: 64em) {
  .svc-cover__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--am-sp-8); align-items: end; }
  .svc-cover .head { grid-column: 1 / span 5; }
  .svc-cover__aside { grid-column: 7 / -1; }
  .hero__index--4 ol { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* four equal cells, one inset */
}
@media (min-width: 80em) { .am .svc-cover h1 { font-size: var(--am-fs-48); } }

/* the board's four tiles also carry "best for": seven subgrid rows (number, title, value, deliverables, best for, note, link) */
.tile__for { font-size: var(--t-small); color: var(--am-navy-t1); }
.tile__for strong { color: var(--am-on-navy); font-weight: 700; }
@media (min-width: 64em) {
  .tiles--full { grid-template-rows: repeat(7, auto); }
  @supports (grid-template-rows: subgrid) {
    .tiles--full .tile { grid-row: span 7; }
    .tiles--full .tile__note { grid-row: 6; }
    .tiles--full .tile .link-arrow { grid-row: 7; }
  }
}

/* the three other practices: ruled splits on bg-alt, one service per row (intro | deliverables) */
.svc-list { border-block-start: 1px solid var(--am-navy); }
.svc { display: grid; gap: var(--am-sp-4) var(--am-sp-8); padding-block: var(--am-sp-6); border-block-end: 1px solid var(--am-border); }
.svc:last-child { border-block-end: 0; padding-block-end: 0; }
.svc__intro { display: grid; gap: var(--am-sp-3); align-content: start; justify-items: start; }
.svc h3 { font-size: var(--t-h3); color: var(--am-navy); }
.svc__value { font-size: var(--t-body); color: var(--am-ink); max-width: 56ch; }
.svc__for { font-size: var(--t-small); color: var(--am-text-2); max-width: 56ch; }
.svc__for strong { color: var(--am-navy); font-weight: 700; }
.svc__list { display: grid; gap: var(--am-sp-3); align-content: start; }
.svc .tile__label { color: var(--am-text-2); }
.svc .ruled { border-block-start-color: var(--am-navy); }
.svc .ruled li { color: var(--am-ink); border-block-end-color: var(--am-border); }
.svc .ruled li:last-child { border-block-end: 0; }
@media (min-width: 48em) { .svc { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }

/* ==========================================================================
   PART 1c — the About page in the home's language (2026-09-27). Cover = the services cover (.svc-cover +
   .hero__index--4) over the Museum of the Future plate; who we are = the home's about split on the tint
   (figures slab + highlights, no photo); mission / vision / values on navy; the founder on bg-alt, reusing
   the home's .founder block without its crop marks; the home's sector grid and booking band. No stationery
   photo, no drawn dashes or corner marks: rows are divided by hairlines only (owner, 2026-09-27).
   ========================================================================== */
.about-cover .zone__media img { object-position: 50% 45%; }

/* who we are: overview + figures | what clients trust us with */
.about__overview { display: grid; gap: var(--am-sp-4); }
.about__overview p:not(.standfirst) { font-size: var(--t-body); color: var(--am-ink); max-width: 56ch; }
.about__side { display: grid; align-content: start; }
@media (min-width: 64em) {
  .about--page .about__text { grid-column: 1 / span 6; }
  .about--page .about__side { grid-column: 7 / -1; grid-row: 1; }
  .about--page .highlights { grid-template-columns: minmax(0, 1fr); }
  .about--page .highlights li { padding-block: var(--am-sp-6); }
}

/* mission as the statement; vision and values beside it */
.purpose { border-block-start: 1px solid var(--rule-on-navy); }
.purpose__grid { display: grid; gap: var(--am-sp-8); }
.purpose__main h2 { font-size: var(--t-h3); }
.purpose__statement { margin-block-start: var(--am-sp-6) !important; font-size: var(--am-fs-28); line-height: 1.35; color: var(--am-on-navy); max-width: 30ch; }
.purpose__statement:lang(ar) { line-height: 1.7; }
.purpose__side { display: grid; gap: var(--am-sp-8); align-content: start; }
.purpose__item { display: grid; gap: var(--am-sp-3); padding-block-start: var(--am-sp-4); border-block-start: 1px solid var(--rule-on-navy); }
.purpose__item h3 { font-size: var(--t-lead); }
.purpose__item > p { font-size: var(--t-body); color: var(--am-navy-t1); max-width: 56ch; }
.purpose__item .ruled { border-block-start: 0; }
.purpose__item .ruled li { font-size: var(--t-body); padding-block: var(--am-sp-3); }
.purpose__item .ruled li:last-child { border-block-end: 0; }
@media (min-width: 40em) { .purpose__item .ruled { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--am-sp-8); } }
@media (min-width: 64em) {
  .purpose__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--am-sp-8); align-items: start; }
  .purpose__main { grid-column: 1 / span 7; }
  .purpose__side { grid-column: 8 / -1; }
  .purpose__statement { font-size: var(--am-fs-36); line-height: 1.3; }
  .purpose__statement:lang(ar) { line-height: 1.6; }
}

/* leadership: the home's founder column (portrait, name, role, experience) beside the bio, areas and journey */
.leadership__grid { display: grid; gap: var(--am-sp-8); }
.leadership .founder { padding-block-start: 0; border-block-start: 0; }
.leadership .founder__photo { display: block; } /* a <picture> here: webp with a JPEG fallback */
/* no corner marks on the portrait anywhere (owner, 2026-09-27) */
.leadership__body { display: grid; gap: var(--am-sp-8); align-content: start; }
.leadership__bio { display: grid; gap: var(--am-sp-4); }
.leadership__bio .standfirst { font-size: var(--t-lead); color: var(--am-ink); max-width: 60ch; }
.leadership__bio .standfirst:lang(ar) { line-height: 1.8; }
.leadership__bio p:not(.standfirst) { font-size: var(--t-body); color: var(--am-ink); max-width: 56ch; }
.leadership__cols { display: grid; gap: var(--am-sp-8); }
.leadership__cols > div { display: grid; gap: var(--am-sp-3); align-content: start; }
.leadership .tile__label { color: var(--am-navy); }
.am .leadership h3.tile__label { font-size: var(--t-fine); font-weight: 500; line-height: 1.5; } /* a label, not the house 22px h3 */
.am .leadership h3.tile__label:lang(ar) { font-size: var(--t-small); }
.leadership .ruled { border-block-start-color: var(--am-navy); }
.leadership .ruled li { font-size: var(--t-body); color: var(--am-ink); padding-block: var(--am-sp-3); border-block-end-color: var(--am-border); }
.journey { border-block-start: 1px solid var(--am-navy); }
.journey li { display: grid; gap: var(--am-sp-1); padding-block: var(--am-sp-3); border-block-end: 1px solid var(--am-border); }
.journey li:last-child { border-block-end: 0; }
.journey h4 { margin: 0; font-size: var(--t-body); font-weight: 700; line-height: 1.35; color: var(--am-navy); }
.journey p { font-size: var(--t-small); color: var(--am-text-2); }
.journey__now { color: var(--am-navy); font-weight: 500; }
@media (min-width: 48em) { .leadership__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) {
  .leadership__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--am-sp-8); align-items: start; }
  .leadership .founder { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-condensed) + var(--am-sp-8)); gap: var(--am-sp-6); }
  .leadership__body { grid-column: 5 / -1; }
}

/* ==========================================================================
   PART 1d — Insights in the home's language (2026-09-27): the list (/blogs/) and the three articles.
   List: the services cover (.svc-cover, no contents strip) over the desert plate, the articles as house cards
   on bg-alt (white, 1px border, 14px radius, colour cover to the top edge), the most recent one wide with the
   house gold bar (that screen's one hero gold), then the royal booking band.
   Article: a navy head band (crumbs, H1, standfirst, byline + dates), the colour cover as a wide figure that
   straddles the band's lower edge (no text ever sits on it), the reading column (70ch, 18px from 40em) beside
   the sticky contents, the review note and the related service, the other articles, the booking band.
   Lists in running prose keep real round bullets / numbers; no drawn dash decorations anywhere (owner).
   ========================================================================== */
/* ---- the list ---- */
.post-grid { display: grid; gap: var(--am-sp-6); }
.post-item { display: grid; } /* the card fills its grid cell, so paired cards share one height */
.am .post-card { position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.post-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--am-navy-t2); }
.post-card__media picture, .post-card__media img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.post-card__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--am-sp-3); padding: var(--am-sp-6); }
.am .post-card .kicker { margin: 0; color: var(--am-navy); }
.am .post-card h2 { font-size: var(--t-h3); line-height: 1.3; }
.am .post-card h2:lang(ar) { line-height: 1.5; }
.am .post-card h2 a { color: var(--am-navy); text-decoration: none; }
.post-card h2 a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* the title link covers the whole card */
.post-card__excerpt { flex: 1; font-size: var(--t-body); color: var(--am-text-2); max-width: 60ch; }
.post-card .link-arrow { color: var(--am-navy); }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--am-sp-1) var(--am-sp-4); font-size: var(--t-small); color: var(--am-text-2); overflow-x: clip; }
/* the middle dot (never a dash) is exactly one column gap wide and pulled back into the gap before its item: between two
   items on a line it sits centred in the gap; when an item wraps, its dot falls outside the start edge and is clipped (UX-11) */
.post-meta__item::before { content: "·"; content: "·" / ""; display: inline-block; inline-size: var(--am-sp-4); margin-inline-start: calc(-1 * var(--am-sp-4)); text-align: center; }
@media (hover: hover) {
  .am .post-card { transition: box-shadow .25s var(--ease); }
  .am .post-card:hover { box-shadow: var(--am-shadow-lg); }
  .post-card:hover h2 a, .post-card:hover .link-arrow { text-decoration: underline; }
  .post-card__media img { transition: transform 1.2s var(--ease); }
  .post-card:hover .post-card__media img { transform: scale(1.02); }
}
@media (min-width: 48em) {
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-item--lead { grid-column: 1 / -1; }
}
@media (min-width: 64em) {
  .post-grid { gap: var(--am-sp-8); }
  .am .post-card--lead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .post-card--lead .post-card__media { aspect-ratio: 16 / 9; align-self: stretch; }
  .post-card--lead .post-card__body { justify-content: center; gap: var(--am-sp-4); padding: var(--am-sp-12); }
  .am .post-card--lead h2 { font-size: var(--am-fs-36); }
  .post-card--lead .post-card__excerpt { flex: 0 1 auto; font-size: var(--t-lead); color: var(--am-ink); }
  .post-card--lead .post-card__excerpt:lang(ar) { line-height: 1.8; }
}
@media (min-width: 64em) and (max-width: 79.99em) { .am .post-card--lead h2 { font-size: var(--am-fs-28); } .post-card--lead .post-card__body { padding: var(--am-sp-8); } }

/* ---- the article head: navy band, the cover straddles its lower edge ---- */
:root { --post-overlap: var(--am-sp-12); }
@media (min-width: 64em) { :root { --post-overlap: calc(2 * var(--am-sp-16)); } }
.post-head--figure { padding-block-end: calc(var(--zone-y) + var(--post-overlap)); }
.post-head__grid { display: grid; gap: var(--am-sp-4); justify-items: start; }
.am .post-head h1 { font-size: var(--am-fs-28); color: var(--am-on-navy); max-width: 26ch; }
.post-head__lead { font-size: var(--t-lead); color: var(--am-navy-t1); max-width: 60ch; }
.post-head__lead:lang(ar) { line-height: 1.8; }
.post-byline { display: grid; gap: var(--am-sp-1); inline-size: 100%; padding-block-start: var(--am-sp-4); border-block-start: 1px solid var(--rule-on-navy); font-size: var(--t-small); color: var(--am-navy-t1); }
.post-byline__author { display: flex; flex-wrap: wrap; align-items: center; gap: var(--am-sp-1) var(--am-sp-4); overflow-x: clip; }
.post-byline strong { color: var(--am-on-navy); font-weight: 700; }
.post-head .post-meta { color: var(--am-navy-t1); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--am-sp-2); font-size: var(--t-small); }
.breadcrumbs li { display: inline-flex; align-items: center; gap: var(--am-sp-2); }
.breadcrumbs .icon { color: var(--am-navy-t1); }
.am .post-head .breadcrumbs a { display: inline-flex; align-items: center; justify-content: center; min-block-size: 44px; min-inline-size: 44px; padding-inline: var(--am-sp-1); margin-inline: calc(-1 * var(--am-sp-1)); margin-block: calc((var(--am-sp-8) - 44px) / 2); color: var(--am-navy-t1); text-decoration: none; } /* a 44px hit box, the row stays 32px (M9, A11Y-5) */
@media (hover: hover) { .am .post-head .breadcrumbs a:hover { color: var(--am-on-navy); text-decoration: underline; } }
@media (min-width: 40em) { .am .post-head h1 { font-size: var(--am-fs-36); } }
@media (min-width: 64em) {
  .post-head__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--am-sp-8); row-gap: var(--am-sp-6); align-items: end; }
  .post-head__grid > * { grid-column: 1 / -1; }
  /* title and standfirst on 1-8; the byline and dates stand beside them on 9-12, level with the standfirst's foot */
  .am .post-head h1 { grid-column: 1 / span 8; grid-row: 2; }
  .post-head__lead { grid-column: 1 / span 8; grid-row: 3; }
  .post-byline { grid-column: 9 / -1; grid-row: 2 / span 2; align-self: end; gap: var(--am-sp-2); }
}
@media (min-width: 80em) { .am .post-head h1 { font-size: var(--am-fs-48); } }
.post-figure { position: relative; margin-block: calc(-1 * var(--post-overlap)) 0; }
.post-figure picture { display: block; inline-size: 100%; overflow: hidden; aspect-ratio: 16 / 9; /* explicit width: a capped height must not shrink it through the ratio */ border-radius: var(--am-r-card); background: var(--am-navy-t2); box-shadow: var(--am-shadow-lg); }
.post-figure img { inline-size: 100%; block-size: 100%; object-fit: cover; }
@media (min-width: 64em) { .post-figure picture { aspect-ratio: 21 / 9; max-block-size: 560px; } }

/* ---- the reading column and its contents ---- */
.post-grid-article { display: grid; gap: var(--am-sp-8); }
.post-article { font-size: var(--am-fs-16); }
@media (min-width: 40em) { .post-article { font-size: var(--am-fs-18); } }
/* the contents title is a label, not the house 28px h2 */
.am .toc__title { font-size: var(--t-fine); font-weight: 500; line-height: 1.5; letter-spacing: 0.12em; text-transform: uppercase; color: var(--am-navy); }
.am .toc__title:lang(ar) { font-size: var(--t-small); letter-spacing: 0; text-transform: none; }
.am .toc ol { margin-block-start: var(--am-sp-3); border-block-start: 1px solid var(--am-navy); }
.toc li { border-block-end: 1px solid var(--am-border); }
.am .toc a { display: flex; align-items: baseline; gap: var(--am-sp-3); min-block-size: 44px; padding-block: var(--am-sp-3); font-size: var(--t-small); font-weight: 500; color: var(--am-navy); text-decoration: none; }
.toc .folio-no { color: var(--am-text-2); }
@media (hover: hover) { .am .toc a:hover span:last-child { text-decoration: underline; text-underline-offset: 4px; } }
@media (min-width: 64em) {
  .post-grid-article { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--am-sp-8); align-items: start; }
  /* sticky under the condensed bar (84 + the 1px thread) */
  .toc { grid-column: 1 / span 4; grid-row: 1 / span 2; position: sticky; top: calc(var(--header-condensed) + 1px + var(--am-sp-8)); }
  .post-article, .post-close { grid-column: 5 / -1; }
}
/* from 80em three columns: contents | the 70ch reading column | the close, both asides sticky, so the wide
   canvas carries no empty margin beside the text */
@media (min-width: 80em) {
  .toc { grid-column: 1 / span 3; grid-row: 1; }
  .post-article { grid-column: 4 / span 6; grid-row: 1; }
  .am .post-close { grid-column: 10 / -1; grid-row: 1; grid-template-columns: minmax(0, 1fr); margin-block-start: 0; position: sticky; top: calc(var(--header-condensed) + 1px + var(--am-sp-8)); }
}

.prose { max-inline-size: 70ch; line-height: 1.75; color: var(--am-ink); counter-reset: sec; }
.prose:lang(ar) { line-height: 1.9; }
/* Arabic: 70ch (Latin zeros) held about 100 Arabic characters on a portrait tablet; below the three-column layout the
   column is capped at about 78 (M12). From 80em the grid track is the measure. */
@media (max-width: 79.99em) { .prose:lang(ar) { max-inline-size: 36rem; } .post-close:lang(ar) { max-inline-size: 40.5rem; } }
.am .prose p { margin-block: 0 var(--am-sp-4); }
.am .prose h2 { counter-increment: sec; font-size: var(--am-fs-22); line-height: 1.3; margin-block: var(--am-sp-12) var(--am-sp-4); scroll-margin-block-start: calc(1px + var(--am-sp-6) - var(--am-sp-3)); } /* 96 + 13 = 109 */
.am .prose h2:lang(ar) { line-height: 1.5; }
/* the section number above each heading, on a full-measure hairline */
.prose h2::before {
  content: counter(sec, decimal-leading-zero);
  content: counter(sec, decimal-leading-zero) / "";
  display: block; margin-block-end: var(--am-sp-2); padding-block-start: var(--am-sp-4); border-block-start: 1px solid var(--am-border);
  font-family: var(--am-font-lat); font-size: var(--am-fs-14); font-weight: 500; letter-spacing: 0.04em; color: var(--am-text-2);
}
.am .prose :is(ul, ol) { margin-block: 0 var(--am-sp-6); padding-inline-start: var(--am-sp-6); }
.am .prose ul { list-style: disc; }
.am .prose ol { list-style: decimal; }
.prose li { margin-block-end: var(--am-sp-2); padding-inline-start: var(--am-sp-1); }
.prose li::marker { color: var(--am-navy); }
.prose ol > li::marker { font-family: var(--am-font-lat); font-weight: 700; }
.prose strong { color: var(--am-navy); }
.am .prose h3 { font-size: var(--am-fs-18); line-height: 1.4; margin-block: var(--am-sp-6) var(--am-sp-3); }
@media (min-width: 64em) { .am .prose h2 { font-size: var(--am-fs-28); } .am .prose h3 { font-size: var(--am-fs-22); } }
/* the owner's wide screen: the reading size steps up like the rest of the site, so the 744px column holds about 84 Arabic
   and 72 English characters per line instead of 103/89 (TYP-03); the headings keep their step above the body */
@media (min-width: 100em) {
  .post-article { font-size: var(--am-fs-22); }
  .prose:lang(ar) { line-height: 1.8; }
  .am .prose h2 { font-size: var(--am-fs-36); }
  .am .prose h3 { font-size: var(--am-fs-28); }
}

/* the close: the review note and the related service, side by side from 48em */
.post-close { display: grid; gap: var(--am-sp-6); align-items: start; max-inline-size: calc(70ch * 18 / 16); margin-block-start: var(--am-sp-4); } /* the prose measure, in the close's 16px */
.post-note { align-self: start; padding: var(--am-sp-4) var(--am-sp-6); background: var(--am-navy-t2); border: 1px solid var(--am-border); border-inline-start: 4px solid var(--am-navy); border-radius: var(--am-r-sm); font-size: var(--t-small); color: var(--am-ink); }
.am .post-service { display: grid; gap: var(--am-sp-2); justify-items: start; align-content: start; }
.post-service__title { font-size: var(--am-fs-18); font-weight: 700; color: var(--am-navy); }
.post-service__value { font-size: var(--t-small); color: var(--am-text-2); }
@media (min-width: 48em) { .post-close { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the other articles */
.post-more__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--am-sp-2) var(--am-sp-6); margin-block-end: var(--am-sp-8); }
.am .post-more__head h2 { font-size: var(--am-fs-28); }
@media (min-width: 64em) { .am .post-more__head h2 { font-size: var(--am-fs-36); } }

@media print {
  .toc, .breadcrumbs, .post-more, .post-service, .post-card .link-arrow { display: none; }
  .post-grid-article { display: block; }
  .prose h2 { break-after: avoid; break-inside: avoid; }
  /* the navy head bands print as ink on paper */
  .post-head, .post-list-cover { background: none; color: var(--am-ink); }
  .post-list-cover .zone__media { display: none; }
  .am .post-head :is(h1, p, a, strong, span), .am .post-list-cover :is(h1, p) { color: var(--am-ink); }
  .post-head--figure { padding-block-end: var(--am-sp-8); }
  .post-figure { margin-block-start: 0; }
  .post-figure picture { box-shadow: none; }
}

/* ==========================================================================
   PART 1e — Contact and thanks in the home's language (2026-09-27).
   Contact: the services cover (.svc-cover, no contents strip) over the business plate, then on bg-alt the form as the
   page's one emphasised house card (its 4px gold bar = the screen's one hero gold) beside the direct-contact record
   (hairline-ruled rows, the whole row is the link), sticky from 64em; a gold thread seams the body to the footer.
   Form: top-aligned labels, 48px controls, short pairs side by side from 40em, the service question as radio cards
   under the four practice titles, inline errors (icon + text) and the error summary; the submit is the navy primary.
   Thanks: one navy band over the same plate (the cover grid), the same thread at its seam with the footer.
   No drawn dash decorations; the summary list keeps real round bullets.
   ========================================================================== */
.contact-body, .thanks-band { border-block-end: var(--gold-thread); } /* the seam with the royal footer, as the booking band's */
.contact__grid { display: grid; gap: var(--am-sp-12); align-items: start; }
@media (min-width: 64em) {
  .contact__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--am-sp-8); }
  .contact-card { grid-column: 1 / span 8; }
  .contact-direct { grid-column: 9 / -1; position: sticky; top: calc(var(--header-condensed) + 1px + var(--am-sp-8)); }
}
@media (min-width: 100em) { .contact__grid { column-gap: var(--am-sp-16); } }

/* ---- the form card ---- */
.am .contact-card { padding: var(--am-sp-6); }
@media (min-width: 48em) { .am .contact-card { padding: var(--am-sp-8); } }
@media (min-width: 100em) { .am .contact-card { padding: var(--am-sp-12); } }
.contact-card__head { display: grid; gap: var(--am-sp-2); padding-block-end: var(--am-sp-6); margin-block-end: var(--am-sp-6); border-block-end: 1px solid var(--am-border); }
.am .contact-card h2 { margin: 0; font-size: var(--t-h3-lead); color: var(--am-navy); }
.form-intro { font-size: var(--t-small); color: var(--am-text-2); }
/* after a successful send no field is left: the note and its rule go, the h2 stays (it names the section) (forms-02) */
.contact-card--sent .form-intro { display: none; }
.contact-card--sent .contact-card__head { border-block-end: 0; padding-block-end: 0; }

.form { display: grid; gap: var(--am-sp-6); }
.field { display: grid; gap: var(--am-sp-2); align-content: start; }
.am .form label { margin: 0; }
.am .field > label { font-size: var(--t-small); font-weight: 500; line-height: 1.5; color: var(--am-navy); }
.am .form .field-hint { margin: 0; font-size: var(--t-small); color: var(--am-text-2); }
/* text-2 border: 4.88:1 on white (the house --am-border is 1.31:1); the invalid and focus rules are more specific */
.am .form :is(input:not([type="radio"]), textarea) { min-block-size: 48px; border-color: var(--am-text-2); }
.am .form textarea { min-block-size: 144px; resize: vertical; line-height: 1.6; }
[dir="rtl"] .am input[dir="ltr"] { text-align: right; }
.field-row { display: grid; gap: var(--am-sp-6); }
/* Side by side, the two fields of a pair share rows (label / hint / input / error), so the phone hint never pushes
   the email input down; a field without a hint lets its label span the hint row and sit on its input. */
@media (min-width: 40em) {
  .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); row-gap: 0; }
  .field-row > .field { grid-row: span 4; grid-template-rows: subgrid; row-gap: var(--am-sp-2); }
  .field-row > .field > input { grid-row: 3; }
  .field-row > .field > .field-error { grid-row: 4; }
  .field-row > .field:not(:has(.field-hint)) > label { grid-row: 1 / span 2; align-self: end; }
}

/* the service question: radio cards, the real radio visible (so the house focus ring applies to it) */
.service-q { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.am .service-q legend { padding: 0; margin-block-end: var(--am-sp-4); font-size: var(--t-body); font-weight: 700; line-height: 1.5; color: var(--am-navy); }
.am .service-q legend:has(+ .field-hint) { margin-block-end: var(--am-sp-1); }
.am .form .service-q > .field-hint { margin-block-end: var(--am-sp-4); } /* "choose the main one" (forms-06) */
.service-groups { display: grid; gap: var(--am-sp-6); }
.service-groups__rest { display: grid; gap: var(--am-sp-6); }
.option-group { display: grid; gap: var(--am-sp-2); align-content: start; }
.option-group__title { font-size: var(--t-fine); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--am-text-2); }
.option-group__title:lang(ar) { font-size: var(--t-small); letter-spacing: 0; text-transform: none; }
.options { display: grid; gap: var(--am-sp-2); }
.option-group--lead .options { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
@media (min-width: 40em) { .service-groups__rest { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); column-gap: var(--am-sp-4); } }
.am .option { display: flex; align-items: center; gap: var(--am-sp-3); min-block-size: 56px; margin: 0; padding: var(--am-sp-2) var(--am-sp-4); background: var(--am-bg); border: 1px solid var(--am-border); border-radius: var(--am-r-btn); font-size: var(--am-fs-16); font-weight: 400; line-height: 1.4; color: var(--am-ink); cursor: pointer; }
.am .option input { flex: none; inline-size: 20px; block-size: 20px; min-block-size: 0; margin: 0; padding: 0; accent-color: var(--am-navy); cursor: pointer; }
.option__text { display: grid; gap: var(--am-sp-1); }
.option__hint { font-size: var(--t-small); color: var(--am-text-2); }
.am .option__text > span { text-wrap: balance; } /* no label strands one word (TYP-08) */
.am .option:has(input:checked) { border-color: var(--am-navy); background: var(--am-navy-t2); color: var(--am-navy); font-weight: 500; box-shadow: inset 0 0 0 1px var(--am-navy); }
.am .option:has(input[aria-invalid="true"]) { border-color: var(--am-error); }
@media (hover: hover) { .am .option:hover { border-color: var(--am-navy); } }
.am .option:has(input:checked) .option__hint { color: var(--gray-600); } /* text-2 is 4.41:1 on the checked navy-t2 fill (C5) */
/* phones: 48px cards and 16px group gaps take about 120px off the question (forms-08); the inline padding stays, so the
   forced-colours checked rule below still lines up */
@media (max-width: 39.99em) { .am .option { min-block-size: 48px; } .service-groups, .service-groups__rest { gap: var(--am-sp-4); } }

/* errors: icon + text under the field, a red border on the control, the summary above the form */
.am .form .field-error { display: flex; gap: var(--am-sp-2); align-items: center; margin: 0; font-size: var(--t-small); font-weight: 500; color: var(--am-error-ink); }
.am .form .field-error[hidden] { display: none; }
.am .form .service-q .field-error { margin-block: 0 var(--am-sp-4); } /* under the question and its hint, above the cards (forms-01) */
.am .form :is(input, textarea)[aria-invalid="true"]:not([type="radio"]) { border-color: var(--am-error); }
.form-summary { padding: var(--am-sp-4) var(--am-sp-6); background: var(--am-error-tint); color: var(--am-error-ink); border: 1px solid var(--am-error); border-inline-start-width: 4px; border-radius: var(--am-r-btn); }
.am .form-summary h3 { margin: 0 0 var(--am-sp-2); font-size: var(--am-fs-16); color: var(--am-error-ink); }
.am .form-summary ul { display: grid; gap: 0; list-style: disc; padding-inline-start: var(--am-sp-6); }
.am .form-summary a { display: block; min-height: 44px; padding-block: var(--am-sp-2); color: var(--am-error-ink); text-decoration: underline; } /* 44px rows (M10) */
.form-status { padding: var(--am-sp-4) var(--am-sp-6); border-radius: var(--am-r-btn); }
.form-status--ok { border: 1px solid var(--am-success); background: var(--am-success-tint); color: var(--am-success-ink); }
.form-status--fail { border: 1px solid var(--am-error); background: var(--am-error-tint); color: var(--am-error-ink); }
.am .form-status h2 { margin: 0 0 var(--am-sp-2); font-size: var(--am-fs-18); color: inherit; }
.am .form-status a { color: inherit; }

/* the send row: the navy primary, the privacy line beside it */
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--am-sp-4) var(--am-sp-6); padding-block-start: var(--am-sp-6); border-block-start: 1px solid var(--am-border); }
.am .form-actions .btn { flex: 1 1 100%; font-weight: 700; }
/* "Sending…" stays readable while the button is off (house: opacity .45 = 2.7:1): navy on navy-t1, 11.64:1 (C2) */
.am .form .btn--primary[disabled] { opacity: 1; background: var(--am-navy-t1); border-color: var(--am-navy-t1); color: var(--am-navy); }
.form-note { flex: 1 1 16rem; font-size: var(--t-small); color: var(--am-text-2); }
@media (min-width: 40em) { .am .form-actions .btn { flex: 0 0 auto; min-inline-size: 240px; } }

/* ---- the direct-contact record ---- */
.contact-direct { display: grid; gap: var(--am-sp-4); align-content: start; }
.am .contact-direct h2 { font-size: var(--t-h3); color: var(--am-navy); }
.direct { border-block-start: 1px solid var(--am-navy); }
.direct li { border-block-end: 1px solid var(--am-border); }
.direct__row { display: flex; align-items: center; gap: var(--am-sp-4); min-block-size: 72px; padding-block: var(--am-sp-3); color: var(--am-navy); }
.am a.direct__row { text-decoration: none; color: var(--am-navy); }
.direct__icon { flex: none; display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: var(--am-r-full); background: var(--am-bg); border: 1px solid var(--am-border); color: var(--am-navy); }
.direct__text { display: grid; gap: var(--am-sp-1); min-inline-size: 0; }
.direct__label { font-size: var(--t-small); color: var(--am-text-2); }
.direct__value { font-size: var(--am-fs-18); font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
@media (min-width: 100em) { .direct__value { font-size: var(--am-fs-22); } }
@media (hover: hover) {
  .am a.direct__row:hover .direct__value { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
  a.direct__row:hover .direct__icon { border-color: var(--am-navy); }
}

/* ---- thanks: the band fills the first screen's navy up to 560px ---- */
.thanks-band { display: grid; align-content: center; }
.thanks-band .kicker .icon { color: var(--am-on-navy); }
/* the contact cover's one-tap call on phones (M11); from 64em the direct column beside the form carries it */
.contact-quick .ltr { font-family: var(--am-font-lat); }
@media (min-width: 64em) { .contact-quick { display: none; } }
/* 404: one flat navy band like thanks, the four sections as arrow links, the gold thread at its seam with the footer */
.notfound-band { display: grid; align-content: center; border-block-end: var(--gold-thread); }
@media (min-width: 64em) { .notfound-band { min-block-size: min(calc(100svh - var(--header-expanded)), 560px); } }
.notfound-band .kicker .num { font-size: var(--t-small); letter-spacing: 0.04em; }
.link-list { display: flex; flex-wrap: wrap; gap: 0 var(--am-sp-6); }
/* privacy: the contact family's cover, then the numbered sections as a reading column on bg-alt (number + heading |
   text from 64em); no booking band, the gold thread seams the body to the footer */
.legal-body { border-block-end: var(--gold-thread); }
.legal { border-block-start: 1px solid var(--am-navy); }
.legal__sec { display: grid; gap: var(--am-sp-3) var(--am-sp-8); padding-block: var(--am-sp-6); border-block-end: 1px solid var(--am-border); }
.legal__sec:last-child { border-block-end: 0; padding-block-end: 0; }
.am .legal__sec h2 { display: flex; align-items: baseline; gap: var(--am-sp-3); font-size: var(--t-h3); color: var(--am-navy); }
.legal__sec .folio-no { color: var(--am-text-2); }
.legal__body { display: grid; gap: var(--am-sp-3); max-width: 68ch; }
.legal__body p { font-size: var(--t-body); line-height: 1.7; color: var(--am-ink); }
.legal__body p:lang(ar) { line-height: 1.9; }
.legal__body .legal-name { color: var(--am-navy); margin: 0 !important; }
@media (max-width: 79.99em) { .legal__body:lang(ar) { max-width: 36rem; } }
@media (min-width: 64em) {
  .legal__sec { grid-template-columns: repeat(12, minmax(0, 1fr)); padding-block: var(--am-sp-8); }
  .legal__sec h2 { grid-column: 1 / span 4; }
  .legal__body { grid-column: 5 / span 7; }
}
@media (min-width: 64em) { .thanks-band { min-block-size: min(calc(100svh - var(--header-expanded)), 560px); } }

@media (forced-colors: active) {
  /* the chosen service: a thicker system-colour border (box-shadow and fills are dropped here); padding shrinks by the
     extra 2px so the text does not shift */
  .am .option:has(input:checked) { border: 3px solid Highlight; padding: calc(var(--am-sp-2) - 2px) calc(var(--am-sp-4) - 2px); }
}
@media print {
  .contact-cover, .thanks-band { background: none; color: var(--am-ink); }
  .contact-cover .zone__media, .thanks-band .zone__media, .thanks-band .btn-row, .contact-quick, .legal-cover .zone__media { display: none; }
  .legal-cover, .notfound-band { background: none; color: var(--am-ink); }
  .am :is(.legal-cover, .notfound-band) :is(h1, p) { color: var(--am-ink); }
  .am :is(.contact-cover, .thanks-band) :is(h1, p) { color: var(--am-ink); }
  .contact-direct { position: static; }
}

/* ==========================================================================
   PART 2 — inner pages (privacy, 404).
   The previous "annual report" layer, minus everything the a-v2 part now owns (base resets, the
   header, footer, skip link, buttons, .container, .split, .steps, .ledger, the home cover and its
   figures strip). Kept until these pages are restyled (2026-09-27).
   ========================================================================== */

/* ---- Base (inner pages) ---- */
/* Focus- and fragment-scrolling clear the condensed masthead at the top (84 + 12; Shift+Tab no longer leaves a control under
   the fixed bar, A11Y-1) and the fixed .wa-fab at the bottom (16px + 56px) */
html { scroll-padding-block: calc(var(--header-condensed) + var(--am-sp-3)) calc(var(--am-sp-16) + var(--am-sp-6)); }
.am li { text-wrap: pretty; }
/* running-text links: zero specificity, so any component reset wins; longhand keeps the 1px thickness */
:where(.am p, .am li) a { text-decoration-line: underline; }
/* EN pages: the 7-glyph subset (build.mjs), so they never fetch the full Arabic face */
.lang-switch:lang(ar) { font-family: "AM Switch AR", var(--site-font); }
.section { padding-block: var(--section-y); }
.lead { font-size: var(--am-fs-18); color: var(--am-text-2); max-width: var(--measure); }

/* ---- Chips (sectors, values, areas) ---- */
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--am-sp-2); }
.chips li { background: var(--am-bg); border: 1px solid var(--am-border); border-radius: var(--am-r-full); padding: var(--am-sp-2) var(--am-sp-4); font-size: var(--am-fs-14); font-weight: 500; color: var(--am-navy); }
.chips a { text-decoration: none; color: inherit; }
@media (hover: hover) { .chips a:hover { text-decoration: underline; } }
/* Link pills (404, thanks): the whole pill is the target, no underline. */
.chips--links li { padding: 0; }
.am .chips--links a { display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: var(--am-sp-4); border-radius: var(--am-r-full); text-decoration: none; }
.helpful-links { margin-block-start: var(--am-sp-6); }

/* ---- Feature list (why us) ---- */
.features { display: grid; gap: var(--am-sp-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.feature { border-inline-start: 2px solid var(--am-navy); padding-inline-start: var(--am-sp-4); }
.feature h3 { font-size: var(--am-fs-18); margin: 0 0 var(--am-sp-2); }
.feature p { margin: 0; color: var(--am-text-2); }

/* ---- FAQ ---- */
.faq { max-width: 800px; border-top: 1px solid var(--am-border); }
.faq details { border-bottom: 1px solid var(--am-border); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--am-sp-4); min-height: 56px; padding-block: var(--am-sp-4); font-weight: 700; color: var(--am-navy); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { transition: transform 200ms ease-out; transform: rotate(90deg); }
.faq details[open] summary .icon { transform: rotate(-90deg); }
.faq details p { margin: 0 0 var(--am-sp-4); color: var(--am-ink); max-width: var(--measure); }

/* ---- WhatsApp shortcut ---- */
.wa-fab {
  position: fixed; inset-inline-end: var(--am-sp-4); inset-block-end: var(--am-sp-4); z-index: 10; /* below the fixed header (20) and its open phone menu (review P1, 2026-09-27) */
  display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: var(--am-r-full);
  background: var(--am-navy); color: var(--am-on-navy) !important; box-shadow: var(--am-shadow-lg);
  /* a quiet 1px tint at rest, so the house focus ring is a clear change even over the navy footer */
  border: 1px solid var(--am-navy-t1);
  transition: opacity 200ms ease-out, visibility 200ms;
}
/* below 64em the fixed .wa-fab (16px inset + 56px = 72px) sits over the footer's end: 88px clears it */
@media (max-width: 63.99em) { .site-footer { padding-block-end: calc(var(--am-sp-16) + var(--am-sp-6)); } }
.footer-bottom { padding-inline-end: var(--am-sp-16); } /* keeps the legal line clear of the fixed .wa-fab */
/* the button steps aside while the phone menu is open, so the menu's booking button is reachable (review P1) */
body:has(.site-nav.is-open) .wa-fab { opacity: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 63.99em) {
  /* while someone types or tabs in the form (pure CSS, so it also works without JS) and while the form card passes under
     the button (site.js .form-under-fab), it never covers a control or the submit (M1, forms-07) */
  body:has(form[data-contact]:focus-within) .wa-fab, .form-under-fab .wa-fab { opacity: 0; visibility: hidden; pointer-events: none; }
}
/* on a cover with the 01-05 / contents strip it waits until the reader leaves the cover (M4): the cover has its own calls to action */
@media (max-width: 89.99em) { html.js:not(.is-condensed) body:has(.hero__index) .wa-fab { opacity: 0; visibility: hidden; pointer-events: none; } }
/* the open phone menu: a scrim over the page (a tap on it closes the menu, site.js) and the page behind does not scroll (M6) */
@media (max-width: 63.99em) {
  html.js:has(.site-nav.is-open) { overflow: hidden; }
  .js body:has(.site-nav.is-open)::after { content: ""; position: fixed; inset: 0; z-index: 15; background: var(--am-ink); opacity: .4; }
}

/* ---- Hover only where hover exists ---- */
@media (hover: hover) {
  /* the gold CTA keeps its one gold: hover underlines the label, like the site's other hovers */
  .am .btn--gold:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
  .card { transition: box-shadow 200ms ease-out, border-color 200ms ease-out; }
}

/* ==========================================================================
   EDITORIAL LAYER — "The Annual Report".
   Every page opens like a chapter of a printed annual report: a large headline
   on paper, a full-bleed plate photograph captioned underneath, navy hairlines,
   folio numbers, and gold spent like gilt edging (one element per screen).
   Tokens only. A photo veil is the navy token at an opacity: one flat layer,
   never a colour ramp. Logical properties only: one stylesheet for LTR + RTL.
   ========================================================================== */
:root {
  /* Veils: navy over photography. Worst case assumed: a pure-white pixel.
     navy @ .73 over white = 91,95,131 -> white text 6.14:1 (AA needs 4.5). */
  --veil-soft: 0.40;
  --veil-panel: 0.55;
  --veil-text: 0.73;
}
/* Readers who ask for more contrast get solid navy under every line of text on a photo. */
@media (prefers-contrast: more) {
  :root { --veil-panel: 1; --veil-text: 1; }
}

/* ---- Editorial type (the home's .standfirst is set by part 1) ---- */
.am :is(.opener, .chapter) .standfirst { font-size: var(--am-fs-18); line-height: 1.5; color: var(--am-ink); max-width: 60ch; margin: 0; }
.am :is(.opener, .chapter) .standfirst:lang(ar) { line-height: 1.8; }
@media (min-width: 64em) { .am :is(.opener, .chapter) .standfirst { font-size: var(--am-fs-22); line-height: 1.5; } }

/* Folio number: always Latin digits, never reordered. */
.folio-no {
  font-family: var(--am-font-lat); font-size: var(--am-fs-14); font-weight: 500; line-height: 1.5;
  font-variant-numeric: tabular-nums; letter-spacing: 0.04em; color: var(--am-navy);
  direction: ltr; unicode-bidi: isolate;
}
/* Kicker label. Arabic has no case, and tracking breaks letter joining. */
.am .folio-label {
  font-family: var(--site-font); font-size: var(--am-fs-12); font-weight: 500; line-height: 1.5;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--am-text-2); margin: 0;
}
.am .folio-label:lang(ar) { font-size: var(--am-fs-14); font-weight: 500; letter-spacing: 0; text-transform: none; }

/* Caption: the place name, no leading rule (owner, 2026-09-27: no drawn dashes). On paper, or on solid navy; never on a photo. */
.am .caption {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--am-sp-2);
  margin: var(--am-sp-3) auto 0; font-size: var(--am-fs-12); line-height: 1.5; color: var(--am-text-2);
}
.am .caption:lang(ar) { font-size: var(--am-fs-14); }
.caption__coords { font-family: var(--am-font-lat); font-size: var(--am-fs-12); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }

/* Short rules. Gold only where it is that screen's one gold element; navy elsewhere. */
.am .rule-gold { display: block; inline-size: 64px; } /* house .am .rule-gold sets only height and colour */

/* ---- Chapter: hairline + margin column (folio, kicker) + text column ---- */
.chapter { padding-block: var(--section-y); }
.chapter__grid {
  display: grid; gap: var(--am-sp-6) var(--am-sp-8);
  border-block-start: 1px solid var(--am-navy); padding-block-start: var(--am-sp-4);
}
.chapter__lede { display: contents; }
.chapter__folio { display: flex; align-items: baseline; gap: var(--am-sp-3); margin: 0; }
.am .chapter__head h2 { margin: 0; font-size: var(--am-fs-28); max-width: 22ch; }
.am .chapter__head .lead { margin: var(--am-sp-3) 0 0; }
.chapter__body > * { margin-block: 0; }
.chapter__body > * + * { margin-block-start: var(--am-sp-8); }
.chapter__body > p { max-width: var(--measure); } /* running text (privacy) keeps the 68ch measure */
.chapter__body > .link-arrow { margin-block-start: var(--am-sp-4); }
@media (min-width: 64em) {
  .chapter__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: var(--am-sp-8); }
  .chapter__folio { grid-column: 1 / span 3; grid-row: 1; padding-block-start: var(--am-sp-3); }
  .chapter__head { grid-column: 4 / -1; grid-row: 1; }
  .chapter__body { grid-column: 4 / -1; }
  .am .chapter__head h2 { font-size: var(--am-fs-36); }
  .chapter__grid--wide .chapter__body { grid-column: 1 / -1; }
  /* folio + head stay in the margin while a long body scrolls (FAQ) */
  .chapter__grid--aside .chapter__lede {
    display: grid; gap: var(--am-sp-4); align-content: start; align-self: start;
    grid-column: 1 / span 4; grid-row: 1; position: sticky; top: calc(var(--header-condensed) + var(--am-sp-8));
  }
  .chapter__grid--aside .chapter__folio, .chapter__grid--aside .chapter__head { grid-column: auto; grid-row: auto; padding: 0; }
  .am .chapter__grid--aside .chapter__head h2 { font-size: var(--am-fs-28); }
  .chapter__grid--aside .chapter__body { grid-column: 6 / -1; grid-row: 1; }
  /* the chapter hairline is the FAQ's top rule here (below 64em the heading sits between them) */
  .chapter__grid--aside .faq { border-block-start: 0; }
}
/* short chapters (privacy): half the padding, so one-line sections leave no holes */
.chapter.chapter--tight { padding-block: var(--am-sp-8); }
.chapter--tight .chapter__grid { row-gap: var(--am-sp-4); }

/* ---- Plates: full-bleed photographs ---- */
.plate { position: relative; margin: 0; }
.plate img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }

/* Statement band: duotone photo, one flat veil, one sentence. */
.plate--statement {
  isolation: isolate; overflow: clip; display: grid; align-items: center;
  min-block-size: 480px; padding-block: var(--am-sp-16); background: var(--am-navy); color: var(--am-on-navy);
}
.plate--statement .plate__media { position: absolute; inset: 0; z-index: -2; }
.plate--statement .plate__media picture { display: block; block-size: 100%; }
.plate--statement::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--am-navy); opacity: var(--veil-text); }
@media (min-width: 64em) { .plate--statement { min-block-size: 560px; } }

.statement { margin: 0; }
.statement .rule-gold { display: block; margin-block-end: var(--am-sp-6); }
.statement blockquote { margin: 0; }
.am .statement blockquote p { margin: 0; max-width: 34ch; font-size: var(--am-fs-22); line-height: 1.5; font-weight: 400; }
.am .statement blockquote p:lang(ar) { line-height: 1.8; }
.am .statement figcaption { margin-block-start: var(--am-sp-6); }
.am .plate--statement blockquote p, .am .plate--statement .folio-label { color: var(--am-on-navy); }
@media (min-width: 48em) { .am .statement blockquote p { font-size: var(--am-fs-28); } }
@media (min-width: 64em) {
  .am .statement blockquote p { font-size: var(--am-fs-36); line-height: 1.2; } /* display type */
  .am .statement blockquote p:lang(ar) { line-height: 1.7; }
}

/* ---- Inner-page opener ---- */
.opener { padding-block-start: var(--am-sp-12); }
.opener--plain { padding-block-end: var(--am-sp-4); border-block-end: 1px solid var(--am-border); }
.opener__grid { display: grid; gap: var(--am-sp-4); padding-block-end: var(--am-sp-8); }
.am .opener h1 { margin: 0; font-size: var(--am-fs-36); max-width: 18ch; }
@media (min-width: 64em) {
  .opener { padding-block-start: var(--am-sp-16); }
  .opener__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--am-sp-8); row-gap: var(--am-sp-6); padding-block-end: var(--am-sp-12); }
  .opener__grid > * { grid-column: 1 / -1; }
  .am .opener h1 { grid-column: 1 / span 7; font-size: var(--am-fs-48); }
  .opener__grid > .standfirst { grid-column: 8 / -1; align-self: end; }
}

/* ---- Why (features): hairline-topped, two by two ---- */
.features { gap: var(--am-sp-8); }
.feature { border-inline-start: 0; padding-inline-start: 0; border-block-start: 1px solid var(--am-border); padding-block-start: var(--am-sp-4); }
.am .feature h3 { font-size: var(--am-fs-22); }

/* ---- Motion: the desert band settles as it scrolls in. CSS only, no JS; off under
   reduced motion (and by the global reduce rule). Never on an LCP image: openers,
   the cover and article covers are not animated. ---- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .plate--statement .plate__media img {
      animation: plate-settle linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 60%;
    }
    @keyframes plate-settle { from { transform: scale(1.06); } to { transform: scale(1); } }
  }
}

/* ---- Forced colours: veils become solid system Canvas under text (the chosen service option: part 1e) ---- */
@media (forced-colors: active) {
  .plate--statement::before { opacity: 1; }
}

@media print {
  .wa-fab, .plate__media, .plate--statement::before { display: none; }
  .plate--statement { background: none; color: var(--am-ink); }
  .am .plate--statement :is(blockquote p, .folio-label) { color: var(--am-navy); }
  .link-arrow { display: none; } /* no web navigation on paper (the articles' own print rules are in part 1d) */
  /* the portrait prints whole, never split across pages */
  .leadership .founder { position: static; } .founder__photo { break-inside: avoid; }
  .chapter__head { break-after: avoid; }
}

.ph-hero img{object-position:50% 50%}
.ph-desert img{object-position:50% 62%}
.ph-camels img{object-position:50% 65%}
.ph-heritage img{object-position:50% 48%}
.ph-business img{object-position:50% 30%}
.ph-future img{object-position:50% 45%}
.ph-brand img{object-position:50% 50%}
.ph-post-ct img{object-position:50% 50%}
.ph-post-vat img{object-position:50% 50%}
.ph-post-tp img{object-position:50% 50%}