/* ---------- Brand tokens ---------- */
  :root{
    --navy:#0A2540; --azure:#4E7CB0; --royal:#2F5BD6;
    --offwhite:#EEF3FA; --ink:#0E1726;
    /* light theme (Abdullah, 2026-07-07): near-white blue-cast paper, azure-tint surfaces */
    --paper:#F6F9FC; --paper-2:#EDF3FA;
    --ink-2:#46617F; --ink-3:#5E7492;
    --azure-ink:#38618F;   /* azure darkened for small text on light surfaces */
    --line:rgba(10,37,64,.14);
    --glass-bg:rgba(255,255,255,.055);
    --radius:24px; --ease:cubic-bezier(.16,1,.3,1);
    --ease-out:cubic-bezier(.23,1,.32,1);          /* strong ease-out — instant feedback, soft landing */
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth;scrollbar-gutter:stable}  /* reserve gutter so opening a tile never shifts the page */
  /* Horizontal-overflow guardrails (2026-07-19): make sideways clipping structurally impossible on
     every engine — incl. iOS Safari, where 100vw exceeds the visual viewport and body{overflow-x:hidden}
     still lets the page rubber-band. overflow-x:clip clips without creating a scroll container. */
  html,body{max-width:100%;overflow-x:clip}
  body{margin:0;font-family:'Inter',system-ui,sans-serif;color:var(--ink-2);background:var(--paper);
      -webkit-font-smoothing:antialiased}

  /* transparent glass scrollbar (page) */
  html{scrollbar-width:thin;scrollbar-color:rgba(10,37,64,.22) transparent}
  ::-webkit-scrollbar{width:13px;height:13px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:rgba(10,37,64,.18);border-radius:20px;
      border:4px solid transparent;background-clip:padding-box}
  ::-webkit-scrollbar-thumb:hover{background:rgba(10,37,64,.32)}

  /* ---------- Fixed backdrop = flat deep navy + a scroll-linked DIAGONAL fade (.bg-fade) ----------
     A clean linear diagonal from WHITE (top-left, behind the logo) through medium navy-blue to deep navy
     (bottom-right) — a gradient fade, NOT a glow/light-pool. As the hero scrolls away it dissolves +
     drifts → flat navy; scrolling back up reverses it. */
  .bg{position:fixed;inset:0;z-index:-2;overflow:hidden;background:var(--paper);}
  /* Oversized by 16% on every side so the scroll-drift NEVER reveals a navy edge on the right/bottom.
     Smooth many-stop diagonal (white logo-corner → deep navy) PLUS a faint grayscale noise dither that
     kills 8-bit colour banding, so the fade reads as one continuous blend, not separate bands. */
  .bg-fade{position:fixed;inset:-16%;z-index:-1;pointer-events:none;will-change:opacity,transform;
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E"),
        linear-gradient(135deg,#ffffff 0%,#fcfdfe 14%,#f4f8fc 30%,#eaf1f9 46%,#dfe9f5 62%,#d4e2f1 78%,#c9dbee 100%);
      background-size:300px 300px,cover;background-repeat:repeat,no-repeat;background-position:center,center;}
  /* Corner light-anchor (#bgCorner) — painted ABOVE .bg-fade (later sibling, same z-index).
     The %-based diagonal moves its light corner with viewport size, so on smaller screens its
     mid-blue bands can cross (cover) the navy logo. This layer is PX-based and pinned to the true
     top-left corner, guaranteeing the logo always sits on the light end of the fade on every
     viewport. Same palette as the diagonal → reads as one continuous fade, not a halo/patch.
     Opacity is scroll-driven in onFrame(): held at 1 while the logo is on screen (the fade never
     darkens behind a visible logo), then dissolves after the logo has scrolled away. */
  .bg-corner{position:fixed;inset:0;z-index:-1;pointer-events:none;will-change:opacity;
      background:radial-gradient(circle 980px at 0 0,#ffffff 0,#ffffff 210px,
        rgba(240,247,252,.92) 350px,rgba(215,232,246,.6) 520px,
        rgba(182,207,233,.28) 700px,rgba(182,207,233,0) 980px);}
  /* Narrow screens: the hero headline sits much closer to the corner, so the light zone becomes a
     WIDE-but-SHALLOW ellipse — still clears the whole logo lockup (~260×152px + padding) but dies
     out above the headline instead of washing the white hero text. */
  @media(max-width:720px){
    .bg-corner{background:radial-gradient(ellipse 700px 380px at 0 0,#ffffff 0,#ffffff 300px,
        rgba(240,247,252,.85) 390px,rgba(210,228,244,.4) 480px,rgba(182,207,233,0) 660px);}
  }

  /* ---------- Top bar ----------
     Transparent, overlaid on the hero, and NOT sticky — it scrolls away with the page so the logo
     never rides along on top once you scroll. (No frosted scroll bar.) */
  .top{position:absolute;top:var(--sbh,58px);left:0;right:0;z-index:50;display:flex;align-items:center;
      justify-content:flex-start;gap:18px;padding:18px clamp(20px,6vw,90px)}

  /* Lockup = updated SVG mark + real "accruveo" wordmark beneath (faithful artwork, crop-only).
     NO patch behind it — the logo simply sits in the LIGHT top-left corner of the full-screen
     light area of the fixed full-page .bg fade, so the navy mark stays legible without any halo. */
  .brand{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;line-height:0}
  .brand-mark{height:clamp(35px,8vw,53px);width:auto;display:block}   /* Muhammad 2026-07-16: another 20% smaller */
  .brand-word{height:clamp(12px,2.8vw,18px);width:auto;display:block}

  /* (header slash divider REMOVED 2026-07-05 — Abdullah: he'd meant something different;
     he has a new header idea coming, don't re-add without his word) */

  .nav{display:flex;align-items:center;gap:8px;margin-left:auto}
  /* nav is light over the dark right side of the hero; flips to navy on the light bar */
  .navlink{color:#33517A;text-decoration:none;font-size:14.5px;font-weight:600;padding:9px 14px;border-radius:10px;
      transition:background .2s,color .2s}
  .navlink:hover{background:rgba(10,37,64,.07);color:var(--navy)}
  .cta{display:inline-flex;align-items:center;gap:8px;text-decoration:none;white-space:nowrap;
      background:linear-gradient(135deg,var(--royal),var(--azure));color:#fff;font-size:14.5px;font-weight:600;
      padding:11px 19px;border-radius:12px;box-shadow:0 12px 26px -12px var(--royal);
      transition:filter .2s,transform .1s,box-shadow .3s}
  .cta:hover{filter:brightness(1.08);box-shadow:0 16px 30px -12px var(--royal)}
  .cta:active{transform:translateY(1px)}
  .cta .ar{transition:transform .25s ease}
  .cta:hover .ar{transform:translateX(3px)}

  /* ---------- Sticky dark bar (Muhammad 2026-07-16: dark bar; no logo — Abdullah) ----------
     PERMANENT from load (Abdullah 2026-07-18 go-live: no slide-in on scroll). The logo header
     (.top) sits below it, offset by --sbh which measure() keeps equal to the bar's real height. */
  .stickybar{position:fixed;top:0;left:0;right:0;z-index:55;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
      padding:9px clamp(16px,5vw,90px);background:rgba(8,27,46,.97);border-bottom:1px solid rgba(255,255,255,.08);
      box-shadow:0 18px 40px -24px rgba(3,12,24,.7)}
  /* wrap (was overflow-x:auto scroll strip, which clipped "Our work…Contact us" on phones — 2026-07-19).
     min-width:0 lets the row shrink instead of forcing its intrinsic width past the viewport. */
  .sb-links{display:flex;align-items:center;gap:2px;margin-right:auto;min-width:0;flex-wrap:wrap}
  .sb-link{color:#D9E4F1;text-decoration:none;font-size:15px;font-weight:600;padding:9px 13px;border-radius:9px;
      white-space:nowrap;transition:background .2s,color .2s}
  .sb-link:hover{background:rgba(255,255,255,.1);color:#fff}
  .sb-cta{font-size:16px;padding:10px 17px}  /* +15% (Abdullah 2026-07-18 go-live pass) */
  @media(max-width:640px){
    .stickybar{padding:8px 12px;gap:6px 8px;justify-content:center}
    .sb-links{margin-right:0;justify-content:center}
    .sb-link{font-size:14px;padding:7px 9px}
    .sb-cta{font-size:14.5px;padding:8px 13px}
  }
  @media(max-width:420px){
    .sb-link{font-size:13px;padding:6px 7px}
    .sb-cta{font-size:13.5px;padding:7px 11px}
  }

  /* ---------- Hero ---------- */
  .hero{position:relative;min-height:92vh;display:flex;align-items:center;justify-content:space-between;overflow:hidden;
      gap:clamp(24px,4vw,64px);padding:0 clamp(20px,6vw,90px)}
  /* The hero has NO background of its own — it shows the single fixed full-page .bg gradient, so the
     fade is identical and continuous from the hero through every section (no seam, no scroll
     transition, "same page" feel). Headline rides on top; the consultation card fills the left. */
  .hero-in{position:relative;z-index:2;flex:1 1 auto;max-width:62%;text-align:right;margin-left:auto}
  .eyebrow{margin:0 0 14px;color:#A6813C;font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:13px}

  /* ---------- Consultation invite box (Abdullah 2026-07-16 round 3: bottom-LEFT of the hero,
     not dead-centre in front; liquid-glass card matching the theme, quietly eye-catching;
     the form itself opens as the #consult dialog) ---------- */
  .consult{position:relative;z-index:2;flex:0 1 380px;min-width:295px;border-radius:12px;
      background:linear-gradient(160deg,rgba(255,255,255,.78),rgba(238,246,252,.55));
      -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
      border:1px solid rgba(255,255,255,.8);
      box-shadow:0 34px 70px -34px rgba(10,37,64,.5),inset 0 1px 0 rgba(255,255,255,.95);
      padding:22px 24px;align-self:flex-end;margin:110px 0 clamp(30px,7vh,72px)}
  /* soft attention ring — transform/opacity only (no per-frame paint), one quiet pulse every 5s */
  .consult::after{content:"";position:absolute;inset:-2px;border-radius:14px;pointer-events:none;
      border:2px solid rgba(78,124,176,.5);opacity:0;animation:cring 5s var(--ease) infinite}
  @keyframes cring{0%,74%{opacity:0;transform:scale(1)}82%{opacity:.75;transform:scale(1)}100%{opacity:0;transform:scale(1.045)}}
  .c-top{display:flex;align-items:center;gap:10px;margin:0 0 12px}
  .c-ic{width:38px;height:38px;border-radius:8px;display:grid;place-items:center;flex:none;
      background:linear-gradient(135deg,var(--navy),#2E5077);box-shadow:0 10px 22px -10px rgba(10,37,64,.6)}
  .c-ic svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .c-free{display:inline-flex;align-items:center;padding:5px 11px;border-radius:8px;
      background:rgba(78,124,176,.14);border:1px solid rgba(78,124,176,.3);color:#2E4E75;
      font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
  .c-h{margin:0;font-size:21px;font-weight:800;letter-spacing:-.01em;color:var(--navy);line-height:1.25}
  .c-sub{margin:8px 0 16px;font-size:14px;line-height:1.55;color:var(--ink-2)}
  /* "Financial Advisory": ~half the previous size, off-white, raised 3D bevel + soft frosted-glass depth */
  .hero-h{margin:0;font-weight:800;letter-spacing:-.015em;line-height:1.04;
      font-size:clamp(20px,3vw,42px);color:var(--navy);
      text-shadow:0 1px 0 rgba(255,255,255,.85),0 3px 8px rgba(10,37,64,.12)}
  .hero-h .lite{color:#3D69A1}
  .hero-countries{margin:18px 0 0;font-size:clamp(12.5px,1.5vw,17px);font-weight:600;color:#2E4E75;letter-spacing:.02em}
  .hero-sub{margin:20px 0 0 auto;font-size:clamp(14.5px,1.6vw,18px);line-height:1.6;color:var(--ink-2);max-width:600px}
  .kwrap{display:flex;flex-wrap:wrap;gap:11px;margin-top:30px;max-width:920px}
  .kw{display:inline-flex;align-items:center;padding:9px 16px;border-radius:999px;font-size:13.5px;font-weight:600;
      color:#2E4E75;background:rgba(78,124,176,.08);border:1px solid rgba(78,124,176,.24);
      white-space:nowrap;will-change:transform,opacity}

  /* ---------- Services section ----------
     Abdullah 2026-07-16 (round 2): Muhammad's "darker" meant the TILES, not the section —
     the section background goes back to the page fade; the tile gradient carries the shade. */
  .services{padding:56px clamp(20px,6vw,90px) 13vh;scroll-margin-top:76px}
  .sec-head{max-width:720px;margin:0 0 34px}
  .sec-head .eyebrow{margin-bottom:10px;color:var(--azure-ink)}
  .sec-head h2{margin:0;font-size:clamp(28px,4vw,44px);font-weight:800;letter-spacing:-.02em;color:var(--navy)}
  .sec-head p{margin:12px 0 0;font-size:15.5px;line-height:1.6;color:var(--ink-3)}
  .svc-all{margin:28px 0 0}

  /* Services quick-index pill row removed 2026-07-23 (Abdullah — never wanted click-to-open). */

  /* fixed column counts (4/2/1) so 8 tiles always land in even rows — whole-site symmetry (Abdullah 2026-07-16) */
  .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  @media(max-width:1180px){.grid{grid-template-columns:repeat(2,1fr)}}

  /* ---------- Tile (rebuilt 2026-07-04) ----------
     Static glass card. It is NEVER resized, NEVER clipped (no overflow:hidden + border-radius
     on a composited layer — the historic blank-tile trigger), and the only transform it ever
     receives is the transient hover lift. Details open in the centred .dlg overlay AFTER
     the tile's row, so the grid never reflows a tile — the whole FLIP/blank bug class is
     structurally impossible, and nothing on the card moves under the cursor on hover. */
  .tile{position:relative;scroll-margin-top:86px}
  /* round 5 (Abdullah): corners stay 12px; content sits 30% closer to the border than the
     round-3 frame (20/20/16 -> 14/14/11) — the middle ground after the too-tight 8px revert */
  .tile-card{position:relative;display:flex;flex-direction:column;height:100%;min-height:262px;
      padding:14px 14px 11px;cursor:pointer;border-radius:12px;
      background:linear-gradient(150deg,#DEE7F3,#D2DEEE 55%,#C8D6E9);   /* logo-azure tints, ~7% darker (Abdullah 2026-07-16: darken the tile, not the section) */
      border:1px solid rgba(78,124,176,.26);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 24px 50px -30px rgba(10,37,64,.35);
      transition:transform .22s var(--ease-out),box-shadow .3s ease,border-color .3s ease}
  /* hover = calm lift + glow, desktop pointers only. NO layout shift — the card's content
     never moves, so "More info" is always exactly where the cursor expects it. */
  @media(hover:hover) and (pointer:fine){
    .tile-card:hover{transform:translateY(-4px);border-color:rgba(78,124,176,.5);
        box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 30px 60px -30px rgba(10,37,64,.4)}
  }
  .tile-card:active{transform:translateY(-1px) scale(.985)}
  .tile.active .tile-card{border-color:rgba(78,124,176,.75);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 0 0 1px rgba(78,124,176,.35),0 26px 52px -28px rgba(10,37,64,.4)}

  /* darker icon chips (Muhammad 2026-07-16: "dark shade") — navy family, white glyphs keep full contrast */
  /* 8px, not the tile's 12px: on a 46px chip a 12px corner reads far rounder than the same
     12px does on a 300px tile — 8px matches the tile's SHARPNESS to the eye (Abdullah 2026-08-11) */
  .icon{width:46px;height:46px;border-radius:8px;display:grid;place-items:center;flex:none;
      background:linear-gradient(135deg,var(--navy),#2E5077);box-shadow:0 10px 24px -10px rgba(10,37,64,.6);margin-bottom:14px}
  .icon svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .tag{margin:0 0 5px;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--azure-ink)}
  .tile-card h3{margin:0;font-size:20px;font-weight:700;color:var(--navy);line-height:1.25}
  .teaser{margin:10px 0 0;font-size:14px;line-height:1.55;color:var(--ink-2);
      display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

  /* "More info" — pinned via margin-top:auto and nudged INTO the bottom-right corner.
     Keeps the ~9px corner hug (Abdullah "more info wahin rehne do") under the round-5
     14/14/11 frame — nudge = padding+border minus 9. */
  .face-foot{display:flex;justify-content:flex-end;margin:auto -6px -3px 0;padding-top:14px}
  /* −10% overall (Abdullah 2026-08-11) via padding/gap/arrow-chip only — font-size stays 13px,
     so the text is unchanged and the width shrinks less than the height does. */
  .more{appearance:none;border:0;cursor:pointer;background:rgba(10,37,64,.06);display:inline-flex;align-items:center;gap:7px;
      border-radius:12px;color:#2E4E75;font:inherit;font-size:13px;font-weight:600;padding:6px 6px 6px 13px;
      transition:background .25s ease,transform .16s var(--ease-out)}
  .more .mi{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;flex:none;
      background:rgba(10,37,64,.08);transition:transform .25s var(--ease-out),background .25s ease}
  .more .mi svg{width:13px;height:13px;stroke:#2E4E75;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
      transition:transform .3s var(--ease-out)}
  @media(hover:hover) and (pointer:fine){
    .tile-card:hover .more{background:linear-gradient(165deg,rgba(255,255,255,.94),rgba(243,248,253,.66))}
    .tile-card:hover .more .mi{transform:translate(1px,-1px);background:rgba(78,124,176,.3)}
  }
  .more:active{transform:scale(.96)}
  .more:focus-visible{outline:2px solid var(--azure);outline-offset:2px}
  .tile.active .more .mi svg{transform:rotate(90deg)}

  /* shared expanded-content styles (used inside the band) */
  .rule{height:1px;background:linear-gradient(90deg,transparent,rgba(10,37,64,.16),transparent);margin:16px 0 22px}
  .sub-h{margin:0 0 12px;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--azure-ink)}
  .subs{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:13px}
  .subs li{padding-left:18px;position:relative;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
  .subs li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:2px;
      background:linear-gradient(135deg,var(--royal),var(--azure))}
  .subs b{color:var(--navy);font-weight:600}

  /* Task C — tile show/hide: same dim-not-delete language as the dialog drops below
     (.drop.is-hidden / .drop-hidden-badge, reused verbatim for the badge itself). */
  .tile.is-hidden{opacity:.45}
  .tile-hidden-badge{position:absolute;top:10px;right:50px;z-index:4}

  .drop{border-top:1px solid var(--line)}
  .drop:last-child{border-bottom:1px solid var(--line)}
  .drop.is-hidden{opacity:.45}
  .drop-btn{appearance:none;width:100%;background:transparent;border:0;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
      gap:12px;padding:17px 2px;color:var(--navy);font:inherit;font-size:14.5px;font-weight:600}
  .drop-label{display:inline-flex;align-items:center;gap:8px}
  .drop-hidden-badge{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
      color:var(--azure-ink);background:rgba(78,124,176,.15);border-radius:999px;padding:2px 8px}
  .chev{width:18px;height:18px;flex:none;transition:transform .35s ease;stroke:var(--azure);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .drop.open .chev{transform:rotate(180deg)}
  .drop-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
  .drop.open .drop-body{grid-template-rows:1fr}
  .drop-clip{overflow:hidden;min-height:0}
  .drop-clip.clip-open{overflow:visible}   /* set on transitionend so a focused field's scroll-into-view / ring is never clipped */
  .drop-in{padding:0 2px 20px;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
  .price-row{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px dashed rgba(10,37,64,.14)}
  .price-row:last-child{border-bottom:0}.price-row b{color:var(--navy);font-weight:600}
  .price-row span{color:var(--azure-ink);font-weight:600;white-space:nowrap}
  .price-note,.cnote{margin:12px 0 0;font-size:13px;color:var(--ink-3)}   /* readable for older eyes (Abdullah 2026-07-16) */
  .offer{list-style:none;margin:0;padding:0;display:grid;gap:10px}
  .offer li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
  .offer svg{width:15px;height:15px;flex:none;margin-top:3px;stroke:var(--azure);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

  .cform{position:relative;display:grid;gap:13px}
  .cform .row label{display:block;font-size:12px;font-weight:600;color:#4D6885;margin:0 0 5px}
  /* font-size:16px is load-bearing — anything smaller makes iOS Safari auto-zoom on focus,
     which was half the mobile-form bug (2026-07-22). scroll-margin-block clears the sticky
     header when the browser scrolls a focused field into view; touch-action drops tap delay. */
  .cform input,.cform textarea{width:100%;border-radius:10px;padding:11px 13px;background:#ffffff;
      border:1px solid rgba(10,37,64,.18);color:var(--navy);font:inherit;font-size:16px;outline:none;
      touch-action:manipulation;scroll-margin-block:96px 24px;transition:border-color .2s,background .2s}
  .cform input:focus,.cform textarea:focus{border-color:var(--azure);background:#ffffff}
  .cform textarea{resize:vertical;min-height:84px}
  .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
  .cbtn{appearance:none;border:0;cursor:pointer;border-radius:12px;margin-top:2px;justify-self:start;
      background:linear-gradient(135deg,var(--royal),var(--azure));color:#fff;font:inherit;font-size:14px;font-weight:600;padding:12px 22px;transition:filter .2s,transform .1s}
  .cbtn:hover{filter:brightness(1.08)}.cbtn:active{transform:translateY(1px)}
  .cbtn:focus-visible{outline:2px solid var(--azure);outline-offset:2px}
  .cform.sent .cfields{display:none}.cok{display:none;margin:4px 0 0;font-size:14px;color:#1F8A4D;font-weight:600}.cform.sent .cok{display:block}
  .cerr{display:none;margin:4px 0 0;font-size:14px;color:#A33A2E;font-weight:600}.cform.err .cerr{display:block}.cbtn:disabled{opacity:.55;cursor:default}
  a.cbtn{text-decoration:none;display:inline-flex;align-items:center;gap:8px}

  /* ---------- Consultation form DIALOG (Abdullah 2026-07-16 round 2; floating bottom-right
     button REMOVED round 5 on his order): the hero box only INVITES; clicking it or any
     "Contact us" CTA opens this form. Works without JS too — the triggers are #consult anchors
     and the wrapper shows on :target. Requests land in KV, read via tools/read_enquiries.py. ---------- */
  .cwrap{position:fixed;inset:0;z-index:300;display:none}
  .cwrap.on,.cwrap:target{display:block}
  .cscrim{position:absolute;inset:0;background:rgba(10,37,64,.5);border:0;padding:0;cursor:default}
  .cdlg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(460px,calc(100% - 32px));
      max-height:min(88vh,860px);overflow:auto;background:#fff;border-radius:20px;
      box-shadow:0 40px 90px -30px rgba(3,12,24,.6);padding:24px 26px 22px}   /* navy border-top removed 2026-07-22 (Abdullah): the opened dialog now matches the clean hero box, no top accent bar */
  .cwrap.on .cdlg,.cwrap:target .cdlg{animation:cdlgin .28s var(--ease-out)}
  @keyframes cdlgin{from{opacity:0;transform:translate(-50%,calc(-50% + 14px)) scale(.97)}
      to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
  .cdlg-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin:0 0 14px}
  .cdlg-head h2{margin:0;font-size:20px;font-weight:800;letter-spacing:-.01em;color:var(--navy);line-height:1.3}
  .cclose{flex:none;text-decoration:none;display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(10,37,64,.22);
      border-radius:999px;background:rgba(10,37,64,.04);padding:8px 14px;font-size:13.5px;font-weight:600;color:#2E4E75;
      cursor:pointer;font-family:inherit;transition:background .18s}
  .cclose:hover{background:rgba(10,37,64,.09)}
  @media(max-width:640px){
    .cdlg{left:0;right:0;top:auto;bottom:0;transform:none;width:auto;max-height:92dvh;border-radius:20px 20px 0 0;
        padding-bottom:calc(22px + env(safe-area-inset-bottom))}
    .cwrap.on .cdlg,.cwrap:target .cdlg{animation:cdlgup .3s var(--ease-out)}
    @keyframes cdlgup{from{transform:translateY(100%)}to{transform:translateY(0)}}
  }
  /* no-JS landing notes after a native form POST (303 -> /#consult-ok | /#consult-err) */
  .sent-note{display:none;position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:330;max-width:min(92vw,560px);
      background:#10331d;color:#c9f7d8;border:1px solid #2c7a4b;border-radius:12px;padding:13px 18px;font-size:14.5px;line-height:1.5}
  .sent-note:target{display:block}
  .sent-note a{color:#c9f7d8;font-weight:700;margin-left:8px}
  .sent-note.errn{background:#3a1111;color:#f7c9c9;border-color:#7a2c2c}
  .sent-note.errn a{color:#f7c9c9}
  /* while a dialog is open the dialog wins the bottom edge — the consent bar otherwise sits
     on top of the sheet's submit button (adversarial review round-2 H2); it returns above
     the scrim the moment the dialog closes */
  html.lock .consent{z-index:290}

  /* ---------- Service detail — FULL-SCREEN takeover (Abdullah 2026-07-16 round 2: "when we
     click on a tile it should cover the whole screen, like it does on the phone — no cramped,
     cheap experience"). Desktop = full-viewport panel grown from the tapped card, content in a
     generous centred two-column layout; touch/small = bottom sheet (unchanged). Back chip only —
     the X was removed on Abdullah's instruction. The grid tile itself is never transformed,
     resized or clipped (blank-tile bug class stays structurally impossible).
     Exit is faster than enter; reduced-motion = instant. ---------- */
  html.lock,html.lock body{overflow:hidden}
  /* inset:0 (was width:100vw) — 100vw exceeds the visual viewport on iOS Safari and clipped the page;
     the ~10px desktop scrollbar-gutter cosmetic is not worth the on-device mobile bug (2026-07-19). */
  .scrim{position:fixed;inset:0;background:rgba(10,37,64,.45);z-index:300;opacity:0;transition:opacity .2s ease}
  .scrim.on{opacity:1}
  .scrim.off{opacity:0;transition-duration:.14s}
  .dlg{position:fixed;z-index:310;background:#fff;display:flex;flex-direction:column;
      box-shadow:0 30px 80px -20px rgba(10,37,64,.45)}
  .dlg.mode-dialog{inset:0;border:0;border-radius:0}
  /* Sheet height is 100% CSS now (2026-07-22): top+bottom anchor it, and the viewport meta's
     interactive-widget=resizes-content lifts bottom:0 above the on-screen keyboard, so the
     .dlg-body simply scrolls. JS never writes an inline height again — that loop caused the jump. */
  .dlg.mode-sheet{left:0;right:0;bottom:0;top:max(12px,env(safe-area-inset-top));max-height:100dvh;
      border-radius:20px 20px 0 0;border:1px solid var(--line);border-bottom:0}
  .grab{display:none;width:44px;height:4px;border-radius:999px;background:rgba(10,37,64,.18);margin:10px auto 0;flex:none}
  .dlg.mode-sheet .grab{display:block}
  /* Back control hugs the top-left corner at 14px — the SAME gap the tile's icon keeps from
     its own tile edge (Abdullah 2026-08-11: "it is slightly inside… looks uneven"). The head
     row therefore starts at 14px and is NOT centred on the 1240px column; only .dlg-rest is. */
  .dlg-head{display:flex;align-items:center;gap:14px;flex:none;border-bottom:1px solid var(--line);
      padding:14px clamp(18px,4vw,64px) 14px 14px}
  .dlg.mode-dialog .dlg-head{padding-top:14px;padding-bottom:16px}
  .dlg.mode-dialog .dlg-head-in{width:100%}
  .dlg.mode-dialog .dlg-rest{width:100%;max-width:1240px;margin:0 auto}
  .dlg-head-in{display:flex;align-items:center;gap:14px;min-width:0;flex:1}
  /* top gap == left gap == 14px, so the chip hugs the corner exactly like the tile icon does */
  .dlg-head .backchip{align-self:flex-start}
  .dlg.mode-sheet .dlg-head{touch-action:none}   /* swipe zone only where swipe-to-dismiss is wired */
  .backchip{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(10,37,64,.22);border-radius:12px;
      background:rgba(10,37,64,.04);padding:9px 15px;min-height:40px;font-size:14px;font-weight:600;color:#2E4E75;
      cursor:pointer;font-family:inherit;transition:background .18s;flex:none}
  .backchip:hover{background:rgba(10,37,64,.09)}
  .backchip:active{transform:scale(.97)}
  .backchip:focus-visible{outline:2px solid var(--azure);outline-offset:2px}
  .dlg-tt{flex:1;min-width:0}
  .dlg-tt .tag{margin:0}
  .dlg-tt h3{margin:2px 0 0;font-size:clamp(17px,2.4vw,22px);font-weight:800;letter-spacing:-.01em;color:var(--navy);
      line-height:1.25;white-space:normal;overflow-wrap:break-word}   /* was nowrap+ellipsis → wraps instead of "IFRS Advisory & Implem…" (2026-07-19) */
  .dlg.mode-dialog .dlg-tt h3{font-size:clamp(20px,2.2vw,29px);white-space:normal;overflow:visible;text-overflow:clip}
  .dlg-body{overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;flex:1;padding:8px clamp(18px,4vw,64px)
      calc(22px + env(safe-area-inset-bottom))}
  .dlg.mode-dialog .dlg-body{padding-top:clamp(14px,3vh,34px)}
  .bh-ov{margin:14px 0 18px;font-size:15px;line-height:1.65;color:var(--ink-2);max-width:72ch}
  .dlg.mode-dialog .bh-ov{font-size:16.5px;line-height:1.7;max-width:66ch}
  .dlg .subs{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));column-gap:30px}
  /* full-screen layout: reading column left, actions (offer / pricing / contact) right —
     aligned to one 1240px grid, breathing room everywhere (Abdullah: obsess over alignment
     and free space). Sheet / narrow screens stack to one column in the same order. */
  .dlg-cols{display:grid;grid-template-columns:1fr;align-items:start}
  @media(min-width:1000px){
    .dlg.mode-dialog .dlg-cols{grid-template-columns:minmax(0,7fr) minmax(360px,5fr);gap:clamp(36px,5vw,88px)}
    .dlg.mode-dialog .dlg-side{position:sticky;top:6px;border:1px solid var(--line);border-radius:18px;
        padding:6px 26px 10px;background:linear-gradient(160deg,#FBFDFF,#F2F7FC)}
    .dlg.mode-dialog .dlg-main{padding-top:4px}
    .dlg.mode-dialog .subs li{font-size:15px}
  }
  /* Task D — service-tile picture carousel (marketplace-style: one slide visible,
     prev/next arrows, "N / total" counter — NOT a wrapping grid). Track width stays
     100% (relative units only, translated by percentage) so overflow:hidden on the
     viewport clips it — no fixed-width track, no page-level horizontal scroll (iOS
     100vw guard, matches the rest of this file's overflow discipline). */
  .svc-gallery{margin:16px 0 20px;max-width:100%}
  .sg-viewport{position:relative;overflow:hidden;max-width:100%;aspect-ratio:4/3;
      border-radius:14px;border:1px solid var(--line);background:var(--paper-2)}
  .sg-track{display:flex;height:100%;width:100%;transition:transform .3s var(--ease-out)}
  .sg-slide{flex:0 0 100%;max-width:100%;height:100%;min-width:0;display:flex;
      align-items:center;justify-content:center;cursor:zoom-in}
  .sg-slide img{width:100%;height:100%;max-width:100%;object-fit:cover;display:block}
  .sg-arrow{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;
      border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.92);
      display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;
      padding:0;color:var(--navy);transition:background .15s}
  .sg-arrow:hover{background:#fff}
  .sg-arrow:focus-visible{outline:2px solid var(--azure);outline-offset:2px}
  .sg-arrow svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.4;
      stroke-linecap:round;stroke-linejoin:round}
  .sg-prev{left:10px}.sg-next{right:10px}
  .sg-counter{margin:8px 0 0;font-size:12.5px;font-weight:600;color:var(--ink-3);text-align:center}
  /* /edit-only 8-slot picture editor: never rendered on the public site (see dlgHTML).
     Task E/3 reuses these same rules for the Our-Work engagement gallery editor
     (.eng-gallery-edit etc) — selector lists extended, declarations unchanged. */
  .svc-gallery-edit,.eng-gallery-edit{display:flex;flex-direction:column;gap:6px;margin:10px 0 20px}
  .eng-gallery-edit{grid-column:1/-1}                       /* span full width below gallery+bullets */
  .svc-gallery-label,.eng-gallery-label{font:700 12.5px Inter,system-ui,sans-serif;color:var(--navy);margin:0 0 2px}
  .svc-picrow,.eng-picrow{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2)}
  .svc-picrow .spr-label,.eng-picrow .epr-label{min-width:70px}
  .svc-picrow button,.eng-picrow button{font:600 12px Inter,system-ui,sans-serif;color:#fff;background:var(--azure);
      border:1px solid var(--azure);border-radius:8px;padding:5px 11px;cursor:pointer}
  .svc-picrow button.reset,.eng-picrow button.reset{background:transparent;border-color:rgba(78,124,176,.6);color:var(--azure-ink)}

  /* ---------- Our Work (after tiles, before footer; in-page expand) ---------- */
  .work{padding:2vh clamp(20px,6vw,90px) 11vh;scroll-margin-top:96px}
  .kicker{margin:0 0 8px;color:var(--azure-ink);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:12.5px}
  .work-title{margin:0;font-size:clamp(28px,4vw,46px);font-weight:800;letter-spacing:-.02em;color:var(--navy);line-height:1.05}
  .work-intro{margin:14px 0 0;max-width:720px;color:var(--ink-3);font-size:15.5px;line-height:1.6}
  .work-list{margin-top:34px;display:flex;flex-direction:column;gap:16px}
  .work-item{border:1px solid var(--line);border-radius:18px;overflow:hidden;
      background:linear-gradient(150deg,#ffffff,#F1F6FB)}
  .work-head{display:flex;align-items:center;gap:16px;width:100%;cursor:pointer;border:0;background:none;color:inherit;
      text-align:left;padding:20px 22px;font:inherit;transition:background .2s}
  .work-head:hover{background:rgba(10,37,64,.03)}
  .work-head .wmeta{flex:1;min-width:0}
  .work-head .wtag{color:var(--azure-ink);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
  .work-head h3{margin:3px 0 0;font-size:18px;font-weight:700;color:var(--navy)}
  .work-head .wtoggle{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
      border:1px solid rgba(10,37,64,.22);transition:transform .4s var(--ease),background .2s}
  .work-item.open .wtoggle{transform:rotate(180deg);background:rgba(10,37,64,.06)}
  .work-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
  .work-item.open .work-body{grid-template-rows:1fr}
  .work-inner{overflow:hidden;min-height:0}
  .work-pane{padding:2px 22px 26px;display:grid;grid-template-columns:minmax(0,1.35fr) 1fr;gap:26px;align-items:start}
  .work-bullets{list-style:none;margin:0;padding:0}
  .work-bullets li{position:relative;padding:0 0 0 18px;margin:0 0 11px;color:var(--ink-2);font-size:14.5px;line-height:1.55}
  .work-bullets li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:2px;background:var(--azure)}
  .pv-cv{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line);cursor:zoom-in;
      user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;box-shadow:0 18px 40px -26px rgba(10,37,64,.3)}
  .pv-cv:focus-visible{outline:2px solid var(--azure);outline-offset:3px}
  .pv-err{color:var(--ink-3);font-size:13px;padding:18px 0}
  .eng-gallery{max-width:100%}
  .eg-stage{position:relative;max-width:100%}
  /* Lightbox: full-resolution protected view of any Our-Work / engagement image (z 340 = above dialog 310 + consent 320) */
  .lb{position:fixed;inset:0;z-index:340;display:none;align-items:center;justify-content:center;background:rgba(10,37,64,.82);padding:clamp(12px,3vw,44px)}
  .lb.show{display:flex}
  .lb canvas{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:10px;box-shadow:0 24px 70px rgba(0,0,0,.5);cursor:default;
      user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
  .lb-x{position:absolute;top:14px;right:16px;width:42px;height:42px;border:0;border-radius:999px;background:rgba(255,255,255,.16);color:#fff;font-size:24px;line-height:1;cursor:pointer;transition:background .15s ease}
  .lb-x:hover{background:rgba(255,255,255,.28)}
  .lb-x:focus-visible{outline:2px solid #fff;outline-offset:2px}
  .lb-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;border-radius:999px;
      background:rgba(255,255,255,.16);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
      transition:background .15s ease}
  .lb-arrow:hover{background:rgba(255,255,255,.28)}
  .lb-arrow:focus-visible{outline:2px solid #fff;outline-offset:2px}
  .lb-arrow svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
  .lb-prev{left:clamp(8px,2.5vw,26px)}
  .lb-next{right:clamp(8px,2.5vw,26px)}
  .lb-n{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);margin:0;color:#fff;font-size:13px;
      font-weight:600;background:rgba(10,37,64,.5);padding:4px 12px;border-radius:999px}
  @media print{.work-canvas,.pv-cv,.lb,.eng-gallery{display:none!important}}
  .work-pane.no-img{grid-template-columns:1fr}
  @media(max-width:820px){.work-pane{grid-template-columns:1fr;gap:18px}}

  /* ---------- Stats band (Muhammad 2026-07-16: turnaround / industries before Our Work; stat.0
     "clients served" removed 2026-07-22). Figures are KV-editable via /edit; stat.2 carries
     Muhammad's live override. Deep navy band = the dark accent he asked for. ---------- */
  .stats{padding:52px clamp(20px,6vw,90px);background:linear-gradient(135deg,#0A2540,#123055);scroll-margin-top:76px}
  .stats-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(56px,10vw,140px);max-width:1080px;margin:0 auto;text-align:center}
  .stat-n{margin:0;font-size:clamp(30px,4vw,46px);font-weight:800;letter-spacing:-.02em;color:#fff}
  .stat-l{margin:7px 0 0;font-size:14.5px;font-weight:600;color:#B9CBE0}
  @media(max-width:640px){.stats{padding:38px 20px}.stats-grid{flex-direction:column;gap:24px}}

  /* ---------- Footer — dark navy (Muhammad 2026-07-16: same layout, dark blue brand theme) ---------- */
  .footer{border-top:1px solid rgba(255,255,255,.12);padding:54px clamp(20px,6vw,90px) 28px;
      background:linear-gradient(180deg,#0A2540,#071930)}
  .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:38px;max-width:1300px}
  .foot-brand .brand{flex-direction:column;align-items:flex-start;gap:7px}
  .foot-brand .brand-mark{height:40px}.foot-brand .brand-word{height:13px}
  .foot-tag{margin:16px 0 0;color:#AFC3D9;font-size:14px;line-height:1.6;max-width:310px}
  .foot-emails{margin:16px 0 0;display:flex;flex-direction:column;gap:6px}
  .foot-emails a{color:#C6D6E9;text-decoration:none;font-size:14px;width:fit-content;transition:color .2s}
  .foot-emails a:hover{color:#fff;text-decoration:underline}
  .foot-col{position:relative}                       /* Task C — anchors the edit-mode show switch */
  .foot-col.is-hidden{opacity:.45}
  .foot-col h4{margin:0 0 14px;color:#fff;font-size:13px;font-weight:700;letter-spacing:.04em}
  .foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
  .foot-col a{color:#A9BED8;text-decoration:none;font-size:14px;transition:color .2s}
  .foot-col a:hover{color:#fff}
  .foot-cov{margin:0;color:#AFC3D9;font-size:13.5px;line-height:1.85}
  .foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
      max-width:1300px;margin-top:42px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);color:#8FA6C0;font-size:13px}
  .foot-legal{display:flex;gap:18px;flex-wrap:wrap}
  .foot-legal a{color:#A9BED8;text-decoration:none}.foot-legal a:hover{color:#fff}
  .foot-social{display:flex;align-items:center;gap:12px}
  .foot-social a{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;
      border:1px solid rgba(255,255,255,.24);color:#C6D6E9;transition:background .2s,color .2s}
  .foot-social a:hover{background:rgba(255,255,255,.1);color:#fff}
  .totop{cursor:pointer;border:1px solid rgba(255,255,255,.24);background:none;color:#C6D6E9;border-radius:9px;
      padding:8px 14px;font:inherit;font-size:13px;transition:background .2s,color .2s}
  .totop:hover{background:rgba(255,255,255,.1);color:#fff}
  @media(max-width:880px){.foot-grid{grid-template-columns:1fr 1fr;gap:28px}.foot-bottom{justify-content:flex-start}}
  @media(max-width:520px){.foot-grid{grid-template-columns:1fr}}

  /* ---------- Consent / cookie banner (default-deny non-essential; re-openable from footer) ---------- */
  .consent{position:fixed;left:0;right:0;bottom:0;z-index:320;display:none;padding:18px clamp(16px,4vw,40px);   /* above the dialog scrim/panel (310) so consent stays clickable (review H2) */
      background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(243,248,252,.98));border-top:1px solid rgba(10,37,64,.15);
      box-shadow:0 -16px 40px -26px rgba(10,37,64,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .consent.show{display:block;animation:cslide .4s var(--ease)}
  @keyframes cslide{from{transform:translateY(100%)}to{transform:translateY(0)}}
  .consent-in{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
  .consent p{margin:0;flex:1;min-width:260px;color:var(--ink-2);font-size:13.5px;line-height:1.55}
  .consent a{color:#2E4E75}
  .consent-btns{display:flex;gap:10px;flex-wrap:wrap}
  .cbtn2{cursor:pointer;border-radius:10px;padding:10px 16px;font:inherit;font-size:13.5px;font-weight:600;
      border:1px solid rgba(10,37,64,.25);background:none;color:#2E4E75;transition:background .2s,color .2s,filter .2s}
  .cbtn2:hover{background:rgba(10,37,64,.06);color:var(--navy)}
  .cbtn2.primary{border:0;background:linear-gradient(135deg,var(--royal),var(--azure));color:#fff}
  .cbtn2.primary:hover{filter:brightness(1.08)}

  /* ---------- Liquid-glass button language (Abdullah 2026-07-16 round 3): every secondary
     button shares one calm glass finish — translucent, blurred, a single specular top edge,
     deliberately NOT glossy. Primary CTAs (.cta/.cbtn) stay solid gradient. ---------- */
  .backchip,.cclose,.more,.totop,.cbtn2{
      background:linear-gradient(165deg,rgba(255,255,255,.72),rgba(243,248,253,.42));
      -webkit-backdrop-filter:blur(14px) saturate(1.45);backdrop-filter:blur(14px) saturate(1.45);
      border:1px solid rgba(10,37,64,.16);color:#1F3A5C;
      box-shadow:0 10px 26px -14px rgba(10,37,64,.38),inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.4)}
  .backchip:hover,.cclose:hover,.more:hover,.totop:hover,.cbtn2:hover{
      background:linear-gradient(165deg,rgba(255,255,255,.92),rgba(243,248,253,.62));color:var(--navy);
      box-shadow:0 14px 30px -14px rgba(10,37,64,.44),inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.5)}
  /* .totop sits on the DARK footer — the light-glass fill above would drop its text to ~2.5:1;
     give it the dark-surface glass variant (review round-3 M4) */
  .totop{background:linear-gradient(165deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
      border-color:rgba(255,255,255,.35);color:#C6D6E9;
      box-shadow:0 10px 26px -14px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.25)}
  .totop:hover{background:linear-gradient(165deg,rgba(255,255,255,.22),rgba(255,255,255,.1));color:#fff;
      box-shadow:0 10px 26px -14px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.3)}
  /* the dialog's back control, upgraded (round 3: "back button looks cheap"): a proper pill
     with a navy arrow chip that nudges left on hover */
  .backchip{gap:10px;padding:7px 18px 7px 7px;min-height:44px;font-size:14.5px;border-radius:12px}
  .backchip .bc-i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;
      background:linear-gradient(135deg,var(--navy),#2E5077);box-shadow:0 6px 14px -6px rgba(10,37,64,.55)}
  .backchip .bc-i svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.2;
      stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease-out)}
  .backchip:hover .bc-i svg{transform:translateX(-2px)}

  /* narrow screens: headline first, consultation card stacked beneath it.
     Top clearance (iPad fix, Abdullah 2026-07-18): flex-start + zero top padding put the
     headline UNDER the absolute header on tablets — clear the permanent bar (--sbh) plus
     the header's real height (18px pads ×2 + logo 53px + 6px gap + wordmark 18px) + air. */
  @media(max-width:980px){
    .hero{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
      padding-top:calc(var(--sbh,58px) + 113px + 14px)}
    .hero-in{order:-1;max-width:82%}
    .consult{flex:0 0 auto;width:100%;max-width:480px;margin:34px auto 44px;align-self:auto}
  }
  /* phones: single-column grid; the detail panel opens as a bottom sheet. */
  @media(max-width:640px){
    .tile-card{min-height:0;padding:13px 13px 10px}
    .nav{gap:4px}.navlink{padding:8px 9px;font-size:13.5px}.cta{padding:9px 13px;font-size:13.5px}
    /* Hero on phones: LEFT-aligned and top-anchored, sized to its own content —
       not the desktop's right-aligned block forced to 80vh, which left "Financial
       Advisory" floating in a near-empty screen (Abdullah, 2026-07-14). */
    /* top clearance = permanent bar (--sbh) + the header's real height (18px pads ×2 + logo
       clamps + 6px gap) + 14px air — a fixed 104px fell behind the vw-scaled logo above ~460px
       width (adversarial review 2026-07-14); +var(--sbh) since the bar went permanent (2026-07-18) */
    .hero{min-height:auto;
      padding:calc(var(--sbh,52px) + 56px + clamp(35px,8vw,53px) + clamp(12px,2.8vw,18px)) clamp(20px,6vw,90px) 8px}
    .hero-in{max-width:100%;text-align:left;margin-left:0}
    .hero-h{font-size:clamp(27px,7.4vw,36px)}
    .hero-countries{margin-top:13px;line-height:1.7}
    .hero-sub{margin:15px 0 0;max-width:100%}
    .consult{margin:26px auto 30px;padding:20px 18px 16px}
    /* phones don't need the desktop's tall section tails (16vh/11vh ≈ 135/93px of dead space) */
    .services{padding-top:30px;padding-bottom:46px}
    .work{padding-bottom:42px}
    .sec-head{margin-bottom:20px}
    .grid{grid-template-columns:1fr;gap:16px}
  }
  @media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.001ms!important}}


/* ===================== Service pages (generated) =====================
   Appended by tools/build_service_pages.py. Everything above this line is the
   home page's own CSS, lifted verbatim out of prototype.html — do not edit it
   here, edit prototype.html and rebuild. Everything below is scoped to
   .svcpg-body / .svcpg so it can never change how the home page looks.
   These pages carry no JavaScript, so nothing below may depend on it. */
.svcpg-body{--sbh:58px}
.svcpg-fade{opacity:.5}
.svcpg{position:relative;z-index:1;padding:calc(var(--sbh) + 118px) clamp(20px,6vw,90px) 70px}
/* left-aligned, not centred — matches .sec-head on the home page, and keeps the
   text column on the same gutter as the logo in .top */
.svcpg-in{max-width:820px}
.svcpg-in.svcpg-wide{max-width:1180px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 22px;font-size:13px;color:var(--ink-3)}
.crumbs a{color:var(--azure-ink);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumb-sep{color:rgba(10,37,64,.3)}
.svcpg h1{margin:0;font-size:clamp(30px,4.6vw,46px);font-weight:800;letter-spacing:-.02em;
  line-height:1.1;color:var(--navy)}
.svcpg h2{margin:44px 0 14px;font-size:clamp(20px,2.4vw,26px);font-weight:700;
  letter-spacing:-.01em;color:var(--navy)}
.svcpg h3{margin:0;font-size:19px;font-weight:700;color:var(--navy);line-height:1.3}
.svcpg-lede{margin:16px 0 0;font-size:17px;line-height:1.65;color:var(--ink-2);max-width:70ch}
.svcpg-p{margin:0;font-size:15.5px;line-height:1.7;color:var(--ink-2);max-width:70ch}
.svcpg-act{margin:26px 0 0}
.svcpg .subs{margin:0}
.svcpg .subs li{font-size:15.5px}
.svcpg .offer li{font-size:15.5px}
.faqs{display:grid;gap:0;border-top:1px solid var(--line)}
.faq{border-bottom:1px solid var(--line)}
/* flex, not float — a two-line question would otherwise push the +/- onto its
   own line on narrow screens */
.faq summary{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;
  cursor:pointer;list-style:none;padding:16px 0;font-size:16px;font-weight:600;
  color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;color:var(--azure);font-weight:600;line-height:1.4}
.faq[open] summary::after{content:"\2212"}
.faq-a{margin:0 0 18px;font-size:15px;line-height:1.7;color:var(--ink-2);max-width:70ch}
.rel{display:flex;flex-wrap:wrap;gap:10px}
.rel-link{display:inline-block;padding:9px 14px;border-radius:11px;font-size:14px;
  font-weight:600;text-decoration:none;color:var(--azure-ink);background:#EDF4FA;
  border:1px solid rgba(78,124,176,.32);transition:background .2s,color .2s}
.rel-link:hover{background:#E2ECF6;color:var(--navy)}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;
  margin:34px 0 0}
.hub-card{display:flex;flex-direction:column;gap:9px;padding:22px;border-radius:var(--radius);
  text-decoration:none;background:linear-gradient(160deg,#EDF4FA,#E2ECF6 55%,#D8E5F2);
  border:1px solid rgba(78,124,176,.3);transition:transform .2s,box-shadow .2s}
@media(hover:hover){.hub-card:hover{transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(10,37,64,.13)}}
.hub-ov{margin:0;font-size:14px;line-height:1.55;color:var(--ink-2)}
.hub-more{margin-top:auto;padding-top:8px;font-size:13.5px;font-weight:700;color:var(--azure-ink)}
/* "Talk to us" — a real form on the page. .cfields has no standalone rule in
   prototype.html (the dialog sets it inline), so it is declared here. */
.svcpg-talk{margin:56px 0 0;padding:30px clamp(20px,3.4vw,36px) 34px;border-radius:var(--radius);
  background:linear-gradient(160deg,#FBFDFE,#EFF5FB 60%,#E6EFF8);
  border:1px solid rgba(78,124,176,.3);max-width:660px}
.svcpg-talk h2{margin:14px 0 0;font-size:clamp(21px,2.4vw,27px)}
.svcpg-talk .svcpg-p{margin:10px 0 22px;font-size:15px}
/* The fields, their focus states and the honeypot are already styled by .cform in
   the block above (lifted from prototype.html) — do not restyle them here. Only
   .cfields is missing: the home page sets it inline on the dialog. */
.svcpg-talk .cfields{display:grid;gap:13px}
@media(max-width:760px){
  .svcpg{padding-top:calc(var(--sbh) + 96px)}
  .svcpg-lede{font-size:16px}
}