/* ═══════════════════════════════════════════════════════════════════════
   El Ghoul – Araji — theme.css
   Ported 1:1 from the approved mockup (qwenmax.html, "Nature Distilled").
   Tokens: cream / travertine / walnut / brass · Playfair Display + IBM Plex Sans
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ 0. TOKENS ═══ */
:root{
  --cream:        #F4EFE6;
  --cream-2:      #EBE3D6;
  --cream-3:      #E1D7C6;
  --travertine:   #C9BCA8;
  --stone:        #A89A85;
  --walnut:       #3A2A1F;
  --walnut-2:     #513B2B;
  --walnut-3:     #2A1E15;
  --ink:          #1C1712;
  --slate:        #4C565C;
  --slate-2:      #78848A;
  --brass:        #A9854E;
  --brass-soft:   #C2A472;

  --bg:           var(--cream);
  --fg:           var(--walnut);
  --fg-soft:      var(--slate);
  --line:         color-mix(in oklab, var(--walnut) 16%, transparent);

  --font-display: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --font-body:    'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;

  --fs-hero:   clamp(2.65rem, 1.05rem + 6.6vw, 8.4rem);
  --fs-h2:     clamp(2.05rem, 1.05rem + 3.5vw, 4.7rem);
  --fs-h3:     clamp(1.32rem, 1.02rem + 1.05vw, 2.15rem);
  --fs-lead:   clamp(1.03rem, 0.96rem + 0.4vw, 1.3rem);
  --fs-body:   clamp(0.95rem, 0.92rem + 0.18vw, 1.05rem);
  --fs-small:  clamp(0.78rem, 0.75rem + 0.12vw, 0.86rem);
  --fs-eyebrow:clamp(0.63rem, 0.58rem + 0.18vw, 0.74rem);
  --fs-num:    clamp(3.4rem, 1.2rem + 8vw, 9.5rem);

  --gut:   clamp(1.15rem, 4.4vw, 4.5rem);
  --sect:  clamp(4.5rem, 11vw, 11rem);
  --maxw:  1680px;

  --ease:   cubic-bezier(.22,1,.36,1);
  --ease-2: cubic-bezier(.65,.05,.36,1);
  --snap:   240ms;
}
html[lang="ar"]{
  --font-display:'Tajawal','Playfair Display',Georgia,serif;
  --font-body:'Tajawal','IBM Plex Sans',Arial,sans-serif;

  /* Dedicated Arabic type scale (Tajawal) — Arabic glyphs sit smaller and
     tighter than the Latin pairing at equal sizes, so sizes are raised and
     leading is opened rather than reusing the Latin clamp() values. */
  --fs-hero:   clamp(2rem, 0.9rem + 4.2vw, 5rem);
  --fs-h2:     clamp(1.85rem, 1.05rem + 3.1vw, 4.1rem);
  --fs-h3:     clamp(1.3rem, 1.04rem + 1vw, 2rem);
  --fs-lead:   clamp(1.08rem, 1rem + .45vw, 1.4rem);
  --fs-body:   clamp(1rem, .97rem + .2vw, 1.12rem);
  --fs-small:  clamp(.82rem, .8rem + .12vw, .92rem);
  --fs-eyebrow:clamp(.68rem, .64rem + .18vw, .8rem);
  --fs-num:    clamp(3.2rem, 1.2rem + 7.4vw, 8.6rem);
}

/* Arabic typography guards (Tajawal):
   - Arabic script is cursive; letter-spacing visually disconnects joined
     glyphs, so all tracked/treatments reset to 0.
   - Italics are not a convention in Arabic composition; slanted
     synthesized glyphs are disabled. */
html[lang="ar"] .eyebrow,html[lang="ar"] .nav a,html[lang="ar"] .btn,
html[lang="ar"] .brand-txt span,html[lang="ar"] .hero-vert,html[lang="ar"] .langs a,
html[lang="ar"] .chip,html[lang="ar"] .p-role,html[lang="ar"] .p-tags,html[lang="ar"] .pa .idx,
html[lang="ar"] .hero-stats span,html[lang="ar"] .off-fact span,html[lang="ar"] .cap,
html[lang="ar"] .ct-row .k,html[lang="ar"] .mq-track span,html[lang="ar"] .sectors a,
html[lang="ar"] .breadcrumbs,html[lang="ar"] .ft nav a,html[lang="ar"] .skip,
html[lang="ar"] .form-ok,html[lang="ar"] .field label,html[lang="ar"] .hero-scroll,
html[lang="ar"] .aside-block span,html[lang="ar"] .practice-number,html[lang="ar"] .placeholder-chip,
html[lang="ar"] .contact-grid span,html[lang="ar"] .aside-link,html[lang="ar"] .back-link,
html[lang="ar"] .ft small,html[lang="ar"] .ft small a,html[lang="ar"] .ft-disclaimer,
html[lang="ar"] .ct-map .map-directions,html[lang="ar"] .ega-draft-notice{
  letter-spacing:0;
}
html[lang="ar"] .h2 em,html[lang="ar"] .val h3,html[lang="ar"] .firm-note,
html[lang="ar"] .p-strip .quote,html[lang="ar"] .hero-title .ln:nth-child(2) > span{
  font-style:normal;
}

/* Arabic type treatment — Tajawal has its own weight set (200–900, no 600)
   and needs roomier leading than the Latin display rules provide.
   Weight mapping: Latin 600 → Tajawal 500; hairline 300 paragraphs → 400
   for small-size legibility. No negative tracking anywhere (cursive script). */
html[lang="ar"] body{ line-height:1.85; }

/* Display headings: leading + tracking */
html[lang="ar"] .hero-title{ grid-column:2 / span 7; font-weight:500; line-height:1.26; letter-spacing:0; }
html[lang="ar"] .hero-title .ln:nth-child(2) > span{ font-weight:400; }
html[lang="ar"] .h2{ line-height:1.3; letter-spacing:0; }
html[lang="ar"] .page-hero h1{ line-height:1.3; letter-spacing:0; }
html[lang="ar"] .detail-main h1,html[lang="ar"] .detail-main h2{ line-height:1.35; letter-spacing:0; }
html[lang="ar"] .contact-main h2{ line-height:1.3; }
html[lang="ar"] .index-card h2,html[lang="ar"] .index-card h3{ line-height:1.35; letter-spacing:0; }
html[lang="ar"] .insight-card h2,html[lang="ar"] .insight-card h3{ line-height:1.45; }
html[lang="ar"] .p-meta h3{ line-height:1.35; letter-spacing:0; }
html[lang="ar"] .pa h3{ font-weight:500; line-height:1.45; letter-spacing:0; }
html[lang="ar"] .val h3{ font-weight:500; line-height:1.3; letter-spacing:0; }
html[lang="ar"] .pa-num{ letter-spacing:0; }
html[lang="ar"] .hero-stats b{ line-height:1.2; letter-spacing:0; }
html[lang="ar"] .off-fact b{ line-height:1.25; }
html[lang="ar"] .mq-track span{ letter-spacing:0; line-height:1.4; }
html[lang="ar"] .drawer nav a{ line-height:1.5; }

/* Running text: open leading, 400 over 300 for Arabic legibility */
html[lang="ar"] .lead,
html[lang="ar"] .firm-body p,
html[lang="ar"] .off-copy p,
html[lang="ar"] .p-bio,
html[lang="ar"] .val p,
html[lang="ar"] .pa p{
  font-weight:400; line-height:1.9;
}
html[lang="ar"] .firm-body p:first-of-type{ font-weight:500; }
html[lang="ar"] .firm-note{ line-height:1.8; }
html[lang="ar"] .p-strip .quote{ line-height:1.85; font-weight:400; }
html[lang="ar"] .ct-row .v{ font-weight:400; line-height:1.8; }

/* UI labels: Latin 600 → Tajawal 500 (600 is not in the loaded set) */
html[lang="ar"] .btn,
html[lang="ar"] .langs button,
html[lang="ar"] .eyebrow,
html[lang="ar"] .p-role,
html[lang="ar"] .form-ok{
  font-weight:500;
}

/* The scroll-driven hero effect (Playfair weight 400→900 with negative
   tracking) is a Latin-typography treatment; Arabic keeps a fixed weight,
   so only the time-based entrance animation applies. */
html[lang="ar"] .hero-title{ animation:heroIn 1.05s var(--ease) both; }
html[lang="ar"] .hero-media{ animation:heroIn 1.4s var(--ease) both; }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.72;
  letter-spacing:.004em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--walnut); color:var(--cream); }

:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:4px;
  border-radius:2px;
}

.skip{
  position:fixed; inset-inline-start:50%; top:.6rem; transform:translate(-50%,-160%);
  z-index:1000; background:var(--walnut); color:var(--cream);
  padding:.75rem 1.4rem; font-size:var(--fs-small); letter-spacing:.16em; text-transform:uppercase;
  transition:transform var(--snap) var(--ease);
}
.skip:focus{ transform:translate(-50%,0); }

/* ═══ Grain + progress ═══ */
.grain{
  position:fixed; inset:0; z-index:900; pointer-events:none;
  opacity:.36; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
.progress{
  position:fixed; top:0; inset-inline:0; height:2px; z-index:880;
  background:linear-gradient(90deg,var(--brass),var(--walnut));
  transform:scaleX(0); transform-origin:0 50%; pointer-events:none;
}
html[dir="rtl"] .progress{ transform-origin:100% 50%; }

/* ═══════════════════════════════════════════════════════════════════════
   1. HEADER
   ═══════════════════════════════════════════════════════════════════════ */
.hdr{
  position:fixed; top:0; inset-inline:0; z-index:800;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding:clamp(1rem,2vw,1.7rem) var(--gut);
  border-bottom:1px solid transparent;
  transition:background var(--snap) var(--ease),
             border-color var(--snap) var(--ease),
             backdrop-filter var(--snap) var(--ease);
}
.hdr::after{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:color-mix(in oklab, var(--cream) 84%, transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line);
  transition:opacity var(--snap) var(--ease);
}
.hdr.stuck::after{ opacity:1; }
.hdr.stuck{ padding-block:clamp(.6rem,1.1vw,.95rem); }

.brand{ display:flex; align-items:center; gap:.85rem; }
.mark{
  width:clamp(38px,3.3vw,46px); aspect-ratio:1; flex:none;
  display:grid; place-items:center;
  border:1px solid var(--line);
  background:linear-gradient(150deg,var(--walnut-2),var(--walnut-3));
  color:var(--cream);
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(.78rem,.72vw,.95rem); letter-spacing:.06em;
  transition:transform var(--snap) var(--ease), box-shadow var(--snap) var(--ease);
  view-transition-name:vt-mark;
}
.brand:hover .mark{ transform:rotate(-4deg) scale(1.05); box-shadow:0 10px 26px -14px rgba(42,30,21,.9); }
.brand-txt{ display:flex; flex-direction:column; line-height:1.14; }
.brand-txt b{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(.92rem,.42rem + .78vw,1.16rem); letter-spacing:.015em;
}
.brand-txt span{
  font-size:.6rem; letter-spacing:.34em; text-transform:uppercase; color:var(--fg-soft);
}

.nav{ display:flex; align-items:center; gap:clamp(.9rem,1.9vw,2.1rem); }
.nav a{
  position:relative; font-size:var(--fs-small); font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--walnut-2);
  padding-block:.35rem;
}
.nav a::after{
  content:""; position:absolute; inset-inline:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:100% 50%;
  transition:transform var(--snap) var(--ease);
}
html[dir="rtl"] .nav a::after{ transform-origin:0 50%; }
.nav a:hover::after,.nav a:focus-visible::after{ transform:scaleX(1); transform-origin:0 50%; }

