/* ============================================================================
   FLAGSHIP LAYER - Homepage · About · Contact   (D3 implementation of D2 direction A "The Move Brief")
   Source: design/d2-flagship-experience @2245d64, outputs/d2-prototype/assets/d2.css.
   One stylesheet with its own reset, and since the production cleanup (2026-09-26) the theme's only stylesheet:
   every front-end view loads it (inc/flagship.php); Bootstrap, the legacy style.css, T2 and I1 no longer exist.
   Budget (D2_PERFORMANCE_PLAN.md): <= 45 KB raw / <= 10 KB compressed, 1 request.
   D3 changes vs the prototype (owner-locked decisions + WordPress adaptation) are marked "D3".
   ========================================================================== */
:root {
  /* I1 core (unchanged) */
  --primary: #173F43; --primary-hover: #0F3235; --stone: #D8C7B2; --copper: #9B5C35; --copper-soft: #E9D9CD;
  --page: #F7F5F1; --white: #FFFFFF; --muted-surface: #EEF2F0;
  --text: #1F292A; --text-muted: #5E6A6A; --text-inv: #FFFFFF;
  --border: #D7DEDB; --border-strong: #AEBAB6;
  --error: #A43B3B; --error-soft: #FBF1F1; --success: #236B4A; --success-soft: #E4EFE9;
  --focus: #2D7F86; --focus-warm: #173F43; --focus-dark: #D8C7B2;
  --r-sm: 6px; --r-ctl: 10px;
  --t-h1: clamp(2rem, 1.35rem + 2.6vw, 3rem);          /* 32 -> 48 */
  --t-h2: clamp(1.75rem, 1.45rem + 1.2vw, 2.25rem);    /* 28 -> 36 */
  --t-h3: clamp(1.4375rem, 1.3rem + .55vw, 1.75rem);   /* 23 -> 28 */
  --t-lead: 1.125rem; --t-small: .875rem; --t-label: .8125rem;
  --m-fast: 120ms; --m-std: 180ms; --m-slow: 240ms; --ease: cubic-bezier(.2, .8, .2, 1);
  /* D2 additions */
  --wash: #F1ECE4;
  --rule: rgba(23, 63, 67, .2);
  --rule-stone: rgba(23, 63, 67, .3);
  --rule-dark: rgba(216, 199, 178, .32);
  --on-dark: rgba(255, 255, 255, .84);
  --t-h4: 1.1875rem;
  --t-place: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);  /* 28 -> 40: place names, always below the H1 */
  --m-xslow: 420ms; --ease-out: cubic-bezier(.16, 1, .3, 1);
  /* FONT ASSET HOLD: IBM Plex Sans Arabic stays first; no file is shipped, so the platform's Arabic face renders. */
  --font: "IBM Plex Sans Arabic", "Dubai", "Segoe UI", "Noto Sans Arabic", "SF Arabic", "Geeza Pro", Tahoma, sans-serif;
  --gut: 16px; --cw: 1200px; --sec: 64px; --hdr: 64px; --adm: 0px;
}
@media (min-width: 768px)  { :root { --gut: 24px; --sec: 88px; } }
@media (min-width: 1000px) { :root { --gut: 32px; --sec: 112px; --hdr: 72px; } }
/* D3: WordPress admin bar (logged-in reviewers only) - keep the sticky header below it. */
.admin-bar { --adm: 46px; }
@media (min-width: 783px) { .admin-bar { --adm: 32px; } }

/* FONT ASSET HOLD - activate only when licensed WOFF2 files exist in assets/fonts/ (D2_PERFORMANCE_PLAN.md §4).
   Metric overrides for the fallback MUST be computed from the real files; none are guessed here.
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/IBMPlexSansArabic-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/IBMPlexSansArabic-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Plex Arabic Fallback"; src: local("Segoe UI"), local("Tahoma"); size-adjust: <computed>; ascent-override: <computed>; descent-override: <computed>; }
*/

/* ---- reset (own; replaces the Bootstrap Reboot dependency) ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr) + var(--adm) + 16px); }
@media (max-width: 999px) { html { scroll-padding-bottom: 96px; } }
html.is-locked { overflow: hidden; }
body { margin: 0; background: var(--page); color: var(--text); font: 400 1rem/1.75 var(--font); font-synthesis: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { font-weight: 700; text-wrap: balance; }
h1 { font-size: var(--t-h1); line-height: 1.22; }
h2 { font-size: var(--t-h2); line-height: 1.3; }
h3 { font-size: var(--t-h3); line-height: 1.35; }
p, li { text-wrap: pretty; }
bdi[dir="ltr"] { direction: ltr; unicode-bidi: isolate; }
.fl-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---- I1 context-safe focus: the ring takes the SURFACE colour, 2px gap; primary buttons add an inner edge ---- */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.fl-dark :focus-visible { outline-color: var(--focus-dark); }
.fl-stone :focus-visible { outline-color: var(--focus-warm); }
.fl-btn--primary:focus-visible { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .92); }
.fl-dark .fl-btn--primary:focus-visible { box-shadow: inset 0 0 0 2px var(--primary); }
.fl-skip { position: absolute; inset-inline-start: 12px; top: -120px; z-index: 100; padding: 12px 18px; background: var(--white); color: var(--primary); font-weight: 700; border-radius: var(--r-sm); box-shadow: 0 0 0 10px var(--white); transition: top var(--m-std) var(--ease); }
.fl-skip:focus { top: calc(14px + var(--adm)); }

/* ---- layout primitives ---- */
.fl-wrap { width: 100%; max-width: calc(var(--cw) + var(--gut) * 2); margin-inline: auto; padding-inline: var(--gut); }
.fl-sec { padding-block: var(--sec); }
.fl-main { counter-reset: ch 1; }
.fl-ch { counter-increment: ch; }
.fl-num { display: flex; align-items: center; gap: 12px; margin-block-end: 18px; color: var(--copper); font-weight: 700; font-size: .9375rem; line-height: 1; }
.fl-num::before { content: counter(ch, arabic-indic); }
.fl-num::after { content: ""; width: 40px; height: 1px; background: currentColor; opacity: .55; }
.fl-eyebrow { display: flex; align-items: center; gap: 10px; margin-block-end: 14px; font-size: var(--t-small); font-weight: 700; color: var(--primary); }
.fl-eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--copper); }
.fl-lead { font-size: var(--t-lead); line-height: 1.8; max-width: 38rem; }
.fl-body { max-width: 36rem; }
.fl-caption { margin-block-end: 10px; font-size: var(--t-small); font-weight: 700; color: var(--text-muted); }

/* ---- icons ---- */
.fl-i { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.fl-arr { width: 18px; height: 18px; stroke-width: 1.8; transition: transform var(--m-std) var(--ease); }

/* ---- actions, phone-first since 2026-09-26 (royal_fl_actions()): call (primary button, the number visible) >
   the section's C1 CTA, usually the quote (outline) > WhatsApp (text link, .fl-alt) ---- */
.fl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 1.5px solid transparent; border-radius: var(--r-ctl); font-weight: 700; font-size: 1rem; line-height: 1.2; text-align: center; transition: background-color var(--m-fast) var(--ease), border-color var(--m-fast) var(--ease), color var(--m-fast) var(--ease); }
.fl-btn .fl-i { width: 20px; height: 20px; stroke-width: 2; }
.fl-btn:active { transform: translateY(1px); }
.fl-btn--lg { min-height: 52px; padding-inline: 26px; }
.fl-btn--sm { min-height: 44px; padding-inline: 18px; font-size: .9375rem; }
.fl-btn--primary { background: var(--primary); color: var(--text-inv); }
.fl-btn--primary:hover { background: var(--primary-hover); }
.fl-btn--secondary { border-color: var(--primary); color: var(--primary); background: transparent; }
.fl-btn--secondary:hover { background: var(--muted-surface); }
.fl-dark .fl-btn--primary { background: var(--stone); color: var(--primary); }
.fl-dark .fl-btn--primary:hover { background: #E6DACB; }
.fl-dark .fl-btn--secondary { border-color: var(--stone); color: var(--text-inv); }
.fl-dark .fl-btn--secondary:hover { background: rgba(216, 199, 178, .14); }
.fl-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.fl-cta--stack { flex-direction: column; align-items: stretch; }
.fl-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; color: var(--primary); }
.fl-link:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.fl-link:hover .fl-arr, .fl-link:focus-visible .fl-arr { transform: translateX(-4px); }
.fl-dark .fl-link { color: var(--text-inv); }
.fl-call { white-space: nowrap; }
@media (max-width: 599px) { .fl-cta > .fl-btn { flex: 1 1 100%; } }   /* phones: one full-width row per action (call, then the quote) */
.fl-call__n { padding-inline-start: 10px; border-inline-start: 1px solid rgba(255, 255, 255, .42); font-weight: 600; }
.fl-dark .fl-call__n { border-color: rgba(23, 63, 67, .35); }
.fl-alt { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; color: var(--text); }
.fl-alt .fl-i { width: 20px; height: 20px; stroke-width: 2.1; color: var(--primary); }
.fl-alt:hover { text-decoration: underline; text-underline-offset: 5px; }
.fl-cta + .fl-alt, .fl-cta + .fl-link { margin-block-start: 10px; }

/* ============================================================================ HEADER */
.fl-hdr { position: sticky; top: var(--adm); z-index: 50; background: var(--page); border-block-end: 1px solid transparent; transition: transform var(--m-slow) var(--ease), border-color var(--m-std) var(--ease); }
.fl-hdr.is-scrolled { border-color: var(--border); }
.fl-hdr.is-hidden { transform: translateY(calc(-100% - var(--adm))); }
.fl-hdr__in { display: flex; align-items: center; gap: 28px; min-height: var(--hdr); }
.fl-brand { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: 1.1875rem; color: var(--primary); }
/* brand (canonical correction 2026-09-25): the owner-approved supplied artwork as images (royal_fl_brand()). Header: the
   full flat horizontal logo at every width (2026-09-26; 44 px tall = 142 px wide below 1000 px, in a 64 px band);
   the displayed height is set here, the width follows the image's own aspect ratio (never stretched). */
