/* ARAYA front page — all values come from tokens.css */
.an-page { font-family: var(--an-font-body); color: var(--an-ink); background: var(--an-cream); -webkit-font-smoothing: antialiased; }
.an-banner { background: var(--an-maroon-deep); color: var(--an-sand); text-align: center; padding: 10px 20px; font-size: 14px; letter-spacing: .02em; }
.an-wrap { max-width: var(--an-maxw); margin: 0 auto; padding: 0 20px; }

.an-header { position: sticky; top: 0; z-index: 50; background: rgba(250,246,241,.95); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(94,27,38,.12); }
.an-header .an-wrap { padding: 12px 20px; display: flex; align-items: center; gap: 14px 20px; flex-wrap: wrap; }
.an-brand { text-decoration: none; color: var(--an-maroon); display: flex; align-items: center; gap: 11px; }
.an-brand-logo { width: 41px; height: 38px; overflow: hidden; display: block; flex-shrink: 0; position: relative; }
.an-brand-logo img { width: 131px; height: 131px; display: block; margin: -37px 0 0 -45px; max-width: none; }
.an-brand-name { display: flex; flex-direction: column; line-height: 1; }
.an-brand-name .t1 { font-family: var(--an-font-display); font-size: 26px; letter-spacing: .14em; }
.an-brand-name .t2 { font-size: 9.5px; letter-spacing: .26em; color: var(--an-taupe); margin-top: 3px; }
.an-nav { display: flex; gap: 24px; margin: 0 auto; flex-wrap: wrap; }
.an-nav a { text-decoration: none; color: var(--an-ink-soft); font-size: 15px; font-weight: 500; }
.an-nav a:hover { color: var(--an-maroon); }
.an-cta { text-decoration: none; background: var(--an-maroon); color: var(--an-cream); padding: 11px 20px; border-radius: var(--an-radius-pill); font-size: 14px; font-weight: 600; }
.an-cta:hover { background: var(--an-maroon-deep); color: var(--an-cream); }
.an-langpill { display: flex; align-items: center; gap: 4px; background: rgba(94,27,38,.07); border-radius: var(--an-radius-pill); padding: 3px; }
.an-langpill a { text-decoration: none; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: var(--an-radius-pill); color: var(--an-ink-soft); }
.an-langpill a.on { background: var(--an-maroon); color: var(--an-cream); }

.an-hero { background-color: var(--an-maroon); color: var(--an-cream); }
.an-hero .an-wrap { padding-top: clamp(44px, 7vw, 88px); padding-bottom: clamp(44px, 7vw, 88px); display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 60px); align-items: center; }
.an-hero-copy { flex: 1 1 460px; min-width: 300px; }
.an-hero-badge { display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(232,213,184,.4); border-radius: var(--an-radius-pill); padding: 7px 16px; font-size: 12.5px; letter-spacing: .1em; color: var(--an-sand); text-transform: uppercase; }
.an-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--an-gold); flex-shrink: 0; }
.an-hero h1 { font-family: var(--an-font-display); font-weight: 400; font-size: clamp(36px, 5.6vw, 62px); line-height: 1.12; margin: 24px 0 0; text-wrap: pretty; color: var(--an-cream); }
.an-hero-sub { font-size: clamp(16.5px, 1.7vw, 19px); line-height: 1.8; color: rgba(250,246,241,.9); margin: 20px 0 0; max-width: 54ch; }
.an-hero-ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.an-btn-gold { text-decoration: none; background: var(--an-gold); color: var(--an-maroon-ink); padding: 15px 28px; border-radius: var(--an-radius-pill); font-size: 15.5px; font-weight: 700; }
.an-btn-gold:hover { background: var(--an-gold-bright); color: var(--an-maroon-ink); }
.an-btn-ghost { text-decoration: none; border: 1.5px solid rgba(250,246,241,.5); color: var(--an-cream); padding: 15px 28px; border-radius: var(--an-radius-pill); font-size: 15.5px; font-weight: 600; }
.an-btn-ghost:hover { border-color: var(--an-cream); background: rgba(250,246,241,.08); color: var(--an-cream); }
.an-hero-proofs { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 16px; }
.an-hero-proofs .pf { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: rgba(232,213,184,.9); }
.an-hero-proofs .pf .an-dot { width: 5px; height: 5px; }
.an-hero-photo { flex: 1 1 360px; min-width: 280px; position: relative; }
.an-hero-photo img.photo { width: 100%; height: clamp(340px, 40vw, 520px); object-fit: cover; display: block; border-radius: 24px; box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.an-since { position: absolute; bottom: -18px; inset-inline-start: -12px; background: var(--an-cream); color: var(--an-maroon); border-radius: 16px; padding: 13px 20px; box-shadow: 0 16px 36px rgba(0,0,0,.25); display: flex; align-items: baseline; gap: 10px; }
.an-since .year { font-family: var(--an-font-display); font-size: 32px; line-height: 1; }
.an-since .cap { font-size: 13px; color: var(--an-ink-muted); max-width: 16ch; line-height: 1.35; }

@media (max-width: 800px) {
  .an-nav { width: 100%; order: 5; overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; margin: 0; gap: 18px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .an-nav::-webkit-scrollbar { display: none; }
  .an-nav a { white-space: nowrap; }
}

/* --- fidelity fixes (vs design reference) --- */
.an-page, .an-page section { text-align: start; }
.an-page h1::before, .an-page h1::after, .an-page h2::before, .an-page h2::after { content: none !important; display: none !important; }
.an-hero { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'170'%20height%3D'170'%20viewBox%3D'0%200%20170%20170'%20fill%3D'none'%20stroke%3D'%23C6A15B'%20stroke-opacity%3D'0.18'%20stroke-width%3D'1'%3E%3Cpath%20d%3D%22M85%2073%20Q94%2058%2085%2043%20Q76%2058%2085%2073%20Z%22%2F%3E%3Cpath%20d%3D%22M85%2097%20Q94%20112%2085%20127%20Q76%20112%2085%2097%20Z%22%2F%3E%3Cpath%20d%3D%22M73%2085%20Q58%2094%2043%2085%20Q58%2076%2073%2085%20Z%22%2F%3E%3Cpath%20d%3D%22M97%2085%20Q112%2094%20127%2085%20Q112%2076%2097%2085%20Z%22%2F%3E%3Cpath%20d%3D%22M0%20-7%20Q5%20-15.5%200%20-24%20Q-5%20-15.5%200%20-7%20Z%22%2F%3E%3Cpath%20d%3D%22M0%207%20Q5%2015.5%200%2024%20Q-5%2015.5%200%207%20Z%22%2F%3E%3Cpath%20d%3D%22M-7%200%20Q-15.5%205%20-24%200%20Q-15.5%20-5%20-7%200%20Z%22%2F%3E%3Cpath%20d%3D%22M7%200%20Q15.5%205%2024%200%20Q15.5%20-5%207%200%20Z%22%2F%3E%3Cpath%20d%3D%22M170%20-7%20Q175%20-15.5%20170%20-24%20Q165%20-15.5%20170%20-7%20Z%22%2F%3E%3Cpath%20d%3D%22M170%207%20Q175%2015.5%20170%2024%20Q165%2015.5%20170%207%20Z%22%2F%3E%3Cpath%20d%3D%22M163%200%20Q154.5%205%20146%200%20Q154.5%20-5%20163%200%20Z%22%2F%3E%3Cpath%20d%3D%22M177%200%20Q185.5%205%20194%200%20Q185.5%20-5%20177%200%20Z%22%2F%3E%3Cpath%20d%3D%22M0%20163%20Q5%20154.5%200%20146%20Q-5%20154.5%200%20163%20Z%22%2F%3E%3Cpath%20d%3D%22M0%20177%20Q5%20185.5%200%20194%20Q-5%20185.5%200%20177%20Z%22%2F%3E%3Cpath%20d%3D%22M-7%20170%20Q-15.5%20175%20-24%20170%20Q-15.5%20165%20-7%20170%20Z%22%2F%3E%3Cpath%20d%3D%22M7%20170%20Q15.5%20175%2024%20170%20Q15.5%20165%207%20170%20Z%22%2F%3E%3Cpath%20d%3D%22M170%20163%20Q175%20154.5%20170%20146%20Q165%20154.5%20170%20163%20Z%22%2F%3E%3Cpath%20d%3D%22M170%20177%20Q175%20185.5%20170%20194%20Q165%20185.5%20170%20177%20Z%22%2F%3E%3Cpath%20d%3D%22M163%20170%20Q154.5%20175%20146%20170%20Q154.5%20165%20163%20170%20Z%22%2F%3E%3Cpath%20d%3D%22M177%20170%20Q185.5%20175%20194%20170%20Q185.5%20165%20177%20170%20Z%22%2F%3E%3C%2Fsvg%3E"); }
.an-mobilebar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; background: rgba(46,13,18,.97); backdrop-filter: blur(8px); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); gap: 10px; box-shadow: 0 -8px 24px rgba(0,0,0,.25); }
.an-mobilebar a { flex: 1; text-decoration: none; text-align: center; padding: 13px 10px; border-radius: var(--an-radius-pill); font-size: 14.5px; font-weight: 700; }
.an-mobilebar .wa { background: var(--an-gold); color: var(--an-maroon-ink); }
.an-mobilebar .ms { border: 1.5px solid rgba(250,246,241,.55); color: var(--an-cream); }
.an-mobilebar .sv { background: var(--an-maroon); border: 1.5px solid rgba(250,246,241,.25); color: var(--an-cream); }
@media (max-width: 800px) { .an-mobilebar { display: flex; } .an-page { padding-bottom: 76px; } }
/* Override the site-wide legacy Custom-CSS (custom-css-js/7277.css: h1 centered + gold border-bottom) inside ARAYA pages only */
.an-page h1, .an-page h2, .an-page h3 { border-bottom: 0 !important; text-align: start !important; padding-bottom: 0 !important; }
.an-hero h1 { color: var(--an-cream) !important; font-size: clamp(36px, 5.6vw, 62px) !important; font-family: var(--an-font-display) !important; }

/* ===== Shared section primitives (paths .. sitemap) ===== */
.an-kicker { font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--an-gold-strong); font-weight: 600; }
.an-kicker svg { vertical-align: -1.5px; margin-inline-end: 8px; }
.an-sec-lead { max-width: 680px; }
.an-sec-lead.center { max-width: 680px; margin: 0 auto; text-align: center; }
.an-h2 { font-family: var(--an-font-display); font-size: clamp(28px, 3.8vw, 42px); font-weight: 400; margin: 14px 0 0; line-height: 1.16; text-wrap: pretty; }
.an-h2--sm { font-size: clamp(24px, 3vw, 34px); line-height: 1.2; }
.an-sub { font-size: 16px; line-height: 1.8; color: var(--an-ink-soft); margin: 16px 0 0; }
.an-dot-sm { width: 5px; height: 5px; border-radius: 50%; background: var(--an-gold); flex-shrink: 0; transform: translateY(-2px); }
.an-pointrow { display: flex; gap: 10px; align-items: baseline; font-size: 15px; line-height: 1.6; }

