/* gadgrowth injected styles, consolidated 2026-08-08, extended 2026-08-25. These nine blocks were inline on every page - about 9.8 KB of identical CSS re-sent with each HTML response. One immutable file instead. The filename carries a date because .htaccess serves .css immutable for a year: changing this file means writing a NEW name, never editing in place. */ /* ---- gg-hide ---- */ .roas-panel-lux,.reach-panel-lux,.cpl-panel-lux,.outcome-feature{display:none!important} /* ---- rec-tr-css ---- */ .rec-tr{margin-top:15px;border-top:1px solid #ffffff14;padding-top:12px}.rec-tr summary{cursor:pointer;list-style:none;font-size:.76rem;letter-spacing:.14em;color:#c9a96e}.rec-tr summary::-webkit-details-marker{display:none}.rec-tr summary::before{content:"+ "}.rec-tr[open] summary::before{content:"\2212 "}.rec-tr p{margin:11px 0 0;font-size:.92rem;line-height:1.95;color:#f4efe5e6} /* ---- pf-css ---- */ .pf-lux{background:#0d0e16;color:#f4efe5;padding:clamp(56px,8vw,104px) clamp(20px,5vw,64px)}.pf-in{max-width:1180px;margin:0 auto}.pf-k{margin:0 0 14px;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:#d4a94a}.pf-lux h2{margin:0 0 14px;font-family:Georgia,serif;font-size:clamp(1.6rem,3.4vw,2.5rem);line-height:1.25;color:#fbf7ef}.pf-lede{margin:0;max-width:62ch;color:#f4efe5b8;line-height:1.65}.pf-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,64px);margin-top:clamp(30px,4vw,52px);align-items:start}.pf-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(90px,2.1fr) auto;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid #ffffff12}.pf-row:last-child{border-bottom:0}.pf-name{font-size:.9rem;color:#f4efe5cc}.pf-track{position:relative;height:8px;border-radius:99px;background:#ffffff14;overflow:hidden}.pf-track i{display:block;height:100%;border-radius:99px;background:#6f6a5e}.pf-num{font-family:Georgia,serif;font-size:1.02rem;color:#f4efe5a8;min-width:1.4em;text-align:end}.pf-row.is-mine .pf-name{color:#fbf7ef;font-weight:600}.pf-row.is-mine .pf-track i{background:#d4a94a}.pf-row.is-mine .pf-num{color:#e9c877}.pf-facts{margin:0 0 26px;display:grid;gap:14px}.pf-facts dt{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:#f4efe580;margin-bottom:5px}.pf-facts dd{margin:0;font-family:Georgia,serif;font-size:1.05rem;color:#fbf7ef;line-height:1.4}.pf-sub{display:block;margin-top:4px;font-family:inherit;font-size:.82rem;color:#f4efe595}.pf-peers-k{margin:0 0 12px;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:#f4efe580}.pf-peers{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}.pf-peers a{display:inline-block;padding:7px 13px;border:1px solid #ffffff1f;border-radius:99px;font-size:.82rem;color:#f4efe5cc;text-decoration:none;transition:border-color .2s,color .2s}.pf-peers a:hover,.pf-peers a:focus-visible{border-color:#d4a94a;color:#fbf7ef}.pf-note{margin:0;color:#f4efe5a0;font-size:.9rem}[dir="rtl"] .pf-lux h2{line-height:1.5}[dir="rtl"] .pf-lede,[dir="rtl"] .pf-note{line-height:1.95}[dir="rtl"] .pf-facts dd{line-height:1.75}@media(max-width:860px){.pf-grid{grid-template-columns:1fr;gap:34px}.pf-row{grid-template-columns:minmax(0,1fr) minmax(70px,1.4fr) auto}}@media(max-width:430px){.pf-row{grid-template-columns:1fr auto;gap:8px 12px}.pf-track{grid-column:1/-1;order:3}.pf-k{font-size:.78rem}.pf-facts dt,.pf-peers-k{font-size:.74rem}} /* ---- bz-css ---- */ .bz-lux{background:#0a1424;color:#f4efe5;padding:clamp(56px,8vw,104px) clamp(20px,5vw,64px)}.bz-in{max-width:1180px;margin:0 auto}.bz-k{margin:0 0 12px;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:#d4a94a}.bz-lux h2{margin:0 0 34px;font-family:Georgia,serif;font-size:clamp(1.6rem,3.4vw,2.5rem);line-height:1.25;color:#fbf7ef}.bz-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,4vw,64px);align-items:start}.bz-is{margin:0 0 26px;font-size:1.04rem;line-height:1.72;color:#f4efe5de}.bz-facts{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 26px}.bz-facts dt{font-size:.67rem;letter-spacing:.18em;text-transform:uppercase;color:#f4efe585;margin-bottom:4px}.bz-facts dd{margin:0;font-family:Georgia,serif;font-size:1rem;line-height:1.45;color:#fbf7ef}.bz-tax{position:relative;margin-bottom:30px}.bz-tax-k{margin:0 0 16px;font-size:.67rem;letter-spacing:.18em;text-transform:uppercase;color:#f4efe585}.bz-spine{position:absolute;inset-inline-start:9px;top:44px;bottom:10px;width:1px;background:linear-gradient(#d4a94a,#d4a94a33)}.bz-lines{list-style:none;margin:0;padding:0;display:grid;gap:11px}.bz-lines li{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;padding-inline-start:2px}.bz-n{position:relative;z-index:1;width:19px;height:19px;border-radius:99px;background:#0a1424;border:1px solid #d4a94a80;color:#e9c877;font-size:.6rem;display:grid;place-items:center;font-variant-numeric:tabular-nums}.bz-l{font-size:.95rem;color:#f4efe5e0;line-height:1.5}.bz-hard{border-top:1px solid #ffffff14;padding-top:20px}.bz-hard-k{margin:0 0 10px;font-size:.67rem;letter-spacing:.18em;text-transform:uppercase;color:#d4a94a}.bz-hard p{margin:0;font-size:.97rem;line-height:1.72;color:#f4efe5c4}[dir="rtl"] .bz-lux h2{line-height:1.5}[dir="rtl"] .bz-is,[dir="rtl"] .bz-hard p,[dir="rtl"] .bz-l{line-height:1.95}[dir="rtl"] .bz-facts dd{line-height:1.75}@media(max-width:860px){.bz-grid{grid-template-columns:1fr;gap:34px}.bz-facts{grid-template-columns:1fr;gap:15px}}@media(max-width:430px){.bz-k{font-size:.78rem}.bz-tax-k,.bz-facts dt,.bz-hard-k{font-size:.73rem}} /* ---- oc-css ---- */ /* the generic three statements and their invented 74/83/92% gauges are replaced by the per-client block below. Hiding by CSS only — the markup belongs to React and rewriting its text nodes crashed the page once already. */.case-outcomes{display:none!important}.oc-lux{background:#0d0e16;color:#f4efe5;padding:clamp(56px,8vw,104px) clamp(20px,5vw,64px)}.oc-in{max-width:1180px;margin:0 auto}.oc-k{margin:0 0 12px;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:#d4a94a}.oc-lux h2{margin:0 0 12px;font-family:Georgia,serif;font-size:clamp(1.6rem,3.4vw,2.5rem);line-height:1.25;color:#fbf7ef}.oc-note{margin:0 0 36px;max-width:64ch;font-size:.95rem;line-height:1.7;color:#f4efe5a8}.oc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}.oc-item{border-top:1px solid #ffffff1f;padding-top:18px}.oc-n{display:block;margin-bottom:12px;font-family:Georgia,serif;font-size:1.5rem;color:#d4a94a;font-variant-numeric:tabular-nums}.oc-item p{margin:0;font-size:1rem;line-height:1.68;color:#f4efe5de}[dir="rtl"] .oc-lux h2{line-height:1.5}[dir="rtl"] .oc-item p,[dir="rtl"] .oc-note{line-height:1.95}@media(max-width:860px){.oc-grid{grid-template-columns:1fr;gap:26px}}@media(max-width:430px){.oc-k{font-size:.78rem}} /* ---- ws-css ---- */ /* These two sections ran word for word on all 27 case studies. Hidden in CSS only — the markup is React’s and rewriting its text nodes crashed the site once. */.case-system,.case-execution{display:none!important}.ws-lux{background:#0a1424;color:#f4efe5;padding:clamp(56px,8vw,104px) clamp(20px,5vw,64px)}.ws-in{max-width:min(1180px,100%);margin:0 auto}.ws-k{margin:0 0 12px;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:#d4a94a}.ws-lux h2{margin:0 0 14px;font-family:Georgia,serif;font-size:clamp(1.6rem,3.4vw,2.5rem);line-height:1.25;color:#fbf7ef}.ws-lede{margin:0 0 38px;max-width:62ch;font-size:.97rem;line-height:1.7;color:#f4efe5a8}.ws-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}.ws-item{min-width:0;border-top:1px solid #ffffff1f;padding-top:18px}.ws-n{display:block;margin-bottom:10px;font-family:Georgia,serif;font-size:1.3rem;color:#d4a94a;font-variant-numeric:tabular-nums}.ws-item h3{margin:0 0 8px;font-size:1.02rem;line-height:1.4;color:#fbf7ef;font-weight:600;overflow-wrap:anywhere}.ws-item p{margin:0;font-size:.94rem;line-height:1.65;color:#f4efe5c4;overflow-wrap:anywhere}[dir="rtl"] .ws-lux h2{line-height:1.5}[dir="rtl"] .ws-item p,[dir="rtl"] .ws-lede,[dir="rtl"] .ws-item h3{line-height:1.9}@media(max-width:860px){.ws-grid{grid-template-columns:minmax(0,1fr);gap:26px}}@media(max-width:430px){.ws-k{font-size:.78rem}} /* ---- sv-css ---- */ .sv-lux{background:#0a1424;color:#f4efe5;padding:clamp(56px,8vw,104px) clamp(20px,5vw,64px)}.sv-in{max-width:1180px;margin:0 auto}.sv-k{margin:0 0 12px;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:#d4a94a}.sv-lux h2{margin:0 0 20px;font-family:Georgia,serif;font-size:clamp(1.6rem,3.4vw,2.5rem);line-height:1.25;color:#fbf7ef}.sv-is{margin:0 0 38px;max-width:70ch;font-size:1.04rem;line-height:1.72;color:#f4efe5de}.sv-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(26px,3.5vw,52px);align-items:start}.sv-col h3{margin:0 0 15px;font-size:.67rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:#f4efe585}.sv-col.is-ex h3{color:#c9a96e}.sv-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}.sv-col li{position:relative;padding-inline-start:20px;font-size:.94rem;line-height:1.55;color:#f4efe5d6}.sv-col li::before{position:absolute;inset-inline-start:0;top:.08em;color:#d4a94a;font-size:.9em}.sv-col.is-dl li::before{content:"—"}.sv-col.is-ex li::before{content:"×";color:#f4efe566}.sv-col.is-sg li::before{content:"↗"}.sv-col.is-ex li{color:#f4efe5a8}[dir="rtl"] .sv-lux h2{line-height:1.5}[dir="rtl"] .sv-is,[dir="rtl"] .sv-col li{line-height:1.95}@media(max-width:860px){.sv-cols{grid-template-columns:1fr;gap:30px}}@media(max-width:430px){.sv-k{font-size:.78rem}.sv-col h3{font-size:.73rem}} /* ---- a11y-css ---- */ /* WCAG 2.2 AA wants a 24x24 CSS-px target. These two measured 22px and 18px tall at 390px, so the padding is what lifts them over the line — the box counts, not the text. */.recs-src{display:inline-block;padding:6px 2px}.article-toc a{display:inline-block;padding:4px 0}.sv-cols{grid-template-columns:repeat(3,minmax(0,1fr))}@media(max-width:860px){.sv-cols{grid-template-columns:minmax(0,1fr)}}.sv-col,.sv-col li,.sv-col h3{min-width:0;overflow-wrap:anywhere}.sv-in,.bz-in,.pf-in,.oc-in{max-width:min(1180px,100%)} /* ============================================================================ Arabic typography + accessibility pass - 2026-08-25 Appended to the 2026-08-08 consolidation. Additive and reversible: delete this block and the file reverts to its previous behaviour. Every selector below failed a live probe at 390 / 1280 / 1900px, EN and AR. ============================================================================ */ /* --- 1 - ARABIC LETTER JOINS ------------------------------------------------ Arabic is a joined script: any letter-spacing above zero visibly disconnects the letters. 123 elements on the AR pages carried 1.32px-2.75px of tracking. Zero it wherever Arabic renders, then restore tracking on the Latin-only display marks (the wordmark, the monogram, the language switch). */ html[lang="ar"] :is(p,h1,h2,h3,h4,h5,h6,li,a,span,strong,em,b,i, button,summary,dt,dd,label,figcaption,div,td,th, blockquote,legend,time,small){letter-spacing:0 !important} html[lang="ar"] body .contact-lux .contact-actions a, html[lang="ar"] .contact-actions a{letter-spacing:0 !important} html[lang="ar"] :is(.brand-mark strong,.brand-mark i,.language-switch){letter-spacing:.10em !important} /* --- 2 - ARABIC LINE BOXES -------------------------------------------------- An Arabic glyph box runs about 1.9x the font size - ascenders and descenders both run deeper than Latin. Floors: headings 1.45, body 1.9. Scoped to the exact selectors that measured below the floor, so headings that were already correct are not tightened. */ html[lang="ar"] .hero-lux .hero-copy-lux h1{line-height:1.5 !important} html[lang="ar"] .hero-lux .hero-copy-lux p.overline{line-height:1.9 !important} html[lang="ar"] .scope-lux .sv-in h2{line-height:1.45 !important} html[lang="ar"] .case-brief .case-statement h2{line-height:1.5 !important} html[lang="ar"] :is(.bz-facts,.pf-facts) :is(dt,dd){line-height:1.9 !important} /* --- 3 - MINIMUM READABLE TYPE ---------------------------------------------- Kickers, counters and definition terms rendered at 9.6px-11.7px. Floor them at 12px in both languages. */ :is(.sv-k,.oc-k,.ws-k,.bz-k,.pf-k,.recs-kicker){font-size:12px !important} :is(.bz-tax-k,.pf-peers-k){font-size:12px !important} .sv-cols .sv-col h3{font-size:12px !important} :is(.bz-facts,.pf-facts) dt{font-size:12px !important} .bz-lines .bz-n{font-size:12px !important} /* --- 4 - LAYOUT STABILITY (CLS) --------------------------------------------- The App Router discards width/height attributes on hydration, so the intrinsic ratio has to come from CSS. Portrait is 1400x1750. */ img[src$="abdelrahman-portrait.webp"]{aspect-ratio:1400/1750} /* --- 5 - TOUCH TARGET ------------------------------------------------------ The language switch measured 50x31 at 390px. */ .language-switch{min-height:44px !important;display:inline-flex !important;align-items:center !important} /* --- 6 - INK ON PAPER (site-wide WCAG AA fail) ------------------------------- .principle-grid p rendered rgba(7,16,31,.58) on the cream paper #f4efe5 = 4.498:1 against a 4.5 floor. Three paragraphs on every one of the 54 case pages, both languages. .62 lifts it to 5.13:1. This selector only ever appears on the cream paper - verified across EN and AR case pages - so darkening the ink cannot invert anywhere. */ .principle-grid p{color:rgba(7,16,31,.62) !important} /* --- 7 - LANGUAGE SWITCH LABEL ---------------------------------------------- The control carries the OTHER language's name: Arabic on the EN pages, Latin on the AR pages. So the tracking rule inverts. */ html[lang="en"] .language-switch{letter-spacing:0 !important} /* --- 8 - REMAINING ARABIC LINE BOXES (service, stage and article templates) -- Found by scanning one page of every template at 390 / 1280 / 1900 rather than by guessing: these three selectors are the only ones left below the Arabic floor anywhere on the site. Each names its own element so a later class-only rule cannot out-specify it. */ html[lang="ar"] .service-hero .service-hero-copy p{line-height:1.9 !important} html[lang="ar"] .stg-lux .stg-in h2{line-height:1.45 !important} html[lang="ar"] .ag-body p.ag-lede{line-height:1.9 !important} /* --- 9 - ARTICLE TABLE OF CONTENTS ----------------------------------------- "IN THIS GUIDE" and the read-time both rendered 10.7px. Both languages. */ .ag-toc p, .ag-toc p.ag-meta{font-size:12px !important} /* --- 10 - BIDI REORDERING OF LATIN RUNS INSIDE RTL -------------------------- Latin text containing a neutral character (an em dash, a slash) inside an RTL context is reordered by the bidi algorithm and reads backwards. Measured by comparing the rendered x of the first glyph against the last, not by eye: "2012-NOW" rendered "NOW-2012" "05 / EVIDENCE STANDARD" rendered "EVIDENCE STANDARD / 05" "02 / FIT", "07 / FAQ", "08 / OPERATING PRINCIPLES" likewise. plaintext, not direction:ltr - these same classes also carry Arabic labels elsewhere ("02 / المنهج"), and plaintext takes its direction from the first strong character, so each instance resolves itself. Verified: the five Latin runs flip, the Arabic ones do not move, and no box shifts by a pixel. */ html[lang="ar"] .section-index, html[lang="ar"] .panel-title i{unicode-bidi:plaintext !important} /* --- 11 - EMPTY GRID CELLS (the visible "empty sections") ------------------- .impact-board declares a grid for FOUR panels and only ONE renders: >=1280px 2 cols x rows 420px 310px -> an empty framed column + 310px below 768-1279 1 col x rows 400 360 330 330 -> 1022px of void <=767 1 col x rows 430 390 410 400 -> 1202px of void Every child of .trajectory-panel except the title is position:absolute, so the panel has NO intrinsic height - it is sized entirely by its grid row, and the panel is overflow:hidden. That is why collapsing the row to auto blanks the chart. The fix keeps row 1 at the value the design already uses and drops the rows/columns that have nothing to put in them. Measured, not guessed; verified at 390/768/1280 with the canvas still painting and zero clipping. */ .impact-board:has(> :only-child){grid-template-columns:minmax(0,1fr)!important;grid-template-rows:430px!important} @media(min-width:1280px){.impact-board:has(> :only-child){grid-template-rows:420px!important}} /* --- 12 - SCOPE COLUMNS ----------------------------------------------------- .sv-cols was pinned to repeat(3,...) by an earlier pass while the section only ever renders TWO columns, leaving an empty third. auto-fit tracks the real child count at every breakpoint. */ .sv-cols{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important} /* --- 13 - RECOMMENDATION CARDS ---------------------------------------------- Equal-height grid rows left up to 299px of dead space under the shorter testimonial's attribution. Letting the quote grow pins the attribution to the card's bottom edge, so both cards' names align. */ .recs-grid > .rec-card{display:flex!important;flex-direction:column!important} .recs-grid > .rec-card > blockquote{flex:1 1 auto!important} /* --- 14 - ARABIC BRAND RIBBON WAS PERMANENTLY EMPTY ------------------------- The logo marquee animates with a NEGATIVE translateX. In LTR the track's content runs 0 -> +10260px, so the viewport window always lands on logos. Under RTL the same track lays out -8748 -> +1322, so within seconds the window runs off the end of the content and the cream band renders with ZERO logos for most of the 58s loop. Measured live: visible logo count was 0 at every sample, items sitting at x -11934..-1864 against a 1512 viewport. The ribbon carries brand marks, not language, so laying the track out LTR is correct and makes the existing keyframes work. Verified live: 0 -> 6 logos visible at every sample, transform advancing normally. NOTE: a CSS animation never runs inside a hidden/background frame, so this class of bug CANNOT be reproduced in an iframe probe - test it in a real tab. */ html[lang="ar"] .brand-ribbon{direction:ltr!important} /* --- 15 - DECORATIVE WebGL SCENE REMOVED - 2026-08-25 ------------------------ Every page allocated a WebGL2 drawing buffer of 1184x1024 (1.2 megapixels) plus a 168 KB three.js chunk, purely for the decorative geometry behind the hero. Chrome allows only ~16 live WebGL contexts browser-wide, so on a loaded machine these pages were the first to be refused a context and the first whose renderer died with "This page couldn't load". It is also the single biggest item on the mobile performance budget (a measured 374 ms long task on the main thread). Hiding the container stops the layer being composited and stops the scene's visibility-driven render loop. Purely presentational - no content, no link and no heading lives inside .luxury-scene. REVERSIBLE: delete this block and the scene comes back. */ .luxury-scene{display:none !important} /* --- 16 - RELATED WORK GRID OVERFLOWED BETWEEN 761px AND ~1000px ------------ .related-work > div used three FIXED 311px columns (933px + gaps) inside a 661px container, so the service pages scrolled sideways by 227px. The mobile rule that collapses it starts at max-width:760px, leaving that band exposed. auto-fit tracks the available width at every size instead. Measured: 768px overflow 227 -> 0; 1024 and 1280 unchanged. */ .related-work > div{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important} /* --- 17 - CASE PAGE GRIDS OVERFLOWED IN THE SAME 761-1100px BAND ------------ Same defect class as block 16, two more containers: .principle-grid 325px 325px 325px -> 269px of sideways scroll at 768px .next-case 170px 220px ... -> the remaining 17px The mobile rules that collapse both start at max-width:760px, so every tablet and small-laptop width fell through the gap. Measured EN + AR: 768 -> 0, 1024 and 1280 unchanged. */ .principle-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))!important} .next-case{grid-template-columns:minmax(0,170px) minmax(0,220px) minmax(0,1fr) auto!important} /* --- 18 - CONTACT FORM ------------------------------------------------------- Replaces three outbound hand-offs with structured capture. No backend and no third-party account: the form composes a complete brief and hands it to WhatsApp (or email) already written, so nothing is lost and the visitor never faces an empty compose box. Contrast measured on the live section: labels 5.11:1, buttons 9.7 and 6.12:1, note 5.79:1. All targets >= 44px. */ .gg-form{margin-top:38px;max-width:620px;display:grid;gap:14px} html[dir="rtl"] .gg-form{margin-inline:0 auto} .gg-form .row{display:grid;gap:14px;grid-template-columns:1fr 1fr} @media(max-width:620px){.gg-form .row{grid-template-columns:1fr}} .gg-field{display:flex;flex-direction:column;gap:7px} .gg-field label{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:rgba(244,239,229,.55);font-family:Arial,sans-serif} html[lang="ar"] .gg-field label{letter-spacing:0;font-size:11px} .gg-field input,.gg-field textarea{background:rgba(7,16,31,.5);border:1px solid rgba(201,169,110,.28);border-radius:2px;padding:13px 14px;color:#f4efe5;font-family:inherit;font-size:15px;line-height:1.5;width:100%;transition:border-color .18s ease} .gg-field textarea{min-height:104px;resize:vertical} .gg-field input::placeholder,.gg-field textarea::placeholder{color:rgba(244,239,229,.42)} .gg-field input:focus,.gg-field textarea:focus{outline:none;border-color:#d6b56f} .gg-field input:focus-visible,.gg-field textarea:focus-visible{outline:2px solid #d6b56f;outline-offset:1px} .gg-form-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:4px} .gg-send{appearance:none;border:0;cursor:pointer;background:#d6b56f;color:#07101f;font-family:Arial,sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:16px 30px;border-radius:2px;font-weight:700;min-height:48px;transition:background .18s ease} html[lang="ar"] .gg-send{letter-spacing:0;font-size:14px} .gg-send:hover{background:#e5ca93} .gg-send:focus-visible{outline:2px solid #f4efe5;outline-offset:2px} .gg-alt{background:none;border:0;cursor:pointer;color:rgba(244,239,229,.62);font-family:Arial,sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;padding:12px 4px;min-height:44px} html[lang="ar"] .gg-alt{letter-spacing:0;font-size:13px} .gg-alt:hover{color:#d6b56f} .gg-note{font-size:12.5px;line-height:1.6;color:rgba(244,239,229,.60);max-width:52ch;margin:2px 0 0} .gg-err{color:#e8a0ae;font-size:12.5px;margin:0;display:none} .gg-form.shown .gg-err.on{display:block} /* --- 19 - CONTACT BLOCK ON PAGES THAT HAD NONE ------------------------------- Only the two homepages carried a contact section. Service pages already had .service-contact; case pages and field guides ended at "next case" with no way to make contact at all - and those are the pages people land on from search. The form now mounts into .service-contact where it exists, and builds its own section before .next-case where it does not. */ .gg-contact{padding:96px 6vw;background:#0b172b;border-top:1px solid rgba(201,169,110,.22)} @media(max-width:760px){.gg-contact{padding:72px 18px}} .gg-contact .gg-k{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#d6b56f;margin:0 0 14px;font-family:Arial,sans-serif} html[lang="ar"] .gg-contact .gg-k{letter-spacing:0;font-size:12px} .gg-contact h2{font-family:Georgia,serif;font-weight:400;font-size:clamp(30px,4vw,46px);line-height:1.15;letter-spacing:-.02em;color:#f4efe5;margin:0 0 12px} html[lang="ar"] .gg-contact h2{line-height:1.5;letter-spacing:0} .gg-contact > p.gg-sub{color:rgba(244,239,229,.66);font-family:Georgia,serif;font-size:17px;line-height:1.6;max-width:56ch;margin:0} .service-contact .gg-form{margin-inline:auto} html{scroll-behavior:auto!important} :target{scroll-margin-top:96px} /* 21. WCAG 2.5.8 target size + form legibility */ .case-breadcrumb a{padding-block:4px} .menu-aside a{padding-block:5px} .gg-k{font-size:12px!important} .gg-form label{font-size:12px} html[dir=rtl] .gg-form label{font-size:12px} /* ---- fix-20260903 ---- */ /* 3. The header kept direction:ltr on Arabic pages, so it never mirrored. */ html[lang="ar"] .site-nav{direction:rtl} /* 4. The 100px "14+" was 150px tall and sat on the sentence beside it. */ .trajectory-panel .panel-kpi{line-height:1;height:auto} /* 5. In Arabic the core's three labels overlapped each other (the Arabic line-height applies to the Latin text inside it too). */ html[lang="ar"] .architecture-core{line-height:1.15} html[lang="ar"] .architecture-core strong{line-height:1.05;display:block} html[lang="ar"] .architecture-core small, html[lang="ar"] .architecture-core span{line-height:1.2} /* 6. The decorative AM monogram printed straight through the form labels. */ .contact-rings{pointer-events:none;z-index:0} .contact-rings > span{opacity:.10} .gg-form{position:relative;z-index:1} /* 8. Seven brand logos are lighter than the cream band they sit on; measured mean luminance against the band's 238. Scoped to the ribbon only — the same files are correct on the dark work grid. */ .brand-ribbon img[src$="ays-developers.png"], .brand-ribbon img[src$="zoutons.webp"], .brand-ribbon img[src$="arab-entrepreneurs-board.webp"], .brand-ribbon img[src$="akwan-construction.svg"]{filter:grayscale(1) contrast(1.05) brightness(.42)} .brand-ribbon img[src$="goldstone-marble-granite.webp"], .brand-ribbon img[src$="beroya-business-solutions.webp"]{filter:grayscale(1) contrast(1.05) brightness(.54)} .brand-ribbon img[src$="luminiel-mena.webp"]{filter:grayscale(1) contrast(1.05) brightness(.62)} /* 9. The market-coverage note under BY MARKET. */ .sv-note{font-size:12.5px;line-height:1.75;opacity:.6;max-width:46ch;margin:-2px 0 16px} /* 10. Consent bar. */ .gg-consent{position:fixed;inset-inline:16px;inset-block-end:16px;z-index:200; display:none;gap:14px;align-items:center;flex-wrap:wrap;justify-content:space-between; max-width:760px;margin-inline:auto;padding:16px 18px; background:#07101fF2;border:1px solid #c9a96e55;border-radius:2px; -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); color:#f4efe5;font-size:13.5px;line-height:1.65} .gg-consent[data-open="1"]{display:flex} .gg-consent p{margin:0;flex:1 1 320px;color:#d8d2c6} .gg-consent a{color:#e5ca93} .gg-consent div{display:flex;gap:8px;flex:0 0 auto} .gg-consent button{font:inherit;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase; padding:9px 16px;min-height:40px;border-radius:2px;cursor:pointer;border:1px solid #c9a96e77; background:transparent;color:#f4efe5} .gg-consent button.gg-ok{background:#c9a96e;border-color:#c9a96e;color:#07101f;font-weight:700} .gg-consent button:focus-visible{outline:2px solid #e5ca93;outline-offset:2px} @media (max-width:520px){.gg-consent{font-size:13px}.gg-consent div{width:100%}.gg-consent button{flex:1}} /* 11. Georgia is not installed on Android or most Linux, and the English side of this site ships no webfont at all — the whole editorial look depended on a local font. Gelasio is metric-compatible, so machines that have Georgia are unaffected and everyone else stops falling back to Noto Serif. */ @font-face{font-family:Georgia;font-style:normal;font-weight:400 700;font-display:swap; src:local("Georgia"),local("Georgia Pro"),url("/assets/gelasio.woff2") format("woff2")} @font-face{font-family:Georgia;font-style:italic;font-weight:400 700;font-display:swap; src:local("Georgia Italic"),local("Georgia-Italic"),url("/assets/gelasio-italic.woff2") format("woff2")} /* 7. The seal is positioned bottom:-54px, i.e. it hangs below the portrait and lands on the hero step row. Tuck it inside the portrait's lower corner. */ .hero-lux .portrait-seal{inset-block-end:12px} @media (max-width:760px){.hero-lux .portrait-seal{inset-block-end:8px}} /* 12. On LTR the portrait is absolutely pinned to the hero's bottom, so the hero never grows to fit the copy and "ABDELRAHMAN" printed through the second CTA. RTL already drops it into flow below 1100px — do the same for LTR on phones. */ @media (max-width:760px){ html[lang="en"] .hero-lux .portrait-lux{ position:relative;inset:auto;margin:clamp(28px,5vw,56px) auto 0;width:min(350px,78vw)} } /* 1+2. Hero copy column, derived from where the portrait actually sits. EN: the portrait is absolute from 761px up, so the copy has to stop short of it at every width in that range — at 1440 the headline ran 80px into the portrait caption, and between 761 and 919 the two simply sat on top of each other. AR: the same column had collapsed to 230px, stacking the headline one word per line and pushing the portrait below the fold. */ @media (min-width:761px){ html[lang="en"] .hero-lux .hero-copy-lux{max-width:min(1080px,calc(88vw - 380px))} } @media (min-width:920px){ html[lang="ar"] .hero-lux .hero-copy-lux{max-width:min(1040px,calc(88vw - 380px))} } html[lang="ar"] .hero-lux .hero-copy-lux h1{max-width:none} @media (max-width:919px){ html[lang="ar"] .hero-lux .hero-copy-lux{max-width:none;padding-block-start:58px} } /* 13. Between ~770 and 900 the header's signature block and the nav links ran into each other; the signature is already hidden on phones, so hide it across the whole band. And the Arabic hero eyebrow still sat under the header there, where the header wraps to two lines. */ @media (max-width:900px){ .site-nav .nav-signature{display:none} } @media (max-width:919px){ html[lang="ar"] .hero-lux .hero-copy-lux{padding-block-start:clamp(58px,13vw,104px)} } /* 14. The toolkit article uses the always-visible nav variant (no menu button), and at phone widths "Case studies" wrapped onto two lines inside a 58px bar. */ @media (max-width:430px){ .site-nav nav a{white-space:nowrap;font-size:10.5px;letter-spacing:.07em} .site-nav nav{gap:12px} } @media (max-width:360px){ .site-nav nav{gap:8px} .site-nav nav a{font-size:9.5px;letter-spacing:.04em} } /* 15. The toolkit's download grid used a 280px minimum track inside a container that is only 276px wide at 320px, so the page scrolled sideways on a small phone. min() is the safe form of the same rule. */ .ca-files{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))} /* 16. Mobile: the trajectory chart is anchored to the panel's bottom and was tall enough to run under the sentence beside the "14+". */ @media (max-width:760px){ .trajectory-panel > p{inset-block-start:172px} .trajectory-panel .metric-canvas{height:150px} } /* 17. Arabic phones put the portrait into normal flow, but the hero step row is still pinned to the hero's bottom edge — so the photo printed over "01 / تموضع" and "02 / تصميم". Give the hero room under the portrait. */ @media (max-width:760px){ html[lang="ar"] .hero-lux{padding-block-end:84px} } /* 18. The growth-loop diagram on the 8 service pages: the node boxes were a fixed 116px, narrower than their own labels ("Prioritize" was cut at every width), and they orbited at a radius larger than the ring they sit in, so on phones "05 Learn" and "02 Prioritize" were sliced by the ring's clip. Size the box to its text, centre it independently of its width, and pull the radius in so the whole node stays inside the circle. */ .service-orbital-visual .process-node{ inset-inline:0;width:max-content;max-width:none;margin-inline:auto;white-space:nowrap; --r:225px; transform:rotate(calc(var(--index) * 72deg)) translateY(calc(-1 * var(--r))) rotate(calc(var(--index) * -72deg)); } @media (max-width:760px){ .service-orbital-visual .process-node{--r:min(30vw,128px);padding:7px 10px;gap:7px} .service-orbital-visual .process-node small, .service-orbital-visual .process-node strong{font-size:10.5px;letter-spacing:.05em} } /* 19. The stage row under the growth loop is a flex line of four labels sized for the desktop column; on phones "COMPOUND" ran 32px past the hero, which clips it. Fit it, and let it wrap rather than get sliced if it still cannot. */ @media (max-width:760px){ .service-hero-foot{flex-wrap:wrap;gap:8px 14px;justify-content:space-between} .service-hero-foot span{font-size:10px;letter-spacing:.09em} } /* 20. The two-column "related services" grid on the case studies did not collapse at 320px, so the second column ran off the screen. */ @media (max-width:400px){ .service-mini-grid{grid-template-columns:1fr} } /* 21. The work grid was 46% of the whole home page (12,400px of 27,000 on a phone). Show a first screenful and let the rest open on demand — every card stays in the HTML, so nothing is lost to a crawler or to search. */ .brand-case-grid:not([data-all="1"]) > .brand-case:nth-child(n+13){display:none} @media (max-width:760px){ .brand-case-grid:not([data-all="1"]) > .brand-case:nth-child(n+10){display:none} } .gg-more{ display:block;margin:26px auto 0;font:inherit;font-size:12.5px;letter-spacing:.14em; text-transform:uppercase;padding:14px 26px;min-height:46px;cursor:pointer; background:transparent;border:1px solid #c9a96e77;border-radius:2px;color:inherit} .gg-more:hover{border-color:#c9a96e} .gg-more:focus-visible{outline:2px solid #c9a96e;outline-offset:3px} /* 22. In the method core the English reads "THE / GROWTH SYSTEM / ONE P&L". Arabic needs no article line, and inventing one only made it read twice. */ html[lang="ar"] .architecture-core small{display:none}