.fl-brand picture { display: block; }
.fl-brand__img { display: block; width: auto; height: 44px; }
.fl-nav { display: none; }
.fl-hdr__in { gap: 16px; }
.fl-hdr__act { display: flex; align-items: center; gap: 12px; margin-inline-start: auto; }
/* phones: logo + menu (the sticky bar carries the call); from 768 px the call joins; from 1000 px the quote too */
.fl-hdr__call, .fl-hdr__cta { display: none !important; }
@media (min-width: 768px) { .fl-hdr__call { display: inline-flex !important; } }
.fl-menu-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--border-strong); border-radius: var(--r-ctl); color: var(--primary); transition: background-color var(--m-fast) var(--ease); }
.fl-menu-btn:hover { background: var(--muted-surface); }
@media (min-width: 1000px) {
  .fl-brand { font-size: 1.3125rem; }
  .fl-brand--hdr .fl-brand__img { height: 50px; }
  .fl-nav { display: flex; align-items: center; gap: 30px; }
  .fl-nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-size: .9375rem; font-weight: 600; color: var(--text); }
  .fl-nav a::after { content: ""; position: absolute; inset-inline: 0; bottom: 6px; height: 2px; background: var(--copper); transform: scaleX(0); transform-origin: right; transition: transform var(--m-std) var(--ease); }
  .fl-nav a:hover { color: var(--primary); }
  .fl-nav a:hover::after, .fl-nav a[aria-current="page"]::after { transform: scaleX(1); }
  .fl-nav a[aria-current="page"] { color: var(--primary); }
  .fl-hdr__in { gap: 28px; }
  .fl-hdr__cta { display: inline-flex !important; }
  .fl-hdr .fl-menu-btn { display: none; }
}

/* ---- mobile drawer ---- */
.fl-drawer { position: fixed; inset: 0; z-index: 80; visibility: hidden; transition: visibility 0s linear var(--m-slow); }
.fl-drawer.is-open { visibility: visible; transition-delay: 0s; }
@media (min-width: 1000px) { .fl-drawer { display: none; } }   /* no drawer on desktop: its lazy brand image is never fetched there */
.fl-drawer__scrim { position: absolute; inset: 0; background: rgba(15, 50, 53, .45); opacity: 0; transition: opacity var(--m-slow) var(--ease); }
.fl-drawer.is-open .fl-drawer__scrim { opacity: 1; }
.fl-drawer__panel { position: absolute; inset-block: var(--adm) 0; inset-inline-start: 0; display: flex; flex-direction: column; width: min(88vw, 380px); background: var(--page); transform: translateX(100%); transition: transform var(--m-slow) var(--ease-out); }
.fl-drawer.is-open .fl-drawer__panel { transform: none; }
.fl-drawer__top { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding-inline: var(--gut); border-block-end: 1px solid var(--border); }
.fl-drawer__body { flex: 1; overflow-y: auto; padding: 8px var(--gut) 16px; }
.fl-drawer__h { margin-block: 14px 0; font-size: var(--t-label); font-weight: 700; color: var(--text-muted); }
/* D3: the group labels link to the hub pages (/services/, /service-areas/) so small screens reach them too.
   VQA 2026-09: they looked like plain grey labels - now teal with an arrow, so they read as links. */
.fl-drawer__h a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--t-small); color: var(--primary); }
.fl-drawer__h a .fl-arr { width: 16px; height: 16px; }
.fl-drawer__h a:hover { text-decoration: underline; text-underline-offset: 5px; }
.fl-drawer__h a:hover .fl-arr, .fl-drawer__h a:focus-visible .fl-arr { transform: translateX(-4px); }
.fl-drawer__list a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; border-block-end: 1px solid var(--border); font-weight: 600; }
.fl-drawer__list a .fl-arr { color: var(--primary); }
.fl-drawer__list a[aria-current="page"] { color: var(--primary); }
.fl-drawer__list--plain { margin-block-start: 18px; }
.fl-drawer__foot { display: grid; gap: 10px; padding: 14px var(--gut) calc(14px + env(safe-area-inset-bottom, 0px)); border-block-start: 1px solid var(--border); }

.fl-drawer__foot .fl-alt--c { justify-self: center; }

/* ---- mobile sticky actions, phone-first since 2026-09-26: [اتصل الآن] [the quote]; never shown with another CTA group
   in view. WhatsApp is not a third equal button: it stays in the heroes, the drawer, the footer and on Contact ---- */
.fl-stky { position: fixed; inset-inline: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--page); border-block-start: 1px solid var(--border); transform: translateY(110%); transition: transform var(--m-std) var(--ease); }
.fl-stky.is-on { transform: none; }
.fl-stky .fl-btn { min-height: 48px; padding-inline: 12px; }
.fl-stky .fl-btn:focus-visible { outline-offset: -4px; }
.fl-stky .fl-btn--primary:focus-visible { outline-color: var(--focus-dark); }
@media (min-width: 1000px) { .fl-stky { display: none; } }

/* ============================================================================ HOME · 1 HERO + BRIEF */
.fl-hero { position: relative; padding-block: 28px 44px; }
.fl-hero h1 { margin-block-end: 18px; }
.fl-hero .fl-lead { margin-block-end: 26px; max-width: 41rem; }
.fl-hero .fl-alt { margin-block-start: 12px; }
@media (max-width: 599px) { .fl-hero .fl-cta .fl-btn { padding-inline: 12px; } }

/* D3: one brief (C1 H04). The office variables live in chapter 4 / the Office Moving page (owner decision), so no tabs. */
.fl-brief { position: relative; margin-block-start: 36px; margin-inline-end: 10px; padding: 22px 20px 20px; background: var(--white); border: 1px solid var(--border-strong); border-radius: 2px; box-shadow: -10px 10px 0 -1px var(--white), -10px 10px 0 0 var(--border-strong); }
.fl-brief::before { content: ""; position: absolute; inset-block-start: -1px; inset-inline: 20px; height: 2px; background: var(--copper); }   /* the sheet's single copper edge (where the D2 tab indicator sat) */
.fl-brief__title { margin-block-end: 6px; font-size: var(--t-h4); line-height: 1.5; }
.fl-brief__lead { font-size: var(--t-small); font-weight: 700; color: var(--text-muted); }
.fl-brief__note { margin-block: 14px 4px; font-size: var(--t-small); color: var(--text-muted); }

/* the brief row: the D2 signature (numeral + typeset line + hairline) */
.fl-rows { counter-reset: r; }
.fl-rows > li { position: relative; display: flex; align-items: baseline; gap: 14px; padding-block: 11px; border-block-end: 1px solid var(--border); font-weight: 600; counter-increment: r; }
.fl-rows > li::before { content: counter(r, arabic-indic); min-width: 1.1em; font-size: .875rem; font-weight: 700; color: var(--copper); }
.fl-rows--plain > li::before { content: ""; min-width: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--copper); transform: translateY(-3px); }
.fl-rows--xl > li { padding-block: 14px; font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); }
/* origin -> destination, drawn once the brief is in view */
.fl-od { display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: 12px; }
.fl-od__line { position: relative; display: inline-block; width: 46px; height: 1.5px; background: var(--primary); transform-origin: right; }
.fl-od__line::before { content: ""; position: absolute; right: -2px; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--copper); transform: translateY(-50%); }
.fl-od__line::after { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; border-left: 1.5px solid var(--primary); border-bottom: 1.5px solid var(--primary); transform: translateY(-50%) rotate(45deg); }
/* D3 brief row reveal: rows arrive in sequence once the sheet is in view; the sheet frame and title never hide. */
.js .fl-brief:not(.is-in) .fl-rows > li { opacity: 0; transform: translateY(8px); }
.fl-brief.is-in .fl-rows > li { transition: opacity var(--m-slow) var(--ease), transform var(--m-slow) var(--ease); transition-delay: calc(60ms + var(--i, 0) * 45ms); }
.js .fl-brief:not(.is-in) .fl-od__line { transform: scaleX(0); }
.fl-brief.is-in .fl-od__line { transition: transform 520ms var(--ease) 320ms; }

@media (min-width: 1000px) {
  .fl-hero { padding-block: 64px 96px; }
  .fl-hero::before { content: ""; position: absolute; inset-block: 0; inset-inline-end: 0; width: 44%; background: var(--wash); }
  .fl-hero__grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .fl-hero__copy { grid-column: 1 / span 7; }
  .fl-brief { grid-column: 8 / span 5; margin: 0 0 14px; padding: 26px 28px 24px; box-shadow: -14px 14px 0 -1px var(--white), -14px 14px 0 0 var(--border-strong); }
  .fl-brief::before { inset-inline: 28px; }
}

/* ============================================================================ SPLIT CHAPTERS (head + body) */
.fl-split__head { margin-block-end: 32px; }
.fl-split__head h2 { margin-block-end: 16px; }
.fl-split__head .fl-lead { margin-block-end: 10px; font-size: 1.0625rem; }
@media (min-width: 1000px) {
  .fl-split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .fl-split__head { grid-column: 1 / span 4; position: sticky; top: calc(var(--hdr) + var(--adm) + 32px); margin: 0; }
  .fl-split__body { grid-column: 6 / span 7; }
}

/* ============================================================================ HOME · 2 SERVICES: editorial service media index (owner brief 2026-09-25)
   Not six equal cards: Furniture = the large feature, Office = the secondary feature (marked distinct by a primary
   rule), four specialist services = small modules with alternating image ratios (4:5 / 1:1). Image crop, type, fine
   rules and whitespace; no shadows, no rounded card boxes. Below 1000 px (final polish 2026-09-26): the feature, then a
   disciplined vertical sequence - a 4:3 image (38 % / 32 % of the row) beside the name, its C1 line and the arrow,
   separated by hairlines. The service name is the link; its ::after stretches over the module. */