/* ---- Paths ---- */
.an-paths { padding: clamp(52px, 7vw, 88px) 0; }
.an-paths-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; margin-top: 40px; }
.an-path-card { text-decoration: none; color: inherit; background: var(--an-cream-card); border: 1px solid rgba(94,27,38,.12); border-radius: var(--an-radius-card); padding: 28px 26px; display: flex; flex-direction: column; gap: 12px; transition: all .25s; }
.an-path-card:hover { box-shadow: 0 18px 40px rgba(94,27,38,.13); transform: translateY(-3px); border-color: rgba(94,27,38,.3); }
.an-path-ico, .an-cert-ico { display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; border-radius: 12px; background: var(--an-cream-tint, #f6f2ea); border: 1px solid rgba(198,161,91,.35); margin-bottom: 4px; }
.an-path-ico svg, .an-cert-ico svg { display: block; }
.an-cert-card.dark .an-cert-ico { background: rgba(198,161,91,.14); border-color: rgba(198,161,91,.4); }
.an-path-tag { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--an-gold-strong); font-weight: 700; }
.an-path-title { font-family: var(--an-font-display); font-size: 23px; line-height: 1.25; color: var(--an-maroon); }
.an-path-desc { font-size: 15.5px; line-height: 1.7; color: var(--an-ink-soft); margin: 0; flex: 1; }
.an-path-cta { font-size: 15px; font-weight: 700; color: var(--an-gold-strong); }

/* ---- Services ---- */
.an-svc { background: var(--an-cream-tint); }
.an-svc .an-wrap { padding-top: clamp(52px, 7vw, 88px); padding-bottom: clamp(52px, 7vw, 88px); }
.an-svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; margin-top: 40px; }
.an-svc-card { background: var(--an-cream-card); border: 1px solid rgba(94,27,38,.1); border-radius: var(--an-radius-card); overflow: hidden; display: flex; flex-direction: column; }
.an-svc-card img { width: 100%; height: 190px; object-fit: cover; display: block; }
.an-svc-body { padding: 24px 24px 28px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.an-svc-body h3 { font-family: var(--an-font-display); font-size: 24px; color: var(--an-maroon); margin: 0; }
.an-svc-body p { font-size: 15.5px; line-height: 1.75; color: var(--an-ink-soft); margin: 0; }
.an-svc-points { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.an-svc-points .an-pointrow { font-size: 14.5px; color: var(--an-ink-soft); }
.an-svc-more { text-decoration: none; color: var(--an-gold-strong); font-size: 15px; font-weight: 700; }
.an-svc-all { margin-top: 30px; }
.an-svc-all a { text-decoration: none; color: var(--an-maroon); font-size: 15.5px; font-weight: 700; border-bottom: 2px solid var(--an-gold); padding-bottom: 3px; }

/* ---- Certificates ---- */
.an-cert { padding: clamp(52px, 7vw, 88px) 0; }
.an-cert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; margin-top: 36px; }
.an-cert-card { border-radius: var(--an-radius-card); padding: 30px 28px; display: flex; flex-direction: column; gap: 14px; }
.an-cert-card.dark { background: var(--an-maroon); color: var(--an-cream); }
.an-cert-card.light { background: var(--an-cream-card); border: 1px solid rgba(94,27,38,.14); }
.an-cert-tag { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
.an-cert-card.dark .an-cert-tag { color: var(--an-sand); }
.an-cert-card.light .an-cert-tag { color: var(--an-taupe); }
.an-cert-card h3 { font-family: var(--an-font-display); font-size: 25px; margin: 0; }
.an-cert-card.light h3 { color: var(--an-maroon); }
.an-cert-points { display: flex; flex-direction: column; gap: 9px; flex: 1; }
.an-cert-card.dark .an-pointrow { color: rgba(250,246,241,.94); }
.an-cert-card.light .an-pointrow { color: var(--an-ink-soft); }
.an-cert-price { font-size: 14px; padding-top: 14px; }
.an-cert-card.dark .an-cert-price { color: var(--an-sand); border-top: 1px solid rgba(232,213,184,.3); }
.an-cert-card.light .an-cert-price { color: var(--an-taupe); border-top: 1px solid rgba(94,27,38,.12); }
.an-cert-note { margin-top: 22px; background: var(--an-cream-tint); border-radius: 14px; padding: 16px 22px; font-size: 14.5px; line-height: 1.7; color: var(--an-ink-soft); display: flex; gap: 12px; align-items: baseline; }
.an-cert-note .ico { font-weight: 700; color: var(--an-gold-strong); flex-shrink: 0; }

/* ---- Timeline ---- */
.an-timeline { background: var(--an-maroon-deep); color: var(--an-cream); }
.an-timeline .an-wrap { padding-top: clamp(52px, 7vw, 88px); padding-bottom: clamp(52px, 7vw, 88px); }
.an-timeline .an-kicker { color: var(--an-gold); }
.an-timeline .an-sub { color: rgba(250,246,241,.85); }
.an-timeline-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px 24px; margin-top: 44px; }
.an-step { display: flex; flex-direction: column; gap: 10px; border-top: 2px solid rgba(198,161,91,.5); padding-top: 18px; }
.an-tl-num { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px;
  border-radius: 50%; background: var(--an-gold); color: var(--an-maroon-deep, #2e0d12);
  font-family: var(--an-font-display); font-size: 30px; font-weight: 700; line-height: 1; flex: none;
  margin-bottom: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.32); }
@media (max-width: 800px) { .an-tl-num { width: 54px; height: 54px; font-size: 26px; } }
.an-step-when { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--an-gold); font-weight: 700; }
.an-step h3 { font-size: 18px; font-weight: 700; margin: 0; }
.an-step p { font-size: 15px; line-height: 1.7; color: rgba(250,246,241,.85); margin: 0; }

/* ---- Addons ---- */
.an-addons { padding: clamp(52px, 7vw, 88px) 0; }
.an-addons-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-top: 30px; }
.an-addon-card { text-decoration: none; color: inherit; background: var(--an-cream-card); border: 1px solid rgba(94,27,38,.12); border-radius: 16px; padding: 20px 22px; display: flex; flex-direction: column; gap: 7px; transition: all .2s; }
.an-addon-card:hover { border-color: rgba(94,27,38,.35); box-shadow: 0 10px 26px rgba(94,27,38,.1); }
.an-addon-ico { display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; border-radius: 12px; background: var(--an-cream-tint, #f6f2ea); border: 1px solid rgba(198,161,91,.35); margin-bottom: 4px; }
.an-addon-ico svg { display: block; }
.an-addon-name { font-size: 16px; font-weight: 700; color: var(--an-maroon); }
.an-addon-desc { font-size: 14px; line-height: 1.6; color: var(--an-ink-muted); }

/* ---- Reviews ---- */
.an-reviews { padding: clamp(52px, 7vw, 88px) 0; }
.an-reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; margin-top: 40px; }
.an-review-card { background: var(--an-cream-card); border: 1px solid rgba(94,27,38,.12); border-radius: var(--an-radius-card); padding: 30px 28px; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.an-review-quote-mark { font-family: var(--an-font-display); font-size: 40px; line-height: .6; color: var(--an-gold); }
.an-review-card blockquote { margin: 0; font-size: 16px; line-height: 1.8; color: var(--an-ink-soft); flex: 1; }
.an-review-who { display: flex; flex-direction: column; gap: 3px; border-top: 1px solid rgba(94,27,38,.1); padding-top: 14px; }
.an-review-who .name { font-size: 14.5px; font-weight: 700; color: var(--an-maroon); }
.an-review-who .where { font-size: 13.5px; color: var(--an-taupe); }
.an-review-fb { background: var(--an-maroon); color: var(--an-cream); border-radius: var(--an-radius-card); padding: 30px 28px; display: flex; flex-direction: column; gap: 18px; }
.an-review-fb-count { font-family: var(--an-font-display); font-size: 40px; line-height: 1; color: var(--an-gold); }
.an-review-fb-line { font-size: 15px; line-height: 1.7; color: rgba(250,246,241,.9); }
.an-review-countries { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; align-content: flex-start; }
.an-review-countries span { border: 1px solid rgba(232,213,184,.4); border-radius: var(--an-radius-pill); padding: 6px 14px; font-size: 13px; color: var(--an-sand); }
.an-review-fb-cta { text-decoration: none; text-align: center; background: var(--an-gold); color: var(--an-maroon-ink); padding: 13px 22px; border-radius: var(--an-radius-pill); font-size: 14.5px; font-weight: 700; }
.an-review-fb-cta:hover { background: var(--an-gold-bright); color: var(--an-maroon-ink); }
.an-review-google-cta { background: transparent; border: 1.5px solid rgba(232,213,184,.5); color: var(--an-sand); }
.an-review-google-cta:hover { background: rgba(232,213,184,.12); color: var(--an-cream); }

/* ---- Course ---- */
.an-course { background: var(--an-cream-tint); }
.an-course .an-wrap { padding-top: clamp(52px, 7vw, 88px); padding-bottom: clamp(52px, 7vw, 88px); display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 56px); }
.an-course-main { flex: 1.2 1 420px; min-width: 300px; }
.an-course-main .an-sub { max-width: 60ch; }
.an-course-days { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }
.an-course-day { display: flex; gap: 16px; background: var(--an-cream-card); border: 1px solid rgba(94,27,38,.1); border-radius: 16px; padding: 18px 20px; }
.an-course-day .day { font-family: var(--an-font-display); font-size: 15px; color: var(--an-gold-strong); letter-spacing: .08em; white-space: nowrap; padding-top: 2px; }
.an-course-day .title { font-size: 15.5px; font-weight: 700; color: var(--an-maroon); }
.an-course-day .desc { font-size: 14.5px; line-height: 1.65; color: var(--an-ink-soft); }
.an-course-fee { flex: 1 1 300px; min-width: 280px; align-self: flex-start; background: var(--an-maroon); color: var(--an-cream); border-radius: 24px; padding: 32px 30px; display: flex; flex-direction: column; gap: 16px; }
.an-course-fee-label { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--an-sand); font-weight: 700; }
.an-course-includes { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.an-course-includes .an-pointrow { color: rgba(250,246,241,.94); }
.an-course-cta { text-decoration: none; text-align: center; background: var(--an-gold); color: var(--an-maroon-ink); padding: 14px 24px; border-radius: var(--an-radius-pill); font-size: 15px; font-weight: 700; }
.an-course-cta:hover { background: var(--an-gold-bright); color: var(--an-maroon-ink); }

/* ---- SalamXP ---- */
.an-salamxp { padding: clamp(52px, 7vw, 88px) 0; }
.an-sx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; margin-top: 36px; }
.an-sx-card { text-decoration: none; color: inherit; background: var(--an-cream-card); border: 1px solid rgba(94,27,38,.12); border-radius: var(--an-radius-card); padding: 30px 28px; display: flex; flex-direction: column; gap: 14px; transition: all .25s; }
.an-sx-card:hover { box-shadow: 0 18px 40px rgba(94,27,38,.13); transform: translateY(-3px); border-color: rgba(94,27,38,.3); }
.an-sx-top { display: flex; align-items: center; gap: 12px; }
.an-sx-ico { display: inline-flex; width: 40px; height: 40px; flex: none; align-items: center; justify-content: center; border-radius: 10px; background: var(--an-cream-tint, #f6f2ea); border: 1px solid rgba(198,161,91,.35); }
.an-sx-ico svg { display: block; width: 26px; height: 26px; }
.an-sx-tag { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--an-gold-strong); font-weight: 700; flex: 1; }
.an-sx-arrow { font-size: 16px; color: var(--an-gold-strong); }
.an-sx-name { font-family: var(--an-font-display); font-size: 27px; color: var(--an-maroon); }
.an-sx-desc { font-size: 15.5px; line-height: 1.75; color: var(--an-ink-soft); margin: 0; flex: 1; }
.an-sx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.an-sx-chips span { border: 1px solid rgba(94,27,38,.18); border-radius: var(--an-radius-pill); padding: 6px 14px; font-size: 13px; color: var(--an-ink-muted); }
.an-sx-cta { font-size: 15px; font-weight: 700; color: var(--an-gold-strong); margin-top: 4px; }

/* ---- About / Social Enterprise ---- */
.an-about { background-color: var(--an-maroon-deep); color: var(--an-cream); }
.an-about { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'170'%20height%3D'170'%20viewBox%3D'0%200%20170%20170'%20fill%3D'none'%20stroke%3D'%23C6A15B'%20stroke-opacity%3D'0.18'%20stroke-width%3D'1'%3E%3Cpath%20d%3D%22M85%2073%20Q94%2058%2085%2043%20Q76%2058%2085%2073%20Z%22%2F%3E%3Cpath%20d%3D%22M85%2097%20Q94%20112%2085%20127%20Q76%20112%2085%2097%20Z%22%2F%3E%3Cpath%20d%3D%22M73%2085%20Q58%2094%2043%2085%20Q58%2076%2073%2085%20Z%22%2F%3E%3Cpath%20d%3D%22M97%2085%20Q112%2094%20127%2085%20Q112%2076%2097%2085%20Z%22%2F%3E%3Cpath%20d%3D%22M0%20-7%20Q5%20-15.5%200%20-24%20Q-5%20-15.5%200%20-7%20Z%22%2F%3E%3Cpath%20d%3D%22M0%207%20Q5%2015.5%200%2024%20Q-5%2015.5%200%207%20Z%22%2F%3E%3Cpath%20d%3D%22M-7%200%20Q-15.5%205%20-24%200%20Q-15.5%20-5%20-7%200%20Z%22%2F%3E%3Cpath%20d%3D%22M7%200%20Q15.5%205%2024%200%20Q15.5%20-5%207%200%20Z%22%2F%3E%3Cpath%20d%3D%22M170%20-7%20Q175%20-15.5%20170%20-24%20Q165%20-15.5%20170%20-7%20Z%22%2F%3E%3Cpath%20d%3D%22M170%207%20Q175%2015.5%20170%2024%20Q165%2015.5%20170%207%20Z%22%2F%3E%3Cpath%20d%3D%22M163%200%20Q154.5%205%20146%200%20Q154.5%20-5%20163%200%20Z%22%2F%3E%3Cpath%20d%3D%22M177%200%20Q185.5%205%20194%200%20Q185.5%20-5%20177%200%20Z%22%2F%3E%3Cpath%20d%3D%22M0%20163%20Q5%20154.5%200%20146%20Q-5%20154.5%200%20163%20Z%22%2F%3E%3Cpath%20d%3D%22M0%20177%20Q5%20185.5%200%20194%20Q-5%20185.5%200%20177%20Z%22%2F%3E%3Cpath%20d%3D%22M-7%20170%20Q-15.5%20175%20-24%20170%20Q-15.5%20165%20-7%20170%20Z%22%2F%3E%3Cpath%20d%3D%22M7%20170%20Q15.5%20175%2024%20170%20Q15.5%20165%207%20170%20Z%22%2F%3E%3Cpath%20d%3D%22M170%20163%20Q175%20154.5%20170%20146%20Q165%20154.5%20170%20163%20Z%22%2F%3E%3Cpath%20d%3D%22M170%20177%20Q175%20185.5%20170%20194%20Q165%20185.5%20170%20177%20Z%22%2F%3E%3Cpath%20d%3D%22M163%20170%20Q154.5%20175%20146%20170%20Q154.5%20165%20163%20170%20Z%22%2F%3E%3Cpath%20d%3D%22M177%20170%20Q185.5%20175%20194%20170%20Q185.5%20165%20177%20170%20Z%22%2F%3E%3C%2Fsvg%3E"); }
.an-about .an-wrap { padding-top: clamp(52px, 7vw, 88px); padding-bottom: clamp(52px, 7vw, 88px); display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 60px); align-items: center; }
.an-about-photo { flex: 1 1 300px; min-width: 260px; }
.an-about-photo img { width: 100%; height: 340px; object-fit: cover; display: block; border-radius: 20px; }
.an-about-body { flex: 1.4 1 420px; min-width: 300px; }
.an-about-badge { display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(198,161,91,.5); border-radius: var(--an-radius-pill); padding: 7px 16px; font-size: 12px; letter-spacing: .14em; color: var(--an-sand); text-transform: uppercase; }
.an-about-body h2 { font-family: var(--an-font-display); font-size: clamp(26px, 3.4vw, 38px); font-weight: 400; margin: 20px 0 0; line-height: 1.2; text-wrap: pretty; color: var(--an-cream); }
.an-about-desc { font-size: 16px; line-height: 1.85; color: rgba(250,246,241,.9); margin: 18px 0 0; max-width: 62ch; }
.an-about-quote { margin: 26px 0 0; padding: 0 0 0 20px; border-inline-start: 3px solid var(--an-gold); }
.an-about-quote p { font-family: var(--an-font-display); font-size: 18.5px; line-height: 1.7; color: var(--an-sand); margin: 0; font-style: italic; }
.an-about-quote footer { font-size: 14px; color: rgba(250,246,241,.7); margin-top: 12px; }
.an-about-policies { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.an-about-policies span { border: 1px solid rgba(232,213,184,.35); border-radius: var(--an-radius-pill); padding: 8px 16px; font-size: 13.5px; color: var(--an-sand); }

/* ---- FAQ ---- */
.an-faq { max-width: 900px; margin: 0 auto; padding: clamp(52px, 7vw, 88px) 20px; }
.an-faq-list { display: flex; flex-direction: column; gap: 12px; margin-top: 36px; }
.an-faq-item { background: var(--an-cream-card); border: 1px solid rgba(94,27,38,.12); border-radius: 16px; padding: 4px 22px; }
.an-faq-item summary { cursor: pointer; font-size: 16px; font-weight: 600; color: var(--an-maroon); padding: 16px 0; list-style-position: outside; }
.an-faq-item p { font-size: 15.5px; line-height: 1.75; color: var(--an-ink-soft); margin: 0 0 18px; }
.an-faq-more { text-align: center; margin-top: 24px; }
.an-faq-more a { color: var(--an-gold-strong); font-size: 15px; font-weight: 700; text-decoration: none; }

/* ---- Contact / consultation ---- */
.an-contact { padding: 0 20px clamp(52px, 7vw, 88px); }
.an-contact-box { background: var(--an-cream-card); border: 1px solid rgba(94,27,38,.12); border-radius: 28px; padding: clamp(30px, 5vw, 56px); display: flex; flex-wrap: wrap; gap: clamp(30px, 5vw, 56px); }
.an-contact-main { flex: 1.3 1 380px; min-width: 280px; }
.an-contact-main h2 { font-family: var(--an-font-display); font-size: clamp(26px, 3.4vw, 38px); font-weight: 400; color: var(--an-ink); margin: 14px 0 0; line-height: 1.2; }
.an-contact-main .an-sub { max-width: 56ch; }
.an-contact-ctas { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.an-contact-ctas .wa { text-decoration: none; background: var(--an-maroon); color: var(--an-cream); padding: 14px 26px; border-radius: var(--an-radius-pill); font-size: 15px; font-weight: 700; }
.an-contact-ctas .wa:hover { background: var(--an-maroon-deep); }
.an-contact-ctas .fb { text-decoration: none; border: 1.5px solid var(--an-maroon); color: var(--an-maroon); padding: 14px 26px; border-radius: var(--an-radius-pill); font-size: 15px; font-weight: 700; }
.an-contact-ctas .fb:hover { background: var(--an-maroon); color: var(--an-cream); }
.an-contact-ctas .em { text-decoration: none; border: 1.5px solid rgba(94,27,38,.35); color: var(--an-maroon); padding: 14px 26px; border-radius: var(--an-radius-pill); font-size: 15px; font-weight: 600; }
.an-contact-ctas .em:hover { border-color: var(--an-maroon); }
.an-contact-hours { margin-top: 20px; font-size: 13.5px; color: var(--an-taupe); }
.an-contact-next { flex: 1 1 280px; min-width: 250px; background: var(--an-cream-tint); border-radius: 20px; padding: 28px 26px; align-self: stretch; }
.an-contact-next-label { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--an-taupe); font-weight: 700; }
.an-contact-next-list { display: flex; flex-direction: column; gap: 18px; margin-top: 20px; }
.an-contact-next-item { display: flex; gap: 14px; align-items: baseline; }
.an-contact-next-item .n { font-family: var(--an-font-display); font-size: 22px; color: var(--an-gold-strong); line-height: 1; }
.an-contact-next-item .text { font-size: 15.5px; color: var(--an-ink-soft); line-height: 1.6; }

/* ---- Sitemap + footer ---- */
.an-sitemap { background: var(--an-cream-tint); border-top: 1px solid rgba(94,27,38,.1); }
.an-sitemap .an-wrap { padding-top: clamp(44px, 6vw, 72px); padding-bottom: clamp(44px, 6vw, 72px); }
.an-sitemap h2 { color: var(--an-ink); }
.an-sitemap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 30px 26px; margin-top: 36px; }
.an-sitemap-group { display: flex; flex-direction: column; gap: 11px; }
.an-sitemap-group-title { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--an-taupe); font-weight: 700; }
.an-sitemap-group a { color: var(--an-ink-soft); text-decoration: none; font-size: 15px; line-height: 1.5; }
.an-sitemap-group a:hover { color: var(--an-maroon); }

.an-footer { background: var(--an-maroon-ink); color: rgba(250,246,241,.78); }
.an-footer-orn { display: flex; justify-content: center; padding: 32px 20px 0; }
.an-footer-cols { max-width: var(--an-maxw); margin: 0 auto; padding: 52px 20px 36px; display: flex; flex-wrap: wrap; gap: 40px; }
.an-footer-brand { flex: 1.4 1 320px; min-width: 260px; display: flex; flex-direction: column; gap: 14px; }
.an-footer-brand .t1 { font-family: var(--an-font-display); font-size: 27px; letter-spacing: .14em; color: var(--an-cream); }
.an-footer-brand .t2 { font-size: 9.5px; letter-spacing: .26em; color: var(--an-gold); margin-top: 4px; display: block; }
.an-footer-brand p { font-size: 15px; line-height: 1.75; margin: 0; max-width: 44ch; }
/* Former company name — kept for recognition/SEO, positioned quietly under the brand. */
.an-footer-formerly { font-size: 10.5px; letter-spacing: .08em; color: var(--an-gold); opacity: .6; margin-top: -8px; }
.an-footer-col { flex: 1 1 240px; min-width: 220px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.7; }
.an-footer-col.narrow { flex: 1 1 200px; min-width: 180px; }
.an-footer-col-title { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--an-gold); font-weight: 600; }
.an-footer-co { font-weight: 600; color: var(--an-cream); }
.an-footer-col a { color: var(--an-cream); text-decoration: none; }
.an-footer-col a:hover { color: var(--an-gold); }
.an-social { display: inline-flex; align-items: center; gap: 8px; }
.an-social svg { color: var(--an-gold, #c6a15b); flex: none; }
.an-footer-legal { border-top: 1px solid rgba(250,246,241,.12); }
.an-footer-legal-inner { max-width: var(--an-maxw); margin: 0 auto; padding: 18px 20px; font-size: 12.5px; color: rgba(250,246,241,.5); display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
/* Authority-boundary disclaimer — deliberately quiet: small, low-contrast, single line of legal text. */
.an-footer-disclaimer { max-width: var(--an-maxw); margin: 0 auto; padding: 0 20px 18px; font-size: 11px; line-height: 1.55; color: rgba(250,246,241,.34); font-weight: 300; }
.an-foot-disclaimer-standalone { padding: 14px 20px; font-size: 11px; line-height: 1.55; text-align: center; color: var(--an-ink-muted); background: var(--an-tint, #f6f2ea); border-top: 1px solid var(--an-line, #e7e2d8); }

/* ═══ DESIGN-SYSTEM CONSOLIDATION (peer-review: one system) — references tokens.css scale ═══ */
/* section titles -> one H2 scale */
.an-page .an-h2, .an-page .an-contact-main h2, .an-page .an-about-body h2, .an-page .an-h2--sm { font-size: var(--an-h2); }
/* ALL card titles -> one size */
.an-page .an-path-title, .an-page .an-svc-body h3, .an-page .an-cert-card h3, .an-page .an-sx-name,
.an-page .an-addon-title, .an-page .an-review-name { font-size: var(--an-card-title); }
/* CONTENT CTAs -> one button scale + smooth transition (header .an-cta keeps its compact nav size) */
.an-page .an-btn-gold, .an-page .an-btn-ghost, .an-page .an-btn-ghost-dark,
.an-page .an-course-cta, .an-page .an-contact-ctas a { padding: var(--an-btn-pad); font-size: var(--an-btn-font); }
.an-page .an-cta, .an-page .an-btn-gold, .an-page .an-btn-ghost, .an-page .an-btn-ghost-dark,
.an-page .an-course-cta, .an-page .an-contact-ctas a, .an-page .an-nav a, .an-page .an-langpill a,
.an-page .an-footer a, .an-page .an-brand { transition: color var(--an-transition), background-color var(--an-transition), border-color var(--an-transition), transform var(--an-transition); }
/* language pill: >=44px touch target on mobile */
@media (max-width: 800px) { .an-page .an-langpill a { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 16px; } }

/* auth — ONE account button (person icon + label), maroon pill; less on-screen clutter */
.an-auth-one { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; background: var(--an-maroon); color: var(--an-cream); font-size: 14px; font-weight: 600; padding: 9px 16px; border-radius: var(--an-radius-pill); transition: background var(--an-transition); }
.an-auth-one:hover { background: var(--an-maroon-deep); color: var(--an-cream); }
.an-auth-one svg { flex-shrink: 0; }
@media (max-width: 800px) { .an-auth-one { min-height: 44px; } .an-auth-one span { display: none; } .an-auth-one { padding: 9px 12px; } }

/* Our own auto-translate language selector (replaces GTranslate) — server-rendered
   <details>/<summary>, sits next to the TH/EN pill. No client JS, no external CDN. */
.an-gt { position: relative; display: inline-flex; align-items: center; }
.an-gt details { position: relative; }
.an-gt summary { list-style: none; cursor: pointer; font-family: var(--an-font-body); font-size: 13px;
  color: var(--an-ink-soft); padding: 6px 8px; border-radius: 8px; user-select: none; }
.an-gt summary::-webkit-details-marker { display: none; }
.an-gt summary:hover { color: var(--an-ink); }
.an-gt details[open] > ul, .an-gt ul { position: absolute; right: 0; top: 100%; margin: 4px 0 0; padding: 6px;
  list-style: none; background: #fff; border: 1px solid var(--an-line, #e7e2d8); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.10); min-width: 148px; z-index: 40; }
.an-gt li { margin: 0; }
.an-gt a { display: block; font-family: var(--an-font-body); font-size: 13px; color: var(--an-ink-soft);
  padding: 7px 10px; border-radius: 7px; text-decoration: none; }
.an-gt a:hover { background: var(--an-tint, #f6f2ea); color: var(--an-ink); }
.an-gt img { vertical-align: middle; }


/* ===== Contact company hero — left-aligned editorial system ===== */
.an-contact-hero .an-contact-lead{max-width:600px;margin:14px 0 0;color:var(--an-cream,#f4ece0);opacity:.9;font-size:17px;line-height:1.7}
.an-hero-heritage{margin:16px 0 0;color:var(--an-gold,#c6a15b);font-size:14.5px;letter-spacing:.02em;font-style:italic}
.an-kicker .an-lead-ico svg{width:15px;height:15px;vertical-align:-3px;margin-inline-end:6px}

/* section heading hierarchy: H1 hero > H2 section > eyebrow (all left) */
.an-contact-mapsec .an-kicker,.an-contact-channels .an-kicker,.an-contact-explore .an-kicker{
  font-size:12px;letter-spacing:.24em;font-weight:600;display:inline-block;margin-bottom:12px}
.an-contact-mapsec .an-h2,.an-contact-channels .an-h2,.an-contact-explore .an-h2{
  font-size:clamp(26px,3vw,38px);line-height:1.16;margin:0;color:var(--an-maroon-deep,#2e0d12);font-weight:400}
.an-contact-mapsec .an-sec-lead,.an-contact-channels .an-sec-lead,.an-contact-explore .an-sec-lead{max-width:760px}

/* Map first (left) */
.an-contact-mapsec{background:var(--an-cream,#faf5ec);padding:clamp(44px,6vw,72px) 0}
.an-map-frame{margin:34px 0 0;border-radius:var(--an-radius-card,16px);overflow:hidden;border:1px solid rgba(198,161,91,.4);box-shadow:0 14px 36px rgba(94,27,38,.14);line-height:0}
.an-map-frame iframe{display:block;width:100%}
.an-map-info{margin:22px 0 0;display:flex;align-items:center;justify-content:flex-start;gap:14px 22px;flex-wrap:wrap}
.an-map-addr{display:inline-flex;align-items:center;gap:9px;font-size:15.5px;color:var(--an-maroon-deep,#2e0d12);font-weight:500}
.an-map-addr svg{width:20px;height:20px;flex:none}
.an-map-btn{display:inline-flex;align-items:center;justify-content:center;flex:none}
.an-map-note{max-width:760px;margin:16px 0 0;text-align:left;font-size:13.5px;color:var(--an-ink-muted,#7a6c5d);line-height:1.7}
.an-contact-channels .an-addons-grid{margin-top:38px}
.an-contact-explore .an-paths-grid{margin-top:38px}

/* Niyyah band — real pull-quote, left; author right */
.an-contact-niyyah{background:linear-gradient(160deg,#2e0d12,#4a141d);padding:clamp(48px,6vw,68px) 0;text-align:left}
.an-contact-niyyah .an-wrap{max-width:900px}
.an-niyyah-kicker{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--an-gold,#c6a15b);font-weight:600;margin-bottom:6px}
.an-niyyah-mark{font-family:var(--an-font-display);font-size:64px;line-height:.7;color:var(--an-gold,#c6a15b);opacity:.55;margin:0 0 6px}
.an-niyyah-quote{margin:0;color:var(--an-cream,#f4ece0);font-family:var(--an-font-display);font-size:clamp(20px,2.5vw,26px);line-height:1.7;font-style:normal;border:none;padding:0}
.an-niyyah-by{margin-top:20px;text-align:right;color:var(--an-gold,#c6a15b);font-size:14px;letter-spacing:.02em}

/* Company / legal strip (left) */
.an-contact-legal{background:#fff;padding:40px 0;border-top:1px solid var(--an-line,#e7dcc9)}
.an-contact-co{text-align:left;margin-bottom:16px}
.an-contact-co-name{font-family:var(--an-font-display);font-size:19px;color:var(--an-maroon-deep,#2e0d12)}
.an-contact-co-meta{font-size:13.5px;color:var(--an-ink-muted,#7a6c5d);margin:6px 0 0;max-width:720px;line-height:1.6}
.an-contact-co-addr{font-size:13.5px;color:var(--an-ink-soft,#5c5044);margin-top:6px}
.an-contact-boundary{max-width:820px;margin:0;text-align:left;font-size:12.5px;color:var(--an-ink-muted,#8a7c6d);line-height:1.7}

.an-contact-channels{background:#fff}
.an-contact-channels .an-addon-card{align-items:flex-start}

/* ===== About company story page ===== */
.an-about-hero .an-contact-lead{max-width:680px}
.an-about-hlsec{background:#fff;padding:clamp(44px,6vw,72px) 0}
.an-about-hlsec .an-addons-grid{margin-top:32px}
.an-about-hl{background:var(--an-cream,#faf5ec)}

/* Journey timeline (vertical, left-aligned, editorial) */
.an-about-journey{padding:clamp(48px,6vw,80px) 0}
.an-about-tl{list-style:none;margin:38px 0 0;padding:0 0 0 4px;position:relative;max-width:820px}
.an-about-tl:before{content:"";position:absolute;left:74px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--an-gold,#c6a15b),rgba(198,161,91,.25))}
.an-about-tl-item{position:relative;display:flex;align-items:flex-start;gap:26px;padding:11px 0}
.an-about-tl-year{flex:none;width:56px;text-align:right;font-family:var(--an-font-display);font-size:19px;color:var(--an-gold-strong,#a8813f);line-height:1.3}
.an-about-tl-text{position:relative;padding-left:26px;font-size:15.5px;line-height:1.6;color:var(--an-ink-soft,#5c5044);padding-top:1px}
.an-about-tl-text:before{content:"";position:absolute;left:-4px;top:6px;width:11px;height:11px;border-radius:50%;background:var(--an-cream,#faf5ec);border:2px solid var(--an-gold,#c6a15b)}
.an-about-tl-item.is-now .an-about-tl-year{color:var(--an-maroon,#5e1b26)}
.an-about-tl-item.is-now .an-about-tl-text{color:var(--an-maroon-deep,#2e0d12);font-weight:600}
.an-about-tl-item.is-now .an-about-tl-text:before{background:var(--an-gold,#c6a15b);box-shadow:0 0 0 4px rgba(198,161,91,.2)}
.an-about-namechange{max-width:820px;margin:30px 0 0;padding:18px 22px;background:var(--an-cream-tint,#f6f2ea);border-left:3px solid var(--an-gold,#c6a15b);border-radius:0 10px 10px 0;font-size:14.5px;line-height:1.7;color:var(--an-ink-soft,#5c5044)}
.an-about-namechange strong{color:var(--an-maroon-deep,#2e0d12);font-weight:600}

/* Why we exist (problem list) */
.an-about-need{background:#fff;padding:clamp(44px,6vw,72px) 0}
.an-about-needlist{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 32px;max-width:820px}
.an-about-needlist li{display:flex;align-items:center;gap:12px;font-size:15.5px;color:var(--an-ink,#3a3128);line-height:1.5}
.an-need-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--an-gold,#c6a15b);box-shadow:0 0 0 4px rgba(198,161,91,.16)}

.an-about-wins{padding:clamp(48px,6vw,80px) 0}
.an-about-engines{background:#fff;padding:clamp(48px,6vw,80px) 0}
.an-about-engines-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.an-about-cta{margin:6px 0 22px}

@media (max-width:560px){
  .an-about-needlist{grid-template-columns:1fr}
  .an-about-tl:before{left:58px}
  .an-about-tl-year{width:42px;font-size:17px}
}

/* ===== About: Theory of Change (Family of Peace) summary ===== */
.an-about-toc{background:#fff;padding:clamp(48px,6vw,80px) 0}
.an-about-toc-lead{max-width:860px;margin:22px 0 0;font-size:16px;line-height:1.8;color:var(--an-ink-soft,#5c5044)}
.an-toc-flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin:34px 0 0}
.an-toc-col{position:relative;background:var(--an-cream,#faf5ec);border:1px solid rgba(94,27,38,.12);border-radius:14px;padding:20px 20px 8px}
.an-toc-col-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.an-toc-col-ico{display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;border-radius:10px;background:var(--an-cream-tint,#f6f2ea);border:1px solid rgba(198,161,91,.35)}
.an-toc-col-ico svg{width:22px;height:22px}
.an-toc-col-k{font-family:var(--an-font-display);font-size:18px;color:var(--an-maroon,#5e1b26)}
.an-toc-col ul{list-style:none;margin:0;padding:0}
.an-toc-col li{position:relative;padding:0 0 10px 16px;font-size:13.5px;line-height:1.55;color:var(--an-ink-soft,#5c5044)}
.an-toc-col li:before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--an-gold,#c6a15b)}
.an-toc-arrow{display:none}
.an-toc-impact{margin:30px 0 0;background:var(--an-cream-tint,#f6f2ea);border-radius:16px;padding:24px 26px}
.an-toc-impact-head{font-family:var(--an-font-display);font-size:18px;color:var(--an-maroon-deep,#2e0d12);margin-bottom:16px}
.an-toc-impact-head span{font-family:var(--an-font-body);font-size:12.5px;color:var(--an-ink-muted,#7a6c5d)}
.an-toc-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px}
.an-toc-stat{display:flex;flex-direction:column;gap:4px}
.an-toc-n{font-family:var(--an-font-display);font-size:30px;line-height:1;color:var(--an-gold-strong,#a8813f)}
.an-toc-l{font-size:13px;color:var(--an-ink-soft,#5c5044);line-height:1.4}
.an-toc-swsf{margin:26px 0 0;padding:18px 22px;background:var(--an-cream,#faf5ec);border-left:3px solid var(--an-gold,#c6a15b);border-radius:0 10px 10px 0}
.an-toc-swsf-title{font-family:var(--an-font-display);font-size:17px;color:var(--an-maroon-deep,#2e0d12);margin-bottom:6px}
.an-toc-swsf p{margin:0;font-size:14.5px;line-height:1.7;color:var(--an-ink-soft,#5c5044)}
.an-toc-sdgnote{margin:16px 0 0;font-size:12px;color:var(--an-ink-muted,#8a7c6d);line-height:1.6}
.an-toc-more{margin:26px 0 0}

/* ===== Family of Peace (Theory of Change) document page — an-prose blocks ===== */
.an-prose .fop-sub{font-size:17px;color:var(--an-ink-muted,#7a6c5d);margin-top:-6px}
.an-prose .fop-goal{background:linear-gradient(135deg,#2e0d12,#5a1a24);color:var(--an-cream,#f4ece0);border-radius:16px;padding:26px 28px;margin:26px 0;font-size:16px;line-height:1.8;box-shadow:0 12px 30px rgba(94,27,38,.2)}
.an-prose .fop-goal strong{color:var(--an-gold,#c6a15b)}
.an-prose blockquote{border-left:3px solid var(--an-gold,#c6a15b);margin:24px 0;padding:6px 0 6px 22px;font-family:var(--an-font-display);font-size:19px;line-height:1.7;color:var(--an-maroon,#5e1b26)}
.an-prose .fop-cite{display:block;font-family:var(--an-font-body);font-size:13.5px;color:var(--an-ink-muted,#7a6c5d);margin-top:8px;font-style:normal}
.an-prose ol{padding-left:22px}
.an-prose ul.fop-reg{list-style:none;padding:0;margin:18px 0;border:1px solid var(--an-line,#e7dcc9);border-radius:14px;overflow:hidden}
.an-prose ul.fop-reg li{padding:12px 18px;border-bottom:1px solid var(--an-line,#e7dcc9);font-size:14.5px;line-height:1.6;background:#fff}
.an-prose ul.fop-reg li:last-child{border-bottom:none}
.an-prose ul.fop-reg li:before{content:none}
.an-prose ul.fop-reg strong{color:var(--an-maroon-deep,#2e0d12)}

/* ===== About: 2030 vision — one Culture 2030 axis forking into two ===== */
.an-about-2030{background:var(--an-cream,#faf5ec);padding:clamp(48px,6vw,80px) 0}
.an-2030-lead{max-width:760px;margin:22px 0 0;font-size:16px;line-height:1.8;color:var(--an-ink-soft,#5c5044)}
.an-2030-axis{display:flex;justify-content:center;margin:40px 0 0}
.an-2030-axis span{display:inline-flex;align-items:center;background:var(--an-maroon,#5e1b26);color:var(--an-cream,#f4ece0);font-family:var(--an-font-display);font-size:17px;letter-spacing:.04em;padding:11px 26px;border-radius:999px;box-shadow:0 8px 22px rgba(94,27,38,.28)}
.an-2030-branches{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:860px;margin:0 auto;padding-top:48px}
.an-2030-branches:before{content:"";position:absolute;top:0;left:50%;width:2px;height:24px;background:var(--an-gold,#c6a15b);transform:translateX(-50%)}
.an-2030-branches:after{content:"";position:absolute;top:24px;left:25%;right:25%;height:2px;background:var(--an-gold,#c6a15b)}
.an-2030-branch{position:relative;background:#fff;border:1px solid rgba(94,27,38,.12);border-radius:16px;padding:26px 24px;box-shadow:0 6px 20px rgba(94,27,38,.06)}
.an-2030-branch:before{content:"";position:absolute;top:-24px;left:50%;width:2px;height:24px;background:var(--an-gold,#c6a15b);transform:translateX(-50%)}
.an-2030-branch.is-econ{border-top:3px solid var(--an-gold,#c6a15b)}
.an-2030-branch.is-social{border-top:3px solid var(--an-maroon,#5e1b26)}
.an-2030-ico{display:inline-flex;width:48px;height:48px;align-items:center;justify-content:center;border-radius:12px;background:var(--an-cream-tint,#f6f2ea);border:1px solid rgba(198,161,91,.35);margin-bottom:12px}
.an-2030-ico svg{width:26px;height:26px}
.an-2030-tag{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--an-gold-strong,#a8813f);font-weight:700}
.an-2030-title{font-family:var(--an-font-display);font-size:21px;line-height:1.25;color:var(--an-maroon,#5e1b26);margin:4px 0 12px}
.an-2030-branch ul{list-style:none;margin:0;padding:0}
.an-2030-branch li{position:relative;padding:0 0 9px 18px;font-size:14.5px;line-height:1.55;color:var(--an-ink-soft,#5c5044)}
.an-2030-branch li:before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;background:var(--an-gold,#c6a15b)}
.an-2030-note{max-width:820px;margin:26px auto 0;text-align:center;font-size:12px;color:var(--an-ink-muted,#8a7c6d);line-height:1.6}
@media (max-width:600px){
  .an-2030-branches{grid-template-columns:1fr;padding-top:24px}
  .an-2030-branches:before,.an-2030-branches:after{display:none}
  .an-2030-branch:before{display:none}
}

/* 2030 fork as a continuation of the journey timeline (visual connector above the axis) */
.an-about-2030.is-continued{padding-top:clamp(30px,4vw,48px)}
.an-about-2030 .an-2030-axis{position:relative}
.an-about-2030.is-continued .an-2030-axis:before{content:"";position:absolute;top:-30px;left:50%;width:2px;height:26px;background:linear-gradient(rgba(198,161,91,.2),var(--an-gold,#c6a15b));transform:translateX(-50%)}

/* Family of Peace — at-a-glance highlight box (before the chapters) */
.an-prose .fop-hl{background:var(--an-cream-tint,#f6f2ea);border:1px solid rgba(198,161,91,.35);border-radius:16px;padding:22px 24px;margin:24px 0}
.an-prose .fop-hl-title{font-family:var(--an-font-body);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--an-gold-strong,#a8813f);font-weight:700;margin:0 0 14px}
.an-prose .fop-hl-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px 26px;margin-bottom:16px}
.an-prose .fop-hl-grid>div{position:relative;padding-left:18px;font-size:14.5px;line-height:1.5;color:var(--an-ink-soft,#5c5044)}
.an-prose .fop-hl-grid>div:before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;background:var(--an-gold,#c6a15b)}
.an-prose .fop-hl-grid b{color:var(--an-maroon-deep,#2e0d12)}
.an-prose .fop-flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;border-top:1px solid var(--an-line,#e7dcc9);padding-top:15px}
.an-prose .fop-flow span{background:#fff;border:1px solid rgba(198,161,91,.4);border-radius:999px;padding:6px 15px;font-size:13px;font-weight:600;color:var(--an-maroon,#5e1b26)}
.an-prose .fop-flow i{color:var(--an-gold-strong,#a8813f);font-style:normal;font-weight:700}
@media(max-width:560px){.an-prose .fop-hl-grid{grid-template-columns:1fr}}

/* Culture 2030 — alignment diagram (in an-prose content) */
.an-prose .c30-diagram{margin:26px 0;padding:24px 22px;background:var(--an-cream-tint,#f6f2ea);border:1px solid rgba(198,161,91,.35);border-radius:16px;text-align:center}
.an-prose .c30-node{max-width:640px;margin:0 auto;border-radius:12px;padding:12px 18px;font-size:14px;line-height:1.5}
.an-prose .c30-src{background:#fff;border:1px solid var(--an-line,#e7dcc9);color:var(--an-ink-soft,#5c5044)}
.an-prose .c30-hub{background:var(--an-maroon,#5e1b26);color:var(--an-cream,#f4ece0);font-family:var(--an-font-display);font-size:16px;padding:13px 22px}
.an-prose .c30-arrow{color:var(--an-gold-strong,#a8813f);font-size:20px;margin:9px 0;font-weight:700;line-height:1}
.an-prose .c30-dims{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:680px;margin:4px auto 0}
.an-prose .c30-dim{border-radius:12px;padding:14px 16px;text-align:left}
.an-prose .c30-dim b{display:block;color:var(--an-maroon-deep,#2e0d12);font-size:14.5px;margin-bottom:3px}
.an-prose .c30-dim span{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em}
.an-prose .c30-dim.strong{background:rgba(198,161,91,.16);border:1px solid var(--an-gold,#c6a15b)}
.an-prose .c30-dim.strong span{color:var(--an-gold-strong,#a8813f);font-weight:700}
.an-prose .c30-dim.selective{background:#fff;border:1px solid rgba(198,161,91,.4)}
.an-prose .c30-dim.selective span{color:var(--an-gold-strong,#a8813f)}
.an-prose .c30-dim.limited{background:#fff;border:1px dashed rgba(94,27,38,.25)}
.an-prose .c30-dim.limited span{color:var(--an-ink-muted,#8a7c6d)}
.an-prose .c30-cap{margin-top:15px;font-size:12px;color:var(--an-ink-muted,#8a7c6d)}
@media(max-width:560px){.an-prose .c30-dims{grid-template-columns:1fr}}

.an-2030-more{margin:26px auto 0;text-align:center}

/* Privacy policy — decision-flow diagram (an-prose) */
.an-prose .pv-diagram{margin:28px 0;padding:24px 22px;background:var(--an-cream-tint,#f6f2ea);border:1px solid rgba(198,161,91,.35);border-radius:16px;text-align:center}
.an-prose .pv-title{font-family:var(--an-font-body);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--an-gold-strong,#a8813f);font-weight:700;margin-bottom:16px}
.an-prose .pv-row{display:flex;justify-content:center;margin:0}
.an-prose .pv-step,.an-prose .pv-q,.an-prose .pv-lock{display:inline-block;max-width:560px;border-radius:12px;padding:11px 18px;font-size:14px;line-height:1.5}
.an-prose .pv-step.start{background:var(--an-maroon,#5e1b26);color:var(--an-cream,#f4ece0);font-family:var(--an-font-display);font-size:16px;padding:12px 24px}
.an-prose .pv-q{background:#fff;border:1px solid rgba(198,161,91,.4);color:var(--an-maroon-deep,#2e0d12);font-weight:600}
.an-prose .pv-lock{background:rgba(198,161,91,.16);border:1px solid var(--an-gold,#c6a15b);color:var(--an-maroon-deep,#2e0d12)}
.an-prose .pv-arrow{color:var(--an-gold-strong,#a8813f);font-size:15px;margin:9px 0;font-weight:700;line-height:1.3}
.an-prose .pv-no{display:block;font-size:12px;color:var(--an-ink-muted,#8a7c6d);font-weight:400}
.an-prose .pv-branch{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:620px;margin:0 auto}
.an-prose .pv-col{background:#fff;border:1px solid var(--an-line,#e7dcc9);border-radius:12px;padding:14px}
.an-prose .pv-tag{display:inline-block;background:var(--an-gold,#c6a15b);color:var(--an-maroon-ink,#2e0d12);border-radius:999px;padding:2px 12px;font-size:12px;font-weight:700;margin-bottom:8px}
.an-prose .pv-out{display:block;font-size:13.5px;line-height:1.5;color:var(--an-ink-soft,#5c5044)}
.an-prose .pv-tiers{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:4px}
.an-prose .pv-tier{border-radius:999px;padding:8px 16px;font-size:13px;color:var(--an-maroon,#5e1b26)}
.an-prose .pv-tier.t1{background:rgba(198,161,91,.2);border:1px solid var(--an-gold,#c6a15b)}
.an-prose .pv-tier.t2{background:#fff;border:1px solid rgba(198,161,91,.4)}
.an-prose .pv-tier.t3{background:#fff;border:1px dashed rgba(94,27,38,.25)}
.an-prose .pv-cap{margin-top:15px;font-size:12px;color:var(--an-ink-muted,#8a7c6d);line-height:1.6;max-width:640px;margin-left:auto;margin-right:auto}
@media(max-width:560px){.an-prose .pv-branch{grid-template-columns:1fr}}

.an-cert-more{margin-top:22px;text-align:center}
.an-cert-morelink{color:var(--an-gold-strong,#a8813f);font-weight:700;font-size:14.5px;text-decoration:none}
.an-cert-morelink:hover{text-decoration:underline}

/* Privacy — checker gradient (closest=private gold -> farthest=public maroon) */
.an-prose .pv-gradient{display:grid;grid-template-columns:repeat(3,1fr);margin:8px auto 0;max-width:640px;border-radius:12px;overflow:hidden;border:1px solid rgba(198,161,91,.4)}
.an-prose .pv-g{padding:16px 12px;text-align:center;color:#fff}
.an-prose .pv-g b{display:block;font-family:var(--an-font-display);font-size:16px;margin-bottom:3px}
.an-prose .pv-g span{font-size:12px;opacity:.92;line-height:1.4;display:block}
.an-prose .pv-g.g1{background:var(--an-gold-strong,#a8813f)}
.an-prose .pv-g.g2{background:#8a5330}
.an-prose .pv-g.g4{background:var(--an-maroon,#5e1b26)}
.an-prose .pv-gnote{margin:12px auto 0;max-width:600px;font-size:13px;color:var(--an-ink-soft,#5c5044);background:#fff;border:1px solid var(--an-line,#e7dcc9);border-radius:10px;padding:10px 15px;line-height:1.5}
@media(max-width:520px){.an-prose .pv-gradient{grid-template-columns:1fr}}

/* founder 2026-07-13: whole services card is clickable (stretched-link over the card) */
.an-svc-card { position: relative; transition: box-shadow var(--an-transition), transform var(--an-transition); }
.an-svc-card:hover { box-shadow: 0 14px 40px rgba(94,27,38,.12); transform: translateY(-2px); }
.an-svc-card .an-svc-more::after { content: ""; position: absolute; inset: 0; }

/* founder 2026-07-13: timeline steps click through to the whole-journey DAG (#journey) */
a.an-step { text-decoration: none; color: inherit; display: block; cursor: pointer; transition: transform var(--an-transition); }
a.an-step:hover { transform: translateY(-2px); }
a.an-step h3, a.an-step p { color: inherit; }

/* fix: legacy a{color:maroon} made timeline link-cards blend into the maroon section —
   force the design colors on the anchor cards with page-level specificity */
.an-page .an-timeline a.an-step,
.an-page .an-timeline a.an-step h3,
.an-page .an-timeline a.an-step p { color: var(--an-cream) !important; }
.an-page .an-timeline a.an-step .an-step-when { color: var(--an-gold-bright) !important; }
.an-page .an-timeline a.an-step:hover h3 { color: var(--an-gold-bright) !important; }

/* about section: read-more buttons to About Us / Contact Us pages */
.an-about-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(250,246,241,.18); }
@media (max-width: 640px) { .an-about-cta { flex-direction: column; } .an-about-cta a { text-align: center; } }

/* course fee box: full-details link under the WhatsApp CTA */
.an-course-more { display: block; text-align: center; margin-top: 12px; color: var(--an-maroon); font-weight: 700; font-size: 14.5px; text-decoration: none; }
.an-course-more:hover { color: var(--an-gold-strong); }

/* consent-trust note under the course intro (office charter: no coercion, personal consent) */
.an-course-trust { margin-top: 14px; padding: 12px 16px; border-inline-start: 3px solid var(--an-gold); background: var(--an-cream-tint); border-radius: 10px; font-size: 14px; line-height: 1.7; color: var(--an-ink-soft); max-width: 680px; }

/* know-before-you-plan: button to the master document checklist page */
.an-cert-actions { margin-top: 22px; text-align: center; }
.an-svc-pkg-cta { text-align: center; margin: 34px 0 0; }

/* ===== Mobile overhaul 2026-07-14 — footer sitemap tap targets + brand legibility + disclaimer contrast =====
 * Audit (DOM measurement @390px, footer present on all 7 content-group pages): .an-sitemap-group a
 * boxes were ~350x23px with only an 11px row gap — roughly half the 44px touch-target guideline,
 * with adjacent policy/page links close enough for a real thumb to mis-tap. Make each link a
 * full-width block row with its own vertical padding so the tap target itself reaches ~44px; the
 * row padding now supplies the visual rhythm so the group gap comes down to compensate. */
@media (max-width: 800px) {
  .an-sitemap-group { gap: 2px; }
  .an-sitemap-group a { display: block; min-height: 44px; padding: 11px 0; line-height: 1.3; }
}

/* Brand wordmark subtitle ("NIKAH SOCIAL ENTERPRISE") measured 9-9.5px computed font-size at
 * 390px on every page (header + footer) — below comfortably-legible body text and reads as a
 * blurred sliver on a real phone. Bump mobile-only; desktop keeps the original refined micro-type. */
@media (max-width: 800px) {
  .an-brand-name .t2, .an-footer-brand .t2 { font-size: 11px; letter-spacing: .2em; }
}

/* Footer legal disclaimer — 11px at ~34% opacity near-white on the dark maroon footer measured
 * too low-contrast/too small for a legally-relevant line on mobile. Keep it visually quiet per the
 * original design intent (still smaller/dimmer than body copy) but raise the floor so it is
 * actually legible on a phone. */
@media (max-width: 800px) {
  .an-footer-disclaimer { font-size: 12px; color: rgba(250,246,241,.5); }
}

/* ===== Mobile overhaul 2026-07-14 — .an-nav mobile scroll affordance + touch targets =====
   Audit: on <=800px, .an-nav (line ~45) is a horizontally-scrolling strip (overflow-x:auto)
   with the scrollbar deliberately hidden (scrollbar-width:none / ::-webkit-scrollbar{display:
   none}) and no other visual cue, so the clipped trailing item reads as broken/truncated text
   rather than "swipe for more". Also .an-nav a (line 15) declared no vertical padding, so its
   tap target was only the ~18px text line-box, under the ~44px minimum touch target.
   Fix is CSS-only (no markup change), scoped to the existing <=800px breakpoint so the
   >=801px desktop nav is completely untouched:
   - restore a thin, visible scrollbar as the primary affordance (overrides the hidden-
     scrollbar rule earlier in this same media query further down the cascade)
   - soft mask fade at the trailing edge as a secondary "more content" cue
   - small end padding so the last label never sits flush against the viewport edge
   - >=44px min-height touch target on each link, via padding (font-size unchanged) */
@media (max-width: 800px) {
  .an-nav {
    scrollbar-width: thin;
    scrollbar-color: rgba(94,27,38,.38) transparent;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), rgba(0,0,0,.4) 100%);
            mask-image: linear-gradient(to right, #000 calc(100% - 22px), rgba(0,0,0,.4) 100%);
    padding-inline-end: 14px;
  }
  .an-nav::-webkit-scrollbar { display: block; height: 4px; }
  .an-nav::-webkit-scrollbar-track { background: transparent; }
  .an-nav::-webkit-scrollbar-thumb { background: rgba(94,27,38,.38); border-radius: 4px; }
  .an-nav a { min-height: 44px; display: inline-flex; align-items: center; padding: 4px 2px; }
}

/* ===== Mobile overhaul 2026-07-14 — home group =====
 * Finding (HIGH, / and /en/ home): the 3 hero CTAs (.an-hero-ctas, line ~30) flex-wrap on
 * narrow phones into "row 1: one wide gold button" + "row 2: the two ghost buttons". On a
 * real device the browser's own address bar eats ~50-90px of the reported viewport height
 * on first paint (before the user scrolls), so that second CTA row lands directly under the
 * fixed .an-mobilebar (line ~54) and its text reads as cut off/covered. A flat headless
 * screenshot at a fixed 844px doesn't reproduce this (no address-bar chrome to collapse),
 * but re-testing at a shorter effective viewport (~750px, simulating the address bar
 * showing) confirms the overlap. Fix: reserve a fixed clearance band below the CTA row on
 * mobile so the last CTA is always comfortably above where the bar can reach, regardless of
 * exactly how much chrome the visiting browser collapses. CSS-only, no markup change,
 * scoped to <=800px so desktop (single-row CTAs, no fixed bar) is untouched. */
@media (max-width: 800px) {
  .an-hero-ctas { margin-bottom: 96px; }
}

/* Finding (HIGH, / and /en/ home; MEDIUM, service cards): the hero photo (.an-hero-photo
 * img.photo, line ~39) and the first service-card photos (.an-svc-card img, line ~93) are
 * rewritten by the site-wide image-lazyload plugin into <img class="... lazyload" src=
 * "data:image/gif..transparent" data-src="realphoto.jpg">. While that placeholder gif is
 * showing (above-the-fold on the hero, so this is visible on first paint before the real
 * photo swaps in), the reserved height (already correctly sized via the explicit
 * height/object-fit rules above) renders fully transparent, so it just shows the section's
 * own background through it — reading as a broken/empty block rather than "photo loading".
 * We don't control the plugin markup (functions.php enqueue-only / no markup changes per
 * scope), so this is a CSS-only placeholder treatment on the existing `.lazyload` class the
 * plugin already adds: a warm brand-toned gradient (not the raw section background) so the
 * reserved box always reads as "a photo is here" even before/if the real image loads. Once
 * the plugin's JS swaps the class to `.lazyloaded` the real photo fully covers this and it
 * has no effect. NOTE: the real fix (skip-lazyload / eager-load for above-the-fold images)
 * is a plugin-config or functions.php change outside this CSS-only round's scope — flagged
 * for a follow-up ticket, not fixed here. */
@media (max-width: 800px) {
  .an-hero-photo img.photo.lazyload,
  .an-svc-card img.lazyload {
    background: linear-gradient(135deg, rgba(198,161,91,.32), rgba(94,27,38,.5)) !important;
  }
}