/* AN CPA Auditing, 2026. Built on the Stripe skeleton: a visible top navigation that turns solid as you scroll, an angled gradient hero with the headline on the left and a product visual on the right, sections cut by angled dividers alternating white and a pale ground, small-icon feature grids, one dark band, a light multi-column footer. Fonts self-hosted. Logical properties so the Arabic pages reuse this file. */ @font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/source-serif-latin.woff2?v=20260908i) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/inter-latin.woff2?v=20260908i) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/plex-arabic-400.woff2?v=20260908i) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB} @font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/plex-arabic-500.woff2?v=20260908i) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB} @font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/plex-arabic-600.woff2?v=20260908i) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB} :root{ --navy:#0A2540; --navy-2:#0D1738; --ink:#061B31; --muted:#50617A; /* --slate was #64748D, which measures 4.49 to 1 on the pale panels, a hair under the 4.5 the guidelines ask for. #62728B is the same colour one shade deeper and measures 4.62. */ --slate:#62728B; --gold:#B99C72; --gold-2:#E5EDF5; --cream:#F6F9FC; /* Brand gold stays exactly as it is wherever it is a rule, a border or a fill. As TEXT on a light ground it measures only 2.47 to 2.61, so every place gold carries words on a light panel uses --gold-text instead: 4.50 on the pale panels, 4.76 on white. On the dark navy bands the brand gold already measures 6.74, so those keep --gold. */ --gold-text:#8B6E45; /* The closing contact band's own ground. Every other section on the site is white or the blue-pale #F6F9FC, so the band used to disappear into the section above it. This warm sand is neither, and it still carries the dark text: --ink 14.89 to 1, --navy 13.35, --muted 5.38. It will NOT carry --gold-text (4.11) or --slate (4.22), so the eyebrow inside the band is set to navy below. --wa-green is WhatsApp's own dark green. The bright #25D366 everyone reaches for measures 2.03 to 1 against white and cannot carry a label; this one measures 7.67. So the two are split, on purpose, and must stay split: --wa-green (dark) is for .btn-wa, a button with the words "WhatsApp" written on it. --wa-brand (bright) is for .wa, the floating circle, which carries NO text, only the glyph. Ashraf asked for the recognisable WhatsApp green there on 9 Sep 2026 and brand recognition is the whole point of that button. Its boundary against the page is carried by the drop shadow, not by the fill, and its accessible name comes from aria-label. Do not "tidy" these back into one token. */ --sand:#F2EDE3; --wa-green:#075E54; --wa-green-2:#0A7266; --wa-brand:#25D366; --pale:#F6F9FC; --white:#fff; --hair:rgba(6,27,49,.12); --hair-d:rgba(255,255,255,.16); --green:#15BE53; --indigo:#533AFD; --indigo-2:#7F7DFC; --serif:"Source Serif 4",Georgia,serif; --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --wrap:1180px; --pad:24px; --sec:112px; --r:8px; --pill:999px; --ease:cubic-bezier(.32,.2,.2,1); --skew:-6deg; } html[lang=ar]{--serif:"IBM Plex Sans Arabic",system-ui,sans-serif;--sans:"IBM Plex Sans Arabic",system-ui,sans-serif} @media (max-width:760px){:root{--sec:72px;--pad:20px}} *,*::before,*::after{box-sizing:border-box} /* Keyboard focus was scrolling under the 72px fixed header. WCAG 2.4.11. 9 Sep 2026. */ html{scroll-padding-top:88px} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--white)} body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.55;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;text-align:start;overflow-x:hidden} img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} p{margin:0 0 1em} h1,h2,h3{margin:0;color:var(--navy);line-height:1.08;letter-spacing:-.015em;text-wrap:balance} h1{font-family:var(--serif);font-weight:600;font-size:clamp(40px,5.6vw,68px)} h2{font-family:var(--serif);font-weight:600;font-size:clamp(30px,3.8vw,48px)} h3{font-family:var(--sans);font-weight:600;font-size:19px;line-height:1.3;letter-spacing:0} html[lang=ar] h1,html[lang=ar] h2{letter-spacing:0;line-height:1.3} ul{margin:0;padding:0;list-style:none} .wrap{width:min(100% - 2*var(--pad),var(--wrap));margin-inline:auto} .sec{padding-block:var(--sec)} .lead{font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:var(--muted);max-width:58ch} .eyebrow{font-size:14px;font-weight:600;color:var(--slate);letter-spacing:.02em;margin-bottom:14px} .sec-head{max-width:720px;margin-bottom:56px} .sec-head .lead{margin-top:16px;margin-bottom:0} .skip{position:absolute;inset-inline-start:-999px;top:8px;background:var(--navy);color:#fff;padding:8px 12px;border-radius:6px;z-index:100} .skip:focus{inset-inline-start:8px} .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* #main carries tabindex="-1" so the skip link really lands on it. Only a script or a fragment jump can focus it, never the Tab key, so it must not draw a ring when it does. */ [tabindex="-1"]:focus{outline:none} /* ---------- buttons, the Stripe pair: a solid pill with an arrow, and a text link with a chevron ---------- */ .btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px 0 20px;border-radius:var(--pill);border:1.5px solid var(--navy);background:transparent;color:var(--navy);font-weight:600;font-size:15px;line-height:1;transition:background-color .18s,color .18s,box-shadow .3s} .btn:hover{background-color:var(--navy);color:#fff;box-shadow:0 8px 24px -10px rgba(10,37,64,.5)} /* on dark grounds the outline is white and fills white */ :is(.ph-ink,.ph-navy,.navy,.ft) .btn,body.dark-top .hd:not(.is-solid):not(.dd-open) .btn{border-color:#fff;color:#fff} :is(.ph-ink,.ph-navy,.navy,.ft) .btn:hover,body.dark-top .hd:not(.is-solid):not(.dd-open) .btn:hover{background-color:#fff;color:var(--navy)} .btn:active{transform:translateY(1px)} .btn svg{width:14px;height:14px;transition:translate .2s var(--ease)} .btn:hover svg{translate:3px 0} .btn-gold{border-color:var(--gold);color:var(--navy)} .btn-gold:hover{background-color:var(--navy);border-color:var(--navy);color:#fff} .btn-white{background:#fff;color:var(--navy)} .btn-white:hover{background:var(--cream)} /* A white-filled button is the one button that keeps its navy label inside a dark band. The rule above it turns every .btn white for the dark grounds, and it outranks .btn-white on specificity, which left white words on a white pill at 1.00 to 1. Navy on white is 15.5. */ :is(.ph-ink,.ph-navy,.navy,.ft) .btn-white, body.dark-top .hd:not(.is-solid):not(.dd-open) .btn-white{border-color:#fff;color:var(--navy)} .tlink{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:15px;color:var(--navy);transition:gap .2s var(--ease)} .tlink svg{width:12px;height:12px} .tlink:hover{gap:10px} .on-dark .tlink{color:#fff} html[dir=rtl] :is(.btn,.tlink) svg{transform:scaleX(-1)} /* WhatsApp carries its own colour, as the firm's reviewer asked, so the message option reads as a button and not as one more line of text. It is still the same pill; only the fill changes, and it is the single filled control in the band it sits in. The glyph is a logo, so it neither mirrors in Arabic nor slides on hover the way the arrow does. */ .btn-wa,:is(.ph-ink,.ph-navy,.navy,.ft) .btn-wa{background:var(--wa-green);border-color:var(--wa-green);color:#fff} .btn-wa:hover,:is(.ph-ink,.ph-navy,.navy,.ft) .btn-wa:hover{background:var(--wa-green-2);border-color:var(--wa-green-2);color:#fff;box-shadow:0 8px 24px -10px rgba(7,94,84,.6)} .btn-wa svg{width:17px;height:17px;fill:currentColor} .btn-wa:hover svg,html[dir=rtl] .btn-wa svg{transform:none;translate:none} .btns{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px} /* ---------- header: transparent over the hero, solid white once you scroll ---------- */ /* The colour used to cross-fade over the same .3s as the background. On a fast scroll back to the top of a dark hero that left navy text sitting on a half-faded white panel for a third of a second, which reads as a flash. The background still fades, because that is the part that should feel soft; the text colour now resolves in 90ms so it is never caught between two states. site.js adds hysteresis so the class cannot chatter. */ /* The header must own the strip behind the iPhone status bar as well as its own row. Without this the page scrolls UNDER the status bar and a heading appears above the header, over the status bar, cut in half. He photographed exactly that on the corporate tax page. durusi has carried the same padding since 5 Sep 2026; this site never did. */ .hd{position:fixed;inset-inline:0;top:0;z-index:50;padding-top:env(safe-area-inset-top);transition:background .3s var(--ease),box-shadow .3s var(--ease),color .09s linear;color:var(--navy)} .hd .wrap{display:flex;align-items:center;gap:16px;min-height:72px} /* With the dropdown nav gone the header has three children, so space-between scattered them. The wordmark takes the slack; the language, the button and the burger sit together on the right. */ .hd .brand{margin-inline-end:auto} .hd.is-solid{background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);box-shadow:0 1px 0 var(--hair)} .brand{display:inline-flex;align-items:center;gap:12px;color:inherit} .wordmark{display:inline-grid;gap:6px;line-height:1} /* logo F: the name a size larger, a short gold dash leading the tagline */ .wordmark b{font-family:var(--serif);font-weight:600;font-size:29px;letter-spacing:-.01em;width:max-content} .wordmark i{font-style:normal;display:flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:500;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:inherit;opacity:.85;white-space:nowrap} .wordmark i::before{content:"";width:20px;height:2px;background:var(--gold);flex:none} html[lang=ar] .wordmark i{letter-spacing:0} html[lang=ar] .wordmark b{font-family:"Source Serif 4",Georgia,serif} /* the Latin name keeps its serif on the Arabic pages */ @media (max-width:480px){.wordmark b{font-size:24px}.wordmark i{font-size:8.5px;letter-spacing:.18em}.wordmark i::before{width:16px}} /* Adding "· ADVISORY" on 9 Sep 2026 made the tagline four words. Measured at 375px it put 12px of overflow into the header, which is how the burger got pushed off screen the last time. The tagline tightens rather than the name shrinking, because the name is the brand. */ @media (max-width:400px){.wordmark i{font-size:8px;letter-spacing:.11em}.wordmark i::before{width:12px}.wordmark i{gap:6px}} /* Ashraf asked on 9 Sep 2026 for the full company name beside the mark. It fits on a desktop. It does NOT fit a 390px phone next to the language switch, the Contact button and the burger: measured, the wordmark has about 164px there, and "ANCPA Auditing LLC" needs a 16px serif to fit that, which is smaller than the tagline it sits above. So phones keep the short mark and the full licensed name is carried in the footer of every page instead. */ @media (max-width:820px){.wm-rest{display:none}} .nav{display:none;align-items:center;gap:6px} .nav a{white-space:nowrap;padding:8px 12px;font-size:15px;font-weight:500;color:inherit;opacity:.85;transition:opacity .2s;position:relative} /* hover state everywhere in the bar: a gold underline that draws in, never a box */ .nav a::after,.nav-btn::after,.hd .lang::after,.hd-tel::after{content:"";position:absolute;inset-inline:12px;bottom:4px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:0 50%;transition:transform .1s ease-out} html[dir=rtl] .nav a::after,html[dir=rtl] .nav-btn::after,html[dir=rtl] .hd .lang::after{transform-origin:100% 50%} .nav a:hover::after,.nav-btn:hover::after,.nav-group.open .nav-btn::after,.hd .lang:hover::after,.hd-tel:hover::after{transform:scaleX(1)} .nav a:not(:hover)::after,.nav-btn:not(:hover)::after,.hd .lang:not(:hover)::after,.hd-tel:not(:hover)::after{transition:none} /* leaves instantly, so the line never trails the cursor */ .nav-group.open .nav-btn::after{transition:none} .nav a:hover{opacity:1} /* grouped services: the two groups open a full-width band under the bar; hover with a grace period, or click; no box */ .nav-group{position:static;display:flex;align-items:center;align-self:stretch;min-height:72px} .nav-btn{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:8px 12px;border:0;background:none;font:inherit;font-size:15px;font-weight:500;color:inherit;opacity:.85;cursor:pointer;transition:opacity .2s;position:relative} .nav-btn:hover,.nav-group.open .nav-btn{opacity:1} .nav-btn:focus{outline:none} .nav-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px} .dd{position:absolute;top:100%;inset-inline:0;background:var(--pale);color:var(--navy);border-bottom:1px solid var(--hair);display:none;z-index:60} .dd-in{max-width:var(--wrap);margin-inline:auto;padding:36px var(--pad) 40px;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,3.2fr);gap:24px 60px;align-items:start} .dd-lead .eyebrow{margin:0 0 10px} .dd-lead h3{margin:0;font-family:var(--serif);font-weight:600;font-size:26px;line-height:1.15;letter-spacing:-.01em;max-width:16ch} .dd-lead p{margin:12px 0 0;font-size:15px;color:var(--muted);max-width:32ch} .dd-lead .tlink{margin-top:18px;font-size:15px} .dd-right{min-width:0} .dd-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 44px;align-items:start} .dd-foot{margin-top:8px;padding-top:20px;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 26px} .dd-foot .dd-h{margin:0;flex:0 0 auto} .dd-zone-links{display:flex;flex-wrap:wrap;gap:6px 24px} .dd-zone-links a{font-size:15px;font-weight:600;color:var(--navy);line-height:1.3;white-space:nowrap;position:relative;padding-bottom:2px} .dd-zone-links a::after{content:"";position:absolute;inset-inline-start:0;bottom:0;height:2px;width:0;background:var(--gold);transition:width .3s var(--ease)} .dd-zone-links a:hover::after{width:100%} .dd-h{margin:0 0 4px;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} html[lang=ar] .dd-h{letter-spacing:0;font-size:12.5px} .dd-col{min-width:0} .dd-list{display:grid;grid-template-columns:minmax(0,1fr);min-width:0} .dd-list a{min-width:0;white-space:normal;overflow-wrap:break-word} /* .nav a sets nowrap for the top bar; the dropdown must wrap */ .dd-list a small{white-space:normal;overflow-wrap:break-word} .nav-group.open .dd,.nav-group:focus-within .dd{display:block} /* focus-within is for keyboard users; the mouse never focuses the button */ .dd-list a{display:block;padding:14px 0 13px;border-bottom:1px solid var(--hair);font-size:15.5px;font-weight:600;color:var(--navy);opacity:1;line-height:1.3;position:relative;transition:padding .2s} .dd-list a::after{content:"";position:absolute;inset-inline-start:0;bottom:-1px;height:2px;width:0;background:var(--gold);transition:width .3s var(--ease)} .dd-list a:hover::after{width:100%} .dd-list a small{display:block;margin-top:3px;font-size:13px;font-weight:400;color:var(--muted)} body .hd.dd-open,body.dark-top .hd.dd-open:not(.is-solid){background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);color:var(--navy);box-shadow:none} .menu-head{margin:26px 0 4px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)} .menu-head:first-child{margin-top:0} /* The desktop menu bar. Ashraf asked for it on 9 Sep 2026 and he is right for this audience: two thirds of the firm's search traffic is desktop, and hiding eleven services behind a burger on a 1440px screen is a phone pattern used in the wrong place. The burger STAYS at every width, because it is the only place the full eleven-service directory lives; this bar is the six top-level ways in, not a replacement for it. Below 1100px the bar goes and the burger is on its own again, which is correct on a tablet and a phone. */ .nav-main{display:none} @media (min-width:1100px){ .nav-main{display:flex;align-items:center;gap:26px;margin-inline-start:34px;margin-inline-end:auto} .hd .brand{margin-inline-end:0} .nav-main a{font-size:14.5px;font-weight:500;color:inherit;white-space:nowrap;padding:6px 0;border-bottom:2px solid transparent;transition:border-color .2s,opacity .2s} .nav-main a:hover{border-bottom-color:currentColor} .nav-main a[aria-current]{border-bottom-color:var(--gold);font-weight:600} } @media (min-width:1100px) and (max-width:1279px){.nav-main{gap:18px;margin-inline-start:22px}.nav-main a{font-size:13.5px}} /* Measured at 1440px on 9 Sep 2026: the header held 1237px of content in 1180px, 57px over, and it showed. Where the space went: brand 349, menu 457, phone+language+button 330, burger 101. The tagline was the largest single item at 311px, WIDER than the company name at 282px, and it lists the same four words the menu now lists three centimetres to its right. The menu does that job better because its words are clickable. So wherever the menu bar is showing, the tagline stands down; below 1100px, where there is no bar, it returns and does its job. Ashraf gets his tagline on every page, and it is never said twice in one line. The burger also drops its "MENU" word here: with a real menu on screen it is the second way in, and the glyph is understood on its own. */ /* Hovering a section shows the pages inside it. His note of 9 Sep 2026: clicking Audit took you to one page and nothing told you the other three existed. The top link still navigates, and the first row of every panel is that same page, so nothing is hidden behind a hover. Advisory and About have no panel because they have no children; showing an empty one, or a chevron that opens nothing, would be a lie about the shape of the site. */ @media (min-width:1100px){ .nav-item{position:relative;display:flex;align-items:center;align-self:stretch} .nav-item > a{display:inline-flex;align-items:center;gap:5px} .chev{width:11px;height:11px;flex:none;opacity:.65;transition:transform .2s var(--ease)} .nav-item.has-dd:hover .chev,.nav-item.has-dd:focus-within .chev{transform:rotate(180deg);opacity:1} /* Glass, not a white card. It sits on the same surface as the header, which is already rgba white over a blur, so the two read as one piece of chrome instead of a slab dropped on top of the page. His note of 9 Sep 2026. */ .nav-dd{position:absolute;top:100%;inset-inline-start:-16px;min-width:270px;max-width:340px; background:rgba(255,255,255,.78);backdrop-filter:saturate(1.6) blur(20px); -webkit-backdrop-filter:saturate(1.6) blur(20px); color:var(--navy);border:1px solid rgba(255,255,255,.55);border-radius:14px; box-shadow:0 20px 44px -20px rgba(10,37,64,.32),0 1px 0 rgba(255,255,255,.6) inset; padding:10px 8px 8px;display:grid;gap:1px; opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .16s var(--ease),transform .16s var(--ease),visibility .16s;z-index:70} /* Once one panel is open, moving along the bar must not fade each neighbour in and out. site.js puts .dd-live on the nav while the cursor is anywhere in it, and while that is on the panels swap with no fade and no slide at all, which is what makes it feel instant rather than laggy. The first open and the final close keep their fade. */ .nav-main.dd-live .nav-dd{transition:none;transform:none} .nav-main.dd-live .nav-item.has-dd:hover .nav-dd, .nav-main.dd-live .nav-item.has-dd:focus-within .nav-dd{transform:none} /* an invisible bridge across the gap, so the cursor can travel from the label to the panel without passing through dead space and closing it */ .nav-dd::before{content:"";position:absolute;inset-inline:0;top:-14px;height:14px} .nav-item.has-dd:hover .nav-dd,.nav-item.has-dd:focus-within .nav-dd{opacity:1;visibility:visible;transform:translateY(0)} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .nav-dd{background:rgba(255,255,255,.97)} } .nav-dd-h{display:block;padding:2px 12px 8px;font-size:11px;font-weight:600;letter-spacing:.13em; text-transform:uppercase;color:var(--muted)} html[lang=ar] .nav-dd-h{letter-spacing:0;font-size:12px} .nav-dd a{display:block;padding:9px 12px;border-radius:8px;font-size:14.5px;font-weight:500; line-height:1.35;color:var(--navy);border-bottom:0;white-space:normal;transition:background .15s,color .15s} .nav-dd a:hover{background:var(--pale);color:var(--gold-text)} .nav-dd a[aria-current]{color:var(--gold-text);font-weight:600} /* the bar itself carries no underline on a parent that owns a panel; the panel shows where you are instead, so the two marks never contradict each other */ .hd .wordmark i{display:none} .hd .burger .word{display:none} .hd .burger{gap:0} .nav-main{gap:22px} } .hd-cta{display:flex;align-items:center;gap:8px} .hd-cta .btn{white-space:nowrap;min-height:38px;padding:0 14px 0 16px;font-size:14px} /* Full strength, not 85%. At 85% the navy dimmed to 4.43 to 1 over the darkest corner of the hero gradient, a hair under 4.5, and this link is now on screen on phones as well. */ .hd .lang{padding:8px 12px;font-weight:600;font-size:14px;position:relative} /* The same opener as durusi: two bars, and the word appears on hover. The header carried a Contact button beside it, which the sister site does not have and which made the two look unrelated. Contact still sits in the menu foot and in the WhatsApp float. */ .burger{display:inline-flex;align-items:center;gap:14px;height:44px;padding:0 9px;margin-inline-end:-9px;border:0;background:none;color:inherit;cursor:pointer} .burger .glyph{display:block;width:26px;height:14px;position:relative} .burger .glyph span{position:absolute;inset-inline:0;height:2px;background:currentColor;border-radius:1px;transition:transform .3s} .burger .glyph span:first-child{top:2px} .burger .glyph span:last-child{top:10px} .burger .word{font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:500;opacity:0;transform:translateX(6px);transition:opacity .25s,transform .25s} html[dir=rtl] .burger .word{transform:translateX(-6px);letter-spacing:0} @media (hover:hover) and (min-width:900px){.burger:hover .word,.burger:focus-visible .word{opacity:1;transform:none}} @media (max-width:700px){.burger .word{display:none}} /* The nav used to be hover dropdowns across the top. He asked for a burger and a panel that slides down, the same as durusi. The dropdowns are gone at every width. */ .nav{display:none} /* The header is fixed at every width, but this group used to be hidden below 1000px, so on a phone the language switch and the contact button were not on screen at all: they lived in the menu panel, and the reader had to open it again after every scroll. The firm's reviewer asked that they stay put while scrolling, so they now ride in the fixed bar on a phone too, at a size that still leaves room for the wordmark and the burger at 390px. */ @media (max-width:700px){ .hd .lang{padding:8px 6px;font-size:15px} .hd-cta{gap:2px} .hd-cta .btn{min-height:34px;padding:0 12px;font-size:13.5px} .hd-cta .btn svg{display:none} } @media (max-width:380px){.hd-cta .btn{display:none}} /* Arabic labels run longer: tighter nav, and the burger stays until 1140px */ html[dir=rtl] .nav{gap:2px}html[dir=rtl] .nav a{padding:8px 9px;font-size:14.5px} /* mobile menu: a white sheet */ .menu{position:fixed;inset:0;z-index:60;background:#fff;color:var(--navy);padding:16px var(--pad) 32px;display:flex;flex-direction:column;overflow:auto;overscroll-behavior:contain;transform:translateY(-100%);visibility:hidden;transition:transform .42s cubic-bezier(.4,0,.2,1),visibility .42s} .menu.open{transform:translateY(0);visibility:visible} @media (prefers-reduced-motion:reduce){.menu{transition:none}} .menu-top{display:flex;align-items:center;justify-content:space-between;min-height:40px} .menu-close{width:44px;height:44px;border:0;background:var(--pale);border-radius:50%;color:var(--navy);cursor:pointer;display:grid;place-items:center} .menu-close svg{width:20px;height:20px} .menu-list{margin-top:26px;display:grid;gap:6px;max-width:var(--wrap);width:100%;margin-inline:auto} /* On one column the office block sits under the services, where it closes the panel. */ .menu-reach{max-width:var(--wrap);width:100%;margin:26px auto 0;padding-top:22px;border-top:1px solid var(--hair)} .menu-reach-h{margin:0 0 10px;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text)} .menu-reach ul{list-style:none;margin:0;padding:0;display:grid;gap:10px} .menu-reach li{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.45;color:var(--muted)} .menu-reach svg{width:15px;height:15px;flex:none;margin-top:3px;fill:currentColor;opacity:.55} .menu-reach a{color:var(--navy);font-weight:500} .menu-reach-hours{margin:12px 0 0;font-size:13.5px;color:var(--muted)} .menu-list a{display:inline-block;width:max-content;max-width:100%;font-family:var(--serif);font-size:clamp(26px,3.2vw,40px);font-weight:400;line-height:1.2;letter-spacing:-.01em;color:var(--muted);transition:color .2s,font-weight .2s} .menu-list a:hover{color:var(--gold-text)} .menu-list a svg{display:none} @media (min-width:900px){.menu-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:64px;row-gap:2px;align-content:start}} /* The directory. The group name is the same face and size as its own links, one weight heavier and in the page colour: no uppercase, no letterspacing, so the bottom of the panel does not read as a different design from the top. */ .menu-dir{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;margin-top:24px;padding:22px 0 26px;border-top:1px solid var(--hair);max-width:var(--wrap);width:100%;margin-inline:auto} /* His ruling of 6 Sep 2026: the services group as UAE and US, not by service type. */ .menu-group{min-width:0} .menu-group-h{margin:0 0 14px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-text)} .menu-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 40px} .menu-col{min-width:0} .menu-dir .menu-head{margin:0 0 6px;font-size:17px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--navy)} .menu-dir ul + .menu-head{margin-top:20px} .menu-dir ul{display:grid;gap:0} .menu-dir li{margin:4px 0} .menu-dir a{font-size:17px;font-weight:400;line-height:1.35;color:var(--muted);transition:color .2s} .menu-dir a:hover{color:var(--gold-text)} @media (min-width:900px){ .menu-dir{grid-template-columns:minmax(0,1fr);gap:30px} .menu-cols{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 36px} .menu-group--us .menu-cols{grid-template-columns:repeat(4,minmax(0,1fr))} .menu-group--us .menu-col ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 36px} .menu-group--us .menu-col{grid-column:1/-1} .menu-group + .menu-group{padding-top:26px;border-top:1px solid var(--hair)} } @media (max-width:700px){.menu-list a{font-size:26px}.menu-dir .menu-head,.menu-dir a{font-size:15.5px}.menu-group-h{font-size:11px}} /* Same as durusi: the primary links and the directory sit side by side on a laptop, not stacked, so the buttons at the foot never need scrolling to reach. */ @media (min-width:900px){ .menu{padding-bottom:26px} .menu{display:grid;grid-template-columns:minmax(0,3.2fr) minmax(0,1fr);grid-template-rows:auto 1fr auto auto;column-gap:52px;align-content:start} .menu-top{grid-column:1/-1;grid-row:1} /* The left column, rebuilt on 9 Sep 2026 after he asked four times. Five short links in a full-height column left three quarters of it empty against a dense directory on the right, which is what kept reading as unfinished. The links now take the top of the column at a size that does not shout, and the rest of it carries how to reach the office, which is a thing people open a menu looking for. The column is full, the two sides balance, and nothing decorative was added to fill space. */ /* Rebuilt again on his note of 9 Sep 2026, and this time the layout is the change rather than the spacing. The short list used to sit directly under the logo on the left, which put a thin sparse column beside a dense one. The services now take the wide left side and the short list sits on the right, lighter and further apart, in durusi's treatment. The office details became a single row across the foot instead of a stack. */ .menu-svc{grid-column:1;grid-row:2;margin:0} .menu-side{grid-column:2;grid-row:2;display:flex;flex-direction:column;min-width:0; padding-inline-start:44px;border-inline-start:1px solid var(--hair)} .menu-list{display:flex;flex-direction:column;gap:14px;margin:0;max-width:none} .menu-list a{font-weight:300;font-size:clamp(23px,2.1vw,30px);line-height:1.15} /* the office block spans the full width under both columns */ .menu-reach{grid-column:1/-1;grid-row:3;margin-top:26px;padding-top:20px; border-top:1px solid var(--hair);max-width:none} .menu-reach-h{margin:0 0 10px;font-size:11.5px;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--gold-text)} html[lang=ar] .menu-reach-h{letter-spacing:0;font-size:12.5px} .menu-reach ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap; align-items:center;gap:10px 34px} .menu-reach li{display:flex;align-items:center;gap:9px;font-size:14.5px;line-height:1.4;color:var(--muted)} .menu-reach svg{width:15px;height:15px;flex:none;margin-top:0;fill:currentColor;opacity:.55} .menu-reach a{color:var(--navy);font-weight:500} .menu-reach a:hover{color:var(--gold-text)} .menu-reach-hours{margin:10px 0 0;font-size:13.5px;color:var(--muted)} /* The two groups stack; the four columns live inside the UAE group, not here. The column assignment lives with the panel layout above, not here: this line used to say grid-column:2 and, sitting later in the file, it quietly overrode it and dropped the services on top of the short list. */ .menu-dir{grid-template-columns:minmax(0,1fr);gap:24px; margin-top:14px;padding:6px 0 0;border-top:0;border-inline-start:0;max-width:none;margin-inline:0} .menu-dir .menu-cols{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px} /* The US group used to span all four columns and then split its three links across the full 968px, against tidy 301px columns above it. Now it is one ordinary column, the same width as the others, so the whole directory reads as one grid instead of two ideas. */ .menu-group--us .menu-col{grid-column:auto} .menu-group--us .menu-col ul{grid-template-columns:minmax(0,1fr)} /* Both groups run on the same 3-column track, so the US column lines up under "Audit and assurance" at the same width instead of a narrower 4-column one. */ .menu-group--us .menu-cols{grid-template-columns:repeat(3,minmax(0,1fr))} } /* The panel holds EVERYTHING again at every width. It was slimmed to only what the bar does not carry, on his note of 9 Sep 2026, and he reversed it the same evening once he saw it: five links in a full-screen panel reads as empty, and someone who opens a menu wants the whole map of the site, not the half the bar happens not to show. Repeating the services between the bar and the panel is the right kind of repetition. */ @media (min-width:1100px){ } .menu-foot{margin-top:auto;padding-top:24px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;max-width:var(--wrap);width:100%;margin-inline:auto} .menu-foot .btn{justify-content:center} /* No buttons in the panel on a desktop: his instruction of 9 Sep 2026. "Contact us" sits in the header two centimetres away and the number is in the office row, so they repeated themselves, and they were what collided with that row. On a phone the panel keeps them, because there the header carries no Contact button. This rule lives AFTER the base .menu-foot{display:flex} on purpose: the same rule written inside the layout block above lost on source order and the buttons only looked gone because they had scrolled out of view. */ .menu .menu-foot{display:none} /* no buttons in the panel at any width: his instruction of 9 Sep 2026, desktop then phone. Contact and the number are both in the office row directly above. */ body.locked{overflow:hidden} /* ---------- hero: the angled gradient, headline left, the visual right ---------- */ /* His ruling, 8 Sep 2026: the registrations must be readable on the first screen with no scrolling, so the strip is a band inside the hero and the hero is a column. */ .hero{position:relative;isolation:isolate;padding:110px 0 0;overflow:hidden;min-height:100svh;display:flex;flex-direction:column;justify-content:center} .hero > .wrap{flex:0 1 auto} .hero-strip{margin-top:auto;padding-top:22px;width:100%} .hero-strip .wrap{border-bottom:0;padding-bottom:20px} .hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(100deg,#F6F4EF 0%,#E9DFCD 35%,#C9D0DE 70%,#A6AFC2 100%); /* the lower edge is a soft wave, not a cut: a mask that follows one gentle curve across the width */ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V782C1200 846 960 858 720 816C480 774 240 748 0 798Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V782C1200 846 960 858 720 816C480 774 240 748 0 798Z'/%3E%3C/svg%3E");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} .hero-bg canvas{position:absolute;inset:0;width:100%;height:100%;display:block} .hero .wrap{display:grid;gap:56px;align-items:center} /* 14ch meant a longer headline got taller rather than wider: the line that names the city and the services turned three lines into five and swallowed the first screen. 18ch holds it in four at most, and a smaller top size keeps it calm. 9 Sep 2026. */ .hero h1{max-width:18ch;font-size:clamp(38px,4.6vw,56px);line-height:1.08} .hero .lead{margin-top:24px;color:var(--ink)} .hero .eyebrow{color:var(--navy);opacity:.75} .hero .btns{margin-top:32px} /* .hero-note removed from the home hero 9 Sep 2026, his call: it was landing under the cookie bar. Class kept in case another page wants it. */ .hero-note{margin-top:26px;font-size:14px;color:var(--muted)} @media (min-width:900px){.hero{padding:120px 0 60px}.hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:64px}} /* the year of deadlines, drawn straight on the gradient */ .year{position:relative;height:460px;width:100%} .year canvas{position:absolute;inset:0;width:100%;height:100%;display:block} @media (max-width:899px){.year{height:340px}} /* On a phone the hero cannot hold the headline, the buttons, the year timeline AND the registrations in one screen. His ruling: the registrations win. The timeline is decorative and already aria-hidden, so below 760px it steps out of the first screen and the credentials take its place. */ @media (max-width:760px){ /* iOS paints the strip behind the status bar with the BODY colour, not html and not theme-color. A white body put a white band above a cream hero, which is what he saw at the top of his phone. The body takes the colour the hero gradient starts on, so the strip and the hero are one surface. durusi does the same with its dark ink. */ body{background:#F6F4EF} /* A fixed header with a backdrop blur makes iOS recompute the blurred strip on EVERY scroll frame, which is the flashing and the lag he reported. At 92% white over a light page the blur is doing almost nothing visible anyway, so phones get a solid bar and desktops keep the glass. Same for the dropdown panel, which cannot even open at this width. */ .hd.is-solid{background:rgba(255,255,255,.97);backdrop-filter:none;-webkit-backdrop-filter:none} .nav-dd{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.97)} /* Every service page keeps a second canvas, its own drawing, which still moves on a phone. The home page's second canvas is the year timeline and that is hidden below 760px, so home was the one page on the site with nothing alive on it. He spotted exactly that. The first attempt at a fix was a cream blob drifting over a cream gradient, which was honest movement that nobody could see. These two are the palette's own ends, sand and blue-grey, drifting against each other across the width, which is what the desktop canvas does. transform and opacity only: GPU composited, no repaint, no layout, so it costs nothing on scroll, which is what caused the lag last time. */ .hero-bg::before,.hero-bg .drift{content:"";position:absolute;border-radius:50%; pointer-events:none;will-change:transform,opacity} .hero-bg::before{top:-14%;left:-24%;width:96%;height:56%; background:radial-gradient(circle at 50% 50%,rgba(166,175,194,.62) 0%,rgba(166,175,194,0) 68%); animation:heroDriftA 22s ease-in-out infinite alternate} .hero-bg::after{top:0;height:150px} .hero-bg .drift{bottom:8%;right:-22%;width:88%;height:52%; background:radial-gradient(circle at 50% 50%,rgba(185,156,114,.5) 0%,rgba(185,156,114,0) 70%); animation:heroDriftB 29s ease-in-out infinite alternate} @keyframes heroDriftA{ from{transform:translate3d(0,0,0) scale(1);opacity:.85} to{transform:translate3d(34vw,20vh,0) scale(1.3);opacity:1} } @keyframes heroDriftB{ from{transform:translate3d(0,0,0) scale(1.1);opacity:.75} to{transform:translate3d(-30vw,-16vh,0) scale(1);opacity:1} } @media (prefers-reduced-motion:reduce){ .hero-bg::before,.hero-bg .drift{animation:none} } /* The strip behind the status bar takes the body colour, and the hero gradient runs cream on the left to blue-grey on the right, so no single body colour can match the whole width and a seam showed. The hero's top 150px now fades out of exactly that body colour into the gradient, which makes the seam invisible whatever Safari paints above it. */ .hero-bg::after{content:"";position:absolute;inset-inline:0;top:0;height:150px; background:linear-gradient(#F6F4EF 0%,rgba(246,244,239,.65) 45%,rgba(246,244,239,0) 100%); pointer-events:none} /* min-height:auto let the hero shrink to its content, which on a 375x812 phone made it 671px in an 812px screen: the first thing a visitor saw was the hero AND 141px of the section below it, which is what he described as looking cropped. durusi.com has always filled the phone screen exactly, and this now matches it. svh is the SMALL viewport, measured with the browser bars showing, so the hero still fills the screen when they retract. The 600px floor is for landscape and for the short screens where 100svh alone collapses the headline; durusi uses the same shape with 640. Measured after: hero 812px in an 812px screen, nothing of the next section visible. */ /* 100svh is the SMALL viewport: it stops exactly where iOS Safari's translucent bottom bar begins, so the white section after the hero shows THROUGH the bar and the first screen reads as two sections. Emulators do not reproduce it; his phone does. durusi solved this on 5 Sep 2026 and this is the same shape: the LARGE viewport plus the 120px that the bar and the home indicator need. Measured there, not guessed: 100lvh alone still left a band, and env(safe-area-inset-bottom) was not enough either. See docs/memory and the ios-safari-bars note. */ /* His note of 9 Sep 2026: the first screen must END at "Get a fixed quote". The registrations belong below the fold, not squeezed under the button. So the HERO no longer carries the height; its content wrap does. The wrap is one full screen with the headline, the lead and the button centred in it, and the registrations strip simply follows, which puts it exactly one small scroll away. The gradient still runs behind both because .hero-bg is absolute to the hero, not to the wrap. */ /* The first screen is the hero and NOTHING else, content centred, ending at the button. margin-top:auto on the strip was what tore the two apart and left the huge gap he photographed: the text sat at the top, the registrations at the very bottom, and the void in between. The wrap now carries exactly one screen and the strip simply follows it, so the registrations are one small scroll away and fully visible when they arrive. */ .hero{min-height:0;padding:0;display:block} .hero > .wrap{min-height:0;padding:0;display:block} /* The FIRST SCREEN is the words and the button, and only those: one full screen, centred, ending at "Get a fixed quote". */ /* 100lvh left about 200px of empty gradient under the button before the timeline began, so it took a deliberate scroll to find it. 84lvh keeps the words and the button as the whole of what you read first, ends on the button as he asked, and lets the top of the timeline show at the bottom of the screen, which is what invites the scroll rather than hiding it. His note of 9 Sep 2026: bring the animation closer up. */ .hero > .wrap > .rv-group{min-height:84lvh;padding:calc(96px + env(safe-area-inset-top)) var(--pad) 20px;display:flex; flex-direction:column;justify-content:center;box-sizing:border-box} /* The year of deadlines is BACK on phones. It was hidden here because the first screen could not hold it beside the headline and the registrations, and that was true. It is not true any more: the first screen is now the words alone, so the timeline simply follows it and the registrations follow that. year.js already had a narrow layout for exactly this, drawing the year DOWN the page below 470px instead of across it; nothing but this CSS was ever stopping it. He asked why every subpage moved and the home page did not. */ .hero .year{display:block;height:600px;padding-inline:var(--pad);margin-top:0} /* Below the fold now, and even: two columns of two rather than a ragged 2+1+1. The bottom padding clears iOS Safari's translucent bar so the last line is never under the glass. */ /* Two columns, two in each: CBA and FTA down the left, DET and MoE down the right. grid-auto-flow:column with two explicit rows is what guarantees that, rather than four items reflowing into whatever the width allows. Bottom padding clears iOS Safari's translucent bar so the last row is never under the glass. */ .hero-strip{margin-top:0;padding-top:30px;padding-bottom:calc(34px + 120px); border-top:1px solid var(--hair)} .hero-strip .wrap{gap:18px 24px;padding-bottom:0} .hero-strip .marks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto auto;grid-auto-flow:column;gap:22px 20px;font-size:12.5px} .hero-strip .marks > div{display:grid;gap:3px;align-content:start} .hero-strip .marks b{font-size:14px} .hero-strip span{font-size:11.5px} .hero h1{font-size:34px;line-height:1.06} .hero .lead{margin-bottom:4px;font-size:15px} .hero .btns{gap:10px 16px} .hero-note{margin-top:10px} } /* ---------- logos strip ---------- */ .strip{padding:26px 0 0} .strip .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:12px 36px;padding-bottom:26px;border-bottom:1px solid var(--hair)} .strip span{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.04em;text-transform:uppercase} .strip .marks{display:flex;flex-wrap:wrap;gap:12px 32px;font-size:14px;color:var(--navy);font-weight:600} .strip .marks b{font-family:var(--serif);font-size:17px;font-weight:600;color:var(--navy)} .strip .marks span{color:var(--muted);text-transform:none;letter-spacing:0;font-weight:500} html[lang=ar] .strip span{letter-spacing:0} /* On a phone the five marks used to wrap four down the left and one alone beside the fourth, which the firm's reviewer read as broken. They now sit in two even columns filled top to bottom, three in the first and two in the second, each mark stacked so the two columns line up. A true three and three needs a sixth registration, which is the firm's call. */ @media (max-width:700px){ .strip .wrap{display:block} .strip .marks{display:grid;grid-auto-flow:column;grid-template-rows:repeat(3,auto); grid-auto-columns:minmax(0,1fr);gap:14px 18px;margin-top:14px} .strip .marks div{display:flex;flex-direction:column;gap:1px;min-width:0} .strip .marks b{font-size:16px;line-height:1.2} .strip .marks span{font-size:13px;line-height:1.35} /* The HOME hero strip is not that strip. It carries four registrations, not five or six, so three rows leaves three in one column and one alone in the other, which is what he saw and reported five times. Four items, two rows, filled column by column: CBA and FTA on the left, DET and MoE on the right. This rule sits AFTER the .strip one on purpose; the earlier attempt lived above it and lost on source order, which is why nothing changed. */ .strip.hero-strip .marks{grid-template-rows:repeat(2,auto);gap:22px 20px;margin-top:0} .strip.hero-strip .marks div{gap:3px} } /* ---------- the cut: a section IS the slanted shape, so content never leaves its colour ---------- --rise is the height of the slant. Each cut section overlaps the one above by --rise and clips its own top with a polygon, so the colour above shows through the triangle. */ :root{--rise:6.5vw} .sec.pale,.sec.navy,.sec.gradient,.sec.cream{padding-block:var(--sec)} .cream{background:var(--cream)} .pale{background:var(--pale)} .navy{background:var(--navy-2);color:#D7DDE8} .navy h2,.navy h3{color:#fff}.navy .lead,.navy .muted{color:#B9C3D1}.navy .eyebrow{color:#B9C3D1} .navy .rule{border-color:var(--hair-d)} .gradient{background:linear-gradient(100deg,#F6F4EF 0%,#E9DFCD 40%,#C9D0DE 75%,#A6AFC2 100%)} .gradient .eyebrow{color:var(--navy);opacity:.75} /* The closing contact band. It carried the class "pale", the same #F6F9FC as the section above it on most pages, so the firm's reviewer said its visibility was very low: it read as more of the previous section. It now has the warm sand ground nothing else on the site uses, and a gold rule above it, so it reads as its own band on every page at once. */ .cta.pale{background:var(--sand);border-top:1px solid var(--hair)} /* --sand, so the closing band separates from the pale section above it. 9 Sep 2026 */ .cta .eyebrow{color:var(--navy)} /* --slate measures 4.22 on the sand; navy measures 13.35 */ .rule{border-top:1px solid var(--hair)} /* ---------- the way to reach the office, with an icon on each line ---------- Asked for by the firm's reviewer: an icon for the telephone, WhatsApp and email, and the office address written out. The icons are inline SVG in the site's own stroke style, they are decorative beside their own label, and they carry no meaning the words do not. */ .contact-lines{display:grid;gap:12px;margin:28px 0 0;font-size:15.5px;line-height:1.5;max-width:44ch} .contact-lines li{display:flex;gap:12px;align-items:flex-start;color:var(--ink)} .contact-lines .ic{flex:none;width:18px;height:18px;margin-top:3px;color:var(--navy)} .contact-lines a{color:var(--navy);border-bottom:1px solid var(--gold)} .contact-lines a:hover{border-bottom-color:var(--navy)} html[dir=rtl] .contact-lines .ic{transform:none} /* ---------- who we work with: three columns, big numerals, no boxes ---------- */ .cols3{display:grid;gap:40px 40px} .col .n{display:block;font-family:var(--serif);font-size:44px;font-weight:600;color:var(--gold-text);line-height:1;margin-bottom:18px} .col h3{font-family:var(--serif);font-size:24px;font-weight:600;line-height:1.15} .col p{margin:12px 0 0;color:var(--muted);font-size:16px;line-height:1.55} .col .tlink{margin-top:16px} @media (min-width:860px){.cols3{grid-template-columns:repeat(3,1fr);gap:48px 56px}} /* ---------- services: six ruled items ---------- */ .svc{display:grid;gap:0} .svc-group+.svc-group{margin-top:56px} .svc-head{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);margin:0 0 14px} html[lang=ar] .svc-head{letter-spacing:0;font-size:14px} .svc-item{display:grid;grid-template-columns:36px 1fr;gap:16px;padding:26px 0;border-top:1px solid var(--hair);align-items:start} .svc-item:last-child{border-bottom:1px solid var(--hair)} .svc-item .ico{width:36px;height:36px;border-radius:0;background:none;color:var(--navy)} .svc-item .ico svg{width:24px;height:24px;stroke-width:1.6} .svc-item h3{font-size:19px} .svc-item p{margin:6px 0 0;color:var(--muted);font-size:15.5px;line-height:1.5} .svc-item .tlink{margin-top:10px;font-size:14.5px} @media (min-width:860px){.svc{grid-template-columns:repeat(2,1fr);column-gap:64px}.svc-item:nth-last-child(2){border-bottom:1px solid var(--hair)}} @media (min-width:1100px){.svc{grid-template-columns:repeat(3,1fr);column-gap:56px}.svc-item:nth-last-child(3){border-bottom:1px solid var(--hair)}} /* ---------- how it works: three steps in a row ---------- */ .steps{display:grid;gap:36px} .step .n{font-family:var(--serif);font-size:15px;color:var(--gold-text);letter-spacing:.12em;font-weight:600} .step h3{font-family:var(--serif);font-size:26px;font-weight:600;margin-top:12px;line-height:1.15} .step p{margin:10px 0 0;color:var(--muted);font-size:16px} @media (min-width:860px){.steps{grid-template-columns:repeat(3,1fr);gap:56px}.step{padding-top:22px;border-top:1px solid var(--navy)}} /* ---------- promise and numbers, on navy ---------- */ .quote blockquote{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.2vw,42px);line-height:1.22;color:#fff;max-width:26ch} .quote blockquote .w{transition:opacity .15s linear} .quote cite{display:block;margin-top:22px;font-style:normal;font-size:15px;color:#B9C3D1} .quote cite b{color:#fff} .nums{display:grid;gap:32px 24px;margin-top:72px;padding-top:48px;border-top:1px solid var(--hair-d)} .num b{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(44px,5vw,68px);line-height:1;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums} .num:first-child b{color:var(--gold)} .num>span{display:block;margin-top:10px;font-size:15px;color:#B9C3D1;max-width:26ch;line-height:1.45} .num>span a{border-bottom:1px solid var(--gold);color:#fff} .num b span{display:inline;font:inherit;color:inherit;margin:0} @media (min-width:700px){.nums{grid-template-columns:repeat(2,1fr)}} @media (min-width:1000px){.nums{grid-template-columns:repeat(4,1fr)}} /* ---------- about: statement, credentials, the record as a ruled list ---------- */ .two{display:grid;gap:40px;align-items:start} .creds{margin-top:26px;border-top:1px solid var(--navy)} .creds li{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--hair);font-size:15px} .creds b{color:var(--navy)}.creds span{color:var(--muted)} .record{border-top:1px solid var(--navy)} .record li{display:grid;grid-template-columns:1fr auto;gap:4px 24px;padding:18px 0;border-bottom:1px solid var(--hair);align-items:baseline} .record .k{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.06em;text-transform:uppercase} .record .v{font-family:var(--serif);font-size:clamp(26px,2.6vw,34px);font-weight:600;color:var(--navy);line-height:1;grid-row:2;letter-spacing:-.01em} .record .d{grid-column:2;grid-row:1/3;align-self:center;text-align:end;font-size:14px;color:var(--muted);max-width:22ch} .record .d a{color:var(--navy);border-bottom:1px solid var(--gold)} html[lang=ar] :is(.record .k,.step .n){letter-spacing:0} @media (min-width:900px){.two{grid-template-columns:1.05fr .95fr;gap:80px}} /* ---------- insights: ruled rows ---------- */ .posts{border-top:1px solid var(--navy)} .post{display:grid;gap:8px 32px;padding:26px 0;border-bottom:1px solid var(--hair);grid-template-columns:1fr;transition:padding .25s var(--ease)} .post:hover{padding-inline-start:8px} .post .tag{font-size:12.5px;font-weight:600;color:var(--slate);letter-spacing:.06em;text-transform:uppercase} .post h3{font-family:var(--serif);font-size:24px;font-weight:600;line-height:1.15} .post p{margin:0;color:var(--muted);font-size:15.5px} .post time{font-size:13px;color:var(--muted)} @media (min-width:860px){.post{grid-template-columns:160px 1fr 140px;align-items:baseline}.post .tag{grid-row:1}.post h3{grid-column:2}.post p{grid-column:2}.post time{grid-column:3;grid-row:1;text-align:end}} html[lang=ar] .post .tag{letter-spacing:0} /* ---------- closing band on the gradient ---------- */ .cta .wrap{display:grid;gap:24px;align-items:center} .cta h2{font-size:clamp(30px,3.8vw,48px);max-width:18ch} @media (min-width:900px){.cta .wrap{grid-template-columns:1fr auto}} /* ---------- contact form ---------- */ .form{display:grid;gap:14px;max-width:560px} .form label{display:grid;gap:6px;font-size:14px;font-weight:600;color:var(--navy)} /* font:inherit does not settle the weight on a textarea or a select: both browsers here left them at 600 while the inputs sat at 400, so a filled form read half bold. Set it. */ .form input,.form select,.form textarea{width:100%;font:inherit;font-weight:400;font-size:16px;min-height:52px;padding:12px 16px;border:1px solid rgba(11,18,32,.18);border-radius:10px;background:#fff;color:var(--ink);transition:border-color .2s,box-shadow .2s} .form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px #0b1220} .form .btn{min-height:52px;padding:0 26px;font-size:16px;margin-top:6px} .form .btn:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 5px #0b1220} .btn:focus-visible,.tlink:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 5px #0b1220} .map-band{margin-top:0;height:420px;filter:grayscale(1) contrast(1.05);transition:filter .4s} .map-band:hover{filter:none} .map-band iframe{width:100%;height:100%;border:0;display:block} .form textarea{min-height:120px;resize:vertical} .form .row{display:grid;gap:14px} .form .fine{font-size:13px;color:var(--muted)} .form .hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} @media (min-width:600px){.form .row{grid-template-columns:1fr 1fr}} /* ---------- footer: navy, the wordmark large, columns, the registrations line ---------- */ .ft{background:#0A2540;color:#B9C3D1;padding:72px 0 28px;font-size:14.5px} .ft .top{display:grid;gap:40px;padding-bottom:48px;border-bottom:1px solid var(--hair-d)} .ft .brand{color:#fff} .ft .wordmark b{font-size:38px} .ft .tag{margin:22px 0 0;max-width:38ch;color:#B9C3D1;line-height:1.55} .ft .ft-h{margin:0 0 14px;font-size:12.5px;font-weight:600;color:#fff;letter-spacing:.1em;text-transform:uppercase} html[lang=ar] .ft .ft-h{letter-spacing:0} .ft li{margin:9px 0} .ft a:hover{color:#fff} .ft .regs{display:flex;flex-wrap:wrap;gap:8px 28px;padding:22px 0;border-bottom:1px solid var(--hair-d);font-size:13.5px} .ft .regs b{color:#fff;font-weight:600} .ft .legal{padding-top:20px;display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;font-size:13px;align-items:center} .ft .socials{display:flex;gap:10px} .ft .socials a{width:34px;height:34px;border-radius:50%;border:1px solid var(--hair-d);display:grid;place-items:center;color:#fff} .ft .socials svg{width:15px;height:15px;fill:currentColor} @media (min-width:860px){.ft .top{grid-template-columns:1.4fr 1fr 1fr .85fr .85fr}} /* ---------- WhatsApp float, phones only ---------- */ /* The float carries the same WhatsApp green as the pill in the closing band, so the site has one WhatsApp colour and not two. The bright --green it used to carry put a white glyph at 2.52 to 1, under the 3 to 1 a graphic needs; this ground measures 7.67. */ .wa{position:fixed;inset-inline-end:18px;bottom:18px;z-index:40;width:56px;height:56px;border-radius:50%;background:var(--wa-brand);color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px -8px rgba(0,0,0,.4)} .wa svg{width:30px;height:30px;fill:currentColor} /* the float waits until the reader has scrolled half a screen; it is off on the contact page */ .wa{transition:opacity .3s,visibility .3s,transform .3s,bottom .3s var(--ease)} /* While the cookie strip is up it covers this button. consent.js measures the strip and publishes its real height as --cc-h; the fallbacks below are only for the case where the script never arrives, and are deliberately generous because the strip wraps on phones. */ body:has(.cc.cc-on) .wa{bottom:calc(18px + var(--cc-h,96px))} @media (max-width:560px){body:has(.cc.cc-on) .wa{bottom:calc(18px + var(--cc-h,168px))}} /* It no longer waits for a scroll, at ANY width. The firm's reviewer asked once that the way to reach the office stay stable while scrolling; that was fixed for phones only, and on 9 Sep 2026 Ashraf asked again for the button to be on every page. A button that is invisible until you scroll half a screen is not on the page. site.js still toggles .wa-on and that is harmless, but nothing depends on it now. */ body:has(form.form) .wa{display:none} /* ---------- motion: reveals with a stagger inside groups, the hero at load ---------- */ html.js .rv{opacity:0;translate:0 14px;transition:opacity .5s var(--ease),translate .5s var(--ease)} html.js .rv.in{opacity:1;translate:0 0} html.js .rv-group .rv{transition-delay:calc(var(--i,0)*65ms)} @media (prefers-reduced-motion:reduce){html.js .rv{opacity:1;translate:none;transition:none}.card-report,.card-due{animation:none}} /* ---------- subpage openings ---------- Every subpage opens with .page-hero: eyebrow, title, lead, buttons on the left, a visual or a fact on the right, at least 70vh tall on laptops. One theme per page, never the home gradient: .ph-navy (deep navy), .ph-ink (near-black with a gold rule), .ph-slate (blue-grey wash), .ph-gold (pale gold wash), .ph-pale (grey with a gold rule), .ph-white (white with a rule). */ .page-hero{position:relative;isolation:isolate;padding:150px 0 112px;overflow:hidden;display:flex;align-items:center} .page-hero .bg{position:absolute;inset:0;z-index:-1; /* the subpage opening ends in its own curve: one long swell that rises to the right, unlike the home wave */ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V912C1180 912 1010 1000 700 1000C430 1000 250 940 0 962Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V912C1180 912 1010 1000 700 1000C430 1000 250 940 0 962Z'/%3E%3C/svg%3E");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} html[dir=rtl] .page-hero .bg{transform:scaleX(-1)} .page-hero .wrap{display:grid;gap:40px;align-items:center;width:min(100% - 2*var(--pad),var(--wrap))} .page-hero h1{max-width:16ch;font-size:clamp(36px,4.8vw,58px)} .page-hero .lead{margin-top:20px;color:var(--ink)} .page-hero .btns{margin-top:28px} .ph-navy .bg{background:var(--navy-2)} .ph-ink .bg{background:var(--navy-2);overflow:hidden} .ph-ink .bg canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:.45;mix-blend-mode:screen} .ph-ink .wrap{padding-top:16px} .ph-slate .bg{background:linear-gradient(110deg,#E4E7EE,#C9D0DE 60%,#B0B8CA)} .ph-gold .bg{background:linear-gradient(110deg,#F6F4EF,#EFE6D4 55%,#E2D3B6)} .ph-pale .bg{background:var(--pale)} .ph-cream .bg{background:var(--cream)} .ph-cream .wrap{border-top:2px solid var(--gold);padding-top:40px} .ph-pale .wrap{border-top:2px solid var(--gold);padding-top:40px} .ph-white .bg{background:#fff} .ph-white .wrap{border-bottom:1px solid var(--hair);padding-bottom:48px} .ph-navy,.ph-ink{color:#D7DDE8} .ph-ink .tlink{color:#fff} .ph-navy h1,.ph-ink h1{color:#fff}.ph-navy .lead,.ph-ink .lead{color:#C9D2DE}.ph-navy .eyebrow,.ph-ink .eyebrow{color:#B9C3D1} .ph-side{font-size:15px;color:var(--muted)} .ph-side .big{display:block;font-family:var(--serif);font-size:clamp(44px,5vw,76px);font-weight:600;color:var(--navy);line-height:1;letter-spacing:-.02em} .ph-side .big small{display:block;font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:0;color:var(--muted);margin-top:10px;max-width:26ch} .ph-navy .ph-side,.ph-ink .ph-side,.ph-navy .ph-side .big small,.ph-ink .ph-side .big small{color:#B9C3D1} .ph-navy .ph-side .big,.ph-ink .ph-side .big{color:#fff} .ph-side ul{display:grid;gap:10px} .ph-side li{padding-inline-start:18px;position:relative;line-height:1.45} .ph-side li::before{content:"";position:absolute;inset-inline-start:0;top:.6em;width:8px;height:2px;background:var(--gold)} .ph-visual{position:relative;height:360px;width:100%} .ph-visual canvas{position:absolute;inset:0;width:100%;height:100%;display:block} @media (min-width:900px){.page-hero{min-height:72vh;padding:150px 0 128px}.page-hero .wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px}.ph-visual{height:440px}} body.dark-top .hd:not(.is-solid){color:#fff} .ph-navy .btn{background:#fff;color:var(--navy)}.ph-navy .tlink{color:#fff} /* big statement rows, the about timeline, the team list */ .story{display:grid;gap:0;border-top:1px solid var(--navy)} .story li{display:grid;grid-template-columns:110px 1fr;gap:12px 32px;padding:26px 0;border-bottom:1px solid var(--hair)} .story .y{font-family:var(--serif);font-size:26px;font-weight:600;color:var(--gold-text);line-height:1} .story h3{font-family:var(--serif);font-size:22px;font-weight:600} .story p{margin:6px 0 0;color:var(--muted);font-size:16px} .people{border-top:1px solid var(--navy)} .people li{display:grid;grid-template-columns:1fr;gap:4px 32px;padding:22px 0;border-bottom:1px solid var(--hair)} .people .who{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--navy)} .people .role{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);font-weight:600} .people .cred{color:var(--muted);font-size:15.5px} @media (min-width:800px){.people li{grid-template-columns:260px 1fr;align-items:baseline}.people .role{grid-column:1;grid-row:2}.people .cred{grid-column:2;grid-row:1/3}} .stmt{font-family:var(--serif);font-size:clamp(28px,3.6vw,48px);line-height:1.15;color:var(--navy);max-width:22ch;font-weight:600;letter-spacing:-.015em} .navy .stmt{color:#fff} .grid2{display:grid;gap:32px} @media (min-width:860px){.grid2{grid-template-columns:1fr 1fr;gap:56px}} .rule-top{border-top:1px solid var(--hair);padding-top:24px} .big-list{border-top:1px solid var(--navy)} .big-list li{display:grid;grid-template-columns:1fr auto;gap:8px 24px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--hair)} .big-list .l{font-size:17px} .big-list .l small{display:block;color:var(--muted);font-size:14px;margin-top:2px} .big-list .r{font-family:var(--serif);font-size:24px;font-weight:600;color:var(--navy);white-space:nowrap} .navy .big-list{border-color:var(--hair-d)}.navy .big-list li{border-color:var(--hair-d)}.navy .big-list .r{color:#fff}.navy .big-list .l small{color:#B9C3D1} /* prose, tables, callouts, faq, checklists, deadline lists */ .prose{max-width:70ch} .prose h2{font-size:clamp(26px,3vw,36px);margin:56px 0 16px} .prose h2:first-child{margin-top:0} .prose h3{font-family:var(--serif);font-size:22px;margin:32px 0 10px} .prose p,.prose li{font-size:17.5px;line-height:1.6} .prose ul,.prose ol{padding-inline-start:22px;margin:0 0 1em} .prose ul{list-style:disc}.prose ol{list-style:decimal} .prose li{margin:6px 0} .prose a{color:var(--navy);border-bottom:1px solid var(--gold)} .tbl{overflow-x:auto;margin:24px 0} table.t{width:100%;border-collapse:collapse;font-size:15.5px} table.t th,table.t td{text-align:start;padding:12px 14px;border-bottom:1px solid var(--hair);vertical-align:top} table.t th{font-weight:600;color:var(--navy);border-bottom:1px solid var(--navy);font-size:13px;letter-spacing:.06em;text-transform:uppercase} table.t td b{color:var(--navy);font-family:var(--serif);font-size:19px;font-weight:600} html[lang=ar] table.t th{letter-spacing:0} .callout{border-inline-start:3px solid var(--gold);padding:6px 0 6px 22px;margin:28px 0;font-size:17px} .callout b{color:var(--navy)} /* questions and answers: a numbered ruled list, always open, no accordion and no box. The number sits in its own column beside the question and drops above it on phones. */ .qa{border-top:1px solid var(--navy)} .qa li{display:grid;grid-template-columns:62px minmax(0,1fr);gap:0 28px;padding:26px 0;border-bottom:1px solid var(--hair);align-items:baseline} .qa .n{grid-row:1/3;font-family:var(--serif);font-size:20px;font-weight:600;color:var(--gold-text);line-height:1.25;font-variant-numeric:tabular-nums} .qa h3{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--navy);line-height:1.2} .qa p{margin:12px 0 0;color:var(--muted);font-size:16.5px;line-height:1.6;max-width:70ch} .qa a{color:var(--navy);border-bottom:1px solid var(--gold)} .navy .qa{border-color:var(--hair-d)}.navy .qa li{border-color:var(--hair-d)}.navy .qa h3{color:#fff}.navy .qa p{color:#B9C3D1} @media (max-width:600px){.qa li{grid-template-columns:1fr}.qa .n{grid-row:auto;font-size:17px;margin-bottom:6px}} /* a closing line at the end of a section, under a hairline, never beside the heading */ .sec-note{margin-top:48px;padding-top:22px;border-top:1px solid var(--hair);color:var(--muted);font-size:16px;line-height:1.6;max-width:78ch} /* a ruled list already closes on a hairline, so the note does not draw a second one */ :is(.due,.creds,.big-list,.story,.record,.people,.posts,.qa,.svc)+.sec-note{border-top:0;padding-top:0;margin-top:34px} .sec-note p{margin:0} .sec-note p+p{margin-top:10px} .sec-note a{color:var(--navy);border-bottom:1px solid var(--gold)} .navy .sec-note{border-color:var(--hair-d);color:#B9C3D1} .navy .sec-note a{color:#fff} .check{display:grid;gap:12px;margin:24px 0} .check li{display:grid;grid-template-columns:24px 1fr;gap:12px;font-size:16.5px;line-height:1.5} .check li::before{content:"";width:18px;height:18px;border-radius:50%;border:1.5px solid var(--gold);margin-top:3px;background:linear-gradient(135deg,transparent 50%,rgba(185,156,114,.35) 50%)} .due{border-top:1px solid var(--navy)} .due li{display:grid;grid-template-columns:120px 1fr;gap:6px 24px;padding:16px 0;border-bottom:1px solid var(--hair);align-items:baseline} .due .when{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--navy);line-height:1.1} .due .what{font-size:16px} .due .what small{display:block;color:var(--muted);font-size:14px;margin-top:2px} @media (min-width:700px){.due li{grid-template-columns:170px 1fr}} .split{display:grid;gap:40px;align-items:start} @media (min-width:900px){.split{grid-template-columns:minmax(0,1fr) 340px;gap:72px}.split .side{position:sticky;top:110px}} .side .box{border-top:1px solid var(--navy);padding-top:18px} .side .box+.box{margin-top:28px} .side h4{margin:0 0 10px;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600} .side li{padding:8px 0;border-bottom:1px solid var(--hair);font-size:15px} .side .btn{margin-top:18px} html[lang=ar] .side h4{letter-spacing:0} .map{margin-top:32px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;border:1px solid var(--hair)} .map iframe{width:100%;height:100%;border:0;display:block} .todo{background:#FFF4D6;color:#7A5A00;border:1px dashed #E0B94A;border-radius:4px;padding:0 8px;font-size:13px;font-weight:600;font-family:var(--sans);white-space:nowrap} .ph-side .big-list li{padding-inline-start:0}.ph-side .big-list li::before{display:none} /* A line of the big list that carries an icon puts it in its own column, so the label and the detail under it stay on one left edge. Lines without an icon are untouched. */ .big-list .l:has(.ic){display:flex;gap:12px;align-items:flex-start} .big-list .ic{flex:none;width:18px;height:18px;margin-top:3px;color:var(--gold)} html[dir=rtl] .big-list .ic{transform:none} /* Arabic pages: the hero band leans the other way, and the numerals stay Western */ html[dir=rtl] .hero-bg{transform:scaleX(-1)} html[lang=ar] body{font-size:17.5px} html[lang=ar] .wordmark i{letter-spacing:.26em} /* ---------- gold text on the dark bands ---------- --gold-text is the deep gold that reads on a light panel. Inside a navy or ink band that same deep gold falls to 3.69, while the brand gold measures 6.74, so the dark bands take the colour back. Written after the rules above so it wins on specificity and order. */ :is(.navy,.ph-navy,.ph-ink,.ft,.on-dark) :is(.col .n,.step .n,.story .y,.qa .n){color:var(--gold)} /* ---------- the page you are on, marked in the menu ---------- build.py stamps aria-current on the one menu link whose href is this page, and on the topic link when a page sits under a topic without a link of its own (a blog post under Insights). Weight and colour both change, so the mark does not rest on colour alone. */ .menu-list a[aria-current],.menu-dir a[aria-current]{color:var(--navy);font-weight:600} /* ---------- the header nav that stands in when JavaScript never arrives ---------- The menu panel is a JavaScript panel: the burger opens it and CSS keeps it out of the way until then. If site.js fails to load, the shell's onerror puts .no-js back on and this plain row of links takes the burger's place, so every primary page stays reachable. It is display:none in the normal case, so it costs a keyboard user nothing. */ .nav-nojs{display:none;flex-wrap:wrap;align-items:center;gap:6px 18px;font-size:15px;font-weight:600} .nav-nojs a{padding:6px 2px;color:inherit;border-bottom:2px solid transparent} .nav-nojs a:hover{border-bottom-color:var(--gold)} html.no-js .nav-nojs{display:flex} html.no-js .burger{display:none} html.no-js .menu{display:none} @media (max-width:900px){.nav-nojs{font-size:14px;gap:4px 12px}} /* The header floats over the hero and only turns solid once a script has watched the page scroll, and it is the same script that darkens the wordmark over a dark hero. With no script at all the header would be navy on navy and the fallback nav would wrap down over the headline, so without JavaScript the header stops floating: it sits in the page, in its own white band, and the hero starts underneath it. */ html.no-js .hd{position:static;color:var(--navy);background:var(--white);box-shadow:0 1px 0 var(--hair)} html.no-js .hd .wrap{flex-wrap:wrap;padding-block:12px;row-gap:8px} html.no-js .hd .brand{margin-inline-end:auto} html.no-js .hero{min-height:0;padding-top:48px} html.no-js .page-hero{padding-top:64px} /* ---------- print: the page becomes a plain document ---------- Clients and staff print a page and attach it to an email, so printing drops the header, the menu, the WhatsApp float, the closing band, the footer columns, every canvas and every gradient, and prints black on white. The firm's wordmark opens the first page and the registration line closes the last one. Link destinations are spelled out in the prose. */ @media print{ @page{size:A4;margin:14mm 14mm 16mm} :root{--sec:16pt;--pad:0px;--wrap:100%} html,body{background:#fff!important;overflow:visible!important;font-size:11.5pt;line-height:1.45} /* one sweep: nothing keeps a background, a shadow or a light colour on paper */ body,body *{background:transparent!important;background-image:none!important;box-shadow:none!important;text-shadow:none!important;color:#000!important;border-color:#999!important;filter:none!important;mix-blend-mode:normal!important} /* chrome that means nothing on paper */ .hd,.menu,.wa,.skip,.ft,.strip,.socials,.map,.map-band,.todo, .hero-bg,.page-hero .bg,.ph-visual,.year,canvas, .cta,.btn,.btns,.tlink,.form .btn{display:none!important} /* the two page openings collapse to a heading block */ .hero,.page-hero{min-height:0!important;padding:0 0 16pt!important;display:block!important;overflow:visible!important;isolation:auto!important} .page-hero .wrap,.hero .wrap{display:block!important;gap:0!important;width:100%!important;border:0!important;padding:0!important} .page-hero .lead,.hero .lead{margin-top:10pt} .ph-side{margin-top:14pt} .ph-side .big small{line-height:1.45;margin-top:5pt;max-width:44ch} /* dark openings and navy bands print as white with dark text */ .navy,.ph-navy,.ph-ink,.gradient,.pale,.cream{background:#fff!important;color:#000!important} .navy .rule,.navy .qa,.navy .qa li,.navy .big-list,.navy .big-list li,.navy .sec-note{border-color:#999!important} /* reveals are finished before the first sheet leaves the printer */ html.js .rv,html.js .rv.in,.rv{opacity:1!important;translate:none!important;transform:none!important;transition:none!important;animation:none!important} /* rhythm and type */ .sec{padding-block:var(--sec)!important} .wrap{width:100%!important;max-width:none!important;margin:0!important} .sec-head{margin-bottom:18pt;max-width:none} h1{font-size:21pt;line-height:1.12;margin:0 0 2pt} h2{font-size:15.5pt;line-height:1.15} h3{font-size:11.5pt} .lead{font-size:11.5pt;max-width:none} .eyebrow{font-size:9pt;margin-bottom:6pt;letter-spacing:.04em} .stmt{font-size:15pt;max-width:none} blockquote,.quote blockquote{font-size:13pt;max-width:none} .prose{max-width:none} .prose p,.prose li{font-size:11.5pt;line-height:1.5} .prose h2{font-size:14pt;margin:20pt 0 6pt} .prose h3{font-size:12pt;margin:14pt 0 4pt} .callout{margin:12pt 0;font-size:11pt;border-inline-start:2pt solid #666!important} .sec-note{margin-top:14pt;padding-top:8pt;font-size:10.5pt;max-width:none} /* secondary text stays a shade back so the hierarchy survives the black and white */ .lead,.col p,.step p,.svc-item p,.qa p,.post p,.sec-note,.ph-side,.creds span, .record .d,.due .what small,.big-list .l small,.people .cred,.num>span,.quote cite,.side li{color:#333!important} /* ruled blocks: the leading rule stays black, the row rules stay hairlines */ .qa,.due,.creds,.record,.big-list,.story,.people,.posts,.side .box,table.t th{border-color:#000!important} .qa .n,.col .n,.step .n,.due .when,.record .v,.num b,.big-list .r,.story .y{color:#000!important} .qa .n{font-size:11pt}.qa h3{font-size:12pt}.qa p{font-size:11pt;max-width:none} .qa li,.due li,.creds li,.record li,.big-list li,.story li,.people li{padding:8pt 0} .col .n{font-size:20pt;margin-bottom:8pt} .record .v{font-size:16pt} .num b{font-size:20pt} .due .when{font-size:12pt} .nums{margin-top:20pt;padding-top:14pt;gap:12pt} .creds li{grid-template-columns:110px 1fr} .side{margin-top:20pt} .split .side{position:static!important} .check li{font-size:11pt} /* pseudo-elements are outside the sweep above, so the tinted markers are cleared by hand */ .check li::before{background:none!important;border-color:#666!important} .ph-side li::before,.col .n::before{background:#000!important} /* tables print whole, with the head repeated on each sheet */ .tbl{overflow:visible!important;margin:12pt 0} table.t{font-size:10.5pt;width:100%} table.t thead{display:table-header-group} table.t th,table.t td{padding:6pt 8pt} table.t th{border-bottom:1px solid #000!important} table.t td b{font-size:11.5pt} /* a question never leaves its answer, and a heading never ends a sheet */ .qa li,.due li,.creds li,.record li,.big-list li,.story li,.people li,.svc-item, .col,.step,.num,.post,.callout,.check li,.side .box,table.t tr,figure,blockquote{break-inside:avoid;page-break-inside:avoid} h1,h2,h3,h4,.eyebrow,.svc-head,.sec-head,.menu-head{break-after:avoid;page-break-after:avoid} h2,h3{orphans:3;widows:3} p,li{orphans:2;widows:2} /* the wordmark opens the first sheet: the name, then the tagline under a rule */ html::before{content:"ANCPA";display:block;font-family:var(--serif);font-size:22pt;font-weight:600;line-height:1;letter-spacing:-.01em;color:#000} body::before{content:"Auditing · Tax · Accounting";display:block;margin:5pt 0 16pt;padding-bottom:10pt;border-bottom:1px solid #000;font-family:var(--sans);font-size:8pt;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#000} html[lang=ar] body::before{letter-spacing:.16em} /* the firm's line closes the document */ body::after{display:block;margin-top:20pt;padding-top:8pt;border-top:1px solid #000;font-family:var(--sans);font-size:8.5pt;line-height:1.5;color:#333;white-space:pre-line; content:"ANCPA Auditing L.L.C · Dubai license 1206648 · Ministry of Economy auditor LC4409-01 · FTA Tax Agent TAAN 20024196 · California CPA 147070\A Office 902, Makateb Building, Al Maktoum Road, Port Saeed, Dubai, P.O. Box 45452 · +971 4 886 4599 · cpaauditing.ae"} html[lang=ar] body::after{ content:"ANCPA Auditing L.L.C · رخصة دبي 1206648 · مدقق مسجل لدى وزارة الاقتصاد LC4409-01 · وكيل ضريبي معتمد لدى الهيئة TAAN 20024196 · محاسب قانوني معتمد، كاليفورنيا 147070\A مكتب 902، بناية مكاتب، شارع آل مكتوم، بور سعيد، دبي، ص.ب. 45452 · ‎+971 4 886 4599 · cpaauditing.ae"} /* where a link is going, spelled out, in the prose only */ :is(.prose,.qa,.sec-note,.callout,.record,.creds,.side,.check,.tbl,.story,.people,.big-list) a[href]::after{ content:" [" attr(href) "]";font-size:8.5pt;color:#444!important;word-break:break-all;font-weight:400} :is(.prose,.qa,.sec-note,.callout,.record,.creds,.side,.check,.tbl,.story,.people,.big-list) a[href^="/"]::after{ content:" [cpaauditing.ae" attr(href) "]"} :is(.prose,.qa,.sec-note,.callout,.record,.creds,.side,.check,.tbl,.story,.people,.big-list) :is(a[href^="mailto:"],a[href^="tel:"],a[href^="#"])::after{content:""} a{border-bottom:0!important;text-decoration:none} } /* ---------- the cookie choice ---------- A quiet strip on the site's own cream, not a dark slab and not a modal. It sits over the bottom of the window, never moves any page content, and leaves once answered. The Accept button is the only filled control on the page, which is what makes it findable. */ .cc{position:fixed;inset-inline:0;bottom:0;z-index:70;background:var(--cream); border-top:1px solid var(--hair);box-shadow:0 -8px 28px -22px rgba(10,37,64,.5); transform:translateY(100%);transition:transform .38s var(--ease,cubic-bezier(.4,0,.2,1))} .cc-on{transform:translateY(0)} .cc-in{max-width:var(--wrap);margin-inline:auto;padding:16px var(--pad); display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between} .cc-t{margin:0;flex:1 1 260px;font-size:14px;line-height:1.55;color:var(--muted)} .cc-t a{color:var(--gold-text);border-bottom:1px solid var(--gold)} .cc-t a:hover{color:var(--navy);border-bottom-color:var(--navy)} .cc-btns{display:flex;gap:10px;flex:0 0 auto} .cc .btn{min-height:42px;font-size:14px} .btn-solid{background:var(--navy);color:#fff;border-color:var(--navy)} .btn-solid:hover{background:var(--navy-2);border-color:var(--navy-2);color:#fff} @media (max-width:560px){ .cc-in{padding:14px var(--pad);gap:12px} .cc-t{flex:1 1 100%;font-size:13.5px} .cc-btns{flex:1 1 100%} .cc-btns .btn{flex:1 1 0;justify-content:center;padding:0 14px} } @media (prefers-reduced-motion:reduce){.cc{transition:none}} @media print{.cc{display:none}} /* ---------- the services directory ---------- His ruling of 8 September 2026: Services is NOT expandable. Every service is simply visible when the menu opens. On a laptop the primary links sit on the left and the directory on the right, side by side, not as one long list. The collapsible version and all of its summary and chevron styling is gone. */ .menu-svc{width:100%;margin:22px 0 0} @media (min-width:900px){ .menu-svc{margin:0} .menu-group--uae .menu-cols{grid-template-columns:repeat(3,minmax(0,1fr))} .menu-group--us .menu-col ul{grid-template-columns:minmax(0,1fr)} .menu-foot{margin-top:auto} } /* ---------- the mark ---------- Direction four, his choice of 8 Sep 2026: four even columns, the tallest in gold, no arrow. It rides beside the wordmark and drops away on a phone where the name alone is clearer at that size. */ .brand{display:inline-flex;align-items:center;gap:12px} .brand-mark{width:26px;height:27px;flex:none;display:block} .brand-mark rect{fill:currentColor} .brand-mark .lead{fill:var(--gold)} @media (max-width:560px){.brand-mark{display:none}} /* ---------- the header's own actions ---------- */ /* The bar reads left to right as one idea: two quiet links that are identical to each other, one action, one control. Nothing else. */ .hd-tel{padding:8px 12px;font-weight:600;font-size:14px;position:relative;white-space:nowrap;color:inherit} .hd-cta{gap:2px} .hd-cta .btn.hd-contact{margin-inline-start:10px} /* Below 900px the number itself does not fit beside the wordmark, but the icon does, and it dials. Hiding the whole link meant a phone visitor had to reach the footer before they could call. Changed 9 Sep 2026. */ @media (max-width:900px){ .hd-tel{padding:8px 6px;font-size:0} .hd-tel .ic{width:19px;height:19px;opacity:.95} /* Measured 9 Sep 2026 at 390px: header overflow 51px and the burger 31px off the right edge, so there was no menu button on a phone. Contact is reachable from the menu, from the hero and from the floating WhatsApp, so the header button goes. */ .hd .hd-contact{display:none} .hd .wrap{gap:10px} } @media (max-width:640px){.hd .lang{display:none}} /* ───────────────────────────────────────────────────────────────────────────── Review comments, V2 (9 Sep 2026). Four changes, all from the marked-up PDF. ───────────────────────────────────────────────────────────────────────────── */ /* 1 · Justified body copy. Asked for sitewide "for a cleaner, more uniform layout". Applied to running paragraphs only, never to headings, lists, table cells or the short one-line notes, and only from 900px up. Justifying a narrow column without hyphenation opens rivers of white space between words, so hyphens are enabled with it and phones keep the ragged right edge, where the measure is too short to justify safely. Arabic justifies naturally and keeps its own hyphenation rules. */ @media (min-width:900px){ .prose > p, .sec > .wrap > p, .lede, .qa p{ text-align:justify; text-align-last:start; hyphens:auto; -webkit-hyphens:auto; } } /* 2 · The two-column grid must not leave half the page empty when there is only one child in it. Every "Questions we are asked before..." section is a .wrap.two with a single .prose inside, so at desktop width the content sat in the left column and the right half was blank. Reported on the audit, liquidation and FTA penalty pages; this fixes the class, not the three instances. */ @media (min-width:900px){ .two:has(> :only-child){grid-template-columns:minmax(0,1fr)} .two:has(> :only-child) > .prose{max-width:80ch;margin-inline:auto} } /* 4 · Contact details read as a list of channels, not a list of strings. */ .ft-contact li{display:flex;align-items:flex-start;gap:10px} .ft-contact .ic{flex:0 0 16px;width:16px;height:16px;margin-top:3px;fill:currentColor;opacity:.72} .ft-contact .ft-hours{padding-inline-start:26px;opacity:.8} .hd-tel{display:inline-flex;align-items:center;gap:7px} .hd-tel .ic{width:15px;height:15px;fill:currentColor;opacity:.75} /* ---------- paper ---------- durusi.com has had a print sheet since the parity pass of 7 September 2026; this site had none, found on 9 September when he asked what one site has that the other does not. It matters more here than there: people print a fee page, a service page or the registrations strip to put in front of a partner or a bank, and without this they got a navy gradient hero, a floating WhatsApp button and a cookie bar across the page. Copy the shape, never the data: the class names below are this site's own. */ @media print{ @page{size:A4;margin:15mm 15mm 16mm} :root{--pad:0px;--wrap:100%} html,body{background:#fff!important;overflow:visible!important;font-size:11.5pt;line-height:1.45} /* one sweep: nothing keeps a background, a shadow, a tint or a moving part on paper */ body,body *{ background:transparent!important;background-image:none!important; box-shadow:none!important;text-shadow:none!important; color:#000!important;border-color:#999!important; filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important; mix-blend-mode:normal!important;opacity:1!important; animation:none!important;transition:none!important; transform:none!important;translate:none!important; } /* chrome that means nothing on paper */ .skip,.hd,.menu,.nav-nojs,.nav-main,.nav-dd,.burger,.menu-close,.lang, .wa,.socials,.cc,.btn,.btns,.hd-cta,.hd-tel, canvas,iframe,video,noscript{display:none!important} /* the decorative pseudo elements sit outside the sweep above, so they go by hand */ .page-hero::before,.page-hero::after,.ft::before,.menu::before, .cta::before,.cta::after,.strip::before{content:none!important;display:none!important} /* the reveals never run, so nothing prints invisible */ .rv,html.js .rv,html.js .rv.in{opacity:1!important;translate:none!important;transform:none!important} /* the hero is a title on paper, not a full screen of gradient */ .page-hero,.page-hero .wrap{min-height:0!important;padding-top:0!important;padding-bottom:12pt!important} .ph-visual,.ph-side{display:none!important} /* what a reader actually needs on the page they printed */ main a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555!important;word-break:break-all} main a[href^="/"]::after{content:" (cpaauditing.ae" attr(href) ")";font-size:9pt;color:#555!important} main a[href^="#"]::after,main a[href^="mailto"]::after,main a[href^="tel"]::after{content:""} h1,h2,h3{page-break-after:avoid;break-after:avoid} li,tr,.qa li,.due li{page-break-inside:avoid;break-inside:avoid} table,figure,.tbl{page-break-inside:avoid;break-inside:avoid} /* the registrations and the licensed name are the reason a page gets printed at all */ .ft,.regs,.legal{display:block!important} .regs{margin-top:14pt;padding-top:8pt;border-top:1px solid #999!important} .regs span{display:inline-block;margin-inline-end:16pt;font-size:9.5pt} .legal{margin-top:6pt;font-size:9pt} }