.fl-svm-head { margin-block-end: 26px; }
.fl-svm-head h2 { margin-block-end: 14px; }
.fl-svm-head .fl-lead { margin-block-end: 10px; font-size: 1.0625rem; }
.fl-svm { margin-block-start: 8px; border-block-start: 1px solid var(--rule); }
.fl-svm__item { position: relative; display: grid; grid-template-columns: 38% minmax(0, 1fr); align-items: center; gap: 16px; padding-block: 18px; border-block-end: 1px solid var(--rule); }
.fl-svm__media { overflow: hidden; aspect-ratio: var(--r-m); border-radius: 2px; background: var(--wash); }
.fl-svm__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fl-svm__media[data-defer] img { visibility: hidden; }   /* not requested yet (flagship.js module 7): no alt-text flash */
.fl-svm__name { font-size: 1.125rem; line-height: 1.5; }
.fl-svm__name a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--text); transition: color var(--m-std) var(--ease); }
.fl-svm__name a::after { content: ""; position: absolute; inset: 0; }
.fl-svm__name .fl-arr { width: 20px; height: 20px; color: var(--primary); transition: transform var(--m-std) var(--ease); }
.fl-svm__line { margin-block-start: 4px; font-size: .9375rem; line-height: 1.65; color: var(--text-muted); }
.fl-svm__item:hover .fl-svm__name a { color: var(--primary); }
.fl-svm__item:hover .fl-arr, .fl-svm__name a:focus-visible .fl-arr { transform: translateX(-5px); }
.fl-svm__item--feature { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 14px; padding-block: 16px 22px; }
.fl-svm__item--feature .fl-svm__media { aspect-ratio: var(--r-d); }
.fl-svm__item--feature .fl-svm__name { font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem); }
.fl-svm__item--feature .fl-svm__name a { color: var(--primary); }
.fl-svm__item--office .fl-svm__body { padding-inline-start: 14px; border-inline-start: 3px solid var(--primary); }
@media (max-width: 599px) { .fl-svm__line { font-size: .875rem; line-height: 1.6; } }
@media (min-width: 600px) { .fl-svm__item { grid-template-columns: 32% minmax(0, 1fr); gap: 24px; padding-block: 22px; } .fl-svm__name { font-size: 1.1875rem; } }
@media (min-width: 1000px) {
  .fl-svm-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; margin-block-end: 34px; }
  .fl-svm-head__title { grid-column: 1 / span 5; }
  .fl-svm-head__title h2 { margin: 0; }
  .fl-svm-head__lead { grid-column: 7 / span 6; }
  .fl-svm { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 64px; margin-block-start: 14px; border: 0; }
  .fl-svm__item { display: block; padding: 0; border: 0; }
  .fl-svm__media { aspect-ratio: var(--r-d); }
  .fl-svm__body { margin-block-start: 16px; padding-block-start: 12px; border-block-start: 1px solid var(--rule); }
  .fl-svm__item--feature { grid-column: 1 / span 7; padding: 0; }
  .fl-svm__item--office { grid-column: 9 / span 4; margin-block-start: 96px; }
  .fl-svm__item--office .fl-svm__body { padding-inline-start: 0; border-inline-start: 0; border-block-start: 3px solid var(--primary); }
  .fl-svm__item--office .fl-svm__name { font-size: 1.375rem; }
  .fl-svm__item--small { grid-column: span 3; }
  /* controlled asymmetry: the square modules (Disassembly, Intercity) sit lower than the 4:5 ones, so the row's
     image bottoms nearly align while the tops step */
  .fl-svm__item--small:nth-child(even) { margin-block-start: 56px; }
}
.fl-svc-foot { display: grid; gap: 2px; margin-block-start: 30px; max-width: 42rem; font-size: var(--t-small); color: var(--text-muted); }
.fl-svc-foot h3 { font-size: var(--t-small); color: var(--text); }

/* ============================================================================ HOME · 3 WHY AL JANAH (C1 H13; presentation finished 2026-09-26)
   "Editorial proofless reasons": a large asymmetric title zone (the emblem as a small marker, one faded fragment of the
   approved BM-03 pattern) beside four architectural rows - an oversized outlined copper numeral, a thin copper rule that
   draws once, the reason. Rows 2 and 4 step in (subtle stagger). No cards, no icons. Motion: the rule draws (scaleX),
   the row rises 10 px and fades - once; reduced motion shows the end state. Numerals stay below the H1 size. */
.fl-why { position: relative; isolation: isolate; }   /* no overflow clipping: it would make the section the sticky head's scroll container */
.fl-why::before { content: ""; position: absolute; z-index: -1; inset-block-start: 0; inset-inline-start: 0; width: min(640px, 100%); height: 480px; pointer-events: none; opacity: .07; background-image: url("../brand/pattern/brand-pattern.webp"); background-image: image-set(url("../brand/pattern/brand-pattern.avif") type("image/avif"), url("../brand/pattern/brand-pattern.webp") type("image/webp")); background-size: 392px 197px; -webkit-mask-image: radial-gradient(ellipse 100% 100% at 100% 0%, #000 15%, transparent 72%); mask-image: radial-gradient(ellipse 100% 100% at 100% 0%, #000 15%, transparent 72%); }
.fl-why__head h2 { font-size: clamp(1.875rem, 1.35rem + 2.1vw, 2.75rem); line-height: 1.25; }
.fl-why__mark { display: flex; align-items: center; gap: 14px; margin-block-start: 22px; }
.fl-why__mark::after { content: ""; width: 56px; height: 1px; background: var(--copper); }
.fl-why__mark-img { display: block; width: auto; height: 30px; }
.fl-why__list { margin-block-start: 34px; counter-reset: why; }
.fl-why__row { position: relative; display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); column-gap: 14px; padding-block: 24px 26px; border-block-start: 1px solid var(--rule); counter-increment: why; }
.fl-why__row:last-child { border-block-end: 1px solid var(--rule); }
.fl-why__row::before { content: counter(why, decimal-leading-zero); grid-row: 1 / span 2; font-size: 2.5rem; font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1.25px var(--copper); font-variant-numeric: tabular-nums; }
.fl-why__row::after { content: ""; position: absolute; inset-block-start: -1px; inset-inline-start: 0; width: 72px; height: 2px; background: var(--copper); transform-origin: right; }
.fl-why__row h3, .fl-why__row p { grid-column: 2; }
.fl-why__row h3 { margin-block-end: 6px; font-size: var(--t-h4); }
.fl-why__row p { max-width: 34rem; color: var(--text-muted); }
.js .fl-why__row[data-rv]:not(.is-in) { transform: translateY(10px); }
.js .fl-why__row:not(.is-in)::after { transform: scaleX(0); }
.fl-why__row.is-in { transition-delay: calc(var(--i, 0) * 90ms); }
.fl-why__row.is-in::after { transition: transform 700ms var(--ease) calc(160ms + var(--i, 0) * 90ms); }
@media (min-width: 1000px) {
  .fl-why__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .fl-why__head { grid-column: 1 / span 4; position: sticky; top: calc(var(--hdr) + var(--adm) + 40px); padding-block-start: 8px; }
  .fl-why__list { grid-column: 6 / span 7; margin: 0; }
  .fl-why__row { grid-template-columns: 7rem minmax(0, 1fr); padding-block: 34px 36px; }
  .fl-why__row::before { font-size: 3rem; }
  .fl-why__row:nth-child(even) { margin-inline-start: 8.5%; }
}
.fl-show .fl-why__row::after { transform: none !important; }
@media (prefers-reduced-motion: reduce) { .js .fl-why__row[data-rv]:not(.is-in) { transform: none; } .js .fl-why__row:not(.is-in)::after { transform: none; } }

/* ============================================================================ HOME · 6 THE CUSTOMER JOURNEY (C1 H14; "the move route", 2026-09-26)
   The enquiry route, not an operating process. Desktop: one continuous SVG route (origin -> destination, not a map)
   runs RTL through four nodes at alternating heights - they sit on the column start edges (25 % columns, no gap) where
   the path passes - and ends in a small arrowhead; the stages sit below, echoing the node heights. Phones: one line
   down the start side through four nodes, the text beside, no boxes. The line draws once (stroke-dashoffset / scaleY),
   the stages follow in order; nothing loops; reduced motion shows the end state. */
.fl-steps__head { margin-block-end: 36px; }
.fl-route { position: relative; }
.fl-route__path, .fl-route__end { display: none; }
.fl-route__list { position: relative; counter-reset: st; }
.fl-route__list::before { content: ""; position: absolute; inset-block: 10px 30px; inset-inline-start: 8px; width: 2px; background: var(--copper); transform-origin: top; }
.fl-route__list::after { content: ""; position: absolute; inset-block-end: 18px; inset-inline-start: 3px; border-inline: 6px solid transparent; border-block-start: 11px solid var(--copper); }
.fl-route__step { position: relative; padding-inline-start: 44px; padding-block-end: 30px; counter-increment: st; }
.fl-route__step::before { content: ""; position: absolute; inset-inline-start: 1px; inset-block-start: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--page); box-shadow: inset 0 0 0 2px var(--copper); }
.fl-route__step:first-child::before { background: var(--copper); }   /* origin */
.fl-route__step:last-child::before { background: radial-gradient(circle, var(--copper) 0 3px, var(--page) 3.5px); }   /* destination */
.fl-route__step h3 { margin-block-end: 6px; font-size: var(--t-h4); }
.fl-route__step h3::before { content: counter(st, decimal-leading-zero); display: block; margin-block-end: 8px; font-size: .9375rem; font-weight: 700; line-height: 1; letter-spacing: .04em; color: var(--copper); font-variant-numeric: tabular-nums; }
.fl-route__step p { max-width: 30rem; color: var(--text-muted); }
.js .fl-route:not(.is-in) .fl-route__list::before { transform: scaleY(0); }
.js .fl-route:not(.is-in) .fl-route__list::after, .js .fl-route:not(.is-in) .fl-route__step { opacity: 0; }
.js .fl-route:not(.is-in) .fl-route__step { transform: translateY(10px); }
.fl-route.is-in .fl-route__list::before { transition: transform 1000ms var(--ease) 150ms; }
.fl-route.is-in .fl-route__list::after { transition: opacity var(--m-std) var(--ease) 1100ms; }
.fl-route.is-in .fl-route__step { transition: opacity var(--m-slow) var(--ease), transform var(--m-slow) var(--ease-out); transition-delay: calc(200ms + var(--i, 0) * 220ms); }
@media (min-width: 1000px) {
  .fl-route { padding-block-start: 0; }
  .fl-route__path { display: block; position: absolute; inset-block-start: 0; inset-inline: 0; width: 100%; height: 72px; overflow: visible; }
  .fl-route__path path { fill: none; stroke: var(--copper); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
  .fl-route__end { display: block; position: absolute; left: 0; top: 30px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 12px solid var(--copper); }   /* physical: the route always travels leftward (RTL) */
  .fl-route__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-block-start: 96px; }
  .fl-route__list::before, .fl-route__list::after { display: none; }
  .fl-route__step { padding: 0 0 0 36px; }
  .fl-route__step::before { inset-inline-start: -8px; inset-block-start: -86px; width: 16px; height: 16px; }
  .fl-route__step:nth-child(even) { padding-block-start: 36px; }
  .fl-route__step:nth-child(even)::before { inset-block-start: -50px; }   /* node centres: y 18 (odd) / 54 (even) = the path's crests */
  .js .fl-route:not(.is-in) .fl-route__path path { stroke-dashoffset: 1; }
  .fl-route.is-in .fl-route__path path { transition: stroke-dashoffset 1300ms var(--ease) 150ms; }
  .js .fl-route:not(.is-in) .fl-route__end { opacity: 0; }
  .fl-route.is-in .fl-route__end { transition: opacity var(--m-std) var(--ease) 1350ms; }
}
.fl-show .fl-route__list::before, .fl-show .fl-route__step { transform: none !important; }
.fl-show .fl-route__list::after, .fl-show .fl-route__step, .fl-show .fl-route__end { opacity: 1 !important; }
.fl-show .fl-route__path path { stroke-dashoffset: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  .js .fl-route:not(.is-in) .fl-route__list::before, .js .fl-route:not(.is-in) .fl-route__step { transform: none; }
  .js .fl-route:not(.is-in) .fl-route__list::after, .js .fl-route:not(.is-in) .fl-route__step, .js .fl-route:not(.is-in) .fl-route__end { opacity: 1; }
  .js .fl-route:not(.is-in) .fl-route__path path { stroke-dashoffset: 0; }
}

