/* Mohammad & Partners Lawyers — index.html styles
   Extracted verbatim from the former inline <style> block so the page
   can run with a strict Content-Security-Policy (style-src 'self').
   No visual changes were made during extraction. */
:root{
  --ink:#101c30;
  --ink-deep:#0b1422;
  --parchment:#f6f1e6;
  --parchment-dim:#ede5d3;
  --brass:#b08a4e;
  --brass-light:#d3ab6f;
  --charcoal:#221f1a;
  --slate:#5c6470;
  --line:rgba(176,138,78,0.35);
  --max: 1160px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{
  position:relative;
  font-family:'Inter', sans-serif;
  color:var(--parchment);
  background:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
}
/* Touch-device polish: no lingering iOS/Android tap-highlight box, no
   300ms tap delay or accidental double-tap-to-zoom on interactive
   elements. Purely behavioral — no visual change. */
a, button{-webkit-tap-highlight-color:transparent; touch-action:manipulation;}
/* Navy woven houndstooth texture behind every section that doesn't
   already set its own opaque background (Values, and the outer
   padding around Practice Areas). Fixed so it reads as one continuous
   surface as the page scrolls. Sections with their own opaque
   background simply paint over this. */
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.2;
  background-image:url('../images/pattern-houndstooth-navy.svg');
  background-size:28px 28px;
  background-repeat:repeat;
}
h1,h2,h3,.display{
  font-family:'Fraunces', serif;
  font-weight:500;
  letter-spacing:-0.01em;
  color:var(--parchment);
}
.mono{font-family:'IBM Plex Mono', monospace; letter-spacing:0.02em;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--brass);
}

/* ---------- Nav ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:transparent;
  transition:background 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease;
  padding:26px 0;
  /* iOS notch / Dynamic Island: keep header content clear of the safe
     area in both portrait and landscape. env() resolves to 0 on
     devices without a cutout, so this is a no-op everywhere else. */
  padding-top:max(26px, env(safe-area-inset-top));
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
header.scrolled{
  background:rgba(16,28,48,0.96);
  box-shadow:0 1px 0 var(--line);
  padding:14px 0;
  padding-top:max(14px, env(safe-area-inset-top));
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
nav{display:flex; align-items:center; justify-content:space-between; gap:24px; position:relative; z-index:1;}
.brandmark{display:flex; align-items:center; gap:12px; flex-shrink:0;}
.brand-logo{
  height:60px; width:auto; display:block;
  object-fit:contain; flex-shrink:0;
}
.brand-text{color:var(--parchment); font-family:'Fraunces', serif; font-size:18px; line-height:1.15;}
.brand-text small{display:block; font-family:'Fraunces', serif; font-size:14px; letter-spacing:0.01em; color:var(--brass-light); font-weight:400; margin-top:1px;}
.nav-links{display:flex; align-items:center; gap:28px;}
/* This header (logo + firm name + close button) belongs only to the
   slide-in mobile/tablet menu — the ≤1024px media query below turns
   it back on. On desktop .nav-links is the plain horizontal link row
   next to the header's own brandmark, so this stays hidden there. */
.nav-links-header{display:none;}
/* Same story as .nav-links-header: this backdrop only exists for the
   slide-in mobile/tablet menu. Hidden by default so it can never
   appear over the desktop layout. */
.nav-backdrop{display:none;}
.nav-links a{
  color:var(--parchment); font-size:14px; font-weight:500; opacity:0.88;
  padding-bottom:4px; border-bottom:1px solid transparent; transition:all 0.25s ease;
}
.nav-links a:hover{opacity:1; border-color:var(--brass);}
.nav-cta{
  background:var(--brass); color:var(--ink-deep) !important; font-weight:600;
  padding:10px 20px; border-radius:2px; border:1px solid transparent;
}
.nav-cta:hover{background:var(--brass-light); border-color:transparent;}
.hamburger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;}
.hamburger span{width:22px; height:2px; background:var(--parchment);}
.nav-right{display:flex; align-items:center; gap:12px;}

/* ---------- Language Toggle ---------- */
.lang-toggle{
  background:none; border:1px solid var(--line); color:var(--parchment);
  font-family:'Inter', sans-serif; font-size:12px; font-weight:600; letter-spacing:0.03em;
  padding:8px 14px; border-radius:2px; cursor:pointer; transition:all 0.25s ease;
  white-space:nowrap; line-height:1.4;
}
.lang-toggle:hover{border-color:var(--brass); color:var(--brass-light);}
html[dir="rtl"] .lang-toggle{font-family:'Almarai','Inter',sans-serif; letter-spacing:0;}

