/* =============================================
   RESET
============================================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:#FFFFFF;
  color:#1A1A1A;
  font-family:'DM Sans',sans-serif;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
ul{list-style:none}
[lang="ar"]{font-family:'Tajawal',sans-serif;direction:rtl}
[lang="ar"] *{letter-spacing:0!important}
[lang="ar"] .eo{display:none!important}
[lang="en"] .ao{display:none!important}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:#f0ede8}
::-webkit-scrollbar-thumb{background:#B8853A;border-radius:2px}

/* =============================================
COLOR SYSTEM
RULE: Dark text on light bg. Light text on dark bg only when large/bold.
Dark bg = #1E1E1E (charcoal)
Light bg = #FFFFFF or #F8F7F5
Dark text = #1A1A1A (on light bg)
Body text = #3D3D3D (on light bg)
Muted text = #666660 (on light bg)
Light text = #FFFFFF (on dark bg — headings/large text only)
Light muted = rgba(255,255,255,0.75) (on dark bg — body text)
Gold = #B8853A (accents only)
Gold light = #D4A55A (on dark bg accents)
============================================= */
:root{
--dark:#1E1E1E;
--dark2:#2A2A2A;
--white:#FFFFFF;
--off:#F8F7F5;
--off2:#F2F0EC;
--line:#E0DDD8;
--gold:#B8853A;
--gold-l:#D4A55A;
--gold-d:#8A6228;
--t-dark:#1A1A1A;
--t-body:#3D3D3D;
--t-muted:#666660;
--t-light:#FFFFFF;
--t-light-body:rgba(255,255,255,0.82);
--r:6px;
--rl:12px;
--max:1120px;
--nh:68px;
--ez:cubic-bezier(.4,0,.2,1);
}