/* ============================================================================ HOME · 3 AREAS (typographic geography, parent -> district) */
.fl-geo-sec { background: var(--wash); }
.fl-geo__river { display: none; }
.fl-geo__city { padding-block: 16px 6px; border-block-start: 1px solid var(--rule); }
.fl-geo__name { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: var(--t-place); font-weight: 700; line-height: 1.2; color: var(--primary); }
.fl-geo__name .fl-arr { width: 22px; height: 22px; }
.fl-geo__name:hover .fl-arr, .fl-geo__name:focus-visible .fl-arr { transform: translateX(-5px); }
.fl-geo__ds { display: flex; flex-wrap: wrap; column-gap: 24px; margin-block-start: 4px; }
.fl-geo__ds a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 1.0625rem; font-weight: 600; color: var(--text); transition: color var(--m-std) var(--ease); }
.fl-geo__ds a::before { content: ""; width: 8px; height: 8px; border: 1.5px solid var(--primary); border-radius: 50%; transition: background-color var(--m-std) var(--ease), border-color var(--m-std) var(--ease); }
.fl-geo__ds a:hover { color: var(--primary); }
.fl-geo__ds a:hover::before, .fl-geo__city:has(.fl-geo__name:hover) .fl-geo__ds a::before { background: var(--copper); border-color: var(--copper); }
@media (min-width: 1000px) {
  .fl-geo { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 440px; direction: ltr; border-block: 1px solid var(--rule); }
  .fl-geo__river { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .fl-geo__river path { fill: none; stroke: var(--primary); stroke-opacity: .34; stroke-width: .24; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
  .js .fl-geo:not(.is-in) .fl-geo__river path { stroke-dashoffset: 1; }
  .fl-geo.is-in .fl-geo__river path { transition: stroke-dashoffset 900ms var(--ease) 120ms; }
  .fl-geo__city { position: relative; direction: rtl; grid-row: 1; padding: 0; border: 0; }
  .fl-geo__city--cairo { grid-column: 2; }
  .fl-geo__city--giza { grid-column: 1; }
  .fl-geo__name { position: absolute; left: var(--x); top: var(--y); transform: translateY(-50%); white-space: nowrap; }
  .fl-geo__ds { display: block; margin: 0; }
  .fl-geo__ds li { position: absolute; left: var(--x); top: var(--y); transform: translateY(-50%); white-space: nowrap; }
  .js .fl-geo:not(.is-in) .fl-geo__ds li { opacity: 0; }
  .fl-geo.is-in .fl-geo__ds li { transition: opacity var(--m-slow) var(--ease) calc(260ms + var(--i, 0) * 90ms); }
}

/* ============================================================================ HOME · 4 OFFICE (density change on dark) */
.fl-dark { background: var(--primary); color: var(--text-inv); }
.fl-dark .fl-num, .fl-dark .fl-eyebrow { color: var(--stone); }
.fl-dark .fl-eyebrow::before { background: var(--stone); }
.fl-office h2 { margin-block-end: 16px; }
.fl-office .fl-body { color: var(--on-dark); }
.fl-office .fl-cta { margin-block-start: 26px; }
/* D3: a concise verbatim subset (B07 client questions) - the Office Moving page owns the full content. */
.fl-office__spec { margin-block-start: 44px; }
.fl-office__spec h3 { margin-block-end: 8px; font-size: var(--t-h4); }
.fl-rows--office > li { padding-block: 14px; font-size: 1.0625rem; font-weight: 600; }
.fl-dark .fl-rows > li { border-color: var(--rule-dark); color: var(--text-inv); }
.fl-dark .fl-rows > li::before { color: var(--stone); }
@media (min-width: 1000px) {
  .fl-office__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .fl-office__head { grid-column: 1 / span 5; }
  .fl-office__spec { grid-column: 7 / span 6; margin: 0; padding-inline-start: 32px; border-inline-start: 1px solid var(--rule-dark); }
  .fl-rows--office > li { padding-block: 18px; font-size: 1.1875rem; }
}

/* ============================================================================ HOME · 5 WHAT CHANGES THE QUOTE + WHAT TO COMPARE
   D3 (owner decision): two related lists in ONE composition. No connector lines, no row-to-row pairing, no
   reordering: each list keeps its C1 order and its own rhythm (numbered factors / plain comparison points). */
.fl-stone { background: var(--stone); color: var(--text); }
.fl-scope__head { max-width: 40rem; margin-block-end: 36px; }
.fl-scope__body { display: grid; gap: 44px; }
.fl-scope__lead { margin-block-end: 6px; font-size: .9375rem; font-weight: 700; }
.fl-stone .fl-rows > li { border-color: var(--rule-stone); }
.fl-scope__rest { max-width: 30rem; margin-block: 16px 22px; }
.fl-scope__col--compare h3 { margin-block-end: 10px; font-size: var(--t-h4); }
.fl-scope__col--compare .fl-rows > li { padding-block: 9px; font-size: 1rem; }
/* VQA 2026-09: stacked (< 1000) the comparison block followed the factors CTA with no break - a hairline marks the second list. */
@media (max-width: 999px) { .fl-scope__col--compare { padding-block-start: 32px; border-block-start: 1px solid var(--rule-stone); } }
@media (min-width: 1000px) {
  .fl-scope__body { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .fl-scope__col--factors { grid-column: 1 / span 6; }
  .fl-scope__col--compare { grid-column: 8 / span 5; padding-inline-start: 32px; border-inline-start: 1px solid var(--rule-stone); }
}

/* ============================================================================ HOME · 6 QUESTIONS + NEXT STEP */
.fl-faq__list { margin-block-start: 22px; border-block-start: 1px solid var(--rule); }
.fl-faq__item { border-block-end: 1px solid var(--rule); }
.fl-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding-block: 14px; font-weight: 700; font-size: 1.0625rem; line-height: 1.5; list-style: none; cursor: pointer; }
.fl-faq__item summary::-webkit-details-marker { display: none; }
.fl-faq__item summary:hover span { color: var(--primary); }
.fl-faq__item summary .fl-i { color: var(--primary); transition: transform var(--m-std) var(--ease); }
.fl-faq__item[open] summary .fl-i { transform: rotate(45deg); }
.fl-faq__a { max-width: 40rem; padding-block-end: 22px; }
.fl-faq__item[open] .fl-faq__a { animation: fl-drop var(--m-slow) var(--ease); }
@keyframes fl-drop { from { opacity: 0; transform: translateY(-6px); } }
.fl-faq__plain p { margin-block-start: 14px; }
.fl-final { margin-block-start: 48px; margin-inline-end: 10px; }
.fl-sheet { padding: 28px 24px; background: var(--white); border: 1px solid var(--border-strong); border-radius: 2px; box-shadow: -10px 10px 0 -1px var(--white), -10px 10px 0 0 var(--border-strong); }
.fl-sheet h2 { margin-block-end: 12px; font-size: clamp(1.5rem, 1.3rem + .8vw, 1.875rem); }
.fl-sheet .fl-cta { margin-block-start: 22px; }
.fl-sheet .fl-alt { margin-block-start: 8px; }
/* VQA 2026-09: on tablets the stacked sheet buttons stretched to ~660 px each - side by side at natural width instead. */
@media (min-width: 600px) and (max-width: 999px) { .fl-cta--stack { flex-direction: row; align-items: center; } }
@media (min-width: 1000px) {
  .fl-close__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .fl-faq { grid-column: 1 / span 7; }
  .fl-final { grid-column: 9 / span 4; position: sticky; top: calc(var(--hdr) + var(--adm) + 32px); margin: 0 0 14px; }
  .fl-sheet { padding: 32px 30px; box-shadow: -14px 14px 0 -1px var(--white), -14px 14px 0 0 var(--border-strong); }
}

/* ============================================================================ FOOTER */
.fl-ftr { padding-block: 56px 28px; font-size: var(--t-small); color: var(--on-dark); }
@media (max-width: 999px) { .fl-ftr--stky { padding-block-end: calc(28px + 76px + env(safe-area-inset-bottom, 0px)); } }
/* VQA 2026-09: 3 groups side by side from 768 (2 columns orphaned "تواصل" on its own row, and the tablet footer was taller than mobile). */
.fl-ftr__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }
.fl-ftr__brand { grid-column: 1 / -1; }
.fl-ftr .fl-brand { color: var(--text-inv); }
/* footer: the flat vertical logo on a white plate - no reversed / dark-ground version was supplied (REVERSED LOGO ASSET
   HOLD) and the artwork is never recoloured */
/* LIGHT LOGO ASSET HOLD fallback only: the vertical logo on a white plate while no light / reversed file exists.
   With the owner's light logo (royal_fl_brand('ftr') -> .fl-brand--light) the logo sits directly on the teal, no plate. */
.fl-ftr .fl-brand__plate { display: block; padding: 16px 18px; background: var(--white); border-radius: 2px; }
.fl-ftr .fl-brand__img { width: 120px; height: auto; }
.fl-ftr .fl-brand--light .fl-brand__img { width: 180px; }
.fl-ftr li .fl-ftr__call { gap: 10px; font-weight: 700; color: var(--text-inv); }
.fl-ftr__call .fl-i { width: 20px; height: 20px; stroke-width: 2; color: var(--stone); }
.fl-ftr__call .fl-call__n { border-color: var(--rule-dark); font-weight: 700; }
.fl-ftr h2 { margin-block-end: 4px; font-size: var(--t-label); font-weight: 700; color: var(--stone); }
.fl-ftr li a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-dark); }
.fl-ftr li a:hover { color: var(--text-inv); text-decoration: underline; text-underline-offset: 5px; }
.fl-ftr__sub a { padding-inline-start: 14px; }
.fl-ftr__bottom { margin-block-start: 32px; padding-block-start: 18px; border-block-start: 1px solid var(--rule-dark); color: var(--stone); }
@media (max-width: 767px) {
  .fl-ftr__grid { grid-template-columns: 1fr; gap: 22px; }
  .fl-ftr ul { display: flex; flex-wrap: wrap; column-gap: 20px; }
  .fl-ftr__sub a { padding-inline-start: 0; color: var(--stone); }
  .fl-ftr__city { flex-basis: 100%; }   /* VQA 2026-09: each city starts its own line, its districts follow (parent -> district stays legible) */
}
@media (min-width: 1000px) { .fl-ftr__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } .fl-ftr__brand { grid-column: auto; } }

