/* Mohammad & Partners Lawyers — team.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;}
/* overflow-x:hidden intentionally lives on html only, not body: setting
   it on body as well turns body into its own scroll container (per the
   CSS overflow spec), which silently breaks position:sticky on any
   descendant — this is what was stopping .profile-side (the lawyer
   photo card) from staying in place while the bio text scrolled.
   html's overflow-x:hidden alone still fully prevents horizontal
   scroll/overflow — verified with a 375–1920px width sweep. */
body{
  position:relative;
  font-family:'Inter', sans-serif;
  color:var(--parchment);
  background:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  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 background (the associates intro block above
   the junior profiles). Fixed so it reads as one continuous surface
   as the page scrolls. Sections with their own opaque background
   (the .profile cards) 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,h4,.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);
}

/* ---------- RTL / Arabic ---------- */
[dir="rtl"] body,
[dir="rtl"] .brand-text,
[dir="rtl"] .nav-links-brand-text,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] .display{
  font-family:'Almarai', 'Amiri', sans-serif;
  letter-spacing:0;
}
[dir="rtl"] .eyebrow,
[dir="rtl"] .profile-card .role,
[dir="rtl"] .profile-body h4,
[dir="rtl"] .footer-col h4{
  font-family:'Almarai', sans-serif;
  letter-spacing:0.02em;
}
[dir="rtl"] .profile-body li{padding-left:0; padding-right:18px;}
[dir="rtl"] .profile-body li::before{left:auto; right:0;}
[dir="rtl"] .wa-float{
  right:auto; left:24px;
  left:max(24px, calc(env(safe-area-inset-left) + 16px));
}
.page-hero h1{max-width:18ch;}
[dir="rtl"] .page-hero h1{max-width:none;}

/* ---------- 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:18px; position:relative; z-index:1;}
.brandmark{display:flex; align-items:center; gap:12px;}
.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:36px;}
/* 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-links a.active{opacity:1; border-color:var(--brass);}
.lang-toggle{
  background:none; border:1px solid var(--line); color:var(--parchment);
  font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.06em;
  padding:8px 14px; border-radius:2px; cursor:pointer; transition:all 0.25s ease;
  flex-shrink:0;
}
.lang-toggle:hover{border-color:var(--brass); color:var(--brass-light);}
.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);}

/* ---------- Page hero ---------- */
.page-hero{
  position:relative;
  background:
    linear-gradient(rgba(11,20,34,0.72), rgba(11,20,34,0.72)),
    url('../images/our%20team.png') center / cover no-repeat;
  color:var(--parchment);
  padding:190px 0 110px;
  overflow:hidden;
}
.page-hero .wrap{position:relative; z-index:2;}
.page-hero h1{
  color:var(--parchment);
  font-size:clamp(38px, 5vw, 58px);
  line-height:1.08;
  margin:18px 0 22px;
}
.page-hero p{
  font-size:17px; color:#c9d0dc; max-width:56ch; margin-bottom:28px;
}

/* ---------- Section shell ---------- */
section{padding:110px 0;}
.section-head{max-width:720px; 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;}

/* ---------- Full profile detail ---------- */
/* Add this in team.html, replacing the existing .profile rule. */
.profile{
position:relative;
isolation:isolate;
background:var(--ink);
}

/* Navy woven houndstooth-inspired texture, repeated behind every
   team member profile, matching the pattern used across the rest of
   the site's dark navy surfaces. */
.profile::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;
}

/* Keeps the photo, card, and text above the grid. */
.profile > *{
position:relative;
z-index:1;
}