.hdr-tools{ display:flex; align-items:center; gap:.55rem; }
.langs{ display:flex; align-items:center; border:1px solid var(--line); }
.langs a{
  display:inline-block; padding:.42rem .62rem; font-size:.66rem; font-weight:600; letter-spacing:.14em;
  text-decoration:none; color:var(--fg-soft); transition:color var(--snap) var(--ease), background var(--snap) var(--ease);
}
.langs a:hover{ color:var(--walnut); background:color-mix(in oklab,var(--travertine) 42%,transparent); }
.langs a[aria-current="true"]{ background:var(--walnut); color:var(--cream); }

.btn{
  --btn-bg:var(--walnut); --btn-fg:var(--cream);
  position:relative; display:inline-flex; align-items:center; gap:.6rem;
  padding:.86rem 1.5rem; overflow:hidden; isolation:isolate;
  background:var(--btn-bg); color:var(--btn-fg);
  font-size:var(--fs-small); font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  border:1px solid var(--btn-bg);
  transition:color var(--snap) var(--ease), border-color var(--snap) var(--ease), transform var(--snap) var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--brass);
  transform:translateY(101%); transition:transform 280ms var(--ease);
}
.btn:hover::before,.btn:focus-visible::before{ transform:translateY(0); }
.btn:hover{ transform:translateY(-2px); border-color:var(--brass); }
.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--walnut); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--brass); color:var(--cream); }
.btn .arw{ transition:transform 280ms var(--ease); }
.btn:hover .arw{ transform:translateX(4px); }
html[dir="rtl"] .btn .arw{ transform:scaleX(-1); }
html[dir="rtl"] .btn:hover .arw{ transform:translateX(-4px) scaleX(-1); }
.hdr .btn{ padding:.62rem 1.05rem; }

.burger{
  display:none; width:44px; height:44px; place-items:center; border:1px solid var(--line);
}
.burger i{ display:block; width:19px; height:1.4px; background:var(--walnut); position:relative; transition:background var(--snap) var(--ease); }
.burger i::before,.burger i::after{
  content:""; position:absolute; inset-inline:0; height:1.4px; background:var(--walnut);
  transition:transform 260ms var(--ease);
}
.burger i::before{ top:-6px; } .burger i::after{ top:6px; }
.burger[aria-expanded="true"] i{ background:transparent; }
.burger[aria-expanded="true"] i::before{ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] i::after{ transform:translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:790; padding:6.5rem var(--gut) 2.5rem;
  background:var(--cream-2); display:flex; flex-direction:column; justify-content:space-between;
  clip-path:inset(0 0 100% 0); transition:clip-path 520ms var(--ease);
  visibility:hidden;
}
.drawer.open{ clip-path:inset(0 0 0 0); visibility:visible; }
.drawer nav{ display:flex; flex-direction:column; gap:.15rem; }
.drawer nav a{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.8rem,8vw,2.7rem); line-height:1.22;
  border-bottom:1px solid var(--line); padding-block:.6rem;
  opacity:0; transform:translateY(18px);
  transition:opacity 420ms var(--ease), transform 420ms var(--ease), color var(--snap) var(--ease);
}
.drawer.open nav a{ opacity:1; transform:none; }
.drawer.open nav a:nth-child(1){ transition-delay:120ms } .drawer.open nav a:nth-child(2){ transition-delay:170ms }
.drawer.open nav a:nth-child(3){ transition-delay:220ms } .drawer.open nav a:nth-child(4){ transition-delay:270ms }
.drawer.open nav a:nth-child(5){ transition-delay:320ms } .drawer.open nav a:nth-child(6){ transition-delay:370ms }
.drawer nav a:hover{ color:var(--brass); }
.drawer .btn{ align-self:flex-start; margin-top:2rem; }

/* ═══════════════════════════════════════════════════════════════════════
   2. SHARED / BROKEN GRID PRIMITIVES
   ═══════════════════════════════════════════════════════════════════════ */
.shell{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
section{ position:relative; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.7rem;
  font-size:var(--fs-eyebrow); font-weight:600; letter-spacing:.36em; text-transform:uppercase;
  color:var(--brass);
}
.eyebrow::before{
  content:""; width:clamp(26px,3.4vw,52px); height:1px; background:currentColor; opacity:.65;
}
.h2{
  font-family:var(--font-display); font-weight:700;
  font-size:var(--fs-h2); line-height:1.02; letter-spacing:-.022em;
  margin:.55rem 0 0; text-wrap:balance;
}
.h2 em{ font-style:italic; font-weight:400; color:var(--brass); }
.lead{ font-size:var(--fs-lead); font-weight:300; line-height:1.62; color:var(--slate); max-width:56ch; }

/* figure frame with engraved SVG fallback */
.fig{ position:relative; overflow:hidden; background:var(--cream-3); isolation:isolate; }
.fig img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:2; transition:opacity 600ms var(--ease), transform 900ms var(--ease);
}
.fig .art{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.fig.loaded .art{ opacity:.001; }
.fig::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(190deg,rgba(58,42,31,0) 42%,rgba(42,30,21,.42));
  opacity:.75;
}
.cap{
  position:absolute; z-index:4; inset-block-end:0; inset-inline-start:0;
  padding:1.1rem clamp(1rem,2vw,1.6rem);
  color:var(--cream); font-size:var(--fs-small); letter-spacing:.16em; text-transform:uppercase;
  display:flex; align-items:center; gap:.6rem;
}
.cap::before{ content:""; width:22px; height:1px; background:var(--brass-soft); }

/* reveal baseline (non-supporting browsers see content immediately) */
@supports (animation-timeline: view()){
  .rv{ animation:rvUp linear both; animation-timeline:view(); animation-range:entry 4% cover 30%; }
  .rv-slow{ animation:rvUp linear both; animation-timeline:view(); animation-range:entry 0% cover 42%; }
  .rv-fade{ animation:rvFade linear both; animation-timeline:view(); animation-range:entry 6% cover 34%; }
  .rv-line{ animation:rvLine linear both; animation-timeline:view(); animation-range:entry 8% cover 30%; }
}
@keyframes rvUp{ from{ opacity:0; transform:translate3d(0,clamp(24px,5vw,64px),0) } to{ opacity:1; transform:none } }
@keyframes rvFade{ from{ opacity:0 } to{ opacity:1 } }
@keyframes rvLine{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

.rule{ height:1px; background:var(--line); transform-origin:0 50%; }

/* ═══════════════════════════════════════════════════════════════════════
   3. HERO
   ═══════════════════════════════════════════════════════════════════════ */
.hero{
  position:relative; min-height:100svh; padding-block:clamp(7.5rem,15vh,12rem) clamp(2rem,5vh,4rem);
  display:flex; align-items:center;
  background:
    radial-gradient(120% 90% at 82% 8%, color-mix(in oklab,var(--travertine) 55%,transparent) 0%, transparent 58%),
    radial-gradient(90% 70% at 4% 96%, color-mix(in oklab,var(--cream-3) 70%,transparent) 0%, transparent 60%),
    var(--cream);
  overflow:clip;
}
.hero-grid{
  display:grid; grid-template-columns:repeat(12,1fr);
  column-gap:clamp(1rem,2.2vw,2.4rem); row-gap:clamp(1.6rem,3vw,2.6rem);
  align-items:start; width:100%;
}
.hero-vert{
  grid-column:1; grid-row:1 / span 3; align-self:stretch;
  writing-mode:vertical-rl; text-orientation:mixed;
  display:flex; align-items:center; gap:1.1rem;
  font-size:var(--fs-eyebrow); letter-spacing:.42em; text-transform:uppercase; color:var(--stone);
}
html[dir="rtl"] .hero-vert{ writing-mode:vertical-lr; }
.hero-vert::after{ content:""; flex:1; width:1px; background:var(--line); }

.hero-eyebrow{ grid-column:2 / span 7; grid-row:1; }
.hero-title{
  grid-column:2 / span 10; grid-row:2;
  font-family:var(--font-display);
  font-size:var(--fs-hero); line-height:.94; letter-spacing:-.035em;
  font-weight:400; margin:0; view-transition-name:vt-hero;
}
.hero-title .ln{ display:block; overflow:hidden; }
.hero-title .ln > span{ display:block; }
.hero-title .ln:nth-child(2){ padding-inline-start:clamp(0px,7vw,7.5rem); }
.hero-title .ln:nth-child(2) > span{ font-style:italic; font-weight:400; color:var(--walnut-2); }

.hero-media{
  grid-column:9 / span 5; grid-row:2 / span 3;
  aspect-ratio:3/4.35; align-self:end;
  margin-block-start:clamp(-3rem,-1vw,0rem);
  box-shadow:0 44px 90px -52px rgba(42,30,21,.75);
}
.hero-lead{ grid-column:2 / span 6; grid-row:3; margin-block-start:clamp(.5rem,1.4vw,1.4rem); }
.hero-cta{ grid-column:2 / span 7; grid-row:4; display:flex; flex-wrap:wrap; gap:.8rem; margin-block-start:.4rem; }

.hero-scroll{
  grid-column:12; grid-row:4; justify-self:end; align-self:end;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--stone);
}
.hero-scroll i{ display:block; width:1px; height:clamp(40px,6vh,72px); background:var(--stone); opacity:.5; position:relative; overflow:hidden; }
.hero-scroll i::after{
  content:""; position:absolute; inset-inline:0; top:0; height:38%; background:var(--walnut);
  animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{ 0%{ transform:translateY(-110%) } 60%,100%{ transform:translateY(300%) } }

.hero-stats{
  grid-column:1 / -1; grid-row:5;
  display:grid; grid-template-columns:1.1fr 1fr .8fr 1.4fr;
  border-top:1px solid var(--line); margin-block-start:clamp(2rem,5vh,3.6rem);
}
.hero-stats > div{
  padding:clamp(1.1rem,2vw,1.7rem) clamp(.4rem,1.4vw,1.6rem);
  border-inline-start:1px solid var(--line);
}
.hero-stats > div:first-child{ border-inline-start:0; padding-inline-start:0; }
.hero-stats b{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.5rem,.9rem + 2.1vw,2.9rem); line-height:1; letter-spacing:-.02em; color:var(--walnut);
}
.hero-stats span{
  display:block; margin-top:.55rem; font-size:var(--fs-small); letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg-soft);
}