/* ============================================================================ ABOUT */
.fl-ab-open { position: relative; padding-block: 44px 56px; overflow: clip; }
.fl-ab-open h1 { margin-block-end: 18px; color: var(--text-inv); }
.fl-ab-open .fl-lead { color: var(--on-dark); }
.fl-ab-open .fl-cta { margin-block-start: 28px; }
.fl-spine { display: none; }
.fl-ab-scope { margin-block-start: 44px; padding-block-start: 22px; border-block-start: 1px solid var(--rule-dark); }
.fl-ab-scope h2, .fl-ab-scope h3 { margin-block-end: 4px; font-size: var(--t-label); font-weight: 700; color: var(--stone); }
.fl-ab-scope h3 { margin-block-start: 22px; }
.fl-ab-scope a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; border-block-end: 1px solid var(--rule-dark); font-weight: 600; color: var(--text-inv); }
.fl-ab-scope a:hover { color: var(--stone); }
.fl-ab-scope a:hover .fl-arr { transform: translateX(-4px); }
.fl-ab-scope__places { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
@media (min-width: 1000px) {
  .fl-ab-open { padding-block: 88px 96px; }
  .fl-ab-open__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .fl-ab-open__copy { grid-column: 1 / span 7; }
  .fl-ab-scope { grid-column: 9 / span 4; margin: 0; padding: 0; border: 0; }
}
/* D3 (owner decision): the vertical name is decorative, low contrast, aria-hidden, large desktop only (>= 1024 px). */
@media (min-width: 1024px) {
  .fl-spine { display: block; grid-column: 1; grid-row: 1; align-self: stretch; overflow: hidden; writing-mode: vertical-rl; white-space: nowrap; font-size: 4rem; font-weight: 700; line-height: 1; color: rgba(216, 199, 178, .3); user-select: none; pointer-events: none; }
  .fl-ab-open__copy { grid-column: 2 / span 6; }
}
.fl-ab-principle__head { max-width: 46rem; margin-block-end: 40px; }
.fl-ab-principle__head h2 { margin-block-end: 16px; }
.fl-tri { counter-reset: t; border-block-start: 1px solid var(--rule); }
.fl-tri li { counter-increment: t; }
.fl-tri a { position: relative; display: flex; align-items: center; gap: 16px; min-height: 76px; padding-block: 16px; border-block-end: 1px solid var(--rule); }
.fl-tri__t { flex: 1; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); font-weight: 700; line-height: 1.45; transition: color var(--m-std) var(--ease); }
.fl-tri a::before { content: counter(t, arabic-indic); font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--copper); }
.fl-tri .fl-arr { align-self: flex-end; width: 22px; height: 22px; color: var(--primary); }
.fl-tri a:hover .fl-tri__t { color: var(--primary); }
.fl-tri a:hover .fl-arr, .fl-tri a:focus-visible .fl-arr { transform: translateX(-5px); }
@media (min-width: 768px) {
  .fl-tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; border: 0; }
  .fl-tri a { flex-direction: column; align-items: stretch; justify-content: space-between; gap: 22px; min-height: 200px; padding-block: 22px 4px; border-block-start: 2px solid var(--primary); border-block-end: 0; transition: border-color var(--m-std) var(--ease); }
  .fl-tri__t { flex: 0 1 auto; }
  .fl-tri a:hover { border-block-start-color: var(--copper); }
}
.fl-wash { background: var(--wash); }
.fl-ab-start__grid { display: grid; gap: 44px; }
.fl-ab-start__sheet { margin-inline-end: 10px; }
.fl-sheet__title { margin-block-end: 6px; font-size: var(--t-h4); line-height: 1.5; }
.fl-sheet__note { margin-block: 14px 4px; font-size: var(--t-small); color: var(--text-muted); }
.fl-ab-start__copy h2 { margin-block-end: 14px; }
.fl-ab-start__copy .fl-cta { margin-block-start: 26px; }
@media (min-width: 1000px) {
  .fl-ab-start__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .fl-ab-start__copy { grid-column: 1 / span 5; grid-row: 1; }
  .fl-ab-start__sheet { grid-column: 7 / span 6; grid-row: 1; margin: 0 0 14px; }
  .fl-ab-start__sheet .fl-sheet { padding: 32px 34px; box-shadow: -14px 14px 0 -1px var(--white), -14px 14px 0 0 var(--border-strong); }
}

/* ============================================================================ CONTACT (form-first) */
.fl-ct { display: grid; gap: 40px; padding-block: 20px 56px; }
.fl-ct__head h1 { margin-block-end: 10px; font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); line-height: 1.25; }
.fl-ct__intro { max-width: 36rem; color: var(--text-muted); }
/* phone-first (2026-09-26): the call button with the number, before the form, at every width; WhatsApp beside it */
.fl-ct__quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-block-start: 18px; }
.fl-formwrap { margin-block-start: 18px; margin-inline: calc(var(--gut) * -1); padding: 22px var(--gut) 24px; background: var(--white); border-block: 1px solid var(--border); counter-reset: fs; }
.fl-form__note { margin-block-end: 10px; font-size: .9375rem; color: var(--text-muted); }
.fl-req { margin-block-end: 22px; font-size: var(--t-label); color: var(--text-muted); }
.fl-req span { color: var(--error); }
.fl-fs { margin-block-end: 20px; counter-increment: fs; }
.fl-fs legend { display: flex; align-items: center; gap: 10px; width: 100%; margin-block-end: 14px; font-size: var(--t-label); font-weight: 700; color: var(--primary); }
.fl-fs legend::before { content: counter(fs, arabic-indic); color: var(--copper); }
.fl-fs legend::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.fl-row2 { display: grid; column-gap: 16px; }
.fl-field { display: grid; gap: 8px; margin-block-end: 18px; }
.fl-field label { font-size: .9375rem; font-weight: 700; }
.fl-star { margin-inline-start: 4px; color: var(--error); }
.fl-inp { width: 100%; min-height: 52px; padding: 12px 14px; background: var(--white); border: 1.5px solid var(--border-strong); border-radius: var(--r-ctl); font-size: 1rem; line-height: 1.5; transition: border-color var(--m-fast) var(--ease), box-shadow var(--m-fast) var(--ease); }
.fl-inp:hover { border-color: #7F8F8B; }
.fl-inp:focus-visible { border-color: var(--primary); }
.fl-inp::placeholder { color: #6E7A79; opacity: 1; }
.fl-inp--ltr { text-align: right; }
/* VQA 2026-09: the native date value sat at the left edge of an RTL form; align it with the other fields (the picker icon keeps a gap). */
.fl-inp[type="date"] { text-align: right; }
.fl-inp[type="date"]::-webkit-calendar-picker-indicator { margin-left: 12px; }
.fl-txa { min-height: 148px; resize: vertical; }
.fl-field__err { display: flex; align-items: center; gap: 8px; font-size: var(--t-small); font-weight: 700; color: var(--error); }
.fl-field__err .fl-i { width: 18px; height: 18px; stroke-width: 2.2; }
.fl-field.has-err .fl-inp { border-color: var(--error); box-shadow: inset -3px 0 0 var(--error); }
.fl-field.has-err .fl-field__err { animation: fl-drop var(--m-std) var(--ease); }
.fl-guide { margin-block: 2px 16px; border-block: 1px solid var(--border); }
.fl-guide summary { display: flex; align-items: center; gap: 10px; min-height: 48px; font-size: .9375rem; font-weight: 700; color: var(--primary); list-style: none; cursor: pointer; }
.fl-guide summary::-webkit-details-marker { display: none; }
.fl-guide summary .fl-i { width: 20px; height: 20px; }
.fl-guide summary::after { content: ""; margin-inline-start: auto; width: 8px; height: 8px; border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--m-std) var(--ease); }
.fl-guide[open] summary::after { transform: translateY(2px) rotate(225deg); }
.fl-guide__body { padding-block: 2px 16px; font-size: .9375rem; }
.fl-guide__body ul { margin-block: 8px; display: grid; gap: 4px 20px; }
.fl-guide__body li { position: relative; padding-inline-start: 16px; }
.fl-guide__body li::before { content: ""; position: absolute; inset-inline-start: 0; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--copper); }
.fl-guide[open] .fl-guide__body { animation: fl-drop var(--m-slow) var(--ease); }
.fl-submit { display: grid; gap: 16px; margin-block-start: 6px; }
.fl-submit .fl-btn { width: 100%; }
.fl-submit__after h2 { margin-block-end: 2px; font-size: var(--t-small); font-weight: 700; }
.fl-submit__after p { font-size: var(--t-small); color: var(--text-muted); }
.fl-errsum { display: none; margin-block-end: 22px; padding: 14px 16px; background: var(--error-soft); border: 1px solid var(--error); border-inline-start-width: 4px; border-radius: var(--r-sm); color: var(--error); }
.fl-errsum strong { display: flex; align-items: center; gap: 8px; }
.fl-errsum .fl-i { width: 20px; height: 20px; stroke-width: 2.2; }
.fl-errsum ul { margin-block-start: 4px; padding-inline-start: 28px; }
.fl-errsum a { text-decoration: underline; text-underline-offset: 3px; }
.fl-errsum__general { font-weight: 700; }
.fl-errsum:focus-visible { outline-offset: 3px; }
[data-state="error"] .fl-errsum { display: block; animation: fl-drop var(--m-slow) var(--ease); }
.fl-done { display: none; padding-block: 8px 4px; }
.fl-done:focus { outline: none; }
.fl-done__badge { display: grid; place-items: center; width: 48px; height: 48px; margin-block-end: 16px; border-radius: 50%; background: var(--success-soft); color: var(--success); }
.fl-done h2 { font-size: 1.5rem; }
.fl-done p { margin-block: 8px 14px; }
[data-state="success"] .fl-form, [data-state="success"] .fl-errsum { display: none; }
[data-state="success"] .fl-done { display: block; animation: fl-drop var(--m-slow) var(--ease); }
.fl-ct__rail h2 { margin-block-end: 8px; font-size: var(--t-h4); }
.fl-ct__rail > p { margin-block-end: 14px; font-size: .9375rem; color: var(--text-muted); }
.fl-means { border-block-start: 1px solid var(--rule); }
.fl-means a { display: flex; align-items: center; gap: 14px; min-height: 64px; padding-block: 8px; border-block-end: 1px solid var(--rule); }
.fl-means .fl-i { color: var(--primary); }
.fl-means span { display: grid; flex: 1; }
.fl-means bdi { font-size: .9375rem; color: var(--text-muted); }
.fl-means a:hover b, .fl-means a:hover bdi { color: var(--primary); }
.fl-means a:hover .fl-arr { transform: translateX(-4px); }
@media (min-width: 600px) {
  .fl-row2 { grid-template-columns: 1fr 1fr; }
  .fl-guide__body ul { grid-template-columns: 1fr 1fr; }
  .fl-formwrap { margin-inline: 0; padding: 30px 32px 32px; border: 1px solid var(--border); border-radius: 14px; }
  .fl-submit { grid-template-columns: auto 1fr; align-items: start; column-gap: 24px; }
  .fl-submit .fl-btn { width: auto; min-width: 240px; }
}
@media (min-width: 1000px) {
  .fl-ct { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; padding-block: 44px 104px; }
  .fl-ct__main { grid-column: 1 / span 7; }
  .fl-ct__rail { grid-column: 9 / span 4; position: sticky; top: calc(var(--hdr) + var(--adm) + 32px); padding-block-start: 12px; }
  .fl-formwrap { margin-block-start: 26px; padding: 36px 40px 38px; }
}