/* ---------- Arabic (RTL) overrides ---------- */
html[dir="rtl"] body{font-family:'Almarai','Inter',sans-serif; line-height:1.8;}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] .display,
html[dir="rtl"] .brand-text,html[dir="rtl"] .nav-links-brand-text,html[dir="rtl"] .seal,html[dir="rtl"] .num,html[dir="rtl"] .monogram,
html[dir="rtl"] .portrait .monogram{font-family:'Amiri','Almarai',serif; font-weight:700;}
html[dir="rtl"] .hero h1{max-width:18ch;}
html[dir="rtl"] .section-head{max-width:100%;}
html[dir="rtl"] .profile-body li{padding-left:0; padding-right:18px;}
html[dir="rtl"] .profile-body li::before{left:auto; right:0;}
html[dir="rtl"] .eyebrow{letter-spacing:0.02em;}
@media (max-width: 1024px){
  html[dir="rtl"] .nav-links{
    right:auto; left:0;
    transform:translateX(-100%);
    box-shadow:8px 0 30px rgba(0,0,0,0.3);
  }
  html[dir="rtl"] .nav-links.open{transform:translateX(0);}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  color:var(--parchment);
  background:radial-gradient(circle at 78% 18%, #16263f 0%, var(--ink) 45%, var(--ink-deep) 100%);
  padding:190px 0 120px;
  overflow:hidden;
  display:flex;
  align-items:center;
}
.hero-bg{position:absolute; inset:0; z-index:0;}
.hero-bg-layer{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity 1.4s ease;
  will-change:opacity;
  transform:translateZ(0);
}
.hero-bg-layer.active{opacity:1;}
/* Hero slideshow background images — moved here from inline style=""
   attributes so the CSP can drop style-src 'unsafe-inline'. */
.hero-bg-1{background-image:url('https://images.unsplash.com/photo-1589994965851-a8f479c573a9?auto=format&fit=crop&w=2000&q=80');}
.hero-bg-2{background-image:url('../images/jordan.png');}
.hero-bg-3{background-image:url('https://images.unsplash.com/photo-1589391886645-d51941baf7fb?auto=format&fit=crop&w=2000&q=80');}
.hero-bg-4{background-image:url('https://images.unsplash.com/photo-1450101499163-c8848c66ca85?auto=format&fit=crop&w=2000&q=80');}
.hero::before{
  content:'';
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(15,29,52,0.55) 0%, rgba(15,29,52,0.45) 55%, rgba(15,29,52,0.4) 100%);
  pointer-events:none;
}
.hero .wrap{
  position:relative; z-index:2;
  width:100%;
  max-width:100%;
  padding:0 max(40px, 8%);
}
.hero-grid{display:flex; align-items:center;}
.hero-content{max-width:560px;}
.hero h1{
  color:var(--parchment);
  font-size:clamp(38px, 5vw, 60px);
  line-height:1.08;
  margin:18px 0 22px;
  max-width:14ch;
}
.hero h1 em{font-style:italic; color:var(--brass-light); font-weight:400;}
.hero p.lede{
  font-size:17px; color:#c9d0dc; max-width:46ch; margin-bottom:36px;
}
.hero-ctas{display:flex; gap:18px; flex-wrap:wrap; align-items:center; margin-top:36px;}
.hero p.lede{margin-bottom:0;}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; font-size:14px; font-weight:600; letter-spacing:0.01em;
  border-radius:2px; cursor:pointer; transition:all 0.25s ease; border:1px solid transparent;
}
.btn-solid{background:var(--brass); color:var(--ink-deep);}
.btn-solid:hover{background:var(--brass-light); transform:translateY(-1px);}
.btn-ghost{border:1px solid var(--line); color:var(--parchment);}
.btn-ghost:hover{border-color:var(--brass); background:rgba(176,138,78,0.08);}

/* ---------- Brass rule divider ---------- */
.rule{
  height:6px;
  background:linear-gradient(90deg, transparent, var(--brass) 20%, var(--brass-light) 50%, var(--brass) 80%, transparent);
  opacity:0.85;
}