/* =============================================
ANIMATIONS
============================================= */
.rv{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.rv.vis{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}

/* =============================================
NAV — dark bg, white text
============================================= */
.nav{
position:fixed;top:0;left:0;right:0;z-index:900;
height:68px;
background:#1E1E1E;
border-bottom:1px solid rgba(255,255,255,.08);
transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1);
}
.nav.up{transform:translateY(-100%)}
.nav.sd{box-shadow:0 4px 24px rgba(0,0,0,.3)}
.ni{max-width:1120px;margin:0 auto;padding:0 20px;height:68px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0;cursor:pointer}
.logo img{height:30px;width:auto}
/* Logo text — white on dark nav */
.logo .l1{font-family:'Playfair Display',serif;font-size:.95rem;font-weight:700;color:#FFFFFF}
.logo .l2{font-size:.57rem;color:rgba(255,255,255,.6);letter-spacing:.14em;text-transform:uppercase;margin-top:1px}
/* Nav links — white on dark */
.nlinks{display:flex;align-items:center;gap:2px}
.nlinks a{color:rgba(255,255,255,.85);font-size:.78rem;font-weight:500;padding:7px 10px;border-radius:6px;transition:color .2s,background .2s;white-space:nowrap}
.nlinks a:hover,.nlinks a.act{color:#FFFFFF;background:rgba(255,255,255,.12)}
/* CTA button in nav */
.ncta{background:#B8853A!important;color:#FFFFFF!important;font-weight:700!important;padding:8px 18px!important;border-radius:6px!important;margin-left:8px!important}
.ncta:hover{background:#D4A55A!important}
/* Lang toggle */
.lt{display:flex;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:20px;overflow:hidden}
.lt button{background:none;border:none;color:rgba(255,255,255,.7);font-size:.69rem;font-weight:700;letter-spacing:.08em;padding:5px 11px;transition:color .2s,background .2s}
.lt button.act{background:rgba(255,255,255,.2);color:#FFFFFF}
/* Hamburger */
.hbg{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:6px}
.hbg span{display:block;width:20px;height:1.5px;background:rgba(255,255,255,.9);border-radius:2px;transition:transform .25s cubic-bezier(.4,0,.2,1),opacity .2s}
.hbg.op span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hbg.op span:nth-child(2){opacity:0}
.hbg.op span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
/* Mobile drawer — white bg, dark text */
.mdrawer{display:none;position:fixed;top:68px;left:0;right:0;bottom:0;z-index:850;background:#FFFFFF;border-top:3px solid #B8853A;overflow-y:auto}
.mdrawer.op{display:block}
.mdrawer a{display:block;color:#1A1A1A;font-size:.97rem;font-weight:500;padding:14px 24px;border-bottom:1px solid #E0DDD8;transition:color .2s,background .2s}
.mdrawer a:hover{color:#8A6228;background:#F8F7F5}
.mcta{margin:20px 24px 0!important;display:block!important;text-align:center!important;background:#B8853A!important;color:#FFFFFF!important;font-weight:700!important;padding:14px!important;border-radius:6px!important;font-size:.97rem!important}
.mlang{display:flex;gap:8px;padding:16px 24px;background:#F8F7F5}
.mlang button{flex:1;background:#FFFFFF;border:1px solid #E0DDD8;color:#666660;padding:10px;border-radius:6px;font-size:.82rem;font-weight:700;letter-spacing:.08em;transition:all .2s}
.mlang button.act{background:#1E1E1E;border-color:#1E1E1E;color:#FFFFFF}

/* =============================================
PAGES
============================================= */
main{display:block;padding-top:68px}

/* =============================================
BUTTONS
============================================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:.87rem;font-weight:600;border-radius:6px;padding:13px 28px;transition:all .22s cubic-bezier(.4,0,.2,1);border:none;white-space:nowrap;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent}
/* Gold button — white text on gold */
.btn-gold{background:#B8853A;color:#FFFFFF}
.btn-gold:hover{background:#D4A55A;transform:translateY(-1px);box-shadow:0 8px 24px rgba(184,133,58,.3)}
/* Outline button on dark bg — white border, white text */
.btn-outline-light{background:transparent;color:#FFFFFF;border:1.5px solid rgba(255,255,255,.55)}
.btn-outline-light:hover{border-color:#FFFFFF;background:rgba(255,255,255,.1)}
/* Outline button on light bg — dark border, dark text */
.btn-outline-dark{background:transparent;color:#1A1A1A;border:1.5px solid #E0DDD8}
.btn-outline-dark:hover{border-color:#B8853A;color:#8A6228}

/* =============================================
UTILITIES
============================================= */
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.sec{padding:80px 0}
.sec-light{background:#FFFFFF}
.sec-off{background:#F8F7F5}
.div{height:1px;background:#E0DDD8}
/* Eyebrow label — gold on any bg */
.ey{font-size:.67rem;letter-spacing:.22em;text-transform:uppercase;color:#8A6228;font-weight:700;display:block;margin-bottom:12px}
[lang="ar"] .ey{letter-spacing:0;text-transform:none}
/* Eyebrow on dark bg */
.ey-light{font-size:.67rem;letter-spacing:.22em;text-transform:uppercase;color:#D4A55A;font-weight:700;display:block;margin-bottom:12px}
[lang="ar"] .ey-light{letter-spacing:0;text-transform:none}
.tag{display:inline-block;font-size:.67rem;color:#8A6228;border:1px solid rgba(184,133,58,.3);padding:3px 12px;border-radius:20px;background:rgba(184,133,58,.07);font-weight:600}
/* Notice block — light bg, dark text */
.notice{font-size:.78rem;color:#3D3D3D;line-height:1.6;border-left:3px solid #B8853A;padding:14px 14px 14px 18px;border-radius:0 6px 6px 0;background:#FBF8F4;margin-top:26px}
[dir="rtl"] .notice{border-left:none;border-right:3px solid #B8853A;padding-left:14px;padding-right:18px}
.sec-label{display:flex;align-items:center;gap:16px;margin-bottom:36px}
.sec-label::after{content:"";flex:1;height:1px;background:#E0DDD8}

/* =============================================
HERO — dark bg
ALL TEXT: white or near-white. Large text = full white.
============================================= */
.hero{position:relative;min-height:calc(100vh - 68px);display:flex;align-items:center;overflow:hidden;background:#1E1E1E}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 70% 50% at 50% -10%,rgba(184,133,58,.1) 0%,transparent 65%)}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,black 20%,transparent 100%)}
.hc{position:relative;max-width:1120px;margin:0 auto;padding:80px 20px 64px;text-align:center}
/* Pill label on dark */
.hpill{display:inline-flex;align-items:center;background:rgba(212,165,90,.15);border:1px solid rgba(212,165,90,.4);border-radius:24px;padding:7px 20px;margin-bottom:32px}
.hpill span{font-size:.67rem;letter-spacing:.18em;text-transform:uppercase;color:#D4A55A;font-weight:700}
/* H1 — pure white, large so readable on dark */
.hh1{font-family:'Playfair Display',serif;font-size:clamp(2.2rem,5.5vw,4.2rem);font-weight:700;line-height:1.1;color:#FFFFFF}
.hh1 em{color:#D4A55A;font-style:normal;display:block}
/* Subtitle — body text on dark, bright enough to read */
.hsub{font-size:clamp(.93rem,2vw,1.06rem);color:rgba(255,255,255,.88);max-width:580px;margin:20px auto 0;line-height:1.8;font-weight:300}
.hbtns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:36px}
/* Badges — readable on dark */
.hbadges{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.hbadge{font-size:.72rem;color:rgba(255,255,255,.85);display:flex;align-items:center;gap:6px}
.hbadge::before{content:"\2022";color:#D4A55A;font-weight:700}

/* =============================================
STATS BAR — off-white bg, dark text
============================================= */
.sbar{background:#F8F7F5;border-top:1px solid #E0DDD8;border-bottom:1px solid #E0DDD8}
.sgrid{display:grid;grid-template-columns:repeat(3,1fr)}
.si{padding:32px 24px;text-align:center;border-right:1px solid #E0DDD8}
.si:last-child{border-right:none}
/* Stat number — dark text, large so readable */
.sn{font-family:'Playfair Display',serif;font-size:clamp(2rem,4vw,3rem);font-weight:700;color:#1A1A1A;line-height:1;margin-bottom:8px}
/* Stat label — body text color on off-white */
.sl{font-size:.78rem;color:#3D3D3D;line-height:1.5;max-width:160px;margin:0 auto}

/* =============================================
WHO WE SERVE — off-white section, dark text
============================================= */
.audi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.audi-card{background:#FFFFFF;border:1px solid #E0DDD8;border-radius:12px;padding:24px;cursor:pointer;transition:all .22s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px rgba(0,0,0,.04)}
.audi-card:hover{border-color:#B8853A;transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.1)}
.audi-icon{font-size:1.5rem;margin-bottom:12px}
/* Card heading — dark text */
.audi-card h3{font-size:.88rem;color:#1A1A1A;font-weight:700;margin-bottom:7px}
/* Card body — body text */
.audi-card p{font-size:.78rem;color:#3D3D3D;line-height:1.6}

/* =============================================
WHY SECTION — white bg, ALL TEXT DARK
============================================= */
.wg{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
/* Section heading — dark on white */
.wt h2{font-family:'Playfair Display',serif;font-size:clamp(1.6rem,3vw,2.3rem);color:#1A1A1A;margin-bottom:18px;line-height:1.25;font-weight:700}
/* Body paragraphs — dark body text on white */
.wt p{font-size:.92rem;color:#3D3D3D;line-height:1.85;margin-bottom:14px}
/* Why cards — white bg, dark text */
.wcards{display:flex;flex-direction:column;gap:14px}
.wcard{background:#FFFFFF;border:1px solid #E0DDD8;border-radius:12px;padding:22px;transition:all .22s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px rgba(0,0,0,.04)}
.wcard:hover{border-color:#B8853A;box-shadow:0 8px 28px rgba(0,0,0,.09);transform:translateY(-2px)}
.wch{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.wci{width:36px;height:36px;border-radius:50%;background:rgba(184,133,58,.08);border:1px solid rgba(184,133,58,.25);display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0}
/* Card heading dark */
.wcard h3{font-size:.88rem;color:#1A1A1A;font-weight:700}
/* Card text — body color */
.wcard p{font-size:.8rem;color:#3D3D3D;line-height:1.65}
/* Quote block in why section — dark bg, white text (explicit for contrast) */
.qb{background:#1E1E1E;border-radius:12px;padding:28px 28px 24px;margin-top:24px;position:relative;overflow:hidden;border:1px solid rgba(212,165,90,.2)}
.qb::before{content:"\201C";position:absolute;top:-10px;left:20px;font-size:5rem;color:#D4A55A;opacity:.2;font-family:'Playfair Display',serif;line-height:1}
[dir="rtl"] .qb::before{left:auto;right:20px}
/* Quote text — bright white on dark */
.qt{font-family:'Playfair Display',serif;font-size:.98rem;color:#FFFFFF;font-style:italic;line-height:1.65;margin-bottom:12px}
/* Quote author — gold on dark */
.qa{font-size:.7rem;color:#D4A55A;letter-spacing:.1em;text-transform:uppercase;font-weight:600}

/* =============================================
SERVICES GRID — off-white section, white cards
============================================= */
.svgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.svc{background:#FFFFFF;border:1px solid #E0DDD8;border-radius:12px;padding:32px 28px;cursor:pointer;transition:all .22s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.svc::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:#B8853A;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.4,0,.2,1)}
.svc:hover{border-color:#B8853A;transform:translateY(-3px);box-shadow:0 12px 36px rgba(0,0,0,.09)}
.svc:hover::before{transform:scaleX(1)}
.svc-n{font-size:.62rem;color:#8A6228;letter-spacing:.2em;margin-bottom:14px;font-weight:700}
.svc-n.ao{letter-spacing:0}
/* Card heading — dark */
.svc h3{font-family:'Playfair Display',serif;font-size:1.05rem;color:#1A1A1A;margin-bottom:10px}
/* Card text — body */
.svc p{font-size:.8rem;color:#3D3D3D;line-height:1.7;margin-bottom:18px}
.svc-arr{font-size:.78rem;color:#8A6228;font-weight:600}

/* =============================================
QUOTES STRIP — dark bg, white text
============================================= */
.qs{background:#1E1E1E;padding:60px 0}
.qsgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.qcard{padding:26px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.05)}
/* Quote text — bright white on dark */
.qt2{font-family:'Playfair Display',serif;font-size:.93rem;color:#FFFFFF;font-style:italic;line-height:1.65;margin-bottom:12px}
/* Author — gold on dark */
.qa2{font-size:.68rem;color:#D4A55A;letter-spacing:.1em;text-transform:uppercase;font-weight:600}

/* =============================================
CTA BAND — gold bg, white text
============================================= */
.ctaband{background:#B8853A;padding:64px 0;text-align:center}
.ctaband h2{font-family:'Playfair Display',serif;font-size:clamp(1.5rem,3vw,2.1rem);color:#FFFFFF;margin-bottom:12px;font-weight:700}
.ctaband p{font-size:.95rem;color:rgba(255,255,255,.9);margin-bottom:28px;max-width:500px;margin-left:auto;margin-right:auto;line-height:1.75}
.ctaband .btn-cta{background:#FFFFFF;color:#8A6228;font-weight:700;padding:14px 32px;border-radius:6px;border:none;font-family:inherit;font-size:.9rem;cursor:pointer;transition:all .2s}
.ctaband .btn-cta:hover{background:#F8F7F5;transform:translateY(-1px)}

/* =============================================
PAGE HERO — dark bg, white text
============================================= */
.ph{padding:56px 0 44px;background:#1E1E1E}
/* Eyebrow on dark */
.ph .ey-light{margin-bottom:14px}
/* H1 — large white text on dark, fully readable */
.ph h1{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,4vw,2.9rem);font-weight:700;color:#FFFFFF;margin-bottom:16px;line-height:1.2;max-width:700px}
/* Subtitle — bright on dark */
.ph p.sub{font-size:.93rem;color:rgba(255,255,255,.85);max-width:580px;line-height:1.8}
/* Breadcrumb on dark */
.bc{display:flex;align-items:center;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.bc a{font-size:.72rem;color:rgba(255,255,255,.65);transition:color .2s}
.bc a:hover{color:#D4A55A}
.bc span{font-size:.72rem;color:rgba(255,255,255,.4)}
.bc .cur{color:#D4A55A;font-size:.72rem;font-weight:600}

/* =============================================
ABOUT — white section, dark text
============================================= */
.abg{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
.ab h2{font-family:'Playfair Display',serif;font-size:1.22rem;color:#1A1A1A;margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid #D4A55A}
.ab p{font-size:.87rem;color:#3D3D3D;line-height:1.85;margin-bottom:12px}
.plist{display:flex;flex-direction:column;gap:10px}
.prin{display:flex;gap:12px;align-items:flex-start;padding:15px;border:1px solid #E0DDD8;border-radius:6px;background:#FFFFFF;transition:all .2s;box-shadow:0 2px 6px rgba(0,0,0,.03)}
.prin:hover{border-color:#B8853A;box-shadow:0 4px 14px rgba(0,0,0,.07)}
.pdot{width:8px;height:8px;border-radius:50%;background:#B8853A;flex-shrink:0;margin-top:7px}
.pt strong{display:block;font-size:.84rem;color:#1A1A1A;margin-bottom:3px;font-weight:700}
.pt span{font-size:.78rem;color:#3D3D3D}
.llist{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.li{display:flex;gap:10px;font-size:.81rem;color:#3D3D3D;padding:12px 14px;border:1px solid #E0DDD8;border-radius:6px;background:#FFFFFF}
.li::before{content:"\00D7";color:#CC4444;flex-shrink:0;font-weight:700}

/* =============================================
HUB CARDS — white cards, dark text
============================================= */
.hcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.hcard{background:#FFFFFF;border:1px solid #E0DDD8;border-radius:12px;padding:28px 24px;cursor:pointer;transition:all .22s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.hcard:hover{border-color:#B8853A;transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.1)}
.hci{font-size:1.4rem;margin-bottom:14px}
.hcard h3{font-family:'Playfair Display',serif;font-size:1rem;color:#1A1A1A;margin-bottom:8px;font-weight:600}
.hcard p{font-size:.79rem;color:#3D3D3D;line-height:1.7;flex:1;margin-bottom:16px}
.hla{font-size:.78rem;color:#8A6228;font-weight:600}

/* =============================================
TIERS — off-white section
Tier intro: dark bg, white text
Tier items: white bg, dark text
============================================= */
.tintro{background:#1E1E1E;border-radius:12px;padding:36px;margin-bottom:32px;position:relative;overflow:hidden;border-bottom:3px solid #B8853A}
.tintro h2{font-family:'Playfair Display',serif;font-size:1.4rem;color:#FFFFFF;margin-bottom:10px;font-weight:700}
.tintro p{font-size:.87rem;color:rgba(255,255,255,.85);line-height:1.8;max-width:660px}
.tbadges{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.titem{background:#FFFFFF;border:1px solid #E0DDD8;border-radius:6px;margin-bottom:10px;overflow:hidden;transition:all .2s;box-shadow:0 2px 6px rgba(0,0,0,.04)}
.titem:hover{border-color:#B8853A}.titem.op{border-color:#B8853A;box-shadow:0 4px 20px rgba(0,0,0,.08)}
.thead{display:flex;align-items:center;gap:14px;padding:18px 22px;cursor:pointer;transition:background .2s;user-select:none;-webkit-tap-highlight-color:transparent}
.thead:hover{background:#F8F7F5}
.tbadge{min-width:42px;height:42px;border-radius:50%;border:2px solid #D4A55A;display:flex;align-items:center;justify-content:center;font-size:.62rem;color:#8A6228;font-weight:700;flex-shrink:0;background:rgba(184,133,58,.08)}
.tinfo{flex:1}
/* Tier title — dark on white */
.ttitle{font-size:.92rem;color:#1A1A1A;font-weight:700;margin-bottom:2px}
.tdesc{font-size:.74rem;color:#666660}
.tchev{color:#AAAAAA;font-size:.7rem;transition:transform .25s cubic-bezier(.4,0,.2,1);flex-shrink:0}
.titem.op .tchev{transform:rotate(180deg);color:#B8853A}
.tbody{display:none;padding:6px 22px 24px 72px;background:#F8F7F5}
[dir="rtl"] .tbody{padding:6px 72px 24px 22px;background:#F8F7F5}
.titem.op .tbody{display:block}
.tsec{margin-bottom:18px}
/* Tier section title — gold-dark on off-white */
.tsect{font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;color:#8A6228;margin-bottom:9px;padding-bottom:6px;border-bottom:2px solid #D4A55A;font-weight:700}
.tchecks{display:grid;grid-template-columns:1fr 1fr;gap:5px}
/* Check items — dark text on white */
.tcheck{display:flex;gap:8px;align-items:flex-start;font-size:.78rem;color:#3D3D3D;line-height:1.5;padding:7px 10px;border-radius:6px;background:#FFFFFF;border:1px solid #E0DDD8}
.tcheck::before{content:"\2713";color:#B8853A;font-size:.75rem;flex-shrink:0;font-weight:700;margin-top:1px}

/* =============================================
DETAIL PAGES — white bg, dark text
============================================= */
.dg{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
.dc{background:#FFFFFF;border:1px solid #E0DDD8;border-radius:12px;padding:24px;margin-bottom:14px;transition:all .2s;box-shadow:0 2px 6px rgba(0,0,0,.04)}
.dc:hover{border-color:#B8853A;box-shadow:0 6px 20px rgba(0,0,0,.07)}
.dc h3{font-size:.88rem;color:#8A6228;margin-bottom:8px;font-weight:700}
.dc p{font-size:.81rem;color:#3D3D3D;line-height:1.7}
.wlist{display:flex;flex-direction:column;gap:9px}
.wi{display:flex;gap:10px;font-size:.82rem;color:#3D3D3D;padding:12px 14px;border:1px solid #E0DDD8;border-radius:6px;background:#FFFFFF;align-items:flex-start;transition:border-color .2s}
.wi:hover{border-color:#B8853A}
.wi::before{content:'→';color:#8A6228;flex-shrink:0;font-weight:700}
[dir="rtl"] .wi::before{content:'←'}

/* =============================================
MAINTENANCE CARDS — white bg, dark text
============================================= */
.mg{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.mc{background:#FFFFFF;border:1px solid #E0DDD8;border-radius:12px;padding:24px;transition:all .2s;box-shadow:0 2px 6px rgba(0,0,0,.04)}
.mc:hover{border-color:#B8853A;box-shadow:0 8px 24px rgba(0,0,0,.08);transform:translateY(-2px)}
.mc h3{font-size:.88rem;color:#1A1A1A;font-weight:700;margin-bottom:10px;display:flex;gap:8px;align-items:center}
.mc ul{display:flex;flex-direction:column;gap:6px}
.mc ul li{font-size:.78rem;color:#3D3D3D;display:flex;gap:8px;align-items:flex-start;line-height:1.5}
.mc ul li::before{content:'—';color:#8A6228;flex-shrink:0;font-weight:700}

/* =============================================
FORMS — white bg, dark labels/text
============================================= */
.fw{max-width:760px}
.fhd{margin-bottom:28px}
.fhd h2{font-family:'Playfair Display',serif;font-size:1.5rem;color:#1A1A1A;margin-bottom:7px}
.fhd p{font-size:.85rem;color:#666660;line-height:1.7}
.fgrid{display:grid;gap:14px}
.fr2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fg{display:flex;flex-direction:column;gap:5px}
/* Form labels — dark on white */
.fg label{font-size:.71rem;color:#1A1A1A;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.fg input,.fg select,.fg textarea{background:#FFFFFF;border:1.5px solid #E0DDD8;border-radius:6px;color:#1A1A1A;font-family:inherit;font-size:.86rem;padding:12px 14px;outline:none;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;width:100%}
.fg select option{background:#FFFFFF;color:#1A1A1A}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:#B8853A;box-shadow:0 0 0 3px rgba(184,133,58,.1)}
.fg textarea{min-height:108px;resize:vertical}
.fstatus{margin-top:16px;padding:14px 18px;border-radius:6px;font-size:.85rem;line-height:1.6;display:none}
.fstatus.ok{background:#F8F7F5;color:#1A1A1A;border:1px solid #B8853A}
.fstatus.err{background:#FBEAEA;color:#7A2E2E;border:1px solid #CC4444}
.tabs{display:flex;gap:6px;margin-bottom:28px;background:#F8F7F5;padding:5px;border-radius:12px;border:1px solid #E0DDD8}
.tab{flex:1;padding:11px 8px;border-radius:6px;font-size:.8rem;color:#666660;background:none;border:none;font-family:inherit;cursor:pointer;transition:all .2s;text-align:center;font-weight:600}
/* Active tab — dark text on white */
.tab.act{background:#FFFFFF;color:#1A1A1A;box-shadow:0 2px 8px rgba(0,0,0,.08);font-weight:700}
.cdirect{margin-top:32px;padding:24px;border:1px solid #E0DDD8;border-radius:12px;background:#F8F7F5}
.cdirect p{font-size:.8rem;color:#666660;margin-bottom:8px}
.cdirect a{color:#8A6228;font-size:.95rem;font-weight:700}
.cdirect a:hover{text-decoration:underline}

/* =============================================
LEGAL — white, dark text
============================================= */
.lgc{max-width:640px}
.lgc h2{font-family:'Playfair Display',serif;font-size:1.3rem;color:#1A1A1A;margin-bottom:18px;padding-bottom:12px;border-bottom:2px solid #D4A55A}
.lgc h3{font-size:.88rem;color:#8A6228;font-weight:700;margin:18px 0 7px}
.lgc p{font-size:.83rem;color:#3D3D3D;line-height:1.85;margin-bottom:10px}

/* =============================================
FOOTER — dark bg, white text
============================================= */
.ft{background:#1E1E1E;padding:40px 0 24px}
.fti{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px}
.ftlogo img{height:26px;opacity:.75}
.ftlinks{display:flex;gap:18px;flex-wrap:wrap}
/* Footer links — readable white on dark */
.ftlinks a{font-size:.74rem;color:rgba(255,255,255,.7);transition:color .2s}
.ftlinks a:hover{color:#D4A55A}
/* Copyright — muted but visible */
.ftcopy{font-size:.69rem;color:rgba(255,255,255,.55);width:100%;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);margin-top:4px}

/* =============================================
PRACTICE INDEX — landing page, four-practice editorial list
White bg, dark text, numbered rows (not a card grid)
============================================= */
.pidx{display:flex;flex-direction:column}
.pidx-item{display:flex;gap:28px;padding:36px 0;border-bottom:1px solid #E0DDD8;align-items:flex-start;transition:padding-left .2s cubic-bezier(.4,0,.2,1)}
.pidx-item:first-child{padding-top:0}
.pidx-item:last-child{border-bottom:none}
.pidx-item:hover{padding-left:8px}
.pidx-num{font-family:'Playfair Display',serif;font-size:1.6rem;font-weight:700;color:#D4A55A;flex-shrink:0;width:52px;line-height:1}
.pidx-body{flex:1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 32px;align-items:flex-start}
.pidx-text{flex:1;min-width:260px}
.pidx-text h3{font-family:'Playfair Display',serif;font-size:1.15rem;color:#1A1A1A;margin-bottom:8px;font-weight:600}
.pidx-text p{font-size:.87rem;color:#3D3D3D;line-height:1.7;max-width:520px}
.pidx-meta{flex-shrink:0;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:10px;padding-top:4px}
[dir="rtl"] .pidx-meta{text-align:left;align-items:flex-start}
.pidx-tag{font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:#8A6228;font-weight:700}
.pidx-arrow{font-size:.8rem;color:#8A6228;font-weight:600;white-space:nowrap}
.pidx-item:hover .pidx-arrow{color:#B8853A}

/* =============================================
RESPONSIVE
============================================= */
@media(max-width:960px){
.nlinks{display:none}.hbg{display:flex}
.wg,.abg,.dg{grid-template-columns:1fr;gap:32px}
.sgrid{grid-template-columns:1fr}
.si{border-right:none;border-bottom:1px solid #E0DDD8;padding:22px}
.si:last-child{border-bottom:none}
.fr2{grid-template-columns:1fr}
}
@media(max-width:600px){
:root{--nh:60px}
main{padding-top:60px}
.hc{padding:52px 20px 44px}
.sec{padding:48px 0}
.ph{padding:36px 0 28px}
.tbody{padding:4px 14px 18px}
[dir="rtl"] .tbody{padding:4px 14px 18px}
.tchecks{grid-template-columns:1fr}
.tintro{padding:24px}
.hbtns{flex-direction:column;align-items:center}
.hbtns .btn-gold,.hbtns .btn-outline-light{width:100%;max-width:300px;justify-content:center}
.qsgrid{grid-template-columns:1fr}
.fti{flex-direction:column;align-items:flex-start}
.audi-grid{grid-template-columns:1fr 1fr}
.tabs{flex-wrap:wrap}
.pidx-body{flex-direction:column}
.pidx-meta{flex-direction:row;align-items:center}
[dir="rtl"] .pidx-meta{flex-direction:row}
}
@media(hover:none){
.btn-gold,.btn-outline-light,.btn-outline-dark,.hcard,.thead,.svc,.audi-card{-webkit-tap-highlight-color:transparent}
.btn-gold,.btn-outline-light,.btn-outline-dark{min-height:48px}
.thead{min-height:56px}
}