.blog-hero { position:relative; isolation:isolate; min-height:500px; padding:150px clamp(24px,7vw,112px) 90px; display:flex; align-items:center; overflow:hidden; color:#fff; background:linear-gradient(112deg,#087742 0%,#08613f 25%,#164858 58%,#14213d 100%); }
.blog-hero::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.14; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.4'%3E%3Cpath d='M45 2 88 45 45 88 2 45Z'/%3E%3Cpath d='M135 2 178 45 135 88 92 45Z'/%3E%3Cpath d='M45 92 88 135 45 178 2 135Z'/%3E%3Cpath d='M135 92 178 135 135 178 92 135Z'/%3E%3C/g%3E%3C/svg%3E"); background-size:180px 180px; }
.blog-hero::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(90deg,rgba(20,33,61,.22),transparent 44%,rgba(4,80,51,.10)); }
.blog-hero-copy { width:min(900px,75vw); max-width:900px; }
.blog-hero h1 { margin:18px 0 24px; font-size:clamp(48px,7vw,92px); line-height:1.04; letter-spacing:-.035em; }
.blog-hero .eyebrow { color:rgba(255,255,255,.72); }
.blog-hero .hero-lede { max-width:720px; color:rgba(255,255,255,.82); font-size:17px; line-height:1.9; }
.featured-card { position:relative; min-height:380px; overflow:hidden; background:#18191b; color:#fff; }
.featured-card img { width:100%; height:100%; min-height:380px; object-fit:cover; opacity:.64; transition:transform .5s; }
.featured-card:hover img { transform:scale(1.025); }
.featured-card::after,.article-hero-figure::after { content:""; position:absolute; inset:35% 0 0; background:linear-gradient(transparent,rgba(0,0,0,.85)); }
.featured-copy { position:absolute; z-index:2; inset:auto 32px 32px; }
.featured-copy span,.post-meta,.article-meta { font-size:11px; letter-spacing:.03em; }
.featured-copy h2 { max-width:560px; margin:10px 0 0; font-size:clamp(24px,3vw,38px); line-height:1.35; }
.blog-listing { padding:86px clamp(24px,5vw,80px) 100px; }
.blog-heading { display:flex; justify-content:space-between; gap:40px; align-items:end; margin-bottom:42px; }
.blog-heading h2 { margin:10px 0 0; font-size:clamp(34px,5vw,60px); }
.blog-heading p:last-child { max-width:540px; color:var(--muted); line-height:1.9; }
.post-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(22px,2.2vw,38px); background:transparent; border:0; }
.post-card { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:0 16px 42px rgba(20,33,61,.08); }
.post-image { display:block; aspect-ratio:16/10; overflow:hidden; background:#f1f1ef; }
.post-image img { width:100%; height:100%; object-fit:cover; transition:transform .45s; }
.post-card:hover .post-image img { transform:scale(1.035); }
.post-body { padding:28px 26px 32px; }
.post-meta { display:flex; justify-content:space-between; gap:16px; color:#909297; }
.post-meta span:first-child { color:var(--red); font-weight:700; }
.post-card h2,.post-card h3 { margin:18px 0 12px; font-size:24px; line-height:1.45; }
.post-card p { min-height:82px; margin:0; color:var(--muted); font-size:13px; line-height:1.9; }
.post-card .read-link { display:inline-block; margin-top:22px; font-size:13px; font-weight:700; }
.post-card .read-link:hover { color:var(--red); }
.blog-topics { padding:70px clamp(24px,7vw,112px); background:#191a1c; color:#fff; }
.topic-grid { display:grid; grid-template-columns:repeat(4,1fr); margin-top:38px; border-top:1px solid #38393c; border-right:1px solid #38393c; }
.topic-grid a { min-height:160px; padding:28px; border-left:1px solid #38393c; border-bottom:1px solid #38393c; display:flex; flex-direction:column; justify-content:space-between; }
.topic-grid b { color:var(--red); font-size:11px; }

.topic-grid b { display:none; }
.topic-grid span { font-size:18px; }
.topic-grid a:hover { background:#232426; }
.article-hero { min-height:630px; padding:145px clamp(24px,7vw,112px) 70px; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr); gap:clamp(42px,7vw,100px); align-items:center; background:#f4f4f2; }
.article-hero-copy { max-width:820px; }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:8px; color:#777a80; font-size:11px; }
.article-hero h1 { margin:22px 0; font-size:clamp(42px,6vw,76px); line-height:1.12; letter-spacing:-.03em; }
.article-deck { color:var(--muted); font-size:17px; line-height:1.9; }
.article-meta { display:flex; flex-wrap:wrap; gap:12px 26px; margin-top:28px; color:#777a80; }
.article-hero-figure { position:relative; min-height:460px; margin:0; overflow:hidden; background:#e8e8e5; }
.article-hero-figure img { width:100%; height:460px; object-fit:cover; }
.article-hero-figure figcaption { position:absolute; z-index:2; right:26px; bottom:24px; left:26px; color:#fff; font-size:12px; line-height:1.7; }
.article-layout { display:grid; grid-template-columns:minmax(0,800px) 260px; justify-content:center; gap:78px; padding:78px clamp(24px,7vw,112px) 100px; }
.article-body { min-width:0; }
.article-body section { padding-bottom:38px; margin-bottom:38px; border-bottom:1px solid var(--line); scroll-margin-top:100px; }
.article-body h2 { margin:0 0 18px; font-size:clamp(27px,3.5vw,40px); line-height:1.35; }
.article-body h3 { margin:28px 0 10px; font-size:20px; line-height:1.5; }
.article-body p,.article-body li { color:#55585e; font-size:15px; line-height:2.05; }
.article-body ul,.article-body ol { padding-right:22px; }
.article-body a { color:var(--red-dark); text-decoration:underline; text-underline-offset:3px; }
.article-lead { padding:26px 28px; border-right:3px solid var(--red); background:var(--soft); color:var(--ink)!important; font-size:17px!important; }
.article-table { width:100%; margin:22px 0; border-collapse:collapse; font-size:13px; }
.article-table th,.article-table td { padding:15px; border:1px solid var(--line); text-align:right; vertical-align:top; line-height:1.8; }
.article-table th { background:#202124; color:#fff; }
.article-checklist { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin:22px 0; background:var(--line); border:1px solid var(--line); }
.article-checklist div { padding:22px; background:#fff; }
.article-checklist b { display:block; margin-bottom:8px; color:var(--red); font-size:12px; }
.article-checklist span { color:#5d6065; font-size:13px; line-height:1.8; }
.article-aside { position:sticky; top:100px; align-self:start; }
.article-toc { padding:24px; border:1px solid var(--line); }
.article-toc strong { display:block; margin-bottom:13px; }
.article-toc a { display:block; padding:10px 0; border-bottom:1px solid #ededed; color:var(--muted); font-size:12px; line-height:1.5; }
.article-toc a:last-child { border:0; }
.article-aside-cta { margin-top:20px; padding:25px; background:#1b1c1e; color:#fff; }
.article-aside-cta p { color:#bbb; font-size:12px; line-height:1.8; }
.article-aside-cta a { display:inline-block; margin-top:8px; color:#fff; font-size:12px; font-weight:700; }
.related-posts { padding:80px clamp(24px,7vw,112px) 100px; background:#f4f4f2; }
.related-posts .post-grid { margin-top:36px; grid-template-columns:repeat(2,1fr); }
@media (max-width:1000px) { .article-hero { grid-template-columns:1fr; } .blog-hero { padding-top:130px; } .article-layout { grid-template-columns:1fr; gap:34px; } .article-aside { position:static; grid-row:1; } .post-grid { grid-template-columns:1fr 1fr; } .topic-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:680px) { .blog-hero,.article-hero { padding-top:110px; } .featured-card,.featured-card img { min-height:320px; } .blog-heading { display:block; } .post-grid,.related-posts .post-grid,.article-checklist { grid-template-columns:1fr; } .post-card p { min-height:0; } .topic-grid { grid-template-columns:1fr; } .article-hero-figure,.article-hero-figure img { min-height:340px; height:340px; } .article-table { display:block; overflow-x:auto; } }

/* Saudi-localized visual system */
.article-hero,.related-posts { background:var(--sand-bg); }
.featured-card,.article-hero-figure { border-radius:12px; box-shadow:0 22px 60px rgba(20,33,61,.14); }
.post-card { position:relative; border-top:4px solid var(--green); }
.post-image { background:var(--green-soft); }
.post-card p,.article-body p,.article-body li,.article-checklist span { font-size:17px; line-height:1.95; }
.blog-topics,.article-aside-cta { background:var(--navy); }
.topic-grid { border-color:rgba(255,255,255,.16); }
.topic-grid a { border-color:rgba(255,255,255,.16); }
.topic-grid a:hover { background:var(--navy-2); }
.article-lead { border-right-color:var(--green); background:var(--green-soft); border-radius:8px; }
.article-table th { background:var(--navy); }
.article-checklist div,.article-toc { border-radius:8px; }