/* ============================================================================ MOTION: arrival (reveal) + reduced motion
   transform + opacity only (stroke-dashoffset on the one river path). Content hides only under html.js; if the
   script never runs, html.fl-show (set by the inline head flag after 3 s) releases every hidden state. */
.js [data-rv] { opacity: 0; transform: translateY(16px); transition: opacity var(--m-xslow) var(--ease), transform var(--m-xslow) var(--ease-out); }
.js [data-rv].is-in { opacity: 1; transform: none; }
.fl-show [data-rv], .fl-show .fl-brief .fl-rows > li, .fl-show .fl-geo__ds li { opacity: 1 !important; transform: none !important; }
.fl-show .fl-od__line { transform: none !important; }
.fl-show .fl-geo__river path { stroke-dashoffset: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0s !important; }
  .js [data-rv], .js .fl-brief:not(.is-in) .fl-rows > li, .js .fl-geo:not(.is-in) .fl-geo__ds li { opacity: 1; transform: none; }
  .js .fl-brief:not(.is-in) .fl-od__line { transform: none; }
  .fl-geo__river path { stroke-dashoffset: 0 !important; }
}

/* ============================================================================ R1 · COMMERCIAL PAGE FAMILIES (2026-09-24)
   The same system on the Services hub, the six service pages, the Service Areas hub, the two cities and the
   five districts (page-templates/flagship/{services-hub,furniture,office,service,areas-hub,city,district}.php).
   Additive only: new fl-* components. Every rule that touches a class the flagship pages also use is scoped to the
   family pages (.fl-fam on <main>, .fl-r1 on <body>), so Home / About / Contact render exactly as signed off. */

/* ---- drawer: the page you are on is marked (R1 pages only; Home / About / Contact unchanged) ---- */
.fl-r1 .fl-drawer__list a[aria-current="page"], .fl-r1 .fl-drawer__h a[aria-current="page"] { font-weight: 700; color: var(--primary); box-shadow: inset -3px 0 0 var(--copper); padding-inline-start: 12px; }

/* ---- breadcrumb (the T4 trail, same labels) ---- */
.fl-crumbs { margin-block-end: 10px; font-size: var(--t-small); color: var(--text-muted); }
.fl-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; }
.fl-crumbs li { display: inline-flex; align-items: center; gap: 10px; }
.fl-crumbs li + li::before { content: ""; width: 6px; height: 6px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: .7; }
.fl-crumbs a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--primary); }
.fl-crumbs a:hover { text-decoration: underline; text-underline-offset: 5px; }
.fl-dark .fl-crumbs { color: var(--on-dark); }
.fl-dark .fl-crumbs a { color: var(--stone); }

/* ---- page hero: copy + an aside that answers "is this the right page?" ---- */
.fl-phero { padding-block: 8px 20px; }   /* the next chapter carries the rhythm (--sec); a hub hero has no aside */
.fl-phero h1 { margin-block-end: 16px; }
.fl-phero .fl-lead { margin-block-end: 24px; }
.fl-phero .fl-alt { margin-block-start: 10px; }
.fl-phero__aside { margin-block-start: 40px; padding-block-start: 20px; border-block-start: 2px solid var(--copper); }
.fl-phero__aside h2 { margin-block-end: 8px; font-size: var(--t-h4); line-height: 1.5; }
.fl-phero__aside > p { font-size: .9375rem; }
.fl-phero__aside .fl-link { margin-block-start: 6px; }
@media (max-width: 599px) { .fl-phero .fl-cta .fl-btn { padding-inline: 12px; } }
@media (min-width: 1000px) {
  .fl-phero { padding-block: 12px 24px; }
  .fl-phero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .fl-phero__copy { grid-column: 1 / span 7; padding-block-start: 28px; }
  .fl-phero__aside { grid-column: 9 / span 4; margin: 44px 0 0; }
}
.fl-phero--dark { padding-block-end: 56px; }
.fl-fam .fl-dark .fl-od__line { background: var(--stone); }
.fl-fam .fl-dark .fl-od__line::after { border-color: var(--stone); }
.fl-phero--dark h1 { color: var(--text-inv); }
.fl-phero--dark .fl-lead { color: var(--on-dark); }
.fl-fam .fl-dark .fl-alt { color: var(--text-inv); }
.fl-fam .fl-dark .fl-alt .fl-i { color: var(--stone); }
.fl-dark .fl-phero__aside { border-color: var(--stone); }
@media (min-width: 1000px) { .fl-phero--dark { padding-block-end: 96px; } }

/* ---- page primary images (final owner pack 2026-09-26; royal_fl_page_media()): one image per page, decorative, never
   captioned. A fixed aspect-ratio box per variant (no layout shift); 2 px radius, no shadow. 'desk' = the >= 1000 px
   first-screen visual (eager, preloaded), 'small' = the < 1000 px image placed below the phone's first screen (lazy),
   'band' = one art-directed image below the first screen (About). ---- */
.fl-pm { overflow: hidden; aspect-ratio: var(--pm); border-radius: 2px; background: var(--wash); }
.fl-pm picture, .fl-pm img { display: block; width: 100%; height: 100%; }
.fl-pm img { object-fit: cover; }
.fl-pm--desk { display: none; }
.fl-pm--small { margin-block-start: 32px; }
.fl-pm--band { margin-block-start: 48px; aspect-ratio: var(--pm-m); }
@media (min-width: 1000px) {
  .fl-pm--desk { display: block; }
  .fl-pm--small { display: none; }
  .fl-pm--band { margin-block-start: 72px; aspect-ratio: var(--pm); }
  /* hubs: copy beside one substantial image (the page stays navigational: the image is 5 columns, 4:3) */
  .fl-phero__grid--media { align-items: center; }
  .fl-phero__grid--media .fl-phero__copy { grid-column: 1 / span 6; padding-block: 28px; }
  .fl-phero__grid--media .fl-pm--desk { grid-column: 8 / span 5; margin-block-start: 20px; }
  /* location family: cities - a full-width 21:9 band under the hero; districts - a 2:1 image under the copy, beside
     the location index (the aside spans both rows) */
  .fl-fam--city .fl-phero__grid .fl-pm--desk { grid-column: 1 / -1; margin-block-start: 44px; }
  .fl-fam--district .fl-phero__aside { grid-row: 1 / span 2; }
  .fl-fam--district .fl-phero__grid .fl-pm--desk { grid-column: 1 / span 8; grid-row: 2; margin-block-start: 36px; }
  /* Contact: in the rail, below the contact means (the form stays the page's object) */
  .fl-ct__rail .fl-pm--desk { margin-block-start: 28px; }
}

/* ---- shared text pieces ---- */
.fl-statement { margin-block-end: 14px; max-width: 36rem; font-size: clamp(1.25rem, 1.1rem + .7vw, 1.625rem); font-weight: 700; line-height: 1.55; color: var(--primary); }
.fl-rows__lead { margin-block-end: 2px; font-size: var(--t-small); font-weight: 700; color: var(--text-muted); }
.fl-rows__tail { margin-block-start: 10px; font-weight: 700; }
.fl-rows__rest { margin-block-start: 12px; max-width: 36rem; font-size: .9375rem; color: var(--text-muted); }
.fl-stone .fl-rows__lead, .fl-stone .fl-rows__rest { color: var(--text); }
.fl-dark .fl-rows__lead, .fl-dark .fl-rows__rest, .fl-dark .fl-rows__tail { color: var(--on-dark); }
.fl-rows--dense > li { padding-block: 9px; font-size: .9375rem; }
.fl-fam .fl-split__body > .fl-rows__lead:first-child, .fl-fx__body > .fl-rows__lead:first-child { margin-block-start: 0; }
.fl-fam .fl-split__body .fl-link, .fl-pair__copy .fl-link, .fl-routes__col > .fl-link { margin-block-start: 10px; }
.fl-fam .fl-split__head .fl-link { margin-block-start: 4px; }
.fl-fam .fl-body + .fl-body { margin-block-start: 12px; }

