.detail-page { background: #f8faf9; }
.detail-page[lang='en'],html[lang='en'] .detail-page { font-family: 'Inter',sans-serif; }
.detail-nav { position: sticky; inset-block-start: 0; z-index: 20; background: rgba(255,255,255,.97); border-bottom: 1px solid #e7ecea; backdrop-filter: blur(18px); }
.detail-nav-inner { min-height: 86px; display: flex; justify-content: space-between; align-items: center; gap: 22px; }
.detail-brand { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.detail-brand img { width: 42px; height: 42px; }
.detail-brand strong { font-size: 22px; font-weight: 800; letter-spacing: -.035em; }
.detail-brand strong span { font-family: 'Noto Sans Arabic',sans-serif; }
.detail-nav nav { display: flex; align-items: center; gap: 28px; font-size: 13px; font-weight: 700; }
.detail-nav nav a:hover { color: #2e7d6b; }
.detail-nav-cta { padding: 12px 18px; border-radius: 6px; background: #16352d; color: #fff !important; }
.detail-hero { padding: 108px 0 112px; color: white; background: radial-gradient(circle at 85% 15%,rgba(55,137,110,.3),transparent 40%),linear-gradient(120deg,#101c26,#132b2c 75%); }
.detail-overline { margin: 0 0 20px; font: 800 12px 'Inter',sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #8fd5b9; }
.detail-location { display: inline-block; padding: 8px 14px; border: 1px solid #356554; border-radius: 30px; color: #d2ebdc; font-size: 12px; font-weight: 600; }
.detail-hero h1 { max-width: 900px; margin: 25px 0 20px; font-size: clamp(40px,5vw,72px); font-weight: 800; line-height: 1.24; letter-spacing: -.055em; }
.detail-intro { max-width: 790px; font-size: clamp(16px,1.6vw,19px); line-height: 1.9; color: #c4d7d0; }
.detail-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }
.detail-primary,.detail-secondary { display: inline-flex; align-items: center; min-height: 51px; border-radius: 6px; padding: 13px 23px; font-size: 13px; font-weight: 800; }
.detail-primary { color: #10271c; background: #9cdfbc; }
.detail-secondary { color: white; border: 1px solid #638779; }
.detail-heading { max-width: 760px; margin-bottom: 43px; }
.detail-heading h2,.detail-example h2,.detail-faq h2,.detail-final h2 { font-size: clamp(30px,3.5vw,46px); line-height: 1.3; letter-spacing: -.04em; margin: 0 0 17px; }
.detail-heading > p:last-child,.detail-faq > .container > p:not(.section-kicker),.detail-example > .container > p:not(.section-kicker) { max-width: 800px; color: #677b72; line-height: 1.9; font-size: 15px; }
.detail-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 17px; }
.detail-card { padding: 32px; min-height: 248px; background: white; border: 1px solid #dfe9e3; border-radius: 12px; }
.detail-index { color: #2e7d6b; font: 800 12px 'Inter',sans-serif; }
.detail-card h3 { font-size: 20px; line-height: 1.4; margin: 25px 0 12px; }
.detail-card p { color: #6c7e75; font-size: 14px; line-height: 1.9; margin: 0; }
.detail-example { padding: 87px 0; background: #e9f4ee; }
.detail-example p:not(.section-kicker) { max-width: 860px; }
.detail-faq { background: white; }
.detail-coverage { margin-top: 30px; padding: 18px 24px; border-inline-start: 4px solid #3b9b7b; background: #f3f8f5; }
.detail-more { background: #f4f8f5; }
.detail-related { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.detail-related a { padding: 24px; border: 1px solid #dce8e0; background: white; border-radius: 10px; font-weight: 750; display: flex; justify-content: space-between; gap: 15px; }
.detail-related a:hover { color: #247e60; border-color: #8bbdaa; }
.detail-final { padding: 74px 0; background: #122a27; color: white; }
.detail-final > .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.detail-final p { color: #b7d0c2; line-height: 1.8; max-width: 640px; }
.detail-contact { display: flex; align-items: flex-end; flex-direction: column; gap: 12px; flex-shrink: 0; font: 650 15px 'Inter',sans-serif; }
.detail-contact a { border-bottom: 1px solid #91baa8; padding-bottom: 5px; }
.detail-footer { background: #fff; padding: 25px 0; color: #72847b; font-size: 12px; }
.detail-footer .container { display: flex; justify-content: space-between; gap: 20px; }
html[dir='rtl'] .detail-page { font-family: 'Noto Sans Arabic',sans-serif; }
html[dir='rtl'] .detail-hero h1,html[dir='rtl'] .detail-heading h2,html[dir='rtl'] .detail-example h2,html[dir='rtl'] .detail-faq h2 { letter-spacing: 0; }
html[dir='rtl'] .detail-hero h1 { line-height: 1.5; }
@media (max-width: 950px) { .detail-grid { grid-template-columns: 1fr; } .detail-card { min-height: 0; } .detail-nav nav { gap: 12px; } }
@media (max-width: 700px) { .detail-nav-inner { min-height: 75px; } .detail-nav nav { font-size: 11px; } .detail-nav nav a:first-child { display: none; } .detail-nav-cta { padding: 10px; } .detail-brand strong { font-size: 17px; } .detail-brand img { width: 34px; } .detail-hero { padding: 70px 0 80px; } .detail-related { grid-template-columns: 1fr; } .detail-final > .container { align-items: start; flex-direction: column; } .detail-contact { align-items: flex-start; } .detail-footer .container { flex-direction: column; } }