/* Shared styles for About/Advisory Board/Management Team/Our Journey/Policy/Contact/
Bank Details - all built on the same hero+section+cta-band pattern from mockups 07-13. */
/* Bug fix, 2026-08-24 (responsive audit): on mobile, the sticky bottom
quickbar + floating WhatsApp button (qe-header-footer.css) occupy the
bottom ~121px of the viewport while they're stuck - so if a page's LAST
piece of content (e.g. .qe-contact-strip's "Meet the Team" CTA button on
page-person.php, confirmed on the Shagufta Batool page at 414px) sits
right before the footer, there's no scroll position where it's both
on-screen AND not covered: the sticky bar hides it while scrolling up to
it, then it scrolls off the TOP of the viewport as the footer (which the
bar hands off to) comes into view. Reserving this space below .qe-content
guarantees a valid, uncovered scroll position for whatever the last
element on any of these page templates happens to be. */
@media (max-width:760px){ .qe-content{ padding-bottom:110px; } }
.qe-content .hero{position:relative; background:var(--hero-gradient); color:#fff; padding:60px 6vw 70px; overflow:hidden;}
.qe-content .hero .watermark{width:var(--watermark-size-lg);}
/* Our Journey's hero also holds .hero-stats below the intro block, making .hero
itself taller than the visible "above the fold" area - scope centering to just
the intro block there so the mark doesn't drift down past it. */
.qe-content .hero .hero-intro{position:relative;}
.qe-content .breadcrumb{font-size:0.76rem; color:var(--gold-soft); margin-bottom:16px; opacity:0.9; position:relative; z-index:2;}
.qe-content .breadcrumb a{color:inherit; text-decoration:none;}
.qe-content .breadcrumb span{opacity:0.5;}
.qe-content .eyebrow{display:inline-flex; align-items:center; gap:8px; background:rgba(217,143,41,0.15); border:1px solid rgba(217,143,41,0.4); color:var(--gold-soft); font-size:0.74rem; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; padding:6px 14px; border-radius:30px; margin-bottom:18px; position:relative; z-index:2; width:fit-content;}
.qe-content .eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--gold);}
.qe-content .hero h1{font-family:'Fraunces',serif; font-weight:600; font-size:2.2rem; line-height:1.2; max-width:600px; position:relative; z-index:2; color:#fff;}
.qe-content .hero h1 .accent{color:var(--gold-soft); font-style:italic;}
/* hero p: see the "hero p" exception note in qe-tokens.css. */
.qe-content .hero p{font-size:0.94rem; color:#D9E2DC; max-width:540px; margin-top:14px; line-height:1.6; position:relative; z-index:2; text-align:left;}
.qe-content .hero-stats{display:flex; gap:0; margin-top:32px; position:relative; z-index:2; flex-wrap:wrap;}
.qe-content .hstat{padding:0 26px 0 22px; border-left:2px solid rgba(217,143,41,0.35);}
.qe-content .hstat:first-child{border-left:none; padding-left:0;}
.qe-content .hstat .num{font-family:'Fraunces',serif; font-weight:600; font-size:1.5rem; color:var(--gold-soft);}
.qe-content .hstat .lbl{font-size:0.68rem; color:#B9C4BE; margin-top:2px;}
.qe-content .section{max-width:1100px; margin:0 auto; padding:52px 6vw;}
.qe-content .section.narrow{max-width:820px;}
.qe-content .section h2{font-family:'Fraunces',serif; font-weight:600; font-size:1.4rem; margin-bottom:8px;}
/* .sub stays left (deliberate exception, 2026-08-10 sweep): a one-line
subtitle directly under a section h2, functions as a heading extension
rather than a body paragraph. */
.qe-content .section .sub{font-size:0.86rem; color:#6C7A72; max-width:600px; margin-bottom:26px; line-height:1.6; text-align:left;}
.qe-content .story{display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center;}
@media (max-width:820px){ .qe-content .story{grid-template-columns:1fr;} }
.qe-content .story p{font-size:0.9rem; color:#4A5750; line-height:1.75; margin-bottom:14px;}
.qe-content .story-img{aspect-ratio:4/3; border-radius:16px; background:linear-gradient(135deg,#DCE7DF,#C9D8CD); display:flex; align-items:center; justify-content:center; color:#6C7A72; font-size:0.8rem; text-align:center; padding:20px;}
.qe-content .values-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media (max-width:760px){ .qe-content .values-grid{grid-template-columns:1fr;} }
.qe-content .value-card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:24px 20px;}
.qe-content .value-card .ic{width:44px; height:44px; border-radius:10px; background:var(--sage); display:flex; align-items:center; justify-content:center; font-size:1.2rem; margin-bottom:14px;}
.qe-content .value-card h3{font-family:'Fraunces',serif; font-size:1.02rem; font-weight:600; margin-bottom:6px;}
.qe-content .value-card p{font-size:0.82rem; color:#6C7A72; line-height:1.6;}
.qe-content .stats-band{background:var(--black); color:#fff; padding:44px 6vw;}
.qe-content .stats-row{max-width:1100px; margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px;}
.qe-content .stat{flex:1; min-width:130px; text-align:center;}
.qe-content .stat .num{font-family:'Fraunces',serif; font-weight:600; font-size:1.9rem; color:var(--gold-soft);}
.qe-content .stat .lbl{font-size:0.74rem; color:#B9C4BE; margin-top:4px; letter-spacing:0.02em;}
.qe-content .board-teaser, .qe-content .journey-strip{background:var(--sage); border-radius:16px; padding:28px 24px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.qe-content .journey-strip{background:#fff; border:1px solid var(--line);}
/* .board-teaser .txt only wraps a heading + a separately-styled below,
so its own text-align is a no-op either way - left kept for minimal diff.
.journey-strip .txt holds real prose text directly (no nested
), so it
gets justify like any other body-text container. */
.qe-content .board-teaser .txt{max-width:560px; font-size:0.88rem; text-align:left;}
.qe-content .journey-strip .txt{max-width:560px; font-size:0.88rem; text-align:justify; text-justify:inter-word;}
.qe-content .board-teaser h3{font-family:'Fraunces',serif; font-size:1.15rem; font-weight:600; margin-bottom:6px;}
.qe-content .board-teaser p{font-size:0.84rem; color:#4A5750; line-height:1.6;}
.qe-content .board-teaser a{background:var(--qe-green-text); color:#fff; padding:11px 22px; border-radius:10px; font-weight:600; font-size:0.84rem; text-decoration:none; white-space:nowrap;}
.qe-content .journey-strip a{background:var(--gold); color:var(--black); padding:10px 20px; border-radius:10px; font-weight:700; font-size:0.84rem; text-decoration:none; white-space:nowrap;}
.qe-content .journey-strip .txt b{color:var(--green);}
.qe-content .cta-band{background:linear-gradient(135deg, var(--green), #156B49); color:#fff; text-align:center; padding:50px 6vw;}
.qe-content .cta-band h2{font-family:'Fraunces',serif; font-size:1.4rem; margin-bottom:10px; color:#fff;}
.qe-content .cta-band p{font-size:0.88rem; color:#D9E9DF; margin-bottom:20px;}
.qe-content .cta-band a{background:var(--gold); color:var(--black); padding:13px 28px; border-radius:10px; font-weight:700; font-size:0.9rem; text-decoration:none;}
/* People grids (Advisory Board + Management Team) */
.qe-content .board-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:860px){ .qe-content .board-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .qe-content .board-grid{grid-template-columns:1fr;} }
.qe-content .board-card{background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; text-align:center; padding-bottom:20px;}
.qe-content .board-photo{aspect-ratio:1/1; background:linear-gradient(135deg,#DCE7DF,#C9D8CD); display:flex; align-items:center; justify-content:center; color:#6C7A72; font-size:0.76rem; text-align:center; padding:16px;}
.qe-content .board-info{padding:16px 18px 0;}
.qe-content .board-info .name{font-family:'Fraunces',serif; font-weight:600; font-size:1rem; margin-bottom:3px;}
.qe-content .board-info .role{font-size:0.76rem; color:var(--gold); font-weight:600; margin-bottom:10px; text-transform:uppercase; letter-spacing:0.02em;}
/* .bio stays left (deliberate exception, 2026-08-10 sweep): a short
credential label ("Medical Doctor", "Relationship Manager"), not a
sentence-level bio paragraph despite the class name. */
.qe-content .board-info .bio{font-size:0.8rem; color:#6C7A72; line-height:1.55; text-align:left;}
.qe-content .credential-tag{display:inline-block; background:var(--sage); color:var(--green); font-size:0.68rem; font-weight:600; padding:4px 10px; border-radius:20px; margin-top:10px;}
.qe-content .team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
@media (max-width:860px){ .qe-content .team-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:480px){ .qe-content .team-grid{grid-template-columns:1fr;} }
.qe-content .team-card{background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; text-align:center; padding-bottom:16px; display:block; text-decoration:none; color:inherit; transition:box-shadow .2s, transform .2s;}
.qe-content .team-card:hover{box-shadow:0 8px 20px rgba(20,20,15,0.08); transform:translateY(-2px);}
.qe-content .team-photo{aspect-ratio:1/1; background:linear-gradient(135deg,#DCE7DF,#C9D8CD); display:flex; align-items:center; justify-content:center; color:#6C7A72; font-size:0.72rem; text-align:center; padding:14px;}
.qe-content .team-info{padding:14px 14px 0;}
.qe-content .team-info .name{font-family:'Fraunces',serif; font-weight:600; font-size:0.92rem; margin-bottom:2px;}
.qe-content .team-info .role{font-size:0.72rem; color:var(--gold); font-weight:600; text-transform:uppercase; letter-spacing:0.02em;}
.qe-content .process-strip{background:#fff; border:1px solid var(--line); border-radius:16px; padding:28px 24px;}
.qe-content .process-strip h3{font-family:'Fraunces',serif; font-size:1.1rem; font-weight:600; margin-bottom:16px;}
.qe-content .process-row{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media (max-width:760px){ .qe-content .process-row{grid-template-columns:1fr 1fr;} }
.qe-content .process-item{text-align:center;}
.qe-content .process-item .ic{width:40px; height:40px; border-radius:50%; background:var(--sage); display:flex; align-items:center; justify-content:center; font-size:1rem; margin:0 auto 10px;}
.qe-content .process-item .t{font-size:0.8rem; font-weight:600; margin-bottom:4px;}
.qe-content .process-item .d{font-size:0.72rem; color:#6C7A72; line-height:1.5;}
/* .trust-note is a
, not a
- needs its own explicit justify. */
.qe-content .trust-note{border:1.5px solid var(--gold); background:#FFFBF3; border-radius:12px; padding:18px 20px; font-size:0.84rem; color:#4A5750; line-height:1.6; text-align:justify; text-justify:inter-word;}
.qe-content .trust-note b{color:var(--gold); display:block; margin-bottom:6px; font-family:'Fraunces',serif; font-size:0.92rem;}
/* Our Journey - timeline + year gallery */
.qe-content .timeline{position:relative; padding-left:32px;}
.qe-content .timeline::before{content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:linear-gradient(var(--gold), var(--green));}
.qe-content .t-item{position:relative; padding-bottom:36px;}
.qe-content .t-item:last-child{padding-bottom:0;}
.qe-content .t-item::before{content:""; position:absolute; left:-32px; top:3px; width:16px; height:16px; border-radius:50%; background:var(--gold); border:3px solid var(--ivory); box-shadow:0 0 0 2px var(--gold);}
.qe-content .t-year{font-family:'Fraunces',serif; font-weight:600; font-size:1.15rem; color:var(--green); margin-bottom:6px;}
.qe-content .t-title{font-weight:600; font-size:0.98rem; margin-bottom:6px;}
/* .t-desc is a
, not a
- needs its own explicit justify. */
.qe-content .t-desc{font-size:0.86rem; color:#5C6A62; line-height:1.7; text-align:justify; text-justify:inter-word;}
.qe-content .quote-block{border-left:3px solid var(--gold); background:var(--sage); border-radius:0 12px 12px 0; padding:22px 24px; margin:44px 0;}
/* Pull-quote stays left (deliberate exception, 2026-08-10 sweep): italic,
quotation-mark-wrapped attribution quote - typographic convention for
quote blocks, not treated as flowing body prose. Same reasoning applied
to .test-card p (qe-homepage.css). */
.qe-content .quote-block p{font-family:'Fraunces',serif; font-style:italic; font-size:1.05rem; color:var(--black); line-height:1.5; text-align:left;}
.qe-content .gallery-section{background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:50px 6vw;}
.qe-content .gallery-inner{max-width:1000px; margin:0 auto;}
.qe-content .year-tabs{display:flex; gap:8px; overflow-x:auto; padding-bottom:14px; margin-bottom:20px; scrollbar-width:none;
/* Fix, 2026-08-24 audit: this row is genuinely scrollable (confirmed -
the "2020" tab on the Photo Gallery page, which has 5 years, IS
reachable by scrolling this container) but gave zero visual hint
that more tabs exist off-screen - the last visible tab sat flush
against the edge with no partial peek. Fade-mask signals "more
content this way" without needing a visible scrollbar. Harmless
(renders as a no-op fade with nothing behind it) on pages where all
tabs already fit, like Our Journey's 4-tab row. */
-webkit-mask-image:linear-gradient(to right, black calc(100% - 28px), transparent 100%);
mask-image:linear-gradient(to right, black calc(100% - 28px), transparent 100%);
}
.qe-content .year-tabs::-webkit-scrollbar{display:none;}
.qe-content .year-tab{flex-shrink:0; padding:8px 18px; border-radius:20px; border:1px solid var(--line); background:#fff; font-size:0.82rem; font-weight:600; color:#6C7A72; cursor:pointer; white-space:nowrap; transition:all .15s;}
.qe-content .year-tab.active{background:var(--gold); border-color:var(--gold); color:var(--black);}
.qe-content .year-photos{display:none; grid-template-columns:repeat(4,1fr); gap:12px;}
@media (max-width:760px){ .qe-content .year-photos{grid-template-columns:repeat(2,1fr);} }
.qe-content .year-photos.active{display:grid;}
/* Frame only - the placeholder look itself comes from .qe-photo-todo
(duplicated below, since qe-homepage.css - where it's originally
defined - is front-page-only and never loaded here; same "duplicate
shared patterns per page context" convention already used for
.home-faq/.qe-service .faq-item). Once a real ![]()
replaces the
.qe-photo-todo div, this rule sizes it via object-fit:cover - no other
change needed, same drop-in-replacement pattern as .impact-photo/
.mission-photo elsewhere on the site. */
.qe-content .year-photo{aspect-ratio:1/1; border-radius:10px; overflow:hidden;}
.qe-content .year-photo img{width:100%; height:100%; object-fit:cover; display:block;}
/* Duplicated from qe-homepage.css's .qe-photo-todo (temp-domain-only QA
marker, safe on ziaco.online per the same reasoning documented there -
REMOVE before final migration to qurbanieasy.com, same as every other
qe-photo-todo use sitewide). */
.qe-content .qe-photo-todo{width:100%; height:100%; display:flex; align-items:center; justify-content:center; text-align:center; padding:10px; box-sizing:border-box; border:2px dashed var(--gold); background:var(--mint); border-radius:inherit;}
.qe-content .qe-photo-todo span{font-size:0.62rem; color:#6C7A72; font-weight:600; line-height:1.5;}