:root{ --navy:#0a2342;--ink:#122033;--gold:#b9975b;--gold-dark:#96723b;--pale:#f5f2ed; --white:#fff;--muted:#657080;--line:#dedbd5;--heading:var(--navy); --surface:#fff;--surface-hover:#efeae0; --font-head:'Cormorant Garamond','Playfair Display',Georgia,serif; --font-body:'Inter','DM Sans',Arial,sans-serif; --shadow-sm:0 2px 10px rgba(10,35,66,.06); --shadow-md:0 14px 34px rgba(10,35,66,.14); --radius:3px; --ease:cubic-bezier(.2,.7,.3,1); } [dir="rtl"]{ --font-head:'Noto Kufi Arabic','Cormorant Garamond',sans-serif; --font-body:'Noto Sans Arabic','Inter',Arial,sans-serif; } /* Public-site dark theme. Toggled via a button (assets/site.js) that sets data-theme on ; assets/theme-init.js applies any stored preference before first paint to avoid a flash of the wrong theme. Brand accent sections that are already dark in light mode (hero, practice, form, footer, page-hero, article CTA) are intentionally left alone — only the page canvas, card surfaces, and heading/body text colors change. */ [data-theme="dark"]{ --pale:#0d1a2b;--ink:#dbe3ec;--muted:#94a5ba;--line:#243a56;--heading:#eef3f8; --surface:#132437;--surface-hover:#182c42; } *{box-sizing:border-box} html{scroll-behavior:smooth;overflow-x:hidden} @supports (overflow-x:clip){html,body{overflow-x:clip}} body{margin:0;color:var(--ink);font-family:var(--font-body);background:var(--pale);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background-color .3s ease,color .3s ease} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}} .wrap{width:min(1140px,calc(100% - 44px));margin:auto} a{transition:color .2s var(--ease)} :focus-visible{outline:2px solid var(--gold);outline-offset:2px} .nav{height:86px;display:flex;align-items:center;justify-content:space-between} .brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--heading)} .mark{height:44px;width:44px;position:relative;display:inline-block;flex-shrink:0;transition:transform .2s var(--ease)} .mark img{position:absolute;inset:0;height:100%;width:100%;object-fit:contain;display:block;transition:opacity .25s var(--ease)} .mark .logo-dark{opacity:0} [data-theme="dark"] .mark .logo-light{opacity:0} [data-theme="dark"] .mark .logo-dark{opacity:1} .brand:hover .mark{transform:scale(1.06)} .brand-title{font-family:var(--font-head);font-size:21px;font-weight:600;line-height:1.12} .brand small{display:block;font:600 9px var(--font-body);letter-spacing:1.8px;margin-top:4px;color:var(--gold)} .links{display:flex;gap:28px;align-items:center} .links a{position:relative;font-size:14px;font-weight:500;text-decoration:none;color:var(--ink);padding:4px 4px} .links a:not(.button):not(.lang)::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .25s var(--ease)} [dir="rtl"] .links a:not(.button):not(.lang)::after{transform-origin:left} .links a:not(.button):not(.lang):hover::after{transform:scaleX(1)} .links a:not(.button):hover{color:var(--gold-dark)} .lang,.button{border:0;background:transparent;font:600 13px var(--font-body);cursor:pointer} .lang{color:var(--heading);padding:8px 12px;text-decoration:none;display:inline-block;border:1px solid var(--line);border-radius:var(--radius);transition:border-color .2s var(--ease),color .2s var(--ease)} .lang:hover{border-color:var(--gold);color:var(--gold-dark)} .button{background:var(--gold);color:#fff;padding:13px 22px;text-decoration:none;display:inline-block;border-radius:var(--radius);transition:background .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);box-shadow:0 1px 2px rgba(10,35,66,.08)} .button:hover{background:var(--gold-dark);transform:translateY(-2px);box-shadow:var(--shadow-md)} .button:active{transform:translateY(0)} .theme-toggle{border:0;background:transparent;cursor:pointer;padding:8px;display:inline-flex;align-items:center;justify-content:center;color:var(--heading);border-radius:var(--radius);transition:background-color .2s var(--ease),color .3s ease} .theme-toggle:hover{background:rgba(128,128,128,.12)} .theme-toggle svg{width:19px;height:19px} .theme-toggle .icon-moon{display:none} [data-theme="dark"] .theme-toggle .icon-sun{display:none} [data-theme="dark"] .theme-toggle .icon-moon{display:block} .mobile-nav .theme-toggle{align-self:flex-start;padding:8px 4px} .menu{display:none;background:none;border:0;font-size:24px;cursor:pointer;color:var(--heading);line-height:1} .hero{min-height:645px;background-color:var(--navy);background-image:radial-gradient(120% 140% at 15% 20%,rgba(18,48,85,.80) 0%,rgba(10,35,66,.72) 45%,rgba(7,28,54,.88) 100%),url('hero-bg.jpg');background-size:cover;background-position:center;background-repeat:no-repeat;display:grid;align-items:center;color:white} .hero-wordmark{height:70px;width:auto;display:block;margin-bottom:28px} .kicker{letter-spacing:2.4px;color:#dfc797;font-weight:700;font-size:12px;text-transform:uppercase} .hero h1{font:600 clamp(44px,6vw,74px)/1.08 var(--font-head);max-width:730px;margin:16px 0 22px} .hero p{font-size:18px;max-width:560px;color:#d9e0e7;margin:0 0 32px} .hero .button{margin-inline-end:12px} .ghost{color:white;border:1px solid rgba(255,255,255,.7);padding:12px 20px;display:inline-block;text-decoration:none;font-weight:600;font-size:13px;border-radius:var(--radius);transition:background .2s var(--ease),border-color .2s var(--ease)} .ghost:hover{background:rgba(255,255,255,.12);border-color:#fff} .stats{background:var(--pale);padding:0} .statgrid{display:grid;grid-template-columns:repeat(4,1fr)} .stat{padding:28px;border-inline-end:1px solid var(--line);transition:background .2s var(--ease)} .stat:hover{background:var(--surface-hover)} .stat strong{font:600 32px var(--font-head);color:var(--heading);display:block} .stat span{font-size:13px;color:var(--muted)} section{padding:100px 0} .eyebrow{color:var(--gold);font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase} .heading{font:600 clamp(32px,4vw,48px)/1.16 var(--font-head);color:var(--heading);margin:12px 0 20px;transition:color .3s ease} .about{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center} .about-image{aspect-ratio:1/1;position:relative;background-color:var(--navy);background-image:linear-gradient(150deg,#123055 0%,var(--navy) 55%,#071c36 100%);background-position:center 20%;background-size:cover;background-repeat:no-repeat;border-radius:var(--radius);box-shadow:var(--shadow-sm)} .about-image:after{content:'ALN';position:absolute;inset-inline-end:-28px;bottom:-28px;width:115px;height:115px;background:var(--gold);color:#fff;display:grid;place-items:center;font:600 29px var(--font-head);border:10px solid white;border-radius:50%;box-shadow:var(--shadow-md)} .about p{color:var(--muted);max-width:480px;white-space:pre-line} .textlink{color:var(--heading);font-weight:700;text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:5px;display:inline-block;transition:color .2s var(--ease),border-color .2s var(--ease)} .textlink:hover{color:var(--gold-dark);border-color:var(--gold-dark)} .practice{background:var(--navy);color:#fff} .practice .heading{color:white} .practice-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:40px} .practice-head p{color:#bdc9d5;max-width:390px;margin:0} .areas{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #3a4f68} .area{padding:34px 26px 30px 0;border-bottom:1px solid #3a4f68;margin-inline-end:24px;min-height:210px;display:flex;flex-direction:column;transition:background-color .25s var(--ease)} .area:hover{background-color:rgba(255,255,255,.05)} [dir="rtl"] .area{padding:34px 0 30px 26px} .area-num{color:var(--gold);font:700 40px var(--font-head);line-height:1;display:block} .area h3{font:600 25px var(--font-head);margin:16px 0 8px} .area p{font-size:16px;color:#cad3de;margin:0;line-height:1.65} .articles-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:36px} .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:23px} .card{border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .3s ease,border-color .3s ease;text-decoration:none;color:inherit} .card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)} .card-img{aspect-ratio:16/10;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#e7e3db} .card-body{padding:22px;display:flex;flex-direction:column;flex:1} .tag{color:var(--gold);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase} .card h3{font:600 23px/1.3 var(--font-head);margin:11px 0 17px;color:var(--heading);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1;transition:color .3s ease} .date{color:var(--muted);font-size:13px;margin-top:auto} .quote{background:#ede7dc;text-align:center;padding:100px 20px;transition:background-color .3s ease} .quote blockquote{max-width:820px;margin:14px auto 20px;font:500 clamp(28px,3.5vw,44px)/1.35 var(--font-head)} .quote blockquote{color:var(--heading)} .quote cite{font-style:normal;color:var(--gold);font-size:13px;font-weight:700;letter-spacing:1.3px} .contact{display:grid;grid-template-columns:1.1fr .9fr;gap:90px} .contact p{color:var(--muted)} .details{margin-top:28px} .details div{padding:14px 0;border-bottom:1px solid var(--line);font-size:15px;transition:padding-inline-start .2s var(--ease)} .details div:hover{padding-inline-start:6px} .details b{display:block;color:var(--heading);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:3px} .form{background:var(--navy);padding:40px;border-radius:var(--radius)} .form h3{font:600 28px var(--font-head);margin:0 0 22px;color:#fff} .form input,.form select,.form textarea{width:100%;background:transparent;border:0;border-bottom:1px solid #607286;color:#fff;padding:13px 0;font:16px var(--font-body);outline:none;border-radius:0;transition:border-color .2s var(--ease)} .form input:focus,.form select:focus,.form textarea:focus{border-color:var(--gold)} .form input::placeholder,.form textarea::placeholder{color:#b4c1cf} .form textarea{height:80px;resize:none} .form input,.form select,.form textarea{margin-bottom:15px} /* Dropdown styling — a wrapper draws the "this is a list" arrow as plain text, so the