/* hero entrance */
.hero-eyebrow,.hero-title .ln > span,.hero-lead,.hero-cta,.hero-media,.hero-stats,.hero-vert,.hero-scroll{
  animation:heroIn 1.05s var(--ease) both;
}
.hero-eyebrow{ animation-delay:.10s }
.hero-title .ln:nth-child(1) > span{ animation-delay:.20s }
.hero-title .ln:nth-child(2) > span{ animation-delay:.30s }
.hero-lead{ animation-delay:.44s } .hero-cta{ animation-delay:.52s }
.hero-media{ animation-delay:.30s; animation-duration:1.4s }
.hero-stats{ animation-delay:.62s } .hero-vert{ animation-delay:.72s } .hero-scroll{ animation-delay:.85s }
@keyframes heroIn{ from{ opacity:0; transform:translate3d(0,26px,0) } to{ opacity:1; transform:none } }
.hero-title .ln > span{ transform-origin:0 100%; }

@supports (animation-timeline: scroll()){
  .hero-title{ animation:heroWeight linear both, heroIn 1.05s var(--ease) both; animation-timeline:scroll(root), auto; animation-range:0 62svh, normal; }
  @keyframes heroWeight{
    from{ font-weight:400; letter-spacing:-.035em; transform:translate3d(0,0,0) }
    to  { font-weight:900; letter-spacing:-.052em; transform:translate3d(0,-4svh,0) }
  }
  .hero-media{ animation:heroMedia linear both, heroIn 1.4s var(--ease) both; animation-timeline:scroll(root), auto; animation-range:0 90svh, normal; }
  @keyframes heroMedia{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(0,-9svh,0) } }
  .hero-fade{ animation:heroFade linear both; animation-timeline:scroll(root); animation-range:0 70svh; }
  @keyframes heroFade{ from{ opacity:1 } to{ opacity:0; transform:translate3d(0,-40px,0) } }
}

/* ═══════════════════════════════════════════════════════════════════════
   4. FIRM
   ═══════════════════════════════════════════════════════════════════════ */
.firm{ padding-block:var(--sect); background:var(--cream); }
.firm-grid{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:clamp(1.2rem,2.6vw,3rem); row-gap:clamp(2rem,4vw,3.4rem); }
.firm-head{ grid-column:1 / span 6; }
.firm-media{ grid-column:8 / span 5; grid-row:1 / span 3; aspect-ratio:4/5.1; }
.firm-body{ grid-column:1 / span 6; display:flex; flex-direction:column; gap:clamp(1rem,1.6vw,1.4rem); }
.firm-body p{ margin:0; color:var(--slate); font-weight:300; max-width:52ch; }
.firm-body p:first-of-type{ font-size:var(--fs-lead); color:var(--walnut-2); font-weight:400; }
.firm-note{
  grid-column:2 / span 5; grid-row:3;
  border-inline-start:2px solid var(--brass);
  padding-inline-start:clamp(1rem,2vw,1.6rem);
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(1.1rem,.9rem + .8vw,1.6rem); line-height:1.45; color:var(--walnut);
}
.firm-tag{
  grid-column:9 / span 4; grid-row:3; justify-self:start; align-self:end;
  display:flex; flex-wrap:wrap; gap:.45rem;
}
.chip{
  border:1px solid var(--line); padding:.4rem .8rem; border-radius:999px;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-soft);
  transition:border-color var(--snap) var(--ease), color var(--snap) var(--ease), transform var(--snap) var(--ease);
}
.chip:hover{ border-color:var(--brass); color:var(--walnut); transform:translateY(-2px); }

/* ═══════════════════════════════════════════════════════════════════════
   5. PARTNERS
   ═══════════════════════════════════════════════════════════════════════ */
.partners{
  padding-block:var(--sect);
  background:linear-gradient(180deg,var(--cream) 0%, var(--cream-2) 42%, var(--cream) 100%);
  overflow:clip;
}
.p-head{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(1rem,2vw,2rem); margin-block-end:clamp(2.6rem,6vw,5rem); }
.p-head > div:first-child{ grid-column:1 / span 5; }
.p-head > div:last-child{ grid-column:7 / span 6; align-self:end; }

.stage{ perspective:1700px; perspective-origin:50% 40%; }
.p-grid{
  display:grid; grid-template-columns:repeat(12,1fr);
  column-gap:clamp(1.4rem,3vw,3.6rem); row-gap:clamp(3rem,7vw,6rem);
  transform-style:preserve-3d;
}
.p-card{ transform-style:preserve-3d; will-change:transform,opacity; }
.p-card--a{ grid-column:1 / span 6; }
.p-card--b{ grid-column:7 / span 6; margin-block-start:clamp(3rem,9vw,9rem); }

.p-photo{ aspect-ratio:4/4.7; box-shadow:0 50px 90px -60px rgba(42,30,21,.8); }
.p-photo img{ will-change:transform; }
.p-card:hover .p-photo img{ transform:scale(1.045); }

.p-meta{ padding-block-start:clamp(1.2rem,2.2vw,1.9rem); }
.p-meta h3{
  font-family:var(--font-display); font-weight:700; margin:0;
  font-size:var(--fs-h3); line-height:1.1; letter-spacing:-.015em;
}
.p-role{
  margin:.6rem 0 1rem; font-size:var(--fs-small); letter-spacing:.13em; text-transform:uppercase;
  color:var(--brass); font-weight:600;
}
.p-bio{ margin:0; color:var(--slate); font-weight:300; }
.p-card-link{ color:inherit; text-decoration:none; }
.p-card-link:hover,.p-card-link:focus-visible{ color:var(--brass); }
.p-tags{
  margin-block-start:1.3rem; padding-block-start:1rem; border-top:1px solid var(--line);
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--stone);
}

.p-strip{
  grid-column:1 / -1; display:grid; grid-template-columns:repeat(12,1fr);
  gap:clamp(1rem,2vw,2rem); align-items:center;
}
.p-strip .fig{ grid-column:2 / span 7; aspect-ratio:16/7.2; }
.p-strip .quote{
  grid-column:9 / span 4; font-family:var(--font-display); font-style:italic;
  font-size:clamp(1.05rem,.9rem + .7vw,1.5rem); line-height:1.5; color:var(--walnut-2);
}

@supports (animation-timeline: view()){
  .p-card--a{ animation:cardA linear both; animation-timeline:view(); animation-range:entry -6% cover 46%; }
  .p-card--b{ animation:cardB linear both; animation-timeline:view(); animation-range:entry 2% cover 52%; }
  @keyframes cardA{
    from{ opacity:0; transform:translate3d(0,14vh,-320px) rotateY(9deg) rotateX(5deg) }
    to  { opacity:1; transform:translate3d(0,0,0) rotateY(0) rotateX(0) }
  }
  @keyframes cardB{
    from{ opacity:0; transform:translate3d(0,-9vh,-180px) rotateY(-8deg) rotateX(-3deg) }
    to  { opacity:1; transform:translate3d(0,0,0) rotateY(0) rotateX(0) }
  }
  .p-photo img{ animation:imgPar linear both; animation-timeline:view(); animation-range:cover 0% cover 100%; }
  @keyframes imgPar{ from{ transform:scale(1.16) translate3d(0,7%,0) } to{ transform:scale(1.16) translate3d(0,-7%,0) } }
  .p-strip .fig{ animation:stripPar linear both; animation-timeline:view(); animation-range:entry 0% cover 70%; }
  @keyframes stripPar{ from{ transform:translate3d(-6%,30px,0) scale(.96); opacity:0 } to{ transform:none; opacity:1 } }
}

/* ═══════════════════════════════════════════════════════════════════════
   6. PRACTICE AREAS
   ═══════════════════════════════════════════════════════════════════════ */
.practice{ padding-block:var(--sect); background:var(--walnut-3); color:var(--cream); }
.practice .eyebrow{ color:var(--brass-soft); }
.practice .lead{ color:color-mix(in oklab,var(--cream) 62%, transparent); }
.practice .h2{ color:var(--cream); }
.pr-head{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(1rem,2vw,2rem); margin-block-end:clamp(3rem,7vw,6rem); }
.pr-head > div:first-child{ grid-column:1 / span 6; }
.pr-head > div:last-child{ grid-column:8 / span 5; align-self:end; }

.pa-grid{ display:grid; grid-template-columns:repeat(12,1fr); row-gap:clamp(3rem,7vw,6.5rem); column-gap:clamp(1.2rem,2.6vw,3rem); }
.pa{ border-top:1px solid color-mix(in oklab,var(--cream) 18%,transparent); padding-block-start:clamp(1.1rem,2vw,1.7rem); position:relative; }
.pa::before{
  content:""; position:absolute; top:-1px; inset-inline-start:0; height:1px; width:100%;
  background:var(--brass-soft); transform:scaleX(0); transform-origin:0 50%;
  transition:transform 520ms var(--ease);
}
html[dir="rtl"] .pa::before{ transform-origin:100% 50%; }
.pa:hover::before{ transform:scaleX(1); }
.pa:nth-child(1){ grid-column:1 / span 5; }
.pa:nth-child(2){ grid-column:7 / span 6; margin-block-start:clamp(2rem,6vw,6rem); }
.pa:nth-child(3){ grid-column:2 / span 5; }
.pa:nth-child(4){ grid-column:8 / span 5; margin-block-start:clamp(3rem,8vw,8rem); }
.pa:nth-child(5){ grid-column:1 / span 5; }
.pa:nth-child(6){ grid-column:7 / span 5; margin-block-start:clamp(1.6rem,5vw,4.5rem); }