/* ---------- Section shell ---------- */
section{padding:110px 0;}
.section-head{max-width:640px; margin-bottom:56px;}
.section-head h2{font-size:clamp(28px,3.4vw,38px); margin-top:14px;}
.section-head p{color:#aeb6c4; margin-top:14px; font-size:16px;}

/* ---------- Practice areas ---------- */
.practice-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.practice-card{
  background:rgba(11,20,34,0.6); padding:38px 32px; transition:background 0.3s ease;
  position:relative;
}
.practice-card:hover{background:rgba(22,38,63,0.75);}
.practice-card .icon{width:34px; height:34px; margin-bottom:22px; color:#7b9fd4;}
.practice-card h3{font-size:19px; margin-bottom:10px;}
.practice-card p{font-size:14.5px; color:#aeb6c4;}

/* ---------- Team gallery ---------- */
.team-gallery{padding:92px 0 84px; background:var(--ink); position:relative; isolation:isolate;}
.team-gallery::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.2;
  background-image:url('../images/pattern-houndstooth-navy.svg');
  background-size:28px 28px;
  background-repeat:repeat;
}
.team-gallery > .wrap{position:relative; z-index:1;}
.team-gallery-header{max-width:620px; margin:0 auto 52px; text-align:center;}
.team-gallery-crest{display:flex; align-items:center; justify-content:center; gap:18px;}
.team-gallery-crest .tg-line{flex:1; max-width:64px; height:1px; background:linear-gradient(90deg, transparent, var(--brass), transparent);}
.team-gallery-crest .tg-logo{height:42px; width:auto; object-fit:contain; flex-shrink:0;}
.team-gallery-header h2{
  margin-top:18px; font-size:clamp(23px,2.5vw,29px); text-transform:uppercase; letter-spacing:0.09em; color:var(--parchment);
}
.team-gallery-rule{width:54px; height:2px; margin:16px auto 0; background:linear-gradient(90deg, transparent, var(--brass) 15%, var(--brass-light) 50%, var(--brass) 85%, transparent);}
.team-gallery-header p{margin-top:20px; color:#aeb6c4; font-size:15.5px; line-height:1.7;}
html[dir="rtl"] .team-gallery-header h2{letter-spacing:0.02em;}

.team-gallery-grid{display:grid; grid-template-columns:1fr 1fr 1.15fr 1fr 1fr; gap:26px; align-items:end;}
.team-gallery-link{
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.team-gallery-photo{
  display:block; overflow:hidden; width:100%; background:var(--ink);
  border:1px solid var(--line); box-shadow:0 10px 22px rgba(16,28,48,0.08);
  transition:box-shadow 0.3s ease;
}
.team-gallery-link:hover .team-gallery-photo{box-shadow:0 16px 32px rgba(16,28,48,0.16);}
.team-gallery-photo img{
  width:100%; aspect-ratio:3/4; object-fit:cover; display:block;
  transition:transform 0.35s ease, opacity 0.35s ease;
}
.team-gallery-link:hover .team-gallery-photo img{transform:scale(1.04); opacity:0.92;}
.team-gallery-link:focus-visible{outline:3px solid var(--brass); outline-offset:3px;}
.team-gallery-info{padding-top:16px;}
.team-gallery-name{display:block; font-family:'Fraunces', serif; font-weight:500; font-size:15.5px; color:var(--parchment); letter-spacing:-0.005em;}
.team-gallery-role{
  display:block; margin-top:5px; font-family:'IBM Plex Mono', monospace; font-size:10.5px;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--brass);
}
.team-gallery-role-line{display:block; width:24px; height:1px; margin:10px auto 0; background:var(--brass);}
html[dir="rtl"] .team-gallery-name{font-family:'Amiri','Almarai',serif; font-weight:700;}
html[dir="rtl"] .team-gallery-role{font-family:'Almarai',sans-serif; letter-spacing:0.02em;}

/* ---------- About ---------- */
.about{
  position:relative;
  isolation:isolate;
  background:
    linear-gradient(rgba(16,28,48,0.88), rgba(16,28,48,0.88)),
    url('../images/about-firm-background.jpg') center / cover no-repeat;
  color:var(--parchment);
}
.about > .wrap{position:relative; z-index:1;}
.about .eyebrow{color:var(--brass-light);}
.about-grid{display:grid; grid-template-columns:1fr; align-items:start;}
.about h2{color:var(--parchment); font-size:clamp(26px,3vw,34px); margin:14px 0 20px;}
.about-bio p{
  color:#c9d0dc;
  font-size:16px;
  margin-bottom:16px;
  max-width:none;
  /* Logical "start" alignment (not justify) — justified text in a
     narrow single-column mobile layout produces uneven rivers of
     whitespace between words, which reads as unpolished. text-align:
     start also keeps English left-aligned and Arabic right-aligned
     automatically based on dir. */
  text-align:start;
}
/* ---------- Values ---------- */
.values-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:32px;}
.value{border-top:2px solid var(--brass); padding-top:18px;}
.value h3{font-size:17px; margin-bottom:8px;}
.value p{font-size:14px; color:#aeb6c4;}

/* ---------- Navy woven texture ----------
   Same subtle houndstooth motif as the beige sections on this site,
   recolored for the dark navy surfaces (header once scrolled, contact,
   footer, disclaimer, splash screen). Existing navy/gold colors are
   untouched. */
.contact,
footer,
.disclaimer,
.splash{
  position:relative;
  isolation:isolate;
}
/* header is already position:fixed at all times; only add stacking
   isolation, never override its position. */
header.scrolled{
  isolation:isolate;
}
header.scrolled::before,
.contact::before,
footer::before,
.disclaimer::before,
.splash::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.2;
  background-image:url('../images/pattern-houndstooth-navy.svg');
  background-size:28px 28px;
  background-repeat:repeat;
}
.contact > .wrap,
footer > .wrap,
.disclaimer > .wrap,
.splash-inner{
  position:relative;
  z-index:1;
}

/* ---------- Contact & Map ---------- */
.contact{background:var(--ink); color:var(--parchment);}
.contact .eyebrow{display:block; margin-bottom:20px;}
.contact-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:60px;}
.contact-info h2{color:var(--parchment); font-size:clamp(26px,3vw,34px); margin:14px 0 22px;}
.contact-info p{color:#c9d0dc; margin-bottom:32px; max-width:44ch;}
.info-item{display:flex; gap:16px; padding:18px 0; border-top:1px solid var(--line);}
.info-item > div{flex:1; min-width:0;}
.info-item:last-of-type{border-bottom:1px solid var(--line);}
.info-item .ic{width:20px; height:20px; color:var(--brass); flex-shrink:0; margin-top:2px;}
.info-item .label{font-family:'IBM Plex Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--brass-light); margin-bottom:4px;}
html[dir="rtl"] .info-item .label{letter-spacing:0.02em;}
.info-item .val{font-size:15px; color:var(--parchment);}
.info-item a.val:hover{color:var(--brass-light);}
/* Phone numbers read left-to-right in both languages. The leading "+" is
   bidi-neutral, so inside Arabic's RTL paragraph the bidi algorithm pushed
   it to the end of the run and the number rendered as "962798592600+".
   Isolating the element gives the digits their own LTR run, independent of
   the page direction. */
.tel{direction:ltr; unicode-bidi:isolate;}
/* Forcing the number LTR also flips where "start" alignment lands, which
   left-aligned it inside the otherwise right-aligned Arabic footer column.
   Pin it back to the column edge; the contact card is unaffected either way
   (that link is a flex item sized to its own text). */
html[dir="rtl"] .tel{text-align:right;}
.val-row{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.copy-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; padding:0; flex-shrink:0;
  border:1px solid var(--line); border-radius:3px; background:transparent;
  color:var(--brass-light); cursor:pointer; transition:all 0.2s ease;
}
.copy-btn:hover{border-color:var(--brass); color:var(--parchment); background:rgba(176,138,78,0.08);}
.copy-btn svg{width:14px; height:14px;}
.copy-btn.copied{border-color:#7bc99a; color:#7bc99a;}
/* Check icon inside the copy button is toggled via el.style.display
   by assets/js/main.js; its resting state (hidden) now lives here
   instead of an inline style="" attribute. */
.check-icon{display:none;}

form{display:grid; gap:18px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
label{font-family:'IBM Plex Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--brass-light); display:block; margin-bottom:8px;}
html[dir="rtl"] label{letter-spacing:0.02em;}
input, textarea{
  width:100%; background:rgba(246,241,230,0.04); border:1px solid var(--line); color:var(--parchment);
  padding:13px 14px; font-family:'Inter', sans-serif; font-size:14px; border-radius:2px;
}
input:focus, textarea:focus{outline:2px solid var(--brass); outline-offset:1px; border-color:var(--brass);}
input::placeholder, textarea::placeholder{color:#6b7382;}
textarea{resize:vertical; min-height:120px;}
.form-note{font-size:12px; color:#8b93a2; margin-top:-4px;}
#formStatus{font-size:13px; color:var(--brass-light); min-height:18px;}
/* Submit button alignment — moved here from an inline style="" attribute. */
.form-submit{justify-self:start;}

.map-wrap{margin-top:0;}
.map-frame{width:100%; height:420px; border:0; filter:sepia(0.35) saturate(0.7) hue-rotate(180deg) brightness(0.9) contrast(1.05);}
.map-caption{
  display:flex; justify-content:space-between; align-items:center;
  background:var(--ink); color:var(--parchment); padding:16px 26px; border:1px solid var(--line); border-top:none; flex-wrap:wrap; gap:10px;
}
.map-caption .mono{font-size:12px; color:#aeb6c4;}
.map-caption a{font-size:12px; color:var(--brass-light); border-bottom:1px solid var(--brass-light); padding-bottom:1px;}

/* ---------- Footer ---------- */
footer{background:var(--ink); color:#8b93a2; padding:56px 0 30px;}
.footer-top{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:30px; padding-bottom:36px; border-bottom:1px solid var(--line);}
.footer-links{display:flex; gap:40px; flex-wrap:wrap;}
.footer-col h4{font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--brass-light); margin-bottom:14px;}
.footer-col a, .footer-col p{display:block; font-size:13.5px; color:#8b93a2; margin-bottom:8px;}
.footer-col a:hover{color:var(--parchment);}
.footer-bottom{display:flex; justify-content:space-between; padding-top:24px; font-size:12px; flex-wrap:wrap; gap:10px;}

/* ---------- WhatsApp Float ---------- */
.wa-float{
  position:fixed; bottom:24px; right:24px; z-index:200;
  width:60px; height:60px; border-radius:50%;
  background:#25d366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,0.28);
  transition:transform 0.25s ease, box-shadow 0.25s ease;
  /* Keep clear of the iPhone home-indicator / rounded corners in both
     orientations. env() is 0 on devices without a safe area, so this
     matches the original 24px offset everywhere else. */
  bottom:max(24px, calc(env(safe-area-inset-bottom) + 16px));
  right:max(24px, calc(env(safe-area-inset-right) + 16px));
}
.wa-float:hover{transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,0.35);}
.wa-float svg{width:32px; height:32px; fill:#ffffff;}
html[dir="rtl"] .wa-float{
  right:auto; left:24px;
  left:max(24px, calc(env(safe-area-inset-left) + 16px));
}

/* ---------- Disclaimer ---------- */
.disclaimer{background:var(--ink); color:#8b93a2; padding:44px 0 60px; border-top:1px solid var(--line);}
.disclaimer .eyebrow{display:block; color:var(--brass-light); margin-bottom:16px;}
.disclaimer p{font-size:12px; line-height:1.7; color:#8b93a2; margin-bottom:14px; max-width:920px;}
.disclaimer p:last-child{margin-bottom:0;}

/* ---------- Reveal ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity 0.7s ease, transform 0.7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  html{scroll-behavior:auto;}
}

/* ---------- Responsive ---------- */
/* Tablet tier (iPad / Android tablets, portrait & landscape, and any
   narrow-desktop window down to here): a full horizontal nav with 5
   links + language toggle measurably wraps to two lines around
   768–900px in both English and Arabic, so this tier gets the same
   slide-in menu as phones — professional, touch-friendly, and
   consistent between the two languages and both pages. The 5-column
   team photo grid also gets cramped to ~115–165px-wide photos in this
   range, so it steps down to 3 columns here instead. */
@media (max-width: 1024px){
  .hamburger{
    display:flex;
    /* comfortable ≥44px touch target without changing the visible icon */
    min-width:44px; min-height:44px; align-items:center; justify-content:center;
  }
  .nav-links{
    position:fixed; top:0; right:0;
    height:100vh; height:100dvh;
    width:78%; max-width:320px;
    background:var(--ink-deep); flex-direction:column; align-items:flex-start; justify-content:flex-start;
    padding:40px 28px; gap:26px; transform:translateX(100%); transition:transform 0.35s ease; box-shadow:-8px 0 30px rgba(0,0,0,0.3);
    padding-top:max(40px, calc(env(safe-area-inset-top) + 24px));
    padding-bottom:max(40px, calc(env(safe-area-inset-bottom) + 24px));
    padding-right:max(28px, calc(env(safe-area-inset-right) + 24px));
    overflow-y:auto;
  }
  .nav-links.open{transform:translateX(0);}

  /* Dimmed backdrop behind the slide-in panel: makes the menu read as
     a modal overlay, and gives a large, hard-to-miss "tap outside to
     close" target alongside the X button and link taps. z-index sits
     below the header's 100 (so it never covers the header/panel,
     which is nested inside that stacking context) but well above
     normal page content. */
  .nav-backdrop{
    display:block;
    position:fixed; inset:0;
    background:rgba(8,14,24,0.55);
    opacity:0; visibility:hidden;
    transition:opacity 0.35s ease, visibility 0.35s ease;
    z-index:90;
  }
  .nav-backdrop.open{opacity:1; visibility:visible;}

  /* Mobile/tablet slide-in menu header: logo + firm name + a dedicated
     close button, sitting above the links instead of the panel just
     starting mid-list of links with no way to tell which menu you're
     in or a way to close it other than the (now covered) hamburger. */
  .nav-links-header{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    width:100%; flex-shrink:0;
    padding-bottom:22px;
    border-bottom:1px solid rgba(247,244,237,0.12);
  }
  .nav-links-brand{display:flex; align-items:center; gap:7px; text-decoration:none; min-width:0;}
  .nav-links-logo{height:36px; width:auto; display:block; flex-shrink:0; object-fit:contain;}
  .nav-links-brand-text{
    color:var(--parchment); font-family:'Fraunces', serif; line-height:1.25;
    /* Keep on one line, never truncate — the firm name must stay fully
       readable, never cut off with an ellipsis. At the old fixed 13.5px
       "Mohammad & Partners" needed ~150px but the row left it ~149px,
       so it broke onto a second line; the size now flexes with the
       viewport and only caps back at 13.5px once there is room. */
    font-size:clamp(10.5px, 3.3vw, 13.5px);
    white-space:nowrap;
    min-width:0;
  }
  .nav-links-brand-text small{
    display:block; font-family:'Fraunces', serif; font-size:clamp(9px, 2.7vw, 11px); letter-spacing:0.01em;
    color:var(--brass-light); font-weight:400; margin-top:1px;
  }
  .nav-close{
    position:relative; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; padding:0;
    background:none; border:none; border-radius:50%; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .nav-close:hover, .nav-close:focus-visible{background:rgba(247,244,237,0.08);}
  .nav-close:focus-visible{outline:2px solid var(--brass); outline-offset:2px;}
  .nav-close span{
    position:absolute; width:18px; height:2px; border-radius:1px; background:var(--parchment);
  }
  .nav-close span:first-child{transform:rotate(45deg);}
  .nav-close span:last-child{transform:rotate(-45deg);}

  .team-gallery-grid{grid-template-columns:repeat(3, 1fr); gap:22px;}

  /* iOS/Android: inputs under 16px trigger an unwanted auto-zoom on
     focus in Safari and some WebViews. 16px avoids that without
     visually growing the desktop form (desktop already sits above
     this breakpoint). */
  input, textarea{font-size:16px;}
}
/* Tablet-only slice of the tier above (641–1024px): the 3-column team
   grid puts 5 photos as 3-then-2, leaving the last row's pair stranded
   against the left edge with an empty gap on the right. Center that
   pair. Scoped to min-width:641px so it never leaks into the phone
   2-column grid below, which handles its own leftover-item centering. */
@media (min-width: 641px) and (max-width: 1024px){
  .team-gallery-grid{grid-template-columns:repeat(6, 1fr);}
  .team-gallery-grid > *{grid-column:span 2;}
  .team-gallery-grid > *:nth-child(4):nth-last-child(2){grid-column:2 / span 2;}
  .team-gallery-grid > *:nth-child(5):last-child{grid-column:4 / span 2;}
}
@media (max-width: 900px){
  .about-grid, .contact-grid{grid-template-columns:1fr;}
  .practice-grid{grid-template-columns:1fr 1fr;}
  .team-gallery{padding:72px 0 64px;}
  .team-gallery-header{margin-bottom:40px;}
  .team-gallery-crest .tg-logo{height:36px;}
  .team-gallery-name{font-size:13.5px;}
  .team-gallery-role{font-size:9.5px;}
  .values-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width: 640px){
  .wrap{padding:0 20px;}
  /* Mobile branding: the firm name now sits beside the logo instead of the
     logo standing on its own — the same two-line lockup as desktop (name
     in parchment, "Lawyers" in brass under it), scaled down to share the
     row with the language button and the hamburger. Sizes track the
     viewport so the name holds one line from ~320px up, and the group
     lands shorter than the 48px logo it replaces, so nothing below the
     fixed header needs new clearance. */
  .brandmark{gap:7px;}
  .brand-logo{height:clamp(28px, 9vw, 40px);}
  header nav{gap:8px;}
  .nav-right{gap:6px;}
  .lang-toggle{font-size:11.5px; padding:8px 12px;}
  header .brand-text{
    display:block;
    font-size:clamp(11px, 3.7vw, 16px);
    white-space:nowrap;
  }
  header .brand-text small{font-size:clamp(9px, 2.9vw, 12.5px);}
  /* Was a single stacked column here — all 8 practice-area cards full
     width, one per row, forcing a long scroll. Match the 2-column grid
     already used at the tablet tier above so phones get it too; the
     hairline gap/background technique (.practice-grid, unchanged)
     keeps working the same way at 2 columns. */
  .practice-grid{grid-template-columns:1fr 1fr;}
  /* Generous desktop/tablet padding (38px 32px) leaves too little room
     for card text at ~167px-wide phone columns — trim padding and
     scale text/icon down slightly so headings like "Inheritance,
     Estate & Sharia Law Matters" stay readable without overflowing. */
  .practice-card{padding:22px 16px;}
  .practice-card .icon{width:28px; height:28px; margin-bottom:14px;}
  .practice-card h3{font-size:16px; margin-bottom:8px; line-height:1.25;}
  .practice-card p{font-size:13px; line-height:1.5;}
  /* Mobile team gallery: a one-card-at-a-time swipe carousel instead of
     the 2-column grid. The row bleeds past .wrap's 20px padding so a
     card can run to the screen edge, then puts that padding back inside
     the scroller (with matching scroll-padding) so the first card still
     lines up with the section heading while the next one peeks in as
     the swipe affordance. */
  .team-gallery-grid{
    display:flex; flex-wrap:nowrap; gap:16px;
    /* Photos are a uniform 3:4 ratio, but "Founder & Managing Partner"
       wraps to two lines while "Associate" is one — with the desktop
       align-items:end (below the founder's larger center column) that
       difference bottom-aligned the cards, so photos started at
       different heights. Top-align on phones so every photo in the row
       lines up regardless of how the role text wraps. */
    align-items:start;
    margin-inline:-20px;
    padding-inline:20px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:20px;
    /* Keep the swipe inside the carousel — no browser back-gesture or
       page-level rubber-banding when a finger runs past either end. */
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    /* The peeking next card is the affordance; the bar itself would
       just sit under the portraits. */
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .team-gallery-grid::-webkit-scrollbar{display:none;}
  /* 86% leaves ~45-60px of the next card showing at typical phone
     widths; the cap keeps the portrait sane on 600px+ landscape
     phones, where the percentage alone would balloon it. */
  .team-gallery-grid > *{flex:0 0 86%; max-width:330px; scroll-snap-align:start;}
  /* Portraits sit at 88% of the card slot rather than filling it, which
     trims them ~12% and leaves breathing room around each photo. The
     slot width, gap and snap points are untouched, so the swipe rhythm
     and the peek of the next card stay exactly as they were; the 3:4
     crop and centring come from the unchanged base rules. */
  .team-gallery-photo{width:88%;}
  /* The reveal-on-scroll fade is keyed to the viewport, so a card sitting
     off to the right of the carousel stays at opacity:0 — including the
     one peeking in as the swipe hint, which left a blank strip instead of
     the next portrait. Inside the carousel, show the cards with the
     section rather than one at a time. */
  .team-gallery-grid > .reveal{opacity:1; transform:none; transition:none;}
  /* Swipe order: founder, partner, then the three associates. DOM order
     is fixed by the desktop layout (Mohammad Al Hourani sits in the
     wider centre column, 3rd of 5), so the mobile sequence is set with
     flex order rather than by re-ordering the markup. */
  .team-gallery-link:nth-child(1){order:4;} /* Emad Al Omari */
  .team-gallery-link:nth-child(2){order:3;} /* Anas Hammouri */
  .team-gallery-link:nth-child(3){order:1;} /* Mohammad Al Hourani — founder, first */
  .team-gallery-link:nth-child(4){order:2;} /* Mohammad Al Khalil — partner */
  .team-gallery-link:nth-child(5){order:5;} /* Tareq Obeidat */
  /* Arabic flips the page to RTL, which would mirror the track: the row
     would run right-to-left and the browser's scroll origin would move to
     the other edge, so a language switch could leave the last card
     showing. The team sequence and the card the carousel opens on must
     not depend on the language, so the track stays LTR and only the card
     text goes back to RTL. */
  html[dir="rtl"] .team-gallery-grid{direction:ltr;}
  html[dir="rtl"] .team-gallery-link{direction:rtl;}
  .team-gallery-crest .tg-line{max-width:44px;}
  .team-gallery-crest .tg-logo{height:32px;}
  .team-gallery-name{font-size:15px;}
  .team-gallery-role{font-size:10.5px;}
  .values-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  section{padding:76px 0;}
  .hero{padding:130px 0 60px;}
  .hero .wrap{
    padding-left:20px;
    padding-right:20px;
  }
  html[dir="rtl"] .hero .wrap{
    padding-left:20px;
    padding-right:20px;
  }
  .hero-content{max-width:100%;}
  /* Full-bleed cover, matching desktop — fills the hero edge to edge
     with no letterboxing. The .hero::before gradient (unchanged, not
     mobile-scoped) keeps the text legible over the photo at this size
     too. */
  .hero-bg-layer{background-size:cover; background-position:center center;}
  /* The heading's desktop max-width:14ch (below) is a *character*
     width, so it scales with font-size and stayed just as cramped
     however small the mobile font got — that's what was forcing 4
     lines. Let it use the full content width on phones instead. */
  .hero h1{
    max-width:none;
    font-size:36px;
    line-height:1.15;
    margin:14px 0 14px;
  }
  .hero p.lede{
    font-size:15.5px;
    line-height:1.5;
    max-width:none;
  }
  .hero-ctas{margin-top:26px;}
  /* Two hero buttons side by side get tight on the narrowest phones —
     stack them full-width, matching the "stack when necessary" brief. */
  .hero-ctas{flex-direction:column; align-items:stretch;}
  .hero-ctas .btn{justify-content:center; width:100%;}
  .map-caption{flex-direction:column; align-items:flex-start;}
  .map-frame{height:320px;}
  footer{padding-bottom:max(30px, calc(env(safe-area-inset-bottom) + 20px));}
}

/* Landscape phones: fixed 190px+ hero padding and a 100dvh nav panel
   both eat too much of a ~375–430px-tall viewport. Trim vertical
   rhythm without touching portrait or tablet/desktop. */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape){
  .hero{padding:130px 0 60px;}
  .nav-links{padding-top:24px; padding-bottom:24px; justify-content:flex-start; gap:18px;}
}

/* ---------- Loading / Splash screen ---------- */
.splash{
  position:fixed; inset:0; z-index:9999;
  background:radial-gradient(circle at 50% 30%, #16263f 0%, var(--ink) 45%, var(--ink-deep) 100%);
  display:flex; align-items:center; justify-content:center;
  transition:opacity 0.6s ease, visibility 0.6s ease;
}
.splash.hidden{opacity:0; visibility:hidden; pointer-events:none;}
.splash-inner{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 24px;}
.splash-logo{width:min(220px, 60vw); height:auto; object-fit:contain; animation:splashIn 0.9s ease both;}
.splash-name{font-family:'Fraunces', serif; color:var(--parchment); font-size:clamp(20px, 3.4vw, 30px); font-weight:500; letter-spacing:-0.01em; margin-top:22px;}
.splash-lname{font-family:'Fraunces', serif; color:var(--brass-light); font-size:16px; letter-spacing:0.02em; margin-top:6px;}
.splash-line{width:min(170px, 50vw); height:1px; background:linear-gradient(90deg, transparent, var(--brass), transparent); margin-top:24px;}
@keyframes splashIn{from{opacity:0; transform:scale(0.92);} to{opacity:1; transform:scale(1);}}
html[dir="rtl"] .splash-name{font-family:'Amiri','Almarai',serif; font-weight:700;}
html[dir="rtl"] .splash-lname{letter-spacing:0.02em;}

/* Ultra-narrow phones (~320px wide): even at the clamp's 10.5px floor the
   one-line firm name no longer fits beside the logo and the close button
   inside a 78%-wide panel. Let it wrap again there rather than overflow —
   two readable lines beat a clipped name. */
@media (max-width: 340px){
  .nav-links-brand-text{white-space:normal;}
  /* Same squeeze in the header: the Arabic toggle reads "English" and runs
     wider than "العربية", which is what makes this tier the tight one. */
  .brand-logo{height:26px;}
  .lang-toggle{font-size:10px; padding:6px 7px;}
}