/* ---- editorial index rows (existing page names -> their pages) ---- */
.fl-ix { margin-block-start: 14px; border-block-start: 1px solid var(--rule); }
.fl-caption + .fl-ix { margin-block-start: 0; }
.fl-fam .fl-body + .fl-caption { margin-block-start: 20px; }
.fl-ix a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding-block: 10px; border-block-end: 1px solid var(--rule); font-size: 1.125rem; font-weight: 700; }
.fl-ix .fl-arr { color: var(--primary); }
.fl-ix a:hover span { color: var(--primary); }
.fl-ix a:hover .fl-arr, .fl-ix a:focus-visible .fl-arr { transform: translateX(-4px); }
.fl-ix--sm a { min-height: 48px; font-size: 1rem; }
.fl-ix--lg a { min-height: 76px; font-size: var(--t-place); line-height: 1.25; color: var(--primary); }
.fl-ix--lg .fl-arr { width: 22px; height: 22px; }

/* ---- services hub: one index, three weights (broad > specialist tasks > office / route), no boxes ---- */
.fl-hubix__head { max-width: 40rem; margin-block-end: 18px; }
.fl-hubix__head h2 { margin-block-end: 6px; }
.fl-hubix__list { border-block-start: 1px solid var(--rule); }
.fl-hubix__item a { position: relative; display: grid; grid-template-columns: 1fr auto; column-gap: 20px; row-gap: 4px; height: 100%; padding-block: 18px 20px; border-block-end: 1px solid var(--rule); }
.fl-hubix__name { font-size: clamp(1.1875rem, 1.05rem + .5vw, 1.375rem); font-weight: 700; line-height: 1.45; transition: color var(--m-std) var(--ease); }
.fl-hubix__desc { grid-column: 1; font-size: .9375rem; color: var(--text-muted); max-width: 42rem; }
.fl-hubix__item .fl-arr { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 22px; height: 22px; color: var(--primary); }
.fl-hubix__item a::before { content: ""; position: absolute; bottom: -1px; inset-inline: 0; height: 2px; background: var(--copper); transform: scaleX(0); transform-origin: right; transition: transform var(--m-slow) var(--ease); }
.fl-hubix__item a:hover::before, .fl-hubix__item a:focus-visible::before { transform: scaleX(1); }
.fl-hubix__item a:hover .fl-hubix__name { color: var(--primary); }
.fl-hubix__item a:hover .fl-arr, .fl-hubix__item a:focus-visible .fl-arr { transform: translateX(-5px); }
.fl-hubix__item--lead a { padding-block: 24px 26px; }
.fl-hubix__item--lead .fl-hubix__name { font-size: clamp(1.625rem, 1.3rem + 1.3vw, 2.25rem); line-height: 1.3; color: var(--primary); }
.fl-hubix__item--lead .fl-hubix__desc { font-size: 1.0625rem; color: var(--text); }
.fl-hubix__item--office a { padding-inline-start: 18px; }
.fl-hubix__item--office a::after { content: ""; position: absolute; inset-block: 18px 20px; inset-inline-start: 0; width: 3px; background: var(--primary); }
@media (min-width: 1000px) {
  .fl-hubix__list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 32px; border: 0; }
  .fl-hubix__item--lead { grid-column: 1 / -1; }
  .fl-hubix__item--lead a { border-block-start: 2px solid var(--primary); }
  .fl-hubix__item--spec { grid-column: span 2; }
  .fl-hubix__item--office, .fl-hubix__item--route { grid-column: span 3; }
  .fl-hubix__item--spec a, .fl-hubix__item--office a, .fl-hubix__item--route a { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; padding-block: 22px 18px; }
  .fl-hubix__item--spec .fl-arr, .fl-hubix__item--office .fl-arr, .fl-hubix__item--route .fl-arr { grid-column: 1; grid-row: 3; align-self: end; margin-block-start: 10px; }
  .fl-hubix__item--lead .fl-hubix__desc { max-width: 44rem; }
}

/* ---- copy beside a document sheet (scope + what to send) ---- */
.fl-pair { display: grid; gap: 40px; }
.fl-pair__copy h2 { margin-block-end: 14px; }
.fl-pair__sheet { margin-inline-end: 10px; }
.fl-fam .fl-sheet .fl-rows { margin-block: 12px 4px; }
.fl-fam .fl-sheet .fl-rows__rest { margin-block-start: 14px; }
.fl-fam .fl-sheet > .fl-link { margin-block-start: 8px; }
@media (min-width: 1000px) {
  .fl-pair { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .fl-pair__copy { grid-column: 1 / span 5; }
  .fl-pair__sheet { grid-column: 7 / span 6; margin: 0 0 14px; }
  .fl-pair__sheet .fl-sheet { padding: 32px 34px; box-shadow: -14px 14px 0 -1px var(--white), -14px 14px 0 0 var(--border-strong); }
}
/* the sheet's rows arrive in sequence once it is in view (same motion as the homepage brief) */
.js .fl-fam .fl-sheet[data-brief]:not(.is-in) .fl-rows > li { opacity: 0; transform: translateY(8px); }
.fl-fam .fl-sheet[data-brief].is-in .fl-rows > li { transition: opacity var(--m-slow) var(--ease), transform var(--m-slow) var(--ease); transition-delay: calc(60ms + var(--i, 0) * 45ms); }
.js .fl-fam .fl-sheet[data-brief]:not(.is-in) .fl-od__line { transform: scaleX(0); }
.fl-fam .fl-sheet[data-brief].is-in .fl-od__line { transition: transform 520ms var(--ease) 320ms; }
.fl-show .fl-fam .fl-sheet[data-brief] .fl-rows > li { opacity: 1 !important; transform: none !important; }
.fl-show .fl-fam .fl-sheet[data-brief] .fl-od__line { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .js .fl-fam .fl-sheet[data-brief]:not(.is-in) .fl-rows > li { opacity: 1; transform: none; }
  .js .fl-fam .fl-sheet[data-brief]:not(.is-in) .fl-od__line { transform: none; }
}

/* ---- the last chapter: one document sheet (what to send) with the three actions beside it ---- */
.fl-last__grid { display: grid; gap: 30px; }
.fl-last__doc { margin-inline-end: 10px; }
.fl-last__doc .fl-sheet h2 { margin-block-end: 6px; font-size: clamp(1.5rem, 1.3rem + .8vw, 1.875rem); }
.fl-last__act .fl-alt { margin-block-start: 10px; }
@media (min-width: 1000px) {
  .fl-last__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .fl-last__doc { grid-column: 1 / span 7; margin: 0 0 14px; }
  .fl-last__doc .fl-sheet { padding: 36px 40px; box-shadow: -14px 14px 0 -1px var(--white), -14px 14px 0 0 var(--border-strong); }
  .fl-last__act { grid-column: 9 / span 4; }
}
/* a long primary label (the office proposal CTA) takes the full row on phones instead of wrapping in half a row */
@media (max-width: 599px) { .fl-cta--long .fl-btn { flex: 1 1 100%; } }

/* ---- what may change the quote (stone) ---- */
.fl-fx__head { max-width: 40rem; margin-block-end: 24px; }
.fl-fx__body { max-width: 46rem; }
.fl-fx__body .fl-cta { margin-block-start: 24px; }
.fl-fx__p { max-width: 38rem; font-size: var(--t-lead); line-height: 1.8; }
@media (min-width: 1000px) {
  .fl-fx__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .fl-fx__head { grid-column: 1 / span 4; margin: 0; }
  .fl-fx__body { grid-column: 6 / span 7; }
}

/* ---- onward routes: related services + areas (parent city -> district) ---- */
.fl-routes__grid { display: grid; gap: 48px; }
.fl-routes__col h2 { margin-block-end: 12px; }
.fl-routes__col .fl-ix { margin-block-start: 18px; }
.fl-routes__col .fl-caption { margin-block-start: 18px; }
.fl-tree { margin-block: 18px 6px; border-block-start: 1px solid var(--rule); }
.fl-tree > li { padding-block: 8px 10px; border-block-end: 1px solid var(--rule); }
.fl-tree__city { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; font-size: 1.375rem; font-weight: 700; color: var(--primary); }
.fl-tree__city:hover .fl-arr, .fl-tree__city:focus-visible .fl-arr { transform: translateX(-4px); }
.fl-tree ul { display: flex; flex-wrap: wrap; column-gap: 22px; }
.fl-tree ul a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; }
.fl-tree ul a::before { content: ""; width: 8px; height: 8px; border: 1.5px solid var(--primary); border-radius: 50%; }
.fl-tree ul a:hover { color: var(--primary); }
.fl-tree ul a:hover::before { background: var(--copper); border-color: var(--copper); }
@media (min-width: 1000px) {
  .fl-routes__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .fl-routes__col:first-child { grid-column: 1 / span 6; }
  .fl-routes__col:last-child { grid-column: 8 / span 5; padding-inline-start: 32px; border-inline-start: 1px solid var(--rule); }
  .fl-routes__col:last-child h2 { padding-block-start: 33px; }   /* aligns with the numbered heading beside it */
}

/* ---- service-family close: one restrained dark band (a hairline keeps it apart from the dark footer) ---- */
.fl-end { border-block-end: 1px solid var(--rule-dark); }
/* the approved brand pattern (BM-03 tile, canonical correction 2026-09-25) behind the family close band, at very low
   opacity so it reads as texture (short text only). The tile file is the artwork unchanged; the opacity is presentation. */
.fl-fam .fl-end { position: relative; isolation: isolate; }
.fl-fam .fl-end::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .08; background-image: url("../brand/pattern/brand-pattern.webp"); background-image: image-set(url("../brand/pattern/brand-pattern.avif") type("image/avif"), url("../brand/pattern/brand-pattern.webp") type("image/webp")); background-size: 392px 197px; }
.fl-end h2 { margin-block-end: 12px; }
.fl-end__copy > p { max-width: 36rem; color: var(--on-dark); }
.fl-end__act { margin-block-start: 26px; }
.fl-end__act .fl-alt { margin-block-start: 10px; }
@media (min-width: 1000px) {
  .fl-end__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
  .fl-end__copy { grid-column: 1 / span 7; }
  .fl-end__act { grid-column: 9 / span 4; margin: 0; }
  .fl-end__act .fl-cta { flex-direction: column; align-items: stretch; }
}

/* ---- specialist service: the page's principle (C1 SD05) as a ruled statement beside the sheet ---- */
.fl-principle { padding-inline-start: 20px; border-inline-start: 3px solid var(--copper); }
.fl-principle h2 { margin-block-end: 12px; }