.pa-num{
  display:block; font-family:var(--font-display); font-weight:400;
  font-size:var(--fs-num); line-height:.82; letter-spacing:-.03em;
  color:color-mix(in oklab,var(--cream) 88%, transparent);
  transform-origin:0 100%; will-change:font-weight,transform;
}
html[dir="rtl"] .pa-num{ transform-origin:100% 100%; }
.pa h3{
  font-family:var(--font-display); font-weight:600; margin:clamp(.8rem,1.6vw,1.3rem) 0 .7rem;
  font-size:clamp(1.18rem,.98rem + .8vw,1.72rem); line-height:1.18; letter-spacing:-.01em;
}
.pa p{ margin:0; color:color-mix(in oklab,var(--cream) 60%,transparent); font-weight:300; font-size:var(--fs-body); max-width:44ch; }
.pa .idx{
  position:absolute; top:clamp(1.1rem,2vw,1.7rem); inset-inline-end:0;
  font-size:.62rem; letter-spacing:.28em; color:color-mix(in oklab,var(--cream) 34%,transparent);
}

@supports (animation-timeline: view()){
  .pa{ animation:rvUp linear both; animation-timeline:view(); animation-range:entry 2% cover 30%; }
  .pa-num{ animation:numKinetic linear both; animation-timeline:view(); animation-range:entry -4% entry 62%; }
  @keyframes numKinetic{
    0%  { font-weight:400; transform:scaleX(.62) scaleY(1.16); opacity:.16; letter-spacing:.22em }
    55% { font-weight:700; opacity:.85 }
    100%{ font-weight:900; transform:scaleX(1) scaleY(1); opacity:1; letter-spacing:-.045em }
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   7. CLIENTS + VALUES
   ═══════════════════════════════════════════════════════════════════════ */
.clients{ padding-block:var(--sect) clamp(2rem,5vw,4rem); background:var(--cream); overflow:clip; }
.cl-head{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(1rem,2vw,2rem); margin-block-end:clamp(2.4rem,5vw,4rem); }
.cl-head > div:first-child{ grid-column:1 / span 6; }
.cl-head > div:last-child{ grid-column:8 / span 5; align-self:end; }

.marquee{
  border-block:1px solid var(--line); padding-block:clamp(1.4rem,3vw,2.4rem);
  overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.mq-track{ display:flex; width:max-content; gap:clamp(2.4rem,6vw,5.5rem); animation:mq 34s linear infinite; }
.marquee:hover .mq-track{ animation-play-state:paused; }
.mq-track span{
  font-family:var(--font-display); font-weight:700; white-space:nowrap;
  font-size:clamp(1.35rem,.85rem + 2.1vw,3rem); letter-spacing:-.01em;
  color:color-mix(in oklab,var(--walnut) 78%, var(--travertine));
  transition:color var(--snap) var(--ease), opacity var(--snap) var(--ease);
}
.mq-track span:hover{ color:var(--brass); }
.mq-track i{ color:var(--travertine); font-style:normal; align-self:center; font-size:.7em; }
@keyframes mq{ to{ transform:translate3d(-50%,0,0) } }

.sectors{
  display:flex; flex-wrap:wrap; gap:clamp(.55rem,1.3vw,.95rem);
  padding-block:clamp(2.2rem,5vw,3.6rem);
  justify-content:flex-start;
}
.sectors a{
  border:1px solid var(--line); border-radius:999px;
  padding:.62rem 1.25rem; font-size:var(--fs-small); letter-spacing:.14em; text-transform:uppercase;
  color:var(--walnut-2); background:color-mix(in oklab,var(--cream-2) 60%, transparent);
  transition:transform var(--snap) var(--ease), background var(--snap) var(--ease),
             color var(--snap) var(--ease), border-color var(--snap) var(--ease);
}
.sectors a:nth-child(2){ transform:translateY(clamp(4px,1vw,12px)); }
.sectors a:nth-child(4){ transform:translateY(clamp(-8px,-1.4vw,-14px)); }
.sectors a:nth-child(5){ transform:translateY(clamp(6px,1.2vw,16px)); }
.sectors a:hover{ background:var(--walnut); color:var(--cream); border-color:var(--walnut); transform:translateY(-4px) !important; }

.values{
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:clamp(1.4rem,3vw,3rem); padding-block:clamp(2.6rem,6vw,4.6rem) 0;
  border-top:1px solid var(--line); margin-block-start:clamp(1rem,3vw,2rem);
}
.val{ padding-block-start:clamp(1.4rem,3vw,2.4rem); }
.val:nth-child(1){ grid-column:1 / span 4; }
.val:nth-child(2){ grid-column:5 / span 4; padding-block-start:clamp(2.6rem,6vw,5rem); }
.val:nth-child(3){ grid-column:9 / span 4; padding-block-start:clamp(1rem,2vw,1.8rem); }
.val h3{
  font-family:var(--font-display); font-weight:700; font-style:italic; margin:0 0 .6rem;
  font-size:clamp(1.6rem,1.1rem + 1.7vw,2.7rem); line-height:1; letter-spacing:-.02em;
}
.val p{ margin:0; color:var(--slate); font-weight:300; font-size:var(--fs-body); }
.val .dot{ width:7px; height:7px; border-radius:50%; background:var(--brass); margin-block-end:1.1rem; }

/* ═══════════════════════════════════════════════════════════════════════
   8. OFFICE
   ═══════════════════════════════════════════════════════════════════════ */
.office{ padding-block:var(--sect); background:var(--cream); }
.off-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(1.2rem,2.6vw,2.6rem); align-items:end; }
.off-copy{ grid-column:1 / span 5; }
.off-copy p{ color:var(--slate); font-weight:300; margin-block:1.2rem 0; max-width:44ch; }
.off-media{ grid-column:6 / span 7; aspect-ratio:16/10.4; }
.off-side{ grid-column:1 / span 4; grid-row:2; aspect-ratio:1/1.12; margin-block-start:clamp(1.6rem,3vw,2.6rem); }
.off-fact{ grid-column:6 / span 7; grid-row:2; margin-block-start:clamp(1.6rem,3vw,2.6rem); display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.off-fact div{ background:var(--cream); padding:clamp(1.1rem,2vw,1.7rem); }
.off-fact b{ display:block; font-family:var(--font-display); font-size:clamp(1.3rem,1rem + 1vw,2rem); font-weight:700; line-height:1; }
.off-fact span{ display:block; margin-top:.5rem; font-size:var(--fs-small); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-soft); }

@supports (animation-timeline: view()){
  .off-media{ animation:offPar linear both; animation-timeline:view(); animation-range:entry 0% cover 85%; }
  @keyframes offPar{ from{ transform:translate3d(0,7%,0) scale(1.05) } to{ transform:translate3d(0,-7%,0) scale(1.05) } }
  .off-side{ animation:offSide linear both; animation-timeline:view(); animation-range:entry 0% cover 60%; }
  @keyframes offSide{ from{ transform:translate3d(0,60px,0); opacity:0 } to{ transform:none; opacity:1 } }
}

/* ═══════════════════════════════════════════════════════════════════════
   9. CONTACT
   ═══════════════════════════════════════════════════════════════════════ */
.contact{
  padding-block:var(--sect); color:var(--cream);
  background:
    radial-gradient(110% 80% at 88% 6%, rgba(169,133,78,.20) 0%, transparent 55%),
    linear-gradient(180deg,var(--walnut) 0%, var(--walnut-3) 100%);
}
.contact .eyebrow{ color:var(--brass-soft); }
.contact .h2{ color:var(--cream); }
.contact .lead{ color:color-mix(in oklab,var(--cream) 62%,transparent); }
.ct-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(1.4rem,3vw,3.4rem); margin-block-start:clamp(2.6rem,6vw,4.6rem); }
.ct-info{ grid-column:1 / span 5; display:flex; flex-direction:column; }
.ct-row{
  padding-block:clamp(1.2rem,2.4vw,1.8rem);
  border-top:1px solid color-mix(in oklab,var(--cream) 16%,transparent);
  display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:start;
}
.ct-row:last-of-type{ border-bottom:1px solid color-mix(in oklab,var(--cream) 16%,transparent); }
.ct-row .k{
  font-size:.62rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--brass-soft); padding-block-start:.42rem; min-width:5.4rem;
}
.ct-row .v{ font-size:clamp(1rem,.94rem + .3vw,1.18rem); font-weight:300; line-height:1.55; }
.ct-row a{ position:relative; transition:color var(--snap) var(--ease); }
.ct-row a::after{
  content:""; position:absolute; inset-inline:0; bottom:-2px; height:1px; background:var(--brass-soft);
  transform:scaleX(0); transform-origin:100% 50%; transition:transform var(--snap) var(--ease);
}
.ct-row a:hover{ color:var(--brass-soft); }
.ct-row a:hover::after{ transform:scaleX(1); transform-origin:0 50%; }
.ct-map{
  margin-block-start:clamp(1.6rem,3vw,2.4rem); aspect-ratio:16/7; border:1px solid color-mix(in oklab,var(--cream) 14%,transparent);
  overflow:hidden; position:relative; background:rgba(0,0,0,.16);
  display:block; cursor:pointer;
  transition:border-color var(--snap) var(--ease), transform var(--snap) var(--ease), box-shadow var(--snap) var(--ease);
}
.ct-map:hover,.ct-map:focus-visible{
  border-color:color-mix(in oklab,var(--brass) 65%,transparent);
  box-shadow:0 24px 60px -38px rgba(0,0,0,.8);
}
.ct-map svg{ display:block; transition:transform 600ms var(--ease); }
.ct-map:hover svg,.ct-map:focus-visible svg{ transform:scale(1.035); }
.ct-map .map-directions{
  position:absolute; z-index:5; inset-block-end:.8rem; inset-inline-end:.8rem;
  display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .9rem;
  background:color-mix(in oklab,var(--walnut-3) 82%, transparent); color:var(--cream);
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  border:1px solid color-mix(in oklab,var(--brass-soft) 55%, transparent);
  transition:background var(--snap) var(--ease), color var(--snap) var(--ease);
}
.ct-map .map-directions:hover{ background:var(--brass); color:var(--walnut-3); }

