/* Al Hafeed — Insights hub + buyer's-guide page styles (external per CSP style-src 'self').
   The site <body> is dark navy (var(--navy)) with light text, so these styles follow the
   site's dark theme: light text on navy, Cormorant-300 display headings, gold accents,
   and offwhite "light islands" for callouts and the closing CTA. Uses the shared tokens
   from style.css (:root) for full uniformity with the rest of the site. */

#guide-wrap{max-width:1100px;margin:0 auto;padding:0 24px}

/* ── Hero ─────────────────────────────────────── */
.guide-hero{position:relative;margin-top:92px;border-radius:16px;overflow:hidden;min-height:320px;display:flex;align-items:flex-end}
.guide-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.guide-hero .gh-ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,22,40,.28),rgba(10,22,40,.86))}
.guide-hero .gh-in{position:relative;padding:38px 34px;color:#fff}
.guide-hero .gh-eyebrow{font-family:var(--font-body);font-weight:400;letter-spacing:.22em;text-transform:uppercase;font-size:11px;color:var(--goldlt);margin-bottom:14px}
.guide-hero h1{font-family:var(--font-display);font-weight:300;font-size:clamp(34px,5vw,58px);line-height:1.06;margin:0;max-width:18ch;color:#fff}

/* ── Article (light text on the navy page) ────── */
.guide-article{max-width:760px;margin:0 auto;padding:52px 0 24px;font-family:var(--font-body);font-weight:300;color:rgba(255,255,255,.80);font-size:16.5px;line-height:1.85}
.guide-updated{font-family:var(--font-body);font-size:12px;color:rgba(255,255,255,.5);margin-bottom:10px;letter-spacing:.14em;text-transform:uppercase}
.guide-article .lead{font-size:20px;color:#fff;font-weight:300;line-height:1.62;margin:0 0 30px}
.guide-article h2{font-family:var(--font-display);font-weight:300;color:#fff;font-size:clamp(28px,3.2vw,40px);line-height:1.14;margin:52px 0 14px}
.guide-article h2 .num{color:var(--gold);font-size:19px;font-weight:400;margin-right:14px;font-family:var(--font-body);letter-spacing:.08em}
.guide-article h3{font-family:var(--font-body);font-weight:500;color:#fff;font-size:18px;margin:28px 0 8px;letter-spacing:.01em}
.guide-article p{margin:0 0 18px}
.guide-article strong{color:#fff;font-weight:500}
.guide-article a{color:var(--goldlt);text-decoration:underline;text-decoration-color:rgba(201,168,76,.5);text-underline-offset:3px;transition:color .2s var(--ease)}
.guide-article a:hover{color:var(--gold)}
.guide-article ul{margin:0 0 22px;padding-left:0;list-style:none}
.guide-article ul li{position:relative;padding-left:26px;margin-bottom:12px}
.guide-article ul li:before{content:"";position:absolute;left:2px;top:10px;width:7px;height:7px;background:var(--gold);transform:rotate(45deg)}

/* ── Light accent island: callout ─────────────── */
.guide-callout{background:var(--offwhite);border-left:3px solid var(--gold);border-radius:10px;padding:20px 24px;margin:28px 0;font-size:15.5px;color:var(--charcoal);line-height:1.75}
.guide-callout strong{color:var(--navy)}
.guide-callout a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--gold)}

/* ── Dark accent panel: checklist ─────────────── */
.guide-checklist{background:var(--navy2);border:1px solid rgba(201,168,76,.22);color:rgba(255,255,255,.85);border-radius:14px;padding:28px 30px;margin:32px 0}
.guide-checklist h3{color:#fff;margin-top:0;margin-bottom:14px;font-family:var(--font-display);font-weight:400;font-size:22px}
.guide-checklist ul{margin:0}
.guide-checklist ul li{color:rgba(255,255,255,.82)}
.guide-checklist ul li:before{background:var(--gold)}
.guide-checklist-dark{background:#0B1A30}

/* ── FAQ ──────────────────────────────────────── */
.guide-faq{margin:44px 0 12px}
.guide-faq>h2{margin-bottom:4px}
.guide-faq .qa{border-top:1px solid rgba(255,255,255,.14);padding:20px 0}
.guide-faq .qa h3{margin:0 0 8px;font-size:17px;color:#fff;font-family:var(--font-body);font-weight:500}
.guide-faq .qa p{margin:0;color:rgba(255,255,255,.72)}

/* ── Light accent island: closing CTA ─────────── */
.guide-cta{text-align:center;background:var(--offwhite);border-radius:16px;padding:42px 28px;margin:44px 0 10px}
.guide-cta h2{margin:0 0 12px;color:var(--navy);font-family:var(--font-display);font-weight:300;font-size:clamp(26px,3vw,38px);line-height:1.12}
.guide-cta p{color:#555;font-size:15.5px;line-height:1.8;max-width:60ch;margin:0 auto}
.guide-cta .gc-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.guide-cta a{display:inline-flex;align-items:center;font-family:var(--font-body);font-weight:400;letter-spacing:.16em;text-transform:uppercase;font-size:11px;padding:15px 32px;text-decoration:none;transition:var(--trans)}
.guide-cta a.g-primary{background:var(--navy);color:#fff;border:1px solid var(--navy)}
.guide-cta a.g-primary:hover{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.guide-cta a.g-ghost{border:1px solid var(--navy);color:var(--navy)}
.guide-cta a.g-ghost:hover{background:var(--navy);color:#fff}

@media(max-width:560px){.guide-hero .gh-in{padding:26px 20px}.guide-article{font-size:16px}}

/* ── Insights hub ─────────────────────────────── */
.ins-intro{max-width:760px;margin:0 auto;padding:48px 0 8px;font-family:var(--font-body);font-weight:300}
.ins-lead{font-size:20px;line-height:1.65;color:rgba(255,255,255,.85);margin:0}
.ins-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;padding:34px 0 10px}
.ins-card{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(255,255,255,.10);border-radius:16px;overflow:hidden;text-decoration:none;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.ins-card:hover{transform:translateY(-5px);box-shadow:0 22px 48px rgba(0,0,0,.35)}
.ins-card-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--navy)}
.ins-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.ins-card:hover .ins-card-img img{transform:scale(1.06)}
.ins-card-body{padding:24px 26px 28px;display:flex;flex-direction:column;flex:1}
.ins-cat{font-family:var(--font-body);font-weight:500;letter-spacing:.18em;text-transform:uppercase;font-size:10.5px;color:#8A6A24;margin-bottom:12px}
.ins-card-title{font-family:var(--font-display);font-weight:400;color:var(--navy);font-size:26px;line-height:1.14;margin:0 0 12px}
.ins-card-desc{font-family:var(--font-body);font-weight:300;color:#555;font-size:15px;line-height:1.65;margin:0 0 20px;flex:1}
.ins-readmore{font-family:var(--font-body);font-weight:500;letter-spacing:.16em;text-transform:uppercase;font-size:11px;color:var(--navy)}
.ins-card:hover .ins-readmore{color:#8A6A24}
@media(max-width:720px){.ins-grid{grid-template-columns:1fr;gap:22px}}