/* ---- location family: the atlas (Service Areas hub) - cities set large, districts tagged with their parent city ---- */
.fl-atlas__row + .fl-atlas__row { margin-block-start: 56px; padding-block-start: 40px; border-block-start: 1px solid var(--rule); }
.fl-ix--places a { justify-content: flex-start; gap: 14px; }
.fl-ix--places .fl-arr { margin-inline-start: auto; }
.fl-ix__tag { font-size: var(--t-small); font-weight: 600; color: var(--text-muted); }
@media (min-width: 768px) {
  .fl-ix--cities { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
  /* districts flow in columns (C1 order: 3 Cairo, then 2 Giza), so each city's districts sit under its name above */
  .fl-ix--places { columns: 2; column-gap: 32px; }
  .fl-ix--places li { break-inside: avoid; }
}

/* ---- location family: where a district page sits (parent city -> its districts, this page marked) ---- */
.fl-here__city { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; font-size: 1.375rem; font-weight: 700; color: var(--primary); }
.fl-here__city:hover .fl-arr, .fl-here__city:focus-visible .fl-arr { transform: translateX(-4px); }
.fl-here ul { margin-block-start: 4px; margin-inline-start: 5px; padding-inline-start: 18px; border-inline-start: 1px solid var(--rule-stone); }
.fl-here li a { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; }
.fl-here li a::before { content: ""; width: 8px; height: 8px; border: 1.5px solid var(--primary); border-radius: 50%; transition: background-color var(--m-std) var(--ease); }
.fl-here li a:hover { color: var(--primary); }
.fl-here li a[aria-current="page"] { font-weight: 700; color: var(--primary); }
.fl-here li a[aria-current="page"]::before { background: var(--copper); border-color: var(--copper); }
.fl-fam .fl-on-dark { color: var(--on-dark); }

/* ---- office (B2B): the same system, denser ---- */
.fl-fam--office { --sec: 56px; }
@media (min-width: 768px) { .fl-fam--office { --sec: 72px; } }
@media (min-width: 1000px) { .fl-fam--office { --sec: 88px; } }
.fl-spec .fl-rows > li { border-color: var(--rule-dark); }
.fl-rows--grid > li { padding-block: 14px; font-size: 1.0625rem; }
@media (min-width: 600px) {
  .fl-rows--grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
}
.fl-duo__head { max-width: 40rem; margin-block-end: 24px; }
.fl-duo { display: grid; gap: 28px; margin-block-end: 14px; }
.fl-duo__col { padding-block-start: 16px; border-block-start: 2px solid var(--primary); }
.fl-duo__col h3 { margin-block-end: 6px; font-size: var(--t-h4); }
.fl-duo__col p { max-width: 34rem; }
@media (min-width: 768px) { .fl-duo { grid-template-columns: 1fr 1fr; column-gap: 32px; } }

/* ============================================================================ MEDIA · the hero "Moving Window" (media sprint 2026-09-24)
   A decorative film window integrated with the Move Brief; the text stays dominant. Active only when the hero grid has
   .has-mwin (ROYAL_FL_HERO_MEDIA not 'off'), so 'off' is the signed-off hero exactly.
   Phones: a full-bleed band below the brief (outside the first screen); the brief overlaps its top edge.
   >= 1000 px: above the brief, in the brief's column; the brief overlaps its lower edge, inset from its start side.
   The poster is the first paint; the film fades in only once it is actually playing (a state change), never under
   reduced motion. HERO_VIDEO_ASSET_HOLD: the poster is drawn in CSS (no request, never an LCP candidate) - a quilted
   protection-blanket field in stone, one vertical slice of doorway light, and the origin -> destination line. */
.fl-mwin { position: relative; overflow: hidden; aspect-ratio: 16 / 10; margin-inline: calc(var(--gut) * -1); margin-block-start: -28px; background: var(--stone); pointer-events: none; user-select: none; }
.has-mwin .fl-brief { z-index: 1; }
.fl-mwin__poster, .fl-mwin__poster img, .fl-mwin__video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.fl-mwin__poster--d { display: none; }   /* desktop poster only >= 1000 px; the phone poster (lazy) below */
@media (min-width: 1000px) { .fl-mwin__poster--d { display: block; } .fl-mwin__poster--m { display: none; } }
.fl-mwin__video { opacity: 0; transition: opacity var(--m-xslow) var(--ease); }
.fl-mwin.is-playing .fl-mwin__video { opacity: 1; }
.fl-mwin__poster--hold {
  background:
    radial-gradient(110% 80% at 74% 16%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 58%),
    linear-gradient(90deg, rgba(247, 245, 241, 0) 0 60%, rgba(247, 245, 241, .5) 60% 60.4%, rgba(247, 245, 241, .3) 60.4% 75.6%, rgba(247, 245, 241, .5) 75.6% 76%, rgba(247, 245, 241, 0) 76%),
    repeating-linear-gradient(45deg, rgba(23, 63, 67, .085) 0 1px, rgba(23, 63, 67, 0) 1px 24px),
    repeating-linear-gradient(-45deg, rgba(23, 63, 67, .085) 0 1px, rgba(23, 63, 67, 0) 1px 24px),
    linear-gradient(162deg, #CDBAA3 0%, #D8C7B2 46%, #BEA88E 100%);
  box-shadow: inset 0 0 0 1px rgba(23, 63, 67, .1), inset 0 -60px 80px -40px rgba(23, 63, 67, .22);
}
.fl-mwin__poster--hold::before, .fl-mwin__poster--hold::after { content: ""; position: absolute; }
.fl-mwin__poster--hold::after { inset-inline: 14% 32%; bottom: 21%; height: 1.5px; background: var(--primary); opacity: .6; }
.fl-mwin__poster--hold::before { inset-inline-start: calc(14% - 3px); bottom: calc(21% - 3px); width: 7px; height: 7px; border-radius: 50%; background: var(--copper); }
@media (min-width: 600px) and (max-width: 999px) { .fl-mwin { aspect-ratio: 21 / 9; } }   /* a band, not a second hero, on tablets */
@media (min-width: 1000px) {
  .has-mwin .fl-hero__copy { grid-row: 1 / span 2; }
  .fl-mwin { grid-column: 8 / span 5; grid-row: 1; align-self: end; margin: 0; }
  .has-mwin .fl-brief { grid-row: 2; align-self: start; margin: -72px 0 14px; margin-inline-start: 36px; }
}
/* Editorial slots (2026-09-24: the generated editorial assets A02-A05 on Packing, Furniture, Office, Winch Lift).
   Decorative and lazy; the box ratio comes from the asset manifest (--ed-m below 1000 px, --ed-d above), so the slot
   never shifts the layout while its image loads. Without an asset nothing is printed. */
.fl-fam .fl-ed { margin-block-start: 24px; aspect-ratio: var(--ed-m); overflow: hidden; border-radius: 2px; background: var(--wash); }
.fl-fam .fl-ed picture, .fl-fam .fl-ed img { display: block; width: 100%; height: 100%; }
.fl-fam .fl-ed img { object-fit: cover; }
.fl-fam .fl-split__head .fl-ed { margin-block-start: 8px; }
.fl-fam .fl-pair__copy .fl-ed { margin-block-start: 28px; }
.fl-fam .fl-split__body .fl-ed { margin-block-start: 28px; }
.fl-fam .fl-ed--desk { display: none; }   /* a slot split by viewport (royal_fl_editorial $only): one variant shows, the hidden lazy one is never fetched */
@media (min-width: 1000px) { .fl-fam .fl-ed { aspect-ratio: var(--ed-d); } .fl-fam .fl-ed--desk { display: block; } .fl-fam .fl-ed--small { display: none; } }
/* ============================================================================ GENERIC VIEW
   Production cleanup 2026-09-26: page.php / single.php / index.php / search.php / 404.php render
   template-parts/flagship/generic.php in the flagship shell (no legacy stack). Scoped to .fl-gen. */
.fl-gen .fl-phero__copy { max-width: 46rem; }
.fl-gen .fl-phero h1 { margin-block-end: 22px; }
.fl-gen__body { padding-block-start: 8px; }
.fl-gen__list { max-width: 46rem; }
.fl-gen__list li + li { border-block-start: 1px solid var(--border); }
.fl-gen__nav { display: grid; gap: 28px; max-width: 46rem; }
@media (min-width: 768px) { .fl-gen__nav { grid-template-columns: 1fr 1fr; } }
.fl-gen__nav h2 { margin-block-end: 6px; font-size: var(--t-h4); }
.fl-gen__nav li a { display: inline-flex; align-items: center; min-height: 44px; }
.fl-gen__nav li a:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 5px; }
.fl-gen__sub a { padding-inline-start: 14px; }
.fl-gen .nav-links { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 24px; }
.fl-gen .nav-links .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding-inline: 12px; border: 1px solid var(--border); border-radius: var(--r-ctl); }
.fl-gen .nav-links .current { background: var(--primary); border-color: var(--primary); color: var(--text-inv); }
/* post content (any page without a flagship template) */
.fl-prose { max-width: 46rem; }
.fl-prose > * + * { margin-block-start: 1em; }
.fl-prose h2 { margin-block-start: 1.6em; font-size: var(--t-h3); }
.fl-prose h3 { margin-block-start: 1.4em; font-size: var(--t-h4); }
.fl-prose ul { padding-inline-start: 1.25em; list-style: disc; }
.fl-prose ol { padding-inline-start: 1.25em; list-style: decimal; }
.fl-prose li + li { margin-block-start: .35em; }
.fl-prose a { color: var(--primary); text-decoration: underline; text-underline-offset: 4px; }
.fl-prose img { height: auto; border-radius: 2px; }
/* The stored content of the three legacy district winch pages (REDIRECT DECISION HOLD) carries Bootstrap / Font Awesome
   class names; no legacy CSS or JS is loaded any more, so these few rules keep it readable. Nothing is added to it. */
.fl-prose .row { display: grid; gap: 14px; }
@media (min-width: 768px) { .fl-prose .row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fl-prose .bg-white { height: 100%; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--white); }
.fl-prose .d-flex { display: flex; flex-wrap: wrap; gap: 8px; }
.fl-prose .btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--primary); border-radius: var(--r-ctl); font-weight: 700; color: var(--primary); text-decoration: none; }
.fl-prose .accordion-button { display: block; width: 100%; margin-block-start: 1em; text-align: start; font-weight: 700; font-size: var(--t-h4); cursor: default; }
.fl-prose .fas, .fl-prose .fab, .fl-prose .far { display: none; }