.ct-form{ grid-column:7 / span 6; }
.field{ position:relative; margin-block-end:clamp(1.2rem,2.4vw,1.9rem); }
.field label{
  position:absolute; inset-inline-start:0; top:.95rem; pointer-events:none;
  font-size:var(--fs-body); letter-spacing:.06em; color:color-mix(in oklab,var(--cream) 52%,transparent);
  transition:transform 240ms var(--ease), color 240ms var(--ease), font-size 240ms var(--ease);
  transform-origin:0 0;
}
html[dir="rtl"] .field label{ transform-origin:100% 0; }
.field input,.field textarea,.field select{
  width:100%; background:transparent; border:0; border-bottom:1px solid color-mix(in oklab,var(--cream) 26%,transparent);
  color:var(--cream); font-family:var(--font-body); font-size:var(--fs-body); font-weight:300;
  padding:.95rem 0 .7rem; border-radius:0; transition:border-color var(--snap) var(--ease);
  appearance:none;
}
.field select{ cursor:pointer; }
.field select option{ background:var(--walnut-3); color:var(--cream); }
.field textarea{ resize:vertical; min-height:104px; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--brass-soft); }
.field input:focus + label,.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,.field textarea:not(:placeholder-shown) + label,
.field.filled label{
  transform:translateY(-1.5rem) scale(.72); letter-spacing:.2em; text-transform:uppercase;
  color:var(--brass-soft);
}
.field select + label{ transform:translateY(-1.5rem) scale(.72); letter-spacing:.2em; text-transform:uppercase; color:var(--brass-soft); }
.ct-form .btn{ --btn-bg:var(--cream); --btn-fg:var(--walnut); border-color:var(--cream); margin-block-start:.6rem; }
.ct-form .btn::before{ background:var(--brass); }
.ct-form .btn:hover{ color:var(--walnut-3); border-color:var(--brass); }
.form-ok{
  margin-block-start:1rem; font-size:var(--fs-small); letter-spacing:.1em; color:var(--brass-soft);
  opacity:0; transform:translateY(6px); transition:opacity 300ms var(--ease), transform 300ms var(--ease);
}
.form-ok.show{ opacity:1; transform:none; }
.form-ok--error{ color:#B0532F; }
.contact .form-ok--error, .practice .form-ok--error{ color:#E8A987; }

/* Honeypot: visually hidden, focusable-off, un-tabbable */
.ega-hp{ position:absolute; inset-inline-start:-9999px; top:auto; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }

/* Light-background form fields (contact page aside layout) */
.field--light label{ color:var(--slate-2); }
.field--light input,.field--light textarea,.field--light select{ color:var(--walnut); border-bottom-color:var(--line); }
.field--light select option{ background:var(--cream); color:var(--walnut); }
.field--light input:focus + label,.field--light textarea:focus + label,
.field--light input:not(:placeholder-shown) + label,.field--light textarea:not(:placeholder-shown) + label,
.field--light.filled label, .field--light select + label{
  color:var(--brass);
}
.detail-aside address{ font-style:normal; color:var(--walnut-2); line-height:1.7; }
.detail-aside .aside-block a{ color:var(--walnut-2); border-bottom:1px solid var(--brass-soft); transition:color var(--snap) var(--ease); }
.detail-aside .aside-block a:hover{ color:var(--brass); }

/* ═══════════════════════════════════════════════════════════════════════
   10. FOOTER
   ═══════════════════════════════════════════════════════════════════════ */
/* Editor-only draft notice (page-lang sign-off gate) */
.ega-draft-notice{
  position:relative; z-index:850; margin-block-start:5rem;
  padding:.9rem var(--gut); background:color-mix(in oklab,var(--brass) 18%,var(--cream));
  border-block:1px solid var(--brass-soft); color:var(--walnut);
  font-size:var(--fs-small); letter-spacing:.04em;
}

.ft{ background:var(--ink); color:color-mix(in oklab,var(--cream) 68%,transparent); padding-block:clamp(2.4rem,5vw,3.6rem); }
.ft-grid{ display:flex; flex-wrap:wrap; gap:1.4rem 2.4rem; align-items:center; justify-content:space-between; }
.ft-brand{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--cream); letter-spacing:.01em; }
.ft nav{ display:flex; flex-wrap:wrap; gap:1.2rem; }

/* Footer socials (Customizer: Footer → Social Links) */
.ft-social{ display:flex; flex-wrap:wrap; gap:.55rem; margin-block-start:clamp(1.4rem,2.6vw,2rem); }
.ft-soc{
  display:grid; place-items:center; width:38px; height:38px;
  border:1px solid rgba(244,239,230,.22); color:rgba(244,239,230,.82);
  transition:background var(--snap) var(--ease), color var(--snap) var(--ease),
             border-color var(--snap) var(--ease), transform var(--snap) var(--ease);
}
.ft-soc:hover,.ft-soc:focus-visible{ background:var(--brass); color:var(--walnut-3); border-color:var(--brass); transform:translateY(-2px); }
.ft-soc svg{ display:block; }

/* Scroll-to-top button (Customizer: Footer → Scroll to Top Button) */
.ega-stt{
  position:fixed; z-index:870; inset-block-end:clamp(1rem,2.4vw,1.8rem); inset-inline-end:clamp(1rem,2.4vw,1.8rem);
  display:grid; place-items:center; width:46px; height:46px; padding:0;
  background:color-mix(in oklab,var(--walnut-3) 88%, transparent); color:var(--cream);
  border:1px solid color-mix(in oklab,var(--brass-soft) 45%, transparent);
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity 300ms var(--ease), transform 300ms var(--ease), visibility 0s linear 300ms,
             background var(--snap) var(--ease), color var(--snap) var(--ease), border-color var(--snap) var(--ease);
}
.ega-stt.show{
  opacity:1; visibility:visible; transform:none;
  transition:opacity 300ms var(--ease), transform 300ms var(--ease),
             background var(--snap) var(--ease), color var(--snap) var(--ease), border-color var(--snap) var(--ease);
}
.ega-stt:hover,.ega-stt:focus-visible{ background:var(--brass); color:var(--walnut-3); border-color:var(--brass); }
.ega-stt:focus-visible{ outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  .ega-stt{ transition:none; }
}
.ft nav a{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; transition:color var(--snap) var(--ease); }
.ft nav a:hover{ color:var(--brass-soft); }
.ft small{ font-size:.72rem; letter-spacing:.06em; display:block; margin-block-start:1.6rem; opacity:.6; }

/* ═══════════════════════════════════════════════════════════════════════
   11. VIEW TRANSITIONS
   ═══════════════════════════════════════════════════════════════════════ */
html.pre-vt body{ opacity:0; }
::view-transition-old(root){ animation:vtOut 380ms var(--ease-2) both; }
::view-transition-new(root){ animation:vtIn 720ms var(--ease) both; }
@keyframes vtOut{ from{ opacity:1 } to{ opacity:0; transform:scale(1.012) } }
@keyframes vtIn { from{ opacity:0; transform:scale(.992) } to{ opacity:1; transform:none } }
::view-transition-old(vt-hero),::view-transition-new(vt-hero){ animation-duration:520ms; }
::view-transition-old(vt-mark),::view-transition-new(vt-mark){ animation-duration:420ms; }

/* ═══════════════════════════════════════════════════════════════════════
   12. INTERIOR PAGES (restyled to the approved identity)
   ═══════════════════════════════════════════════════════════════════════ */
.page-hero{
  position:relative; padding:clamp(8rem,18vh,11rem) var(--gut) clamp(2.5rem,6vw,4.5rem);
  background:
    radial-gradient(120% 90% at 82% 8%, color-mix(in oklab,var(--travertine) 45%,transparent) 0%, transparent 58%),
    var(--cream);
}
.page-hero-inner{ max-width:var(--maxw); margin-inline:auto; }
.page-hero h1{
  margin:.55rem 0 0; font-family:var(--font-display); font-weight:700;
  font-size:var(--fs-h2); line-height:1.02; letter-spacing:-.022em; color:var(--walnut); text-wrap:balance;
}
.page-hero .page-lead{ max-width:56ch; margin:1.2rem 0 0; color:var(--slate); font-weight:300; font-size:var(--fs-lead); line-height:1.62; }
.breadcrumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:.7rem; margin:0; color:var(--stone); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; }
.breadcrumbs a{ color:var(--walnut-2); transition:color var(--snap) var(--ease); }
.breadcrumbs a:hover{ color:var(--brass); }
.breadcrumbs .sep{ color:var(--travertine); }
.breadcrumbs [aria-current]{ color:var(--brass); }

.detail-section{ padding-block:clamp(3rem,7vw,6rem) var(--sect); background:var(--cream); }
.detail-layout{
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut);
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.65fr); gap:clamp(2.5rem,6vw,6rem); align-items:start;
}
.detail-main h1,.detail-main h2{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.015em;
  font-size:clamp(1.6rem,1.2rem + 1.6vw,2.6rem); line-height:1.08; color:var(--walnut); margin:1.6em 0 .6em;
}
.detail-main h1:first-child,.detail-main h2:first-child{ margin-top:0; }
.detail-main > p{ max-width:640px; margin:0 0 1em; color:var(--slate); font-weight:300; font-size:var(--fs-body); line-height:1.8; }
.detail-main a:not(.btn){ color:var(--walnut-2); border-bottom:1px solid var(--brass-soft); transition:color var(--snap) var(--ease); }
.detail-main a:not(.btn):hover{ color:var(--brass); }
.page-heading{ margin:0; font-family:var(--font-display); font-size:var(--fs-h2); line-height:1.02; color:var(--walnut); }

.detail-aside{
  position:sticky; top:110px; display:grid; gap:1.6rem; padding:clamp(1.4rem,2.4vw,2rem);
  background:var(--cream-2); border:1px solid var(--line);
}
.aside-block span{ display:block; margin-bottom:.7rem; color:var(--brass); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; }
.scope-list{ margin:0; padding:0; list-style:none; display:grid; gap:.7rem; }
.scope-list li{ position:relative; padding-inline-start:1.2rem; color:var(--walnut-2); font-size:var(--fs-body); line-height:1.6; }
.scope-list li::before{ content:""; position:absolute; inset-inline-start:0; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--brass); }
.aside-link{ display:inline-flex; align-items:center; gap:.6rem; color:var(--walnut); font-size:var(--fs-small); letter-spacing:.14em; text-transform:uppercase; border-bottom:1px solid var(--brass-soft); padding-bottom:.35rem; transition:color var(--snap) var(--ease); }
.aside-link:hover{ color:var(--brass); }
.back-link{ display:inline-flex; align-items:center; gap:.6rem; margin-top:2.4rem; color:var(--walnut); font-size:var(--fs-small); letter-spacing:.14em; text-transform:uppercase; border-bottom:1px solid var(--brass-soft); padding-bottom:.35rem; transition:color var(--snap) var(--ease); }
.back-link:hover{ color:var(--brass); }
.placeholder-chip{
  display:inline-flex; align-items:center; gap:.55rem; padding:.5rem .9rem; margin:1.4rem 0 0;
  color:var(--brass); background:color-mix(in oklab,var(--brass) 8%, transparent);
  border:1px dashed var(--brass-soft); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
}

/* Card grids (archives) */
.card-grid{
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.4vw,2rem);
}
.index-card{
  min-height:240px; position:relative; display:flex; flex-direction:column; justify-content:flex-end; gap:.7rem;
  padding:clamp(1.4rem,2.6vw,2.2rem); color:var(--walnut);
  background:var(--cream-2); border:1px solid var(--line); border-top:2px solid var(--walnut);
  transition:transform var(--snap) var(--ease), border-color var(--snap) var(--ease), box-shadow var(--snap) var(--ease);
}
.index-card:hover,.index-card:focus-visible{ transform:translateY(-4px); border-top-color:var(--brass); box-shadow:0 30px 60px -38px rgba(42,30,21,.5); }
.index-card h2,.index-card h3{ margin:0; font-family:var(--font-display); font-weight:700; font-size:clamp(1.25rem,1.05rem + .9vw,1.8rem); line-height:1.14; letter-spacing:-.015em; }
.index-card p{ margin:0; color:var(--slate); font-weight:300; font-size:var(--fs-body); }
.practice-number{ color:var(--brass); font-size:.72rem; font-weight:600; letter-spacing:.24em; }
.insight-card{
  min-height:210px; display:flex; flex-direction:column; justify-content:space-between; gap:1.4rem;
  padding:clamp(1.4rem,2.6vw,2rem); background:var(--walnut-3); color:var(--cream); border:1px solid rgba(244,239,230,.12);
  transition:transform var(--snap) var(--ease), box-shadow var(--snap) var(--ease);
}
.insight-card:hover{ transform:translateY(-4px); box-shadow:0 34px 64px -40px rgba(28,23,18,.9); }
.insight-card h2,.insight-card h3{ margin:0; font-family:var(--font-display); font-weight:600; font-size:clamp(1.2rem,1rem + .9vw,1.7rem); line-height:1.2; }

/* Iqraa Cultural Salon */
.iqraa-logo{ display:block; width:clamp(5rem,10vw,7rem); height:auto; aspect-ratio:1; object-fit:contain; margin:0 0 1.25rem; }
.iqraa-heading-row{ display:flex; direction:ltr; align-items:center; justify-content:flex-start; gap:clamp(1rem,2.5vw,2rem); }
.iqraa-heading-row .h2{ margin:0; direction:ltr; text-align:left; }
html[lang="ar"] .iqraa-heading-row .h2{ direction:rtl; text-align:right; }
.iqraa-home .iqraa-logo{ flex:0 0 clamp(4.5rem,8vw,6rem); width:clamp(4.5rem,8vw,6rem); margin:0; }
.iqraa-logo--archive{ margin-bottom:1.25rem; }
.iqraa-home .shell > .eyebrow{ margin-bottom:.6rem; }
.iqraa-home .shell > .h2{ margin:0 0 2rem; }
/* Iqraa landing block. The heading names the initiative; the sub-line gives its
   full formal name, and the lead is drawn from the firm's existing introduction.
   These are scoped to .iqraa-home so no other section is affected. */
.iqraa-home .iqraa-sub{
  margin:.5rem 0 0; color:var(--brass); font-size:var(--fs-small);
  letter-spacing:.08em;
}
.iqraa-home .iqraa-lead{
  margin:.9rem 0 2rem; max-inline-size:70ch; color:var(--slate);
  font-size:var(--fs-body); line-height:1.62;
}
html[lang="ar"] .iqraa-home .iqraa-sub{ letter-spacing:0; }
.iqraa-card time,.iqraa-home time,.salon-event-date{ color:var(--brass); font-size:var(--fs-small); letter-spacing:.08em; }
.iqraa-card .p-tags{ margin:0; color:var(--brass); font-size:var(--fs-small); }
.salon-guest-role{ margin:.6rem 0 0; color:var(--slate); font-size:var(--fs-body); }
.salon-event-date{ margin:1.4rem 0 0; }
.salon-by-invitation{ margin:.55rem 0 0; color:var(--ink); font-size:var(--fs-small); }
.iqraa-gallery{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:2.4rem; }
.iqraa-gallery img{ display:block; width:100%; height:100%; max-height:520px; object-fit:cover; background:var(--cream-2); }
@media (max-width:720px){ .iqraa-gallery{ grid-template-columns:1fr; } }
html[lang="ar"] .iqraa-card time,html[lang="ar"] .iqraa-home time,html[lang="ar"] .salon-event-date{ letter-spacing:0; }

/* Contact page (light) */
.contact-form{ display:grid; gap:1.3rem; margin-top:2.4rem; max-width:640px; }
.contact-form .form-field{ position:relative; }
.contact-form .form-field label{
  position:absolute; inset-inline-start:0; top:.85rem; pointer-events:none;
  font-size:var(--fs-body); color:var(--slate-2); transform-origin:0 0;
  transition:transform 240ms var(--ease), color 240ms var(--ease);
}
html[dir="rtl"] .contact-form .form-field label{ transform-origin:100% 0; }
.contact-form .form-field input,.contact-form .form-field textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--line);
  color:var(--walnut); font-family:var(--font-body); font-size:var(--fs-body); font-weight:300;
  padding:.95rem 0 .7rem; border-radius:0; transition:border-color var(--snap) var(--ease);
}
.contact-form .form-field input:focus,.contact-form .form-field textarea:focus{ outline:none; border-color:var(--brass); }
.contact-form .form-field input:focus + label,.contact-form .form-field input:not(:placeholder-shown) + label,
.contact-form .form-field textarea:focus + label,.contact-form .form-field textarea:not(:placeholder-shown) + label{
  transform:translateY(-1.4rem) scale(.72); letter-spacing:.2em; text-transform:uppercase; color:var(--brass);
}
.contact-form .form-field input[type="tel"] + label{ transform:none; color:var(--slate-2); }
.contact-form .form-field input[type="tel"]:not(:placeholder-shown) + label{ transform:translateY(-1.4rem) scale(.72); color:var(--brass); }
.contact-form .form-note{ margin:.4rem 0 0; color:var(--fg-soft); font-size:var(--fs-small); }
.detail-section .contact-form .button{ align-self:start; }
.detail-aside .contact-grid span{ color:var(--brass); }
.detail-aside .contact-grid address,.detail-aside .contact-grid a{ color:var(--walnut-2); }

/* Buttons (legacy class bridging) */
.button{
  min-height:0; display:inline-flex; align-items:center; gap:.6rem; padding:.86rem 1.5rem;
  border:1px solid transparent; font-size:var(--fs-small); font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  position:relative; overflow:hidden; isolation:isolate; background:var(--walnut); color:var(--cream);
}
.button::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--brass); transform:translateY(101%); transition:transform 280ms var(--ease); }
.button:hover::before{ transform:translateY(0); }
.button:hover{ transform:translateY(-2px); border-color:var(--brass); }
.button-brass{ background:var(--walnut); color:var(--cream); border-color:var(--walnut); }
.button-brass:hover{ color:var(--cream); border-color:var(--brass); }
.ornament{ width:52px; height:1px; background:var(--brass); margin:1.4rem 0; }

/* Legacy template compat (index/archive/404/contact templates) */
.section{ padding-block:var(--sect); }
.firm-section{ background:var(--cream); }
.partners-section{ background:var(--cream); }
.practice-section{ background:var(--cream); }
.dark-eyebrow{ color:var(--brass); }
.contact-main{ max-width:870px; }
.contact-main h2{ margin:0 0 1.4rem; font-family:var(--font-display); font-weight:700; font-size:var(--fs-h2); line-height:1.02; letter-spacing:-.022em; color:var(--walnut); }
.contact-main > p{ color:var(--slate); font-weight:300; max-width:56ch; }
.contact-grid{ margin-top:2rem; display:grid; grid-template-columns:1fr; gap:1.4rem; }
.contact-grid > div{ padding-top:1rem; border-top:1px solid var(--line); }
.contact-grid span{ display:block; margin-bottom:.7rem; color:var(--brass); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; }
.contact-grid address,.contact-grid a{ color:var(--walnut-2); font-style:normal; font-size:var(--fs-body); line-height:1.7; }
.contact-grid a{ display:inline-block; border-bottom:1px solid var(--brass-soft); transition:color var(--snap) var(--ease); }
.contact-grid a:hover{ color:var(--brass); }
.image-frame{ background:var(--cream-2); padding:10px; box-shadow:0 24px 70px rgba(31,22,16,.12); }
.image-frame img{ display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; }

/* Pagination */
.page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width:2.4rem; padding:.55rem .8rem; border:1px solid var(--line); color:var(--walnut-2); font-size:var(--fs-small); transition:background var(--snap) var(--ease), color var(--snap) var(--ease); }
.page-numbers.current,.page-numbers:hover{ background:var(--walnut); color:var(--cream); border-color:var(--walnut); }
nav.pagination{ max-width:var(--maxw); margin:2.5rem auto 0; padding-inline:var(--gut); display:flex; gap:.5rem; flex-wrap:wrap; }

/* ═══════════════════════════════════════════════════════════════════════
   13. RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:1080px){
  .nav{ display:none; }
  .hdr .btn{ display:none; }
  .burger{ display:grid; }
  .hero-media{ grid-column:8 / span 6; }
  html[lang="ar"] .hero-media{ grid-column:9 / span 4; grid-row:3 / span 2; }
  .hero-title{ grid-column:2 / span 11; }
  .firm-media{ grid-column:7 / span 6; }
  .firm-head,.firm-body{ grid-column:1 / span 6; }
  .firm-note{ grid-column:1 / span 6; grid-row:auto; }
  .firm-tag{ grid-column:7 / span 6; grid-row:auto; align-self:start; }
  .pa:nth-child(n){ grid-column:1 / span 6; margin-block-start:0; }
  .pa:nth-child(even){ grid-column:7 / span 6; margin-block-start:clamp(2rem,6vw,4rem); }
  .p-card--a{ grid-column:1 / span 7; } .p-card--b{ grid-column:5 / span 8; }
  .p-head > div:first-child,.pr-head > div:first-child,.cl-head > div:first-child{ grid-column:1 / span 8; }
  .p-head > div:last-child,.pr-head > div:last-child,.cl-head > div:last-child{ grid-column:1 / span 12; }
  .off-copy{ grid-column:1 / span 12; } .off-media{ grid-column:1 / span 12; }
  .off-side{ grid-column:1 / span 5; grid-row:auto; } .off-fact{ grid-column:6 / span 7; grid-row:auto; }
  .ct-info{ grid-column:1 / span 12; } .ct-form{ grid-column:1 / span 12; }
  .val:nth-child(1){ grid-column:1 / span 6; } .val:nth-child(2){ grid-column:7 / span 6; padding-block-start:clamp(1.4rem,3vw,2.4rem); }
  .val:nth-child(3){ grid-column:1 / span 8; padding-block-start:0; }
  .detail-layout{ grid-template-columns:1fr; gap:2.6rem; }
  .detail-aside{ position:static; }
  .card-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:720px){
  .hero{ padding-block-start:clamp(6.5rem,18vw,8rem); }
  .hero-vert{ display:none; }
  .hero-eyebrow,.hero-title,.hero-lead,.hero-cta,.hero-media,.hero-stats{ grid-column:1 / -1; }
  html[lang="ar"] .hero-title,html[lang="ar"] .hero-media{ grid-column:1 / -1; }
  .hero-title .ln:nth-child(2){ padding-inline-start:0; }
  .hero-media,html[lang="ar"] .hero-media{ grid-row:auto; aspect-ratio:4/3.4; margin-block-start:.5rem; }
  .hero-stats{ grid-template-columns:1fr 1fr; }
  .hero-stats > div{ border-inline-start:0; border-top:1px solid var(--line); padding-inline:0; }
  .hero-stats > div:nth-child(odd){ border-inline-end:1px solid var(--line); padding-inline-end:1rem; }
  .hero-stats > div:nth-child(even){ padding-inline-start:1rem; }
  .hero-stats > div:nth-child(-n+2){ border-top:0; }
  .hero-scroll{ display:none; }
  .firm-head,.firm-body,.firm-media,.firm-note,.firm-tag,
  .p-head > div,.pr-head > div,.cl-head > div{ grid-column:1 / -1 !important; }
  .firm-media{ grid-row:auto; aspect-ratio:4/3.6; }
  .p-card--a,.p-card--b{ grid-column:1 / -1 !important; margin-block-start:0 !important; }
  .pa:nth-child(n){ grid-column:1 / -1 !important; margin-block-start:0 !important; }
  .p-strip .fig,.p-strip .quote{ grid-column:1 / -1; }
  .off-media,.off-side,.off-fact{ grid-column:1 / -1 !important; }
  .val:nth-child(n){ grid-column:1 / -1 !important; padding-block-start:0 !important; }
  .ct-grid > *{ grid-column:1 / -1 !important; }
  .ft-grid{ flex-direction:column; align-items:flex-start; }
  .card-grid{ grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   14. REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .mq-track{ animation:none !important; }
  .hero-eyebrow,.hero-title .ln > span,.hero-lead,.hero-cta,.hero-media,
  .hero-stats,.hero-vert,.hero-scroll{ opacity:1 !important; transform:none !important; }
  ::view-transition-old(root),::view-transition-new(root){ animation:none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   15. HEADER & FOOTER DESIGN (Customizer → Header & Footer Design)
   Consumes --hf-* custom properties emitted by inc/header-footer-design.php
   in wp_head; every var() carries the shipped default as fallback, so the
   default render is identical to the approved mockup.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Header ─────────────────────────────────────────────────────────── */
.hdr{
  padding-block:var(--hf-hdr-pad-y, clamp(1rem,2vw,1.7rem));
  background:var(--hf-hdr-bg, transparent);
  color:var(--hf-hdr-fg, var(--walnut));
}
.hdr::after{
  background:var(--hf-hdr-sticky-bg, color-mix(in oklab, var(--cream) 84%, transparent));
  border-bottom:1px solid var(--hf-hdr-line, var(--line));
}
body.hf-no-hdr-border .hdr::after,
body.hf-no-hdr-border .hdr{ border-bottom-color:transparent; }

/* Brand / logo */
.brand .mark{
  width:var(--hf-logo-size, clamp(38px,3.3vw,46px));
  height:var(--hf-logo-size, clamp(38px,3.3vw,46px));
}
.brand .hf-logo-img{ display:block; height:var(--hf-logo-size, 42px); width:auto; }
.brand-txt b{ font-family:var(--hf-font-brand, var(--font-display)); font-size:var(--hf-brand-size, clamp(.92rem,.42rem + .78vw,1.16rem)); }
.brand .hf-dot{ color:var(--hf-accent, var(--brass)); }

/* Navigation */
.nav a{
  color:var(--hf-nav-color, var(--walnut-2));
  font-family:var(--hf-font-nav, var(--font-body));
  font-size:var(--hf-nav-size, var(--fs-small));
}
.nav a:hover,.nav a:focus-visible{ color:var(--hf-nav-hover, var(--walnut-2)); }

/* Language switcher */
.langs{ border-color:var(--hf-lang-border, var(--line)); }
.langs a{ color:var(--hf-lang-color, var(--fg-soft)); }
.langs a[aria-current="true"]{
  background:var(--hf-lang-active-bg, var(--walnut));
  color:var(--hf-lang-active-fg, var(--cream));
}

/* Header button */
.hdr .btn{
  background:var(--hf-btn-bg, var(--btn-bg));
  color:var(--hf-btn-fg, var(--btn-fg));
  border-color:var(--hf-btn-bg, var(--btn-bg));
}
.hdr .btn::before{ background:var(--hf-btn-hover-bg, var(--brass)); }
.hdr .btn:hover{ border-color:var(--hf-btn-hover-bg, var(--brass)); }

/* Mobile drawer */
.drawer{ background:var(--hf-drawer-bg, var(--cream-2)); }
.drawer nav a{ color:var(--hf-drawer-color, var(--walnut)); }

/* ── Footer ─────────────────────────────────────────────────────────── */
.ft{
  background:var(--hf-ft-bg, var(--ink));
  color:var(--hf-ft-color, color-mix(in oklab,var(--cream) 68%,transparent));
  padding-block:var(--hf-ft-pad-y, clamp(2.4rem,5vw,3.6rem));
  font-family:var(--hf-font-ft, inherit);
}
.ft-brand{ color:var(--hf-ft-brand, var(--cream)); font-family:var(--hf-font-brand, var(--font-display)); }
.ft-brand .hf-dot{ color:var(--hf-accent, var(--brass)); }
.ft-brand .hf-logo-img{ display:block; height:var(--hf-logo-size, 42px); width:auto; }
.ft-brand-txt{ display:flex; flex-direction:column; line-height:1.2; }
.ft-brand .ft-sub{ font-weight:400; opacity:.7; }
.ft nav a{ color:var(--hf-ft-link, inherit); font-size:var(--hf-ft-link-size, .7rem); }
.ft nav a:hover,.ft nav a:focus-visible{ color:var(--hf-ft-link-hover, var(--brass-soft)); }
.ft nav a{ font-family:var(--hf-font-ft, inherit); }
.ft-soc{ border-color:var(--hf-ft-soc-border, rgba(244,239,230,.22)); }
.ft-soc:hover,.ft-soc:focus-visible{ background:var(--hf-ft-soc-hover, var(--brass)); border-color:var(--hf-ft-soc-hover, var(--brass)); }
.ft-soc svg{ width:var(--hf-ft-soc-size, 17px); height:var(--hf-ft-soc-size, 17px); }

/* ── FAQ (ACF Options → FAQ; schema mirrors the DOM 1:1) ───────────── */
.faq{ padding-block:var(--sect); background:var(--cream-2); }
.faq .h2{ margin:.55rem 0 0; }
.faq-list{ margin-block-start:clamp(2rem,4vw,3.4rem); max-width:880px; }
.faq-item{
  border-top:1px solid var(--line);
}
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:1.4rem;
  padding-block:clamp(1rem,2vw,1.5rem);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary h3{
  margin:0; font-family:var(--font-display); font-weight:600;
  font-size:var(--fs-h3); line-height:1.3;
}
.faq-item summary i{
  flex:none; width:12px; height:12px; position:relative;
}
.faq-item summary i::before,.faq-item summary i::after{
  content:""; position:absolute; inset-inline:0; top:50%; height:1.4px;
  background:var(--brass); transition:transform 240ms var(--ease);
}
.faq-item summary i::after{ transform:rotate(90deg); }
.faq-item[open] summary i::after{ transform:rotate(0deg); }
.faq-item summary:hover h3{ color:var(--brass); }
.faq-item p{
  margin:0; padding-block-end:clamp(1.1rem,2vw,1.6rem);
  max-width:62ch; color:var(--slate); font-weight:300; line-height:1.7;
}
html[lang="ar"] .faq-item summary h3{ font-weight:500; }
html[lang="ar"] .faq-item p{ line-height:1.85; }
@media (max-width:720px){
  .faq-item summary{ gap:1rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   16. SITE TYPOGRAPHY (ACF → Site Typography options page)
   Consumes --egty-* custom properties emitted by inc/typography.php in
   wp_head; every var() carries the shipped design default as fallback, so
   an untouched options page emits no CSS and nothing changes. Filled values
   override the design tokens here — later in the cascade at equal
   specificity. html[lang="ar"] values override the :root group only on /ar/
   pages. Size contract: a bare px number applies at every viewport; a
   clamp()/min()/max() expression is used as authored (fully fluid); empty
   keeps the shipped fluid token.
   ═══════════════════════════════════════════════════════════════════════ */

/* Global families */
body{ font-family:var(--egty-font-body, var(--font-body)); }

/* Headings: H1 (page hero + detail titles) */
.page-hero h1{
  font-family:var(--egty-font-heading, var(--font-display));
  font-weight:var(--egty-weight-h1, 700);
  font-size:var(--egty-size-h1, var(--fs-h2));
  line-height:var(--egty-lh-h1, 1.02);
}
.detail-main h1{
  font-family:var(--egty-font-heading, var(--font-display));
  font-weight:var(--egty-weight-h1, 700);
  line-height:var(--egty-lh-h1, 1.08);
}

/* Section headings (.h2) */
.h2{
  font-family:var(--egty-font-heading, var(--font-display));
  font-weight:var(--egty-weight-h2, 700);
  font-size:var(--egty-size-h2, var(--fs-h2));
  line-height:var(--egty-lh-h2, 1.02);
}

/* Sub-headings: card/FAQ/section h3 */
.detail-main h2{
  font-family:var(--egty-font-heading, var(--font-display));
  font-weight:var(--egty-weight-h2, 700);
  line-height:var(--egty-lh-h2, 1.08);
}
.detail-main h3{
  font-family:var(--egty-font-heading, var(--font-display));
  font-weight:var(--egty-weight-h3, 700);
  line-height:var(--egty-lh-h3, 1.08);
}
.pa h3{
  font-size:var(--egty-size-h3, clamp(1.18rem,.98rem + .8vw,1.72rem));
  font-weight:var(--egty-weight-h3, 600);
  line-height:var(--egty-lh-h3, 1.18);
}
.p-meta h3{
  font-size:var(--egty-size-h3, var(--fs-h3));
  font-weight:var(--egty-weight-h3, 700);
  line-height:var(--egty-lh-h3, 1.1);
}
.val h3{
  font-size:var(--egty-size-h3, clamp(1.6rem,1.1rem + 1.7vw,2.7rem));
  line-height:var(--egty-lh-h3, 1);
}

/* Running text */
body{ font-size:var(--egty-size-body, var(--fs-body)); line-height:var(--egty-lh-body, 1.72); font-weight:var(--egty-weight-body, 400); }
.page-hero .page-lead, .contact .lead, .practice .lead, .lead{
  font-size:var(--egty-size-lead, var(--fs-lead));
  font-weight:var(--egty-weight-lead, 300);
  line-height:var(--egty-lh-lead, 1.62);
}

/* Eyebrow labels */
.eyebrow{
  font-size:var(--egty-size-eyebrow, var(--fs-eyebrow));
  font-weight:var(--egty-weight-eyebrow, 600);
}

/* Buttons */
.btn, .button{
  font-size:var(--egty-size-btn, var(--fs-small));
  font-weight:var(--egty-weight-btn, 600);
}

/* ── Arabic tree: own values, same variable names (emitted on
   html[lang="ar"] by inc/typography.php; fallbacks = the Tajawal-tuned
   Arabic defaults) ── */
html[lang="ar"] body{ font-family:var(--egty-font-body, 'Tajawal','IBM Plex Sans',Arial,sans-serif); font-size:var(--egty-size-body, var(--fs-body)); line-height:var(--egty-lh-body, 1.85); font-weight:var(--egty-weight-body, 400); }
html[lang="ar"] .page-hero h1{
  font-family:var(--egty-font-heading, 'Tajawal','Playfair Display',Georgia,serif);
  font-weight:var(--egty-weight-h1, 500);
  line-height:var(--egty-lh-h1, 1.3);
}
html[lang="ar"] .h2{
  font-family:var(--egty-font-heading, 'Tajawal','Playfair Display',Georgia,serif);
  font-weight:var(--egty-weight-h2, 500);
  line-height:var(--egty-lh-h2, 1.3);
}
html[lang="ar"] .p-meta h3{ font-weight:var(--egty-weight-h3, 500); }
html[lang="ar"] .pa h3{ font-weight:var(--egty-weight-h3, 500); }
html[lang="ar"] .val h3{ font-weight:var(--egty-weight-h3, 500); }
html[lang="ar"] .faq-item summary h3{ font-weight:var(--egty-weight-h3, 500); }
html[lang="ar"] .lead, html[lang="ar"] .page-hero .page-lead{ line-height:var(--egty-lh-lead, 1.9); font-weight:var(--egty-weight-lead, 400); }
html[lang="ar"] .eyebrow{ font-weight:var(--egty-weight-eyebrow, 500); }
html[lang="ar"] .btn, html[lang="ar"] .button{ font-weight:var(--egty-weight-btn, 500); }

/* ═════════════════════════════════════════════════════════════════════════
   Cookie consent banner — inc/consent-banner.php
   ═════════════════════════════════════════════════════════════════════════
   There is no hidden/shown state here on purpose: the markup is rendered
   server-side ONLY when the visitor has not answered yet, so if it is in the
   page at all, it belongs on screen. (A JS-revealed banner would also need an
   inline <script>, which `script-src 'self'` forbids — see the CSP note in
   inc/csp-manager.php.)

   z-index 890 clears the header (800), the mobile drawer (790) and the
   scroll-to-top button (870), and stays under the decorative grain overlay
   (900) so the banner receives the same texture as the rest of the page.

   Direction-agnostic: the flex row plus every logical property below means
   the Arabic tree (html dir="rtl") mirrors with no RTL override at all. */
.consent{
  position:fixed; inset-inline:0; inset-block-end:0; z-index:890;
  background:var(--walnut); color:var(--cream);
  border-block-start:1px solid var(--brass);
  box-shadow:0 -20px 44px -30px rgba(28,23,18,.75);
}
.consent-inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:.9rem 2rem; padding-block:1.1rem;
  padding-block-end:max(1.1rem, env(safe-area-inset-bottom));
}
.consent-copy{ flex:1 1 24rem; min-inline-size:0; }
.consent-title{ margin:0 0 .3rem; font-family:var(--font-display); font-size:var(--fs-h3); line-height:1.2; }
.consent-body{
  margin:0; max-inline-size:70ch; font-size:var(--fs-small); line-height:1.62;
  color:color-mix(in oklab, var(--cream) 76%, transparent);
}
.consent-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; flex:0 0 auto; }
.consent-more{
  margin-inline-end:.45rem; font-size:var(--fs-small);
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--brass-soft); text-decoration:underline; text-underline-offset:3px;
}
.consent-more:hover{ color:var(--cream); }
/* The dark band inverts the default button palette. */
.consent .btn{ --btn-bg:var(--brass); --btn-fg:var(--walnut-3); border-color:var(--brass); padding:.72rem 1.25rem; }
.consent .btn--ghost{ --btn-bg:transparent; --btn-fg:var(--cream); border-color:color-mix(in oklab, var(--cream) 32%, transparent); }
.consent .btn--ghost:hover{ color:var(--walnut-3); }

/* Reserve the banner's height so a visitor who ignores it can still reach the
   footer. The class is added by the body_class filter in inc/consent-banner.php
   and only when the banner is actually rendered. */
body.ega-consent-open{ padding-block-end:6.6rem; }
body.ega-consent-open .ega-stt{ inset-block-end:calc(clamp(1rem,2.4vw,1.8rem) + 6.6rem); }

@media (max-width:720px){
  .consent-inner{ padding-block:.95rem; gap:.7rem 1rem; }
  .consent-title{ font-size:var(--fs-body); }
  .consent-actions{ inline-size:100%; }
  .consent-actions .btn{ flex:1 1 8rem; justify-content:center; }
  .consent-more{ flex:1 1 100%; margin-inline-end:0; }
  body.ega-consent-open{ padding-block-end:12.5rem; }
  body.ega-consent-open .ega-stt{ inset-block-end:calc(clamp(1rem,2.4vw,1.8rem) + 12.5rem); }
}

/* ── Editorial archive discovery forms ────────────────────────────────────
   Scoped to the search/filter controls; theme palette and logical properties
   preserve the established Arabic RTL and mobile layouts. */
.discovery-form{
  display:flex; flex-wrap:wrap; align-items:end; gap:1rem 1.25rem;
  margin-block:0 1.25rem; padding-block:1.1rem;
  border-block:1px solid var(--line);
}
.discovery-query,.discovery-filter{ display:flex; flex:1 1 15rem; flex-direction:column; gap:.35rem; min-inline-size:0; }
.discovery-query label,.discovery-filter label{
  color:var(--brass); font-size:var(--fs-eyebrow); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
}
.discovery-query input,.discovery-filter select{
  inline-size:100%; min-block-size:3rem; padding:.65rem .8rem;
  color:var(--walnut); background:transparent; border:1px solid var(--line);
  border-radius:2px; font:inherit;
}
.discovery-query input:focus,.discovery-filter select:focus{ outline:2px solid var(--brass); outline-offset:2px; }
.discovery-filter{ flex:0 1 14rem; }
.discovery-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:.9rem; }
.discovery-actions .btn{ min-block-size:3rem; padding:.72rem 1.15rem; justify-content:center; }
.discovery-reset{ min-block-size:2.75rem; display:inline-flex; align-items:center; color:var(--walnut-2); text-decoration:underline; text-decoration-color:var(--brass-soft); text-underline-offset:4px; }
.discovery-reset:hover{ color:var(--brass); }
.discovery-count{ margin:0 0 1.4rem; color:var(--stone); font-size:var(--fs-small); }
html[lang="ar"] .discovery-query label,html[lang="ar"] .discovery-filter label{ letter-spacing:0; }
@media (max-width:720px){
  .discovery-form{ align-items:stretch; gap:.85rem; }
  .discovery-query,.discovery-filter{ flex:1 1 100%; }
  .discovery-actions{ inline-size:100%; }
  .discovery-actions .btn{ flex:1 1 10rem; }
  .discovery-reset{ justify-content:center; }
}

/* ── Insights: editorial format, source attribution, related items ─────────
   The Insights stream mixes the firm's own legal analysis with external media
   appearances. These rules keep the two visually distinguishable without
   changing the brand palette. Layout uses logical properties only, so the
   Arabic tree (html[dir="rtl"]) mirrors automatically — no direction
   override is applied per element. */
.insight-meta{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem .9rem;
  margin-block-start:1.1rem; padding-block-start:.85rem;
}
.insight-format{
  display:inline-flex; align-items:center; gap:.45rem;
  color:var(--brass); font-weight:600; letter-spacing:.18em;
}
.insight-format::before{
  content:""; inline-size:.42rem; block-size:.42rem; border-radius:50%;
  background:currentColor; flex:0 0 auto;
}
.insight-format[data-kind="video"]{ color:var(--walnut-2); }
.insight-format--inline{
  margin-inline-start:.5rem; font-size:.62rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; opacity:.85;
}
.insight-format--inline::before{ inline-size:.3rem; block-size:.3rem; }
.insight-meta time{ color:var(--stone); }
.insight-source-name{
  color:var(--stone); font-weight:400; max-inline-size:100%;
  overflow-wrap:anywhere;
}
/* Availability notice (Model A'): states the language an untranslated record
   is actually readable in. Muted, not alarming — it reports a fact, it does
   not flag an error. Sets its own language tag so an Arabic-first record does
   not inherit the Latin line-height of an English tree. */
.lang-avail{
  display:inline-flex; align-items:center; gap:.45rem;
  margin-block:0 .35rem; font-size:var(--fs-small); font-weight:500;
  letter-spacing:.06em; color:var(--stone);
}
.lang-avail::before{
  content:""; inline-size:.4rem; block-size:.4rem; border-radius:50%;
  border:1px solid currentColor; flex:0 0 auto;
}
.insight-meta .lang-avail{ flex:1 1 100%; margin-block:0; }

.insight-source{
  margin-block-start:1.6rem; font-size:var(--fs-small); color:var(--slate);
}
.insight-source-label{
  margin-inline-end:.5rem; color:var(--brass); font-size:.62rem;
  letter-spacing:.24em; text-transform:uppercase;
}
.insight-source a{ color:var(--walnut); border-bottom:1px solid var(--brass-soft); }
.insight-source a:hover,.insight-source a:focus-visible{ color:var(--brass); }
.insight-source--media{ margin-block-start:2rem; }
.insight-source--media .btn{ text-transform:none; letter-spacing:.04em; }
.related-list{ margin-block-start:1rem; }
.related-list li{ display:flex; flex-wrap:wrap; align-items:baseline; }