@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Arabic:wght@500;600;700&display=swap');

:root {
  --ink: #142f4f;
  --blue: #234e87;
  --muted: #68778a;
  --line: #e8e4dc;
  --paper: #f7f5f1;
  --sky: #f0f4f7;
  --midnight: #09223e;
  --midnight-2: #102f51;
  --gold: #b99a6a;
  --gold-light: #e4d6bd;
  --ivory: #fcfbf8;
}

html {scroll-behavior: smooth}
body {background: var(--paper); color: var(--ink)}
body::before {content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .35; background-image: radial-gradient(#b8b3a8 0.45px, transparent 0.45px); background-size: 8px 8px}
button, a {transition: color .2s ease, background .2s ease, border-color .2s ease, transform .25s ease, box-shadow .25s ease}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {outline: 2px solid var(--gold); outline-offset: 3px}
h1, h2, h3, .entry-grid strong, .clinic-card h3, .person-name {font-family: 'Noto Serif Arabic', 'IBM Plex Sans Arabic', serif}
h2 {font-weight: 600; letter-spacing: -.025em}

header {background: var(--ivory); border-bottom: 1px solid #e8e4dc; min-height: 92px; box-shadow: none; gap: 14px}
header .brand img {width: 175px; height: 58px}
header .doctor-photo {width: 43px; height: 43px; border: 2px solid var(--gold-light); border-radius: 50%; box-shadow: 0 0 0 4px #f2ede4}
header strong {font-weight: 600; letter-spacing: -.02em}
header small {color: #7c8791; letter-spacing: .015em}
.updated {border: 1px solid var(--line); background: #fff; padding: 7px 12px; border-radius: 999px; color: #6e7a88}
main {max-width: 1510px; padding-top: 36px}
.page-title {padding: 0 4px 24px; margin-bottom: 0; border-bottom: 1px solid var(--line)}
.page-title h1 {font-size: clamp(29px, 2.5vw, 42px); color: var(--midnight); line-height: 1.35; font-weight: 600}
.eyebrow {color: var(--gold); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700}
.page-title p:last-child {color: var(--muted); font-size: 14px}
.primary {background: var(--midnight); border-radius: 0; padding: 12px 20px; font-weight: 600; color: #fff; box-shadow: 0 8px 20px #09223e15}
.primary:hover {background: #204b77; transform: translateY(-2px)}
.main-nav {position: sticky; top: 0; z-index: 12; margin: 0 0 28px; border: 0; border-bottom: 1px solid #d9d9d4; border-radius: 0; background: #f7f5f1ed; backdrop-filter: blur(18px); box-shadow: none; padding: 8px 0; gap: 9px}
.main-nav button {font-size: 13px; color: #69788a; padding: 9px 19px; border-radius: 999px}
.main-nav button[aria-pressed=true] {background: var(--midnight); color: #fff; box-shadow: 0 4px 14px #09223e22}
.main-nav button:hover:not([aria-pressed=true]) {color: var(--ink); background: #e9e6de}
.main-nav span {background: #ffffff25; color: inherit; border-radius: 99px}

.hero {isolation: isolate; min-height: 485px; padding: clamp(35px, 4.6vw, 72px); border: 1px solid #0c335b; border-radius: 3px; background: radial-gradient(circle at 82% 55%, #264e75 0%, transparent 37%), linear-gradient(118deg, #0b2a49 0%, #08213e 57%, #061b33 100%); color: #fff; box-shadow: 0 25px 70px #09223e28; gap: 50px}
.hero::before {content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-radial-gradient(circle at 83% 49%, transparent 0 39px, #d6c3a20c 40px 41px); opacity: .9; pointer-events: none}
.hero::after {height: 2px; background: linear-gradient(90deg, transparent, #c7ab79 50%, transparent)}
.hero>div {max-width: 780px}
.hero .eyebrow {display: inline-flex; align-items: center; gap: 12px; color: var(--gold-light); font-size: 12px; letter-spacing: .1em}
.hero .eyebrow::before {content: ""; width: 34px; height: 1px; background: var(--gold)}
.hero h2 {font-size: clamp(42px, 4.7vw, 77px); font-weight: 500; line-height: 1.18; margin: 25px 0 20px; color: #fff; letter-spacing: -.05em}
.hero p {font-size: 16px; line-height: 2; color: #ccd8e4; max-width: 670px}
.hero-search {width: min(100%, 620px); background: #fff; border: 1px solid #dbc9aa; border-radius: 3px; box-shadow: 0 15px 38px #020c172f; padding: 6px}
.hero-search input {height: 49px; color: var(--midnight)}
.hero-search button {background: var(--gold); color: var(--midnight); border-radius: 1px; font-weight: 700; padding: 11px 27px}
.hero-search button:hover {background: #d1b481; color: var(--midnight)}
.hero-actions {margin-top: 20px; gap: 8px; flex-wrap: wrap}
.hero-actions .secondary {color: #f7f3eb; border: 1px solid #afc4d349; background: #ffffff12; padding: 8px 15px; border-radius: 2px}
.hero-actions .secondary:hover {background: #ffffff22; border-color: #d7e1e9}
.hero-photo {width: 130px; height: 130px; object-fit: cover; align-self: center; margin-right: auto; border: 3px solid var(--gold-light); border-radius: 50%; box-shadow: 0 0 0 14px #ffffff0b, 0 0 0 15px #ddc99e3d, 0 20px 60px #0004}
.hero-caption {position: absolute; bottom: 33px; left: 36px; color: #d7c29c; font: italic 16px/1.4 Georgia, serif; letter-spacing: .03em; margin: 0}
.overview-stats {gap: 0; margin: 0 0 37px; background: var(--ivory); border: 1px solid var(--line); border-top: 0; box-shadow: 0 16px 38px #0e28420c}
.overview-stats article {border: 0; border-left: 1px solid var(--line); border-top: 0; box-shadow: none; border-radius: 0; padding: 20px 30px}
.overview-stats article:last-child {border-left: 0}
.overview-stats strong {font: 500 34px/1.1 Georgia, serif; color: var(--midnight)}
.overview-stats span {display: block; margin-top: 9px; font-size: 12px; color: var(--muted)}
.notice {background: #f3f5f4; border-color: #dfdfd9; border-right: 3px solid var(--gold); border-radius: 2px; color: #536579; line-height: 1.9}
#audit-progress {margin: 0 0 49px}

.spotlight {padding: 32px 0 43px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 0 48px}
.spotlight-head {display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 23px}
.spotlight-head h2 {font-size: clamp(25px, 2.6vw, 36px); line-height: 1.4}
.spotlight-head p:last-child {color: var(--muted); font-size: 13px; margin: 5px 0 0}
.spotlight-list {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px}
.spotlight-card {display: flex; flex-direction: column; text-align: right; background: var(--ivory); color: var(--ink); padding: 23px 24px 20px; border: 1px solid #dedbd4; border-radius: 2px; min-height: 235px}
.spotlight-card:hover {transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 15px 35px #0e284212}
.spotlight-index {font: 11px/1.4 Georgia, 'IBM Plex Sans Arabic', sans-serif; color: #ab966f; margin-bottom: 23px}
.spotlight-person {display: flex; align-items: center; gap: 14px}
.spotlight-person strong {font: 600 18px 'Noto Serif Arabic', serif}
.person-photo.feature, .person-photo-fallback.feature {width: 55px; height: 55px; border-radius: 50%; border: 2px solid #d8c6a9}
.spotlight-facts {display: flex; gap: 22px; flex-wrap: wrap; padding: 20px 0; margin-top: 15px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px}
.spotlight-facts b {display: block; color: var(--midnight); font: 600 18px Georgia, Arial}
.spotlight-cta {margin-top: auto; font-size: 12px; color: var(--blue)}
.entry-grid {gap: 15px}
.entry-grid>button {border-radius: 2px; min-height: 240px; padding: 28px; box-shadow: none; background: var(--ivory); border-color: #dfddd6}
.entry-grid>button:nth-child(2) {background: var(--midnight); color: #fff; border-color: var(--midnight)}
.entry-grid>button:nth-child(2) p {color: #bfcdd9}
.entry-grid>button:nth-child(2) b {color: var(--gold-light)}
.entry-grid>button:hover {border-color: var(--gold); box-shadow: 0 17px 35px #0e284214; transform: translateY(-4px)}
.entry-grid strong {font-size: 21px}
.entry-grid p {line-height: 1.9}
.entry-grid b {font-size: 12px}
.entry-icon {color: var(--gold); margin-bottom: 25px; font-size: 12px}
.brief {border-radius: 2px; background: #fff; padding: 32px}
.brief.soft {background: #ecefe9}
.brief h3 {font-size: 21px}
.text-button {color: var(--blue); font-weight: 600; font-size: 12px}
.text-button:hover {color: var(--gold)}

#page-people, #page-archive, #page-method {animation: reveal .35s ease both}
@keyframes reveal {from {opacity: 0; transform: translateY(9px)} to {opacity: 1; transform: translateY(0)}}
.section-head h2 {font-size: clamp(26px, 2.4vw, 35px)}
.view-switch {background: #eae7e0; border-radius: 2px; padding: 3px}
.view-switch button {border-radius: 2px; padding: 8px 17px}
.view-switch button[aria-pressed=true] {background: var(--midnight); color: #fff; box-shadow: none}
.discovery-bar {display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 24px 0 14px}
.discovery-bar>span {font-size: 12px; color: #8a7962; font-weight: 600; margin-left: 6px}
.discovery-chip {border: 1px solid #d9d2c5; border-radius: 99px; background: #fff; color: #51647a; padding: 7px 14px; font-size: 12px}
.discovery-chip:hover {border-color: var(--gold); color: var(--midnight)}
.discovery-chip[aria-pressed=true] {background: var(--midnight); border-color: var(--midnight); color: #fff}
.toolbar {border-radius: 2px; background: var(--ivory); border-color: #e2ddd3; box-shadow: 0 12px 30px #0e284208; padding: 21px}
.toolbar label {color: #697789; font-weight: 600}
.toolbar input, .toolbar select, .clinic-explorer input {border-radius: 2px; border-color: #dcd9d2; background: #fff; height: 47px}
.toolbar input:focus, .toolbar select:focus, .clinic-explorer input:focus {border-color: var(--gold); outline: 2px solid #b99a6a30}
.active-filters span {border-radius: 99px; background: #eee9df; color: #6f5c3c}
.result-line {font-weight: 600; color: var(--ink)}
.people-cards {gap: 14px}
.influencer-card {position: relative; background: var(--ivory); border-color: #dfddd7; border-radius: 2px; padding: 23px; box-shadow: 0 4px 14px #102c4608}
.influencer-card::before {content: ""; position: absolute; right: -1px; left: -1px; top: -1px; height: 2px; background: linear-gradient(90deg, transparent, #b99a6a, transparent); opacity: 0; transition: opacity .2s}
.influencer-card:hover {border-color: #bfa987; box-shadow: 0 18px 42px #102c4614; transform: translateY(-3px)}
.influencer-card:hover::before {opacity: 1}
.person-photo.card, .person-photo-fallback.card {width: 64px; height: 64px; border: 2px solid #e7dcc8; box-shadow: none}
.person-photo-fallback {background: #e9ebea; color: #597390}
.person-name {font-size: 17px; font-weight: 600; line-height: 1.55}
.card-heading small {color: #8b97a2}
.card-badges {margin-top: 18px; gap: 6px}
.status, .fit-badge, .clinic-audit-badge {border-radius: 99px; padding: 4px 9px; font-size: 10px; font-weight: 600}
.status {background: #e9eef1; color: #54708d}
.status.prior {background: #e8ede4; color: #45684e}
.fit-badge {background: #f1ebe0; border-color: #e9dbc5; color: #735c39}
.clinic-audit-badge.verified_ad {background: #edf3eb; border-color: #d3dfce; color: #48694e}
.card-number {border-top: 1px solid var(--line); padding-top: 16px; margin-top: 20px}
.card-number strong {color: var(--midnight); font: 600 29px/1.2 Georgia, Arial}
.platform-summary a {background: #f0f1ee; border: 1px solid #e9e9e3; border-radius: 2px}
.card-audience {background: #f1f2ee; border: 1px solid #e7e8e1; border-radius: 2px; padding: 12px; gap: 11px}
.card-audience b {font-size: 14px; color: var(--midnight)}
.card-ads {margin-bottom: 15px}
.brand-tags button {background: #f1ede6; border-color: #e9e1d4; color: #6d5635; border-radius: 2px; padding: 5px 9px}
.brand-tags button:hover {background: #e9dec9}
.card-actions {display: flex; align-items: stretch; gap: 9px; border-top: 1px solid var(--line); padding-top: 12px; margin-top: auto}
.card-open {flex: 1; width: auto; border: 0; padding: 0 4px; text-align: right; font-weight: 600; color: var(--blue)}
.compare-toggle {border: 1px solid #d5d2ca; background: #fff; color: #617081; padding: 7px 12px; border-radius: 2px; font-size: 11px; white-space: nowrap}
.compare-toggle:hover, .compare-toggle.selected {background: var(--midnight); border-color: var(--midnight); color: #fff}
.table-actions {display: flex; flex-wrap: wrap; gap: 6px}
.table-wrap {border-radius: 2px; border-color: #e2ddd3}
th {background: #eaece9; color: #647383}
td {border-color: #ebe8e1}
.detail-button {border-radius: 2px}
.pagination button {border-radius: 2px}

.clinic-explorer, .clinic-card, .research-notes, .archive-item {border-radius: 2px; border-color: #e3ded4}
.clinic-card {display: flex; flex-direction: column; background: var(--ivory); min-height: 205px}
.clinic-card:hover {border-color: var(--gold); box-shadow: 0 15px 35px #102c4612}
.clinic-index {color: var(--gold)}
.clinic-card h3 {font-size: 20px}
.clinic-card>strong {color: var(--midnight)}
.clinic-card-heading {display: flex; align-items: center; gap: 16px; margin: 13px 0 16px}
.clinic-card.has-logo .clinic-card-heading {display: grid; justify-items: center; gap: 12px; min-height: 165px; margin: 2px 0 18px; text-align: center}
.clinic-card-heading h3 {margin: 0; min-width: 0; line-height: 1.5}
.clinic-logo {display: grid; place-items: center; width: 100%; height: 118px; overflow: hidden}
.clinic-logo img {display: block; max-width: min(100%, 230px); max-height: 108px; width: auto; height: auto; object-fit: contain}
.clinic-logo img[src$="symphony.png"] {background: #0c0b0b}
.clinic-history-total {display: block; margin-top: 7px; color: var(--midnight); font-size: 13px; line-height: 1.55}
.clinic-history-total b {font-family: Arial, sans-serif; font-size: 15px}
.clinic-history-total small {display: block; color: var(--muted); font-size: 11px}
.clinic-card .clinic-link {margin-top: auto; padding-top: 10px}
.archive-item>summary {font-family: 'Noto Serif Arabic', serif}
.archive-item[open]>summary {background: #f0efe9}
.recommend {background: var(--midnight); border-radius: 2px; border-top: 2px solid var(--gold)}
.recommend p {color: #c9d4dc}

dialog {width: min(870px, calc(100% - 24px)); background: var(--ivory); border-radius: 3px; box-shadow: 0 35px 100px #071a3280; padding: 36px 40px}
dialog::backdrop {background: #071a32b8; backdrop-filter: blur(10px)}
dialog .close {background: #ece9e2; color: var(--midnight); border-radius: 2px; left: 20px; top: 20px}
#detail[open] {display: flex; flex-direction: column; padding: 0; max-height: min(92dvh, 920px); overflow: hidden}
#detail-content {min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; padding: 36px 40px 30px; scrollbar-color: #c6b99e transparent}
#detail .detail-close {position: absolute; z-index: 5; left: 20px; top: 20px; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid #fff6; background: #f8f6ef; color: var(--midnight); font: 30px/1 Arial; box-shadow: 0 5px 18px #061a3455; cursor: pointer}
#detail .detail-close:hover {background: var(--gold-light); transform: scale(1.04)}
.detail-footer {display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 24px; background: var(--ivory); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px #09223e08}
.detail-footer span {color: #7f8a94; font-size: 11px}
.detail-done {background: var(--midnight); color: #fff; border: 1px solid var(--midnight); padding: 9px 19px; border-radius: 2px; font-size: 12px; font-weight: 600}
.detail-done:hover {background: var(--blue)}
.detail-quicknav {position: sticky; top: -36px; z-index: 2; display: flex; gap: 6px; padding: 12px 0; margin: 16px 0 12px; background: linear-gradient(var(--ivory) 80%, #fcfbf800)}
.detail-quicknav button {background: #f0eee8; color: var(--midnight); border: 1px solid #dedbd2; padding: 8px 14px; font-size: 12px; border-radius: 2px}
.detail-quicknav button:hover {background: var(--midnight); color: #fff}
.detail-identity {background: var(--midnight); color: #fff; margin: -36px -40px 22px; padding: 35px 40px 30px; border-bottom: 3px solid var(--gold)}
.detail-identity h2 {color: #fff}
.detail-identity .eyebrow {color: #d4bc91}
.person-photo.detail, .person-photo-fallback.detail {width: 88px; height: 88px; border-color: var(--gold-light)}
.snap-verification-note, .clinic-audit-note {border-radius: 2px; background: #f0f2ef; border-color: #deded8}
.clinic-audit-note h3 {color: var(--midnight)}
.detail-metrics article, .audience, .gender-counts article, .country-list, .growth-stats, .ad-record {border-color: #e6e1d8; border-radius: 2px}
.detail-metrics strong, .growth-stats strong {color: var(--midnight)}
.audience {background: #f1f2ee}
.ad-record>b {color: #785f3d}
.profile-actions a {border-radius: 2px; border-color: #dcd6ca}
.profile-actions a:hover {border-color: var(--gold); background: #fbf7ef}

.compare-tray {position: fixed; z-index: 35; bottom: 24px; right: 50%; transform: translateX(50%); width: min(950px, calc(100% - 30px)); display: flex; align-items: center; justify-content: space-between; gap: 22px; background: var(--midnight); color: #fff; border: 1px solid #b99a6a; border-radius: 3px; padding: 16px 22px; box-shadow: 0 18px 55px #071a3260}
.compare-overline {display: block; font-size: 10px; color: var(--gold-light); margin-bottom: 3px}
.compare-tray strong {font: 600 14px 'Noto Serif Arabic', serif}
.compare-actions {display: flex; gap: 10px; flex: none}
.compare-actions button {padding: 9px 16px; border-radius: 2px; font-size: 12px}
.compare-clear {color: #d7e1e8; background: none; border: 1px solid #ffffff44}
.compare-open {background: var(--gold); color: var(--midnight); border: 1px solid var(--gold); font-weight: 700}
.compare-open:disabled {opacity: .55; cursor: default}
.compare-dialog {width: min(1120px, calc(100% - 24px)); max-height: 90vh}
.compare-heading {border-bottom: 1px solid var(--line); margin-bottom: 22px; padding-bottom: 13px}
.compare-heading h2 {font-size: 30px}
.compare-heading p:last-child {margin: 0}
.compare-content {display: grid; grid-template-columns: repeat(3, minmax(235px, 1fr)); gap: 14px; overflow-x: auto}
.compare-content.two {grid-template-columns: repeat(2, minmax(260px, 1fr))}
.compare-person {border: 1px solid #e1dcd1; background: #fff; display: flex; flex-direction: column; min-width: 235px}
.compare-person-head {display: flex; gap: 13px; align-items: center; background: var(--midnight); color: #fff; min-height: 116px; padding: 17px}
.compare-person-head .person-photo.detail, .compare-person-head .person-photo-fallback.detail {width: 61px; height: 61px}
.compare-person-head h3 {color: #fff; margin: 0; font-size: 17px; line-height: 1.5}
.compare-person-head span[dir] {font: 11px Arial; color: #c2d0dc}
.compare-person-body {flex: 1}
.compare-row {padding: 10px 15px; border-top: 1px solid #ece8df; min-height: 71px}
.compare-row>span {display: block; color: #697789; font-size: 11px}
.compare-row strong {display: block; color: var(--midnight); font-size: 14px; line-height: 1.5}
.compare-row small {display: block; font-size: 10px; color: #8a8f92; line-height: 1.55}
.compare-profile {margin: 13px; background: #f2ede3; color: var(--midnight); border: 1px solid #e6dac6; padding: 9px; font-size: 12px}
.compare-profile:hover {background: var(--gold-light)}

footer {border-color: #dcd8cf; padding-bottom: 30px}

@media (max-width: 1100px) {
  .spotlight-list {grid-template-columns: repeat(2, minmax(0, 1fr))}
  .hero {min-height: 430px}
  .hero h2 {font-size: clamp(40px, 5.5vw, 64px)}
  .hero-photo {width: 110px; height: 110px}
  .compare-content {grid-template-columns: repeat(3, minmax(260px, 1fr))}
}
@media (max-width: 680px) {
  body::before {display: none}
  header {min-height: 72px}
  header .brand img {width: 118px; height: 46px}
  header .doctor-photo {display: none}
  main {padding: 22px 4% 0}
  .page-title {display: block; padding-bottom: 17px}
  .page-title h1 {font-size: 29px}
  .page-title>.primary {margin-top: 16px; padding: 8px 13px; font-size: 11px}
  .main-nav {top: 0; margin-bottom: 20px; gap: 4px; padding: 7px 0}
  .main-nav button {padding: 8px 12px; font-size: 12px}
  .hero {min-height: 0; padding: 37px 24px 32px; gap: 0}
  .hero h2 {font-size: clamp(36px, 10vw, 52px); line-height: 1.27; margin: 18px 0}
  .hero p {font-size: 13px}
  .hero-photo, .hero-caption {display: none}
  .hero-search input {height: 42px}
  .hero-actions .secondary {font-size: 11px}
  .overview-stats {grid-template-columns: repeat(2, 1fr); gap: 0; margin-bottom: 25px}
  .overview-stats article {border-bottom: 1px solid var(--line); padding: 17px}
  .overview-stats strong {font-size: 28px}
  .spotlight {margin: 0 0 34px; padding: 20px 0 31px}
  .spotlight-head {align-items: start; flex-direction: column; gap: 10px}
  .spotlight-list {grid-template-columns: 1fr}
  .spotlight-card {min-height: 0; padding: 18px}
  .spotlight-index {margin-bottom: 12px}
  .entry-grid>button {min-height: 0}
  .discovery-bar {align-items: start}
  .discovery-bar>span {width: 100%}
  .toolbar {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px}
  .toolbar .search-label {grid-column: 1/-1}
  .toolbar label:last-child {grid-column: auto}
  .toolbar input, .toolbar select {font-size: 12px}
  .card-actions {gap: 4px}
  .card-open {font-size: 12px}
  .influencer-card {padding: 20px}
  dialog {padding: 25px 18px}
  #detail-content {padding: 25px 18px 22px}
  #detail .detail-close {left: 10px; top: 12px; width: 46px; height: 46px}
  .detail-footer {padding: 10px 15px}
  .detail-footer span {font-size: 10px}
  .detail-done {padding: 8px 11px; white-space: nowrap}
  .detail-quicknav {top: -25px}
  .detail-identity {margin: -25px -18px 19px; padding: 28px 20px}
  .detail-identity h2 {font-size: 22px}
  .compare-tray {bottom: 10px; padding: 11px 13px; gap: 9px}
  .compare-tray strong {font-size: 12px; line-height: 1.4}
  .compare-actions {gap: 5px}
  .compare-actions button {padding: 8px; font-size: 11px}
  .compare-content {display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -18px; padding: 0 18px 15px}
  .compare-content.two {display: flex}
  .compare-person {flex: 0 0 85%; scroll-snap-align: center}
}
@media (prefers-reduced-motion: reduce) {
  html {scroll-behavior: auto}
  button, a, #page-people, #page-archive, #page-method {transition: none !important; animation: none !important}
}
@media print {
  .compare-tray, .discovery-bar, .spotlight {display: none !important}
  .hero {background: #fff; color: #111; min-height: 0}
  .hero h2, .hero p {color: #111}
}

.decision-framework {margin: 26px 0 54px; padding: 34px; background: var(--ivory); border: 1px solid #dedbd4; border-top: 3px solid var(--gold)}
.decision-intro {max-width: 810px; margin-bottom: 24px}
.decision-intro h3 {font-size: 25px; margin-bottom: 8px}
.decision-intro p:last-child {color: var(--muted); margin-bottom: 0}
.criterion-grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #e6e1d8; border: 1px solid #e6e1d8}
.criterion-grid article {background: #fff; min-height: 158px; padding: 20px}
.criterion-grid b {display: block; color: var(--gold); font: 600 26px Georgia, serif; margin-bottom: 8px}
.criterion-grid strong {display: block; color: var(--midnight); font-size: 16px; margin-bottom: 5px}
.criterion-grid span {color: var(--muted); font-size: 12px; line-height: 1.8}
.decision-rule {margin: 21px 0 0; padding: 15px 18px; border-right: 3px solid var(--gold); background: #f5f1e9; color: #43566a; font-size: 13px}
.decision-rule b {color: var(--midnight)}
.decision-slate-section {margin-bottom: 52px}
.decision-group {margin: 28px 0 42px}
.decision-group-head {display: flex; align-items: baseline; gap: 18px; padding-bottom: 10px; border-bottom: 1px solid #dcd7cc; margin-bottom: 15px}
.decision-group-head h3 {margin: 0; color: var(--midnight); font-size: 20px}
.decision-group-head p {margin: 0; color: var(--muted); font-size: 12px}
.decision-grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px}
.decision-card {display: flex; flex-direction: column; gap: 12px; padding: 21px; border: 1px solid #dedbd4; background: var(--ivory); min-width: 0}
.decision-card-head {display: flex; gap: 13px; align-items: center}
.decision-card-head h4 {font: 600 17px 'Noto Serif Arabic', serif; margin: 0; color: var(--midnight)}
.decision-card-head small {display: block; text-align: right; color: var(--muted); font-size: 11px}
.decision-tier {display: block; color: #9a7440; font-size: 11px; font-weight: 700}
.decision-facts {display: flex; flex-wrap: wrap; gap: 7px}
.decision-facts span {padding: 5px 9px; background: #f3f0e9; color: #697687; font-size: 11px}
.decision-facts b {color: var(--midnight); margin-right: 3px}
.decision-card p {color: #394e64; font-size: 13px; line-height: 1.8; margin: 0}
.decision-card .decision-check {color: var(--muted); font-size: 12px; border-top: 1px solid #ebe7df; padding-top: 10px; margin-top: auto}
.decision-check b {color: #987344}
.decision-card button {align-self: flex-start; border: 0; background: transparent; color: var(--blue); padding: 3px 0; font-size: 12px}
.decision-card button:hover {color: #9a7440}
@media(max-width:1000px){.criterion-grid,.decision-grid {grid-template-columns: repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.decision-framework {padding: 20px; margin-bottom: 38px}.decision-intro h3 {font-size: 21px}.criterion-grid,.decision-grid {grid-template-columns: 1fr}.criterion-grid article {min-height: 0}.decision-group-head {display: block}.decision-group-head p {margin-top: 4px}.decision-slate-section>.section-head {display: block}.decision-slate-section>.section-head button {margin-top: 12px}}

.agency-credit{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}.agency-credit a{display:inline-flex;align-items:center}.agency-credit img{display:block;width:40px;height:auto;mix-blend-mode:multiply}.agency-credit a:hover img{opacity:.82}@media(max-width:640px){footer{align-items:flex-start;flex-wrap:wrap}.agency-credit img{width:36px}}