.profile + .profile{border-top:1px solid var(--line);}
.profile-inner{display:grid; grid-template-columns:0.8fr 1.2fr; gap:64px; align-items:start;}
.profile-side{position:sticky; top:110px;}
.profile-card{
  border:1px solid var(--line); background:rgba(22,38,63,0.55);
  padding:34px; text-align:center;
}
.profile-avatar{
  width:120px; height:120px; border-radius:50%; border:2px solid var(--brass);
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px;
  font-family:'Fraunces', serif; font-size:40px; color:var(--brass-light);
  background:linear-gradient(160deg, #16263f, #0b1422);
}
.profile-photo{
  width:100%; max-width:280px; aspect-ratio:4/5; margin:0 auto 22px;
  border:1px solid var(--line); outline:1px solid var(--brass); outline-offset:4px;
  background:#2a2d33; /* dark gray backdrop behind the headshot */
  overflow:hidden; position:relative;
}
.profile-photo img{
  width:100%; height:100%; object-fit:cover; object-position:center top;
  display:block;
}
.profile-card h3{font-size:26px;}
.profile-card .role{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--brass); margin:6px 0 0;
}
.profile-body h4{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--brass); margin:34px 0 10px; padding-top:20px; border-top:1px solid var(--line);
}
.profile-body h4:first-child{margin-top:0; padding-top:0; border-top:none;}
.profile-body p{font-size:15px; color:#c9d0dc; margin-bottom:12px; max-width:64ch;}
.profile-body ul{list-style:none; display:grid; gap:8px; margin-bottom:6px;}
.profile-body li{
  font-size:14.5px; color:#c9d0dc; padding-left:18px; position:relative; max-width:64ch;
}
.profile-body li::before{content:''; position:absolute; left:0; top:9px; width:6px; height:1px; background:var(--brass);}

/* ---------- Navy woven texture ----------
   Same subtle houndstooth motif as the beige sections above, recolored
   for the site's dark navy surfaces (header once scrolled, CTA band,
   footer, disclaimer). Existing navy/gold colors are untouched. */
.cta-band,
footer,
.disclaimer{
  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,
.cta-band::before,
footer::before,
.disclaimer::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;
}
.cta-band > .wrap,
footer > .wrap,
.disclaimer > .wrap{
  position:relative;
  z-index:1;
}

/* ---------- CTA band ---------- */
.cta-band{background:var(--ink); color:var(--parchment); text-align:center; padding:90px 0;}
.cta-band h2{color:var(--parchment); font-size:clamp(28px,3.4vw,38px); margin:14px 0 20px;}
.cta-band p{color:#c9d0dc; max-width:48ch; margin:0 auto 32px;}
.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);}
.cta-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

/* ---------- 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);}
/* 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. */
[dir="rtl"] .tel{text-align:right;}
.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;}

/* ---------- 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 ---------- */
@media (max-width: 900px){
  .profile-inner{grid-template-columns:1fr; gap:36px;}
  .profile-side{position:static;}
  .profile-card{max-width:420px;}
}
/* Tablet tier (iPad / Android tablets, portrait & landscape, and any
   narrow-desktop window down to here) — matches index.html's
   breakpoint. A full horizontal nav measurably wraps to two lines
   around 768–900px in both languages, so this tier gets the same
   slide-in menu as phones instead. */
@media (max-width: 1024px){
  .lang-toggle{margin-inline-start:auto;}
  .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);}
  [dir="rtl"] .nav-links{
    right:auto; left:0;
    transform:translateX(-100%);
    box-shadow:8px 0 30px rgba(0,0,0,0.3);
  }
  [dir="rtl"] .nav-links.open{transform:translateX(0);}

  /* Dimmed backdrop behind the slide-in panel — matches index.html. */
  .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 — matches index.html. */
  .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);}
}
@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);}
  section{padding:76px 0;}
  .page-hero{padding:150px 0 80px;}
  .profile-card{padding:26px 20px;}
  /* Two CTA buttons side by side get tight on the narrowest phones —
     stack them full-width. */
  .cta-actions{flex-direction:column; align-items:stretch;}
  .cta-actions .btn{justify-content:center; width:100%;}
  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){
  .page-hero{padding:130px 0 60px;}
  .nav-links{padding-top:24px; padding-bottom:24px; justify-content:flex-start; gap:18px;}
}

/* ---------- Loading / Splash screen ----------
   Same splash screen as the home page, shown while team.html loads. */
.splash{
  position:fixed; inset:0; z-index:9999;
  isolation:isolate;
  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::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;
}
.splash.hidden{opacity:0; visibility:hidden; pointer-events:none;}
.splash-inner{position:relative; z-index:1; 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;}

/* ---------- CSP hardening helper classes ----------
   Replace three former inline style="" attributes so style-src can
   drop 'unsafe-inline'. No visual change. */
.rule-gradient{
  height:6px;
  background:linear-gradient(90deg, transparent, var(--brass) 20%, var(--brass-light) 50%, var(--brass) 80%, transparent);
  opacity:0.85;
}
.section-flush{padding-top:0;}
.section-head-offset{margin-top:110px;}

/* 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;}
}