/* Public website layer. Tokens and components: _content/MallPublicRelations.UI/im.css */

body { background: var(--im-bg); }
.container { inline-size: 100%; max-inline-size: var(--im-content-width); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.site-main { min-block-size: 60vh; padding-block: var(--im-space-8) var(--im-space-12); }
.page-intro { padding-block-start: var(--im-space-8); }

/* ---------- Header ---------- */
.site-header { position: sticky; inset-block-start: 0; z-index: var(--im-z-sticky); background: var(--im-glass-solid); backdrop-filter: blur(10px); border-block-end: 1px solid var(--im-border); }
.site-header-inner { display: flex; align-items: center; gap: var(--im-space-4); min-block-size: var(--im-header-height); }
.site-brand { display: flex; align-items: center; gap: var(--im-space-3); color: var(--im-navy-950); text-decoration: none; flex: none; }
.site-brand:hover { color: var(--im-navy-950); }
.site-brand strong { display: block; font-size: var(--im-text-md); line-height: 1.4; }
.site-brand small { display: block; font-size: var(--im-text-xs); color: var(--im-text-secondary); line-height: 1.3; }
.site-actions { display: flex; align-items: center; gap: var(--im-space-2); }
.site-menu { display: none; margin-inline-start: auto; }
.site-menu > summary { list-style: none; cursor: pointer; }
.site-menu > summary::-webkit-details-marker { display: none; }
/* Six menu entries need about 1160px beside the brand; below that the header uses the menu panel. */
@media screen and (max-width: 1200px) {
  .site-nav, .site-actions .btn-cta { display: none; }
  .site-menu { display: block; }
  .site-actions { margin-inline-start: 0; }
  /* Brand block must shrink instead of forcing the header (and the mobile menu button) off-screen. */
  .site-brand { flex: 1 1 auto; min-inline-size: 0; }
  .site-brand > span { min-inline-size: 0; overflow: hidden; }
  .site-brand strong, .site-brand small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media screen and (max-width: 720px) {
  /* Phones: smaller brand name and tagline so the full brand fits beside the search and menu buttons. */
  .site-brand { gap: var(--im-space-2); }
  .site-brand .brand-logo { inline-size: 2.25rem; block-size: 2.25rem; }
  .site-brand strong { font-size: var(--im-text-xs); line-height: 1.35; }
  .site-brand small { font-size: var(--im-text-2xs); line-height: 1.35; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
@media screen and (max-width: 360px) {
  .site-header-inner { gap: var(--im-space-2); }
  .site-brand { gap: var(--im-space-1); }
  .site-brand .brand-logo { inline-size: 2rem; block-size: 2rem; }
  .site-brand strong { font-size: var(--im-text-2xs); }
  /* Too little room for a readable tagline: it is left out rather than shrunk under 12px. */
  .site-brand small { display: none; }
}

/* Dark bands and pictures: the keyboard ring turns to the accent colour (im.css: --im-focus-on-dark). */
.hero, .article-hero, .home-slider, .page-hero, .contact-hero, .lightbox { --im-focus: var(--im-focus-on-dark); }
.btn-on-dark { background: transparent; color: #fff; border-color: var(--im-glass-4); }
.btn-on-dark:hover { background: var(--im-glass-1); color: #fff; }

/* ---------- Hero ---------- */
.hero { background: radial-gradient(1200px 400px at 85% -10%, rgba(215, 177, 111, .24), transparent 60%), linear-gradient(160deg, var(--im-navy-950), var(--im-blue-900) 85%); color: #dbe3f0; padding-block: clamp(3rem, 8vw, 5.5rem); }
.hero h1 { color: #fff; font-size: var(--im-text-display); max-inline-size: 20ch; margin-block-end: var(--im-space-4); }
.hero p { font-size: var(--im-text-lg); max-inline-size: 52ch; color: var(--im-on-dark-muted); }
.hero .eyebrow { color: var(--im-gold-500); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--im-space-3); margin-block-start: var(--im-space-6); }
.hero .btn-secondary { background: transparent; color: #fff; border-color: var(--im-glass-4); }
.hero .btn-secondary:hover:not([disabled]) { background: var(--im-glass-1); color: #fff; }
.btn-gold { background: var(--im-gold-500); color: var(--im-navy-950); }
.btn-gold:hover { background: #d4b271; color: var(--im-navy-950); }
.hero-links { display: flex; flex-wrap: wrap; gap: var(--im-space-2) var(--im-space-5); margin-block-start: var(--im-space-8); padding-block-start: var(--im-space-5); border-block-start: 1px solid var(--im-glass-2); font-size: var(--im-text-sm); }
.hero-links a { color: var(--im-on-dark); text-decoration: none; display: inline-flex; align-items: center; gap: var(--im-space-2); }
.hero-links a:hover { color: #fff; text-decoration: underline; }

/* ---------- Sections ---------- */
.section { padding-block: clamp(2.5rem, 6vw, 4rem); }
.section:not(.section-alt) + .section:not(.section-alt) { padding-block-start: 0; }
.section-alt { background: var(--im-surface); border-block: 1px solid var(--im-border); }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--im-space-3); margin-block-end: var(--im-space-6); }
.section-head h2 { font-size: var(--im-text-2xl); margin: 0; }
.section-head p { margin: var(--im-space-1) 0 0; color: var(--im-text-secondary); }
.section-head a { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: var(--im-space-1); }

/* ---------- Cards ---------- */
/* Columns follow the number of cards (auto-fit), so two cards never leave an empty third column; a lone card keeps a card width. */
.card-grid { display: grid; gap: var(--im-space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.card-grid > :only-child:not(.lead-card) { max-inline-size: 40rem; }
.entry-card { display: flex; flex-direction: column; gap: var(--im-space-2); background: var(--im-surface); border: 1px solid var(--im-border); border-radius: var(--im-radius-lg); padding: var(--im-space-5); position: relative; transition: border-color var(--im-duration), box-shadow var(--im-duration); min-inline-size: 0; }
.entry-card:hover { border-color: var(--im-border-strong); box-shadow: var(--im-shadow-md); }
.entry-card h3, .entry-card h2 { font-size: var(--im-text-lg); margin: 0; }
.entry-card h3 a, .entry-card h2 a { color: var(--im-navy-950); text-decoration: none; }
.entry-card h3 a::after, .entry-card h2 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.entry-card h3 a:hover, .entry-card h2 a:hover { color: var(--im-blue-800); }
.entry-card h3 a:focus-visible::after, .entry-card h2 a:focus-visible::after { box-shadow: var(--im-focus-shadow); }
.entry-card p { color: var(--im-text-secondary); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.entry-card .entry-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--im-space-2); font-size: var(--im-text-xs); color: var(--im-text-secondary); }
.entry-card .entry-foot { margin-block-start: auto; padding-block-start: var(--im-space-3); display: flex; align-items: center; justify-content: space-between; gap: var(--im-space-2); font-size: var(--im-text-xs); color: var(--im-text-secondary); }
.entry-card .entry-foot .progress, .entry-card .entry-foot a { position: relative; z-index: 1; }
.entry-card.is-featured { border-color: var(--im-gold-200); background: linear-gradient(180deg, var(--im-gold-50), var(--im-surface) 45%); }
.entry-card.lead-card { grid-column: 1 / -1; padding: var(--im-space-8); }
.entry-card.lead-card h3, .entry-card.lead-card h2 { font-size: var(--im-text-2xl); }
.entry-card.lead-card p { -webkit-line-clamp: 4; font-size: var(--im-text-lg); }

/* ---------- Filters (public) ---------- */
.filter-bar { background: var(--im-surface); border: 1px solid var(--im-border); border-radius: var(--im-radius-lg); padding: var(--im-space-4); margin-block-end: var(--im-space-6); display: grid; gap: var(--im-space-4); }
.filter-bar form { display: flex; flex-wrap: wrap; gap: var(--im-space-3); align-items: flex-end; }
.filter-bar .field { flex: 1 1 12rem; }
.filter-bar .field.grow { flex: 3 1 18rem; }
.pill-nav { display: flex; gap: var(--im-space-2); overflow-x: auto; padding-block-end: 2px; scrollbar-width: thin; }
.pill-nav a { display: inline-flex; align-items: center; min-block-size: 2.25rem; padding: 0 var(--im-space-4); border-radius: var(--im-radius-pill); border: 1px solid var(--im-control-border); background: var(--im-surface); color: var(--im-text); text-decoration: none; font-size: var(--im-text-sm); white-space: nowrap; }
.pill-nav a:hover { border-color: var(--im-blue-800); color: var(--im-blue-800); }
.pill-nav a[aria-current="true"] { background: var(--im-navy-950); border-color: var(--im-navy-950); color: #fff; }

/* ---------- Article ---------- */
.article { min-inline-size: 0; }
/* Page of one content item: a heading band in the brand colours, the text on a sheet that overlaps the band, and a side
   column (outline, details) that follows the reader. */
.article-hero { position: relative; overflow: hidden; padding-block: var(--im-space-8) calc(var(--im-space-12) + 3.5rem); background: linear-gradient(135deg, var(--im-navy-950), var(--im-blue-900)); color: #fff; }
.article-hero::before { content: ""; position: absolute; inset-inline-end: -7rem; inset-block-start: -9rem; inline-size: 26rem; block-size: 26rem; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .13), rgba(255, 255, 255, 0) 68%); }
.article-hero > .container { position: relative; z-index: 1; }
.article-hero h1 { max-inline-size: 56rem; color: #fff; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--im-space-2) var(--im-space-4); margin-block-start: var(--im-space-4); font-size: var(--im-text-sm); color: #d5dcea; }
.article-meta > * { display: inline-flex; align-items: center; gap: var(--im-space-1); }
.article-meta .chip { background: var(--im-glass-2); color: #fff; border-color: transparent; font-weight: 700; }
.article-hero .article-lead { max-inline-size: 60rem; margin-block-end: 0; color: #e3e9f3; }
.article-hero .ceo-quote { color: #e3e9f3; }
.article-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: var(--im-space-8); align-items: start; margin-block-start: -3.5rem; padding-block-end: var(--im-space-10); }
.article-main { min-inline-size: 0; padding: clamp(1.1rem, 3vw, 2.5rem); background: var(--im-surface); border: 1px solid var(--im-border); border-radius: calc(var(--im-radius-lg) * 1.25); box-shadow: var(--im-shadow-md); }
.article-main > .article-cover { margin: calc(clamp(1.1rem, 3vw, 2.5rem) * -1); margin-block-end: var(--im-space-8); }
.article-main > .article-cover .gallery-link { display: block; aspect-ratio: auto; background: transparent; cursor: zoom-in; }
.article-main > .article-cover img { aspect-ratio: 16 / 9; max-block-size: none; object-fit: cover; border-radius: calc(var(--im-radius-lg) * 1.25 - 1px) calc(var(--im-radius-lg) * 1.25 - 1px) 0 0; }
.article-main > .article-cover figcaption { padding-inline: clamp(1.1rem, 3vw, 2.5rem); }
.article-text > p:first-child { font-size: 1.1875rem; color: var(--im-navy-900); }
.article-topics { margin-block-start: var(--im-space-8); }
.article-back { margin-block-start: var(--im-space-8); }
.article-main .gallery { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.article-aside { position: sticky; inset-block-start: calc(var(--im-header-height) + var(--im-space-4)); display: grid; gap: var(--im-space-4); min-inline-size: 0; }
.article-card { padding: var(--im-space-5); background: var(--im-surface); border: 1px solid var(--im-border); border-radius: var(--im-radius-lg); box-shadow: var(--im-shadow-sm); }
.article-card h2 { display: flex; align-items: center; gap: var(--im-space-2); margin: 0 0 var(--im-space-3); padding-block-end: var(--im-space-3); border-block-end: 2px solid var(--im-gold-500); font-size: var(--im-text-md); }
.article-card h2 .icon { color: var(--im-gold-700); }
.article-outline ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: outline; }
.article-outline li { counter-increment: outline; }
.article-outline a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--im-space-2); align-items: baseline; padding: var(--im-space-2); border-radius: var(--im-radius-sm); color: var(--im-text); font-size: var(--im-text-sm); text-decoration: none; }
.article-outline a::before { content: counter(outline, persian); display: grid; place-items: center; inline-size: 1.5rem; block-size: 1.5rem; border-radius: 50%; background: var(--im-blue-50); color: var(--im-blue-800); font-size: var(--im-text-xs); font-weight: 700; }
.article-outline a:hover { background: var(--im-surface-muted); color: var(--im-blue-800); }
.article-facts { display: grid; gap: var(--im-space-2); margin: 0; }
.article-facts > div { display: flex; justify-content: space-between; gap: var(--im-space-3); font-size: var(--im-text-sm); }
.article-facts dt { color: var(--im-text-secondary); }
.article-facts dd { margin: 0; font-weight: 600; text-align: end; }
.article-facts dd a { display: inline-flex; align-items: center; min-block-size: var(--im-target-min); }
.article-related { padding-block-end: var(--im-space-12); }
.article-related > h2 { position: relative; padding-inline-start: var(--im-space-4); font-size: var(--im-text-2xl); }
.article-related > h2::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: .3em; inline-size: 5px; border-radius: 3px; background: var(--im-gold-500); }
@media screen and (max-width: 1000px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .article-aside { position: static; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
  .article-outline { display: none; }
}
@media screen and (max-width: 720px) {
  .article-hero { padding-block: var(--im-space-6) calc(var(--im-space-8) + 3.5rem); }
}
.article-header { margin-block-end: var(--im-space-6); }
.article-header h1 { font-size: var(--im-text-display); margin-block: var(--im-space-2) var(--im-space-3); }
.article-lead { font-size: var(--im-text-lg); color: var(--im-text-secondary); border-inline-start: 4px solid var(--im-gold-500); padding-inline-start: var(--im-space-4); margin-block: var(--im-space-4) var(--im-space-6); }
.article-section { margin-block-start: var(--im-space-10); padding-block-start: var(--im-space-6); border-block-start: 1px solid var(--im-border); }
.article-section h2 { font-size: var(--im-text-xl); }
.download-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--im-space-2); }
.download-list a { display: flex; align-items: center; gap: var(--im-space-3); padding: var(--im-space-3) var(--im-space-4); background: var(--im-surface); border: 1px solid var(--im-border); border-radius: var(--im-radius-md); text-decoration: none; color: var(--im-text); }
.download-list a:hover { border-color: var(--im-blue-800); }
.download-list .size { margin-inline-start: auto; font-size: var(--im-text-xs); color: var(--im-text-secondary); }

/* ---------- Gallery & lightbox ---------- */
.gallery { display: grid; gap: var(--im-space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }
.gallery figure { margin: 0; }
.gallery button { display: block; inline-size: 100%; padding: 0; border: 0; border-radius: var(--im-radius-md); overflow: hidden; background: var(--im-surface-muted); cursor: zoom-in; aspect-ratio: 4 / 3; }
.gallery img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.gallery figcaption { font-size: var(--im-text-xs); color: var(--im-text-secondary); margin-block-start: var(--im-space-1); }
.lightbox { inline-size: 100vw; block-size: 100dvh; max-inline-size: 100vw; max-block-size: 100dvh; margin: 0; padding: 0; border: 0; background: rgba(2, 6, 23, .95); color: #fff; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.lightbox:not([open]) { display: none; }
.lightbox[open] { animation: lb-in var(--im-duration) ease-out; }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
.lightbox::backdrop { background: rgba(2, 6, 23, .88); }
html.lightbox-open { overflow: hidden; }
.lightbox-top { display: flex; justify-content: space-between; align-items: center; gap: var(--im-space-3); padding: var(--im-space-3) var(--im-space-4); }
.lightbox-count { font-size: var(--im-text-sm); color: var(--im-on-dark-muted); font-variant-numeric: tabular-nums; }
.lightbox-tools { display: flex; flex-wrap: wrap; gap: var(--im-space-2); }
.lb-btn { display: inline-flex; align-items: center; gap: .45rem; min-block-size: 2.5rem; padding: .45rem .9rem; border: 1px solid var(--im-glass-3); border-radius: var(--im-radius-pill); background: var(--im-glass-1); color: #fff; font: inherit; font-size: var(--im-text-sm); font-weight: 600; text-decoration: none; cursor: pointer; transition: background var(--im-duration) ease, border-color var(--im-duration) ease; }
.lb-btn:hover { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .35); color: #fff; }
.lb-btn:focus-visible { outline: 3px solid var(--im-gold-500); outline-offset: 2px; }
.lb-btn[hidden] { display: none; }
.lb-btn svg { inline-size: 1.15rem; block-size: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.lightbox-main { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--im-space-3); padding-inline: var(--im-space-4); min-block-size: 0; }
.lb-side { flex-direction: column; min-inline-size: 4.5rem; padding-block: .8rem; border-radius: var(--im-radius-lg); }
.lb-side svg { inline-size: 1.75rem; block-size: 1.75rem; }
.lightbox-stage { position: relative; margin: 0; display: grid; gap: var(--im-space-3); justify-items: center; align-content: center; min-block-size: 0; block-size: 100%; overflow: auto; }
.lightbox-stage img { max-block-size: calc(100dvh - 13rem); max-inline-size: 100%; inline-size: auto; object-fit: contain; border-radius: var(--im-radius-md); box-shadow: var(--im-shadow-lightbox); cursor: zoom-in; transition: opacity var(--im-duration-slow) ease; }
.lightbox-stage.is-zoomed { align-content: start; justify-items: start; }
.lightbox-stage.is-zoomed img { max-block-size: none; max-inline-size: none; cursor: zoom-out; }
.lightbox-stage.is-loading img { opacity: .25; }
.lightbox-spinner { display: none; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 2.5rem; block-size: 2.5rem; margin: -1.25rem; border: 3px solid var(--im-glass-3); border-block-start-color: #fff; border-radius: 50%; animation: lb-spin .8s linear infinite; }
.lightbox-stage.is-loading .lightbox-spinner { display: block; }
@keyframes lb-spin { to { transform: rotate(360deg); } }
.lightbox-stage figcaption { max-inline-size: 60ch; text-align: center; font-size: var(--im-text-sm); line-height: 1.8; padding: .4rem .9rem; border-radius: var(--im-radius-pill); background: var(--im-glass-1); }
.lightbox-thumbs { display: flex; gap: var(--im-space-2); overflow-x: auto; padding: var(--im-space-3) var(--im-space-4) var(--im-space-4); justify-content: safe center; scrollbar-width: thin; }
.lightbox-thumbs[hidden] { display: none; }
.lightbox-thumbs button { flex: none; inline-size: 4.5rem; block-size: 3.25rem; padding: 0; border: 2px solid transparent; border-radius: var(--im-radius-sm); overflow: hidden; background: var(--im-glass-1); opacity: .55; cursor: pointer; transition: opacity var(--im-duration) ease, border-color var(--im-duration) ease; }
.lightbox-thumbs button:hover, .lightbox-thumbs button[aria-current="true"] { opacity: 1; border-color: var(--im-gold-500); }
.lightbox-thumbs button:focus-visible { outline: 3px solid var(--im-gold-500); outline-offset: 2px; }
.lightbox-thumbs img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
@media screen and (max-width: 720px) {
  .lightbox-main { grid-template-columns: minmax(0, 1fr); padding-inline: var(--im-space-2); }
  .lb-side { position: fixed; inset-block-end: 5.5rem; z-index: 2; min-inline-size: 0; flex-direction: row; padding: .5rem .8rem; }
  .lb-side[data-step="-1"] { inset-inline-start: var(--im-space-3); }
  .lb-side[data-step="1"] { inset-inline-end: var(--im-space-3); }
  .lightbox-stage img { max-block-size: calc(100dvh - 15rem); }
}

/* ---------- About / organization ---------- */
.in-page-nav { position: sticky; inset-block-start: var(--im-header-height); z-index: var(--im-z-raised); background: rgba(245, 247, 251, .95); backdrop-filter: blur(6px); border-block-end: 1px solid var(--im-border); }
.in-page-nav ul { display: flex; gap: var(--im-space-1); list-style: none; margin: 0; padding: var(--im-space-2) 0; overflow-x: auto; }
.in-page-nav a { display: inline-flex; min-block-size: 2.5rem; align-items: center; padding: 0 var(--im-space-3); border-radius: var(--im-radius-sm); text-decoration: none; font-size: var(--im-text-sm); font-weight: 600; color: var(--im-text); white-space: nowrap; }
.in-page-nav a:hover { background: var(--im-surface); color: var(--im-blue-800); }
/* The page already keeps clear of the header (im.css: scroll-padding); this adds the sticky in-page menu. */
[id].anchor-target { scroll-margin-block-start: 3rem; }
.person-grid { display: grid; gap: var(--im-space-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.person { background: var(--im-surface); border: 1px solid var(--im-border); border-radius: var(--im-radius-lg); padding: var(--im-space-5); display: grid; gap: var(--im-space-2); align-content: start; }
.person-photo { inline-size: 5rem; block-size: 5rem; border-radius: 50%; overflow: hidden; background: var(--im-blue-50); color: var(--im-blue-800); display: grid; place-items: center; font-size: var(--im-text-xl); font-weight: 700; }
.person-photo img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.person h3 { margin: 0; font-size: var(--im-text-lg); }
.person .role { color: var(--im-text-secondary); font-size: var(--im-text-sm); margin: 0; }
.person details summary { cursor: pointer; font-size: var(--im-text-sm); color: var(--im-blue-800); font-weight: 600; }
.person details p { white-space: pre-line; font-size: var(--im-text-sm); margin-block-start: var(--im-space-2); }
.org-tree, .org-tree ul { list-style: none; margin: 0; padding: 0; }
.org-tree ul { margin-inline-start: var(--im-space-4); padding-inline-start: var(--im-space-4); border-inline-start: 2px solid var(--im-divider); }
.org-tree li { padding-block: var(--im-space-1); }
.org-node { display: block; background: var(--im-surface); border: 1px solid var(--im-border); border-radius: var(--im-radius-md); padding: var(--im-space-3) var(--im-space-4); }
.org-node strong { display: block; }
.org-node span { display: block; font-size: var(--im-text-sm); color: var(--im-text-secondary); }
.org-tree details > summary { list-style: none; cursor: pointer; }
.org-tree details > summary::-webkit-details-marker { display: none; }
.org-tree details > summary .org-node { display: flex; align-items: center; gap: var(--im-space-3); }
.org-tree details > summary .org-node > div { flex: 1; min-inline-size: 0; }
.org-tree details[open] > summary .chev { transform: rotate(180deg); }

/* ---------- Relations ---------- */
.tracking-code { display: inline-flex; align-items: center; gap: var(--im-space-3); padding: var(--im-space-3) var(--im-space-5); border: 2px dashed var(--im-gold-500); border-radius: var(--im-radius-md); background: var(--im-gold-50); font-family: var(--im-font-mono); font-size: var(--im-text-xl); font-weight: 700; letter-spacing: .08em; color: var(--im-navy-950); max-inline-size: 100%; overflow-wrap: anywhere; }
.success-panel { text-align: center; display: grid; justify-items: center; gap: var(--im-space-3); padding: var(--im-space-8) var(--im-space-5); }
.success-panel .state-icon { inline-size: 3.5rem; block-size: 3.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--im-success-bg); color: var(--im-success); }
.success-panel .state-icon .icon { inline-size: 1.75rem; block-size: 1.75rem; }
.success-panel h2:focus { outline: none; } /* focused by public.js so it is announced; not a control */
.next-steps { list-style-type: persian; text-align: start; margin: 0; padding-inline-start: var(--im-space-5); color: var(--im-text-secondary); font-size: var(--im-text-sm); }
.rating-group { display: grid; gap: var(--im-space-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); }
.rating-group label { display: flex; align-items: center; gap: var(--im-space-2); min-block-size: 3rem; padding: 0 var(--im-space-3); border: 1px solid var(--im-control-border); border-radius: var(--im-radius-md); background: var(--im-surface); cursor: pointer; font-size: var(--im-text-sm); font-weight: 600; }
.rating-group label:has(input:checked) { border-color: var(--im-blue-800); background: var(--im-blue-50); color: var(--im-blue-800); }
.rating-group input { accent-color: var(--im-primary); }
.mark { background: #fff1c2; color: inherit; border-radius: 2px; padding: 0 1px; }
.search-hero { max-inline-size: 42rem; }
.search-hero form { display: flex; gap: var(--im-space-2); }
.search-hero input { flex: 1; min-block-size: 3.25rem !important; font-size: var(--im-text-lg) !important; }
.search-hero .btn { min-block-size: 3.25rem; }
@media screen and (max-width: 720px) { .search-hero form { flex-direction: column; } }
.result-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--im-space-3); }

/* ---------- Media cards (shared) ---------- */
.card-title { font-size: var(--im-text-lg); margin: 0; line-height: var(--im-leading-tight); }
.card-title a { color: var(--im-navy-950); text-decoration: none; }
.card-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card-title a:hover { color: var(--im-blue-800); }
.card-title a:focus-visible { outline: none; }
.card-title a:focus-visible::after { box-shadow: var(--im-focus-shadow); }
.entry-card .card-action, .entry-card details, .entry-card .progress { position: relative; z-index: 1; }
.entry-card:has(.card-media) { padding: 0; overflow: hidden; }
.entry-body { display: flex; flex-direction: column; gap: var(--im-space-2); padding: var(--im-space-5); flex: 1; min-inline-size: 0; }
.entry-more { margin-block-start: auto; padding-block-start: var(--im-space-2); display: inline-flex; align-items: center; gap: var(--im-space-1); font-size: var(--im-text-sm); font-weight: 600; color: var(--im-blue-800); }
.entry-card:hover .entry-more .icon { transform: translateX(-3px); }
[dir="ltr"] .entry-card:hover .entry-more .icon { transform: translateX(3px); }
.entry-card .entry-foot-stack { display: grid; gap: var(--im-space-2); justify-content: stretch; }
.card-media { position: relative; background: linear-gradient(135deg, var(--im-blue-50), var(--im-surface-muted)); overflow: hidden; }
.card-media.ratio-16x9 { aspect-ratio: 16 / 9; }
.card-media.ratio-4x3 { aspect-ratio: 4 / 3; }
.card-media.ratio-1x1 { aspect-ratio: 1; }
.card-media img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; transition: transform var(--im-duration-slower) ease; }
.entry-card:hover .card-media img { transform: scale(1.04); }
.card-media-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--im-blue-800); opacity: .35; }
.card-media-fallback .icon { inline-size: 3rem; block-size: 3rem; }
/* Card styles chosen per item (ContentCard → card-style-*): featured is the "is-featured" look on every card; an image card
   puts the title on the picture (a dark band under the text keeps it readable on any photo); a text card has no picture and
   a gold rule at its start. Lead cards of the news list keep their own layout. */
.card-style-featured:not(.is-featured) { border-color: var(--im-gold-200); background: linear-gradient(180deg, var(--im-gold-50), var(--im-surface) 45%); }
.card-style-featured.statement-card, .card-style-featured.clarification-card { box-shadow: inset 0 0 0 1px var(--im-gold-200); }
.card-style-text .card-media, .card-style-text .ceo-portrait { display: none; }
.entry-card.card-style-text { padding: var(--im-space-5); border-inline-start: 4px solid var(--im-gold-500); }
.card-style-text .entry-body { padding: 0; }
.entry-card.card-style-image { position: relative; min-block-size: 18rem; justify-content: flex-end; color: #fff; border-color: transparent; }
.card-style-image .card-media { position: absolute; inset: 0; aspect-ratio: auto; }
.card-style-image .card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8, 13, 30, .92) 0%, rgba(8, 13, 30, .62) 45%, rgba(8, 13, 30, .1) 100%); pointer-events: none; }
.card-style-image .entry-body { position: relative; flex: none; justify-content: flex-end; }
.card-style-image .entry-meta, .card-style-image p, .card-style-image .entry-more { color: var(--im-on-image); }
.entry-card.card-style-image h3 a, .entry-card.card-style-image h2 a { color: #fff; }
.entry-card.card-style-image h3 a:hover, .entry-card.card-style-image h2 a:hover { color: var(--im-gold-300); }
.card-style-image .event-facts, .card-style-image .event-facts li { color: var(--im-on-image); }
.card-style-image .card-media-badge { z-index: 1; }
.entry-card.lead-card.card-style-image { min-block-size: 24rem; }
.card-media-badge { position: absolute; inset-block-start: var(--im-space-3); inset-inline-start: var(--im-space-3); }
.card-media-badge .chip { background: var(--im-glass-solid); box-shadow: var(--im-shadow-sm); }
.entry-card.lead-card:has(.card-media) { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); padding: 0; }
.entry-card.lead-card .card-media { aspect-ratio: auto; min-block-size: 18rem; }
.entry-card.lead-card .entry-body { padding: var(--im-space-8); justify-content: center; }
@media screen and (max-width: 720px) { .entry-card.lead-card:has(.card-media) { grid-template-columns: 1fr; } .entry-card.lead-card .card-media { aspect-ratio: 16 / 9; min-block-size: 0; } .entry-card.lead-card .entry-body { padding: var(--im-space-5); } }

/* ---------- Section card variants ---------- */
.ceo-card { display: grid; grid-template-columns: auto 1fr; gap: var(--im-space-5); align-items: start; background: linear-gradient(160deg, var(--im-gold-50), var(--im-surface) 55%); border-color: var(--im-gold-200); }
.ceo-card.lead-card { grid-column: auto; }
.ceo-card .entry-body { padding: 0; }
.ceo-portrait { inline-size: 6.5rem; block-size: 6.5rem; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--im-navy-950); color: var(--im-gold-500); box-shadow: 0 0 0 4px var(--im-surface), 0 0 0 5px var(--im-gold-200); }
.ceo-portrait img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.ceo-portrait .icon { inline-size: 2.25rem; block-size: 2.25rem; }
.ceo-quote { margin: 0; position: relative; padding-inline-start: var(--im-space-4); border-inline-start: 3px solid var(--im-gold-500); color: var(--im-text); font-size: var(--im-text-md); }
.ceo-quote p { -webkit-line-clamp: 4; }
.ceo-signature { font-weight: 700; color: var(--im-navy-950); }
@media screen and (max-width: 480px) { .ceo-card { grid-template-columns: 1fr; } }
.statement-card { border-block-start: 4px solid var(--im-navy-950); background: var(--im-surface); }
.statement-head { display: flex; align-items: center; gap: var(--im-space-3); padding-block-end: var(--im-space-3); border-block-end: 1px dashed var(--im-border); }
.statement-head > div { display: grid; }
.statement-seal { inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--im-radius-md); display: grid; place-items: center; background: var(--im-navy-950); color: var(--im-gold-500); flex: none; }
.clarification-card { border-inline-start: 5px solid var(--im-warning); }
.clarification-answer { background: var(--im-warning-bg); border-radius: var(--im-radius-md); padding: var(--im-space-3) var(--im-space-4); display: grid; gap: var(--im-space-1); }
.clarification-label { font-size: var(--im-text-xs); font-weight: 700; color: var(--im-warning); }
.clarification-answer p { color: var(--im-text); }
.event-date { position: absolute; inset-block-start: var(--im-space-3); inset-inline-end: var(--im-space-3); display: grid; justify-items: center; min-inline-size: 4rem; padding: var(--im-space-2) var(--im-space-3); border-radius: var(--im-radius-md); background: var(--im-surface); box-shadow: var(--im-shadow-md); color: var(--im-navy-950); line-height: 1.2; }
.event-date b { font-size: 1.75rem; }
.event-date span { font-size: var(--im-text-xs); font-weight: 700; color: var(--im-blue-800); }
.event-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--im-space-1); font-size: var(--im-text-sm); color: var(--im-text-secondary); }
.event-facts li { display: flex; gap: var(--im-space-2); align-items: flex-start; }
.event-card.is-past .card-media img { filter: grayscale(.6); }
.event-panel { margin-block-end: var(--im-space-6); border-inline-start: 4px solid var(--im-blue-800); display: grid; gap: var(--im-space-4); }
.department-card .card-title { font-size: var(--im-text-md); }
.person-grid .manager-card .person-photo { inline-size: 6rem; block-size: 6rem; }
.org-node-image { inline-size: 3rem; block-size: 3rem; border-radius: var(--im-radius-sm); object-fit: cover; flex: none; }
.org-tree .org-node { display: flex; align-items: center; gap: var(--im-space-3); }

/* ---------- Lists: grid / list views ---------- */
.list-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--im-space-3); margin-block-end: var(--im-space-4); }
.view-toggle { display: inline-flex; border: 1px solid var(--im-control-border); border-radius: var(--im-radius-pill); padding: 2px; background: var(--im-surface); }
.view-toggle a { display: inline-flex; align-items: center; gap: var(--im-space-1); min-block-size: 2.25rem; padding: 0 var(--im-space-3); border-radius: var(--im-radius-pill); color: var(--im-text); text-decoration: none; font-size: var(--im-text-sm); font-weight: 600; }
.view-toggle a[aria-current="true"] { background: var(--im-navy-950); color: #fff; }
.card-list { display: grid; gap: var(--im-space-4); }
.card-list .entry-card:has(.card-media) { display: grid; grid-template-columns: minmax(10rem, 18rem) minmax(0, 1fr); }
.card-list .card-media { aspect-ratio: auto; min-block-size: 100%; }
@media screen and (max-width: 720px) { .card-list .entry-card:has(.card-media) { grid-template-columns: 1fr; } .card-list .card-media { aspect-ratio: 16 / 9; } }

/* ---------- Home slider ---------- */
.home-slider { position: relative; background: var(--im-navy-950); color: #fff; }
.home-slider-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.home-slider-track::-webkit-scrollbar { display: none; }
.home-slider-track:focus-visible { outline: 3px solid var(--im-gold-500); outline-offset: -6px; }
.home-slide { position: relative; scroll-snap-align: start; min-block-size: clamp(26rem, 62vh, 40rem); display: grid; align-items: end; isolation: isolate; }
.home-slide-image { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: var(--slide-position, 50% 50%); z-index: -2; }
/* The shade keeps the text readable (dark at the bottom and on the text side) and leaves the rest of the picture clear. */
/* The shade: a colour of the brand palette at the strength chosen for the slide (HomeSlider: --slide-shade-color, --slide-shade). */
.home-slide-shade { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(0deg, color-mix(in srgb, var(--slide-shade-color, var(--im-navy-950)) calc(var(--slide-shade, .6) * 100%), transparent) 0%, color-mix(in srgb, var(--slide-shade-color, var(--im-navy-950)) calc(var(--slide-shade, .6) * 55%), transparent) 45%, color-mix(in srgb, var(--slide-shade-color, var(--im-navy-950)) calc(var(--slide-shade, .6) * 10%), transparent) 100%),
  linear-gradient(270deg, color-mix(in srgb, var(--slide-shade-color, var(--im-navy-950)) calc(var(--slide-shade, .6) * 50%), transparent), transparent 60%); }
.home-slide-text { display: grid; gap: var(--im-space-3); justify-items: start; }
.home-slide-text.has-panel { padding: var(--im-space-4) var(--im-space-5); border-radius: var(--im-radius-lg); background: color-mix(in srgb, var(--im-navy-950) 74%, transparent); max-inline-size: min(100%, 44rem); }
.home-slide-content { padding-block: var(--im-space-12) clamp(5rem, 9vw, 6.5rem); display: grid; gap: var(--im-space-3); justify-items: start; }
.home-slide-content h1, .home-slide-content h2 { color: #fff; font-size: var(--im-text-display); max-inline-size: 22ch; margin: 0; text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 2px 18px rgba(0, 0, 0, .45); }
.home-slide-content p { color: var(--im-on-dark); font-size: var(--im-text-lg); max-inline-size: 56ch; margin: 0; }
/* The gold line above the title sits on a small dark plate, so it keeps 4.5:1 on the lightest pictures (measured with
   Measure-TextOnImages.ps1) without darkening the whole slide. */
.home-slide-content .eyebrow { justify-self: start; padding: .1rem .65rem; border-radius: var(--im-radius-pill); background: rgba(8, 13, 30, .62); color: var(--im-gold-500); text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.home-slide-content .hero-actions { margin-block-start: var(--im-space-2); }
.home-slide .btn-secondary { background: var(--im-glass-1); color: #fff; border-color: var(--im-glass-4); }
.home-slide .btn-secondary:hover { background: var(--im-glass-3); color: #fff; }
.home-slider-controls { position: absolute; inset-block-end: var(--im-space-5); inset-inline: 0; display: flex; align-items: center; gap: var(--im-space-2); pointer-events: none; }
.home-slider-controls > * { pointer-events: auto; }
.slider-btn { inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%; border: 1px solid var(--im-glass-4); background: rgba(8, 13, 30, .45); color: #fff; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(6px); }
.slider-btn:hover { background: var(--im-glass-3); }
.slider-btn:focus-visible, .slider-dot:focus-visible { outline: 3px solid var(--im-gold-500); outline-offset: 2px; }
/* Each dot is a 24px button (44px on touch screens) with its mark drawn inside, so the targets never overlap. */
/* With many slides the dots (touch-size on phones) wrap onto a second row instead of widening the page. */
.slider-dots { display: flex; flex-wrap: wrap; min-inline-size: 0; margin-inline-end: auto; }
.slider-dot { position: relative; display: grid; place-items: center; inline-size: 1.5rem; block-size: 1.5rem; padding: 0; border: 0; border-radius: var(--im-radius-pill); background: transparent; cursor: pointer; transition: inline-size var(--im-duration-slow); }
.slider-dot::before { content: ""; inline-size: .75rem; block-size: .75rem; border-radius: var(--im-radius-pill); background: var(--im-glass-4); transition: inline-size var(--im-duration-slow), background-color var(--im-duration); }
.slider-dot[aria-current="true"] { inline-size: 2.75rem; }
.slider-dot[aria-current="true"]::before { inline-size: 2.25rem; background: var(--im-gold-500); }
@media (pointer: coarse) { .slider-dot { inline-size: 2.75rem; block-size: 2.75rem; } .slider-dot[aria-current="true"] { inline-size: 3.25rem; } }
/* On phones the text reaches higher up the picture, so the shade stays stronger up to that height. */
@media screen and (max-width: 720px) { .home-slide { min-block-size: 30rem; } .home-slide-content { padding-block-end: 6.5rem; } .home-slide-shade { background: linear-gradient(0deg, color-mix(in srgb, var(--slide-shade-color, var(--im-navy-950)) calc(var(--slide-shade, .6) * 100%), transparent) 0%, color-mix(in srgb, var(--slide-shade-color, var(--im-navy-950)) calc(var(--slide-shade, .6) * 65%), transparent) 55%, color-mix(in srgb, var(--slide-shade-color, var(--im-navy-950)) calc(var(--slide-shade, .6) * 16%), transparent) 100%); } }

.relations-cta { align-items: center; }
.home-band.band-ceo .card-grid, .grid-ceo { grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }
/* Phones: the home page stays about ten screens long. The first section shows its first two cards (and its featured
   card) one under the other; every later section is one row of up to three cards that is swiped sideways, with the next
   card peeking in. "همه …" in the head of each section leads to the rest. */
@media screen and (max-width: 720px) {
  .home-band .card-grid > :nth-child(n + 4):not(.lead-card) { display: none; }
  .home-band:not(.home-band ~ .home-band) .card-grid > :nth-child(3):not(.lead-card) { display: none; }
  .home-band ~ .home-band .card-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(85%, 20rem); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-block-end: var(--im-space-2); scrollbar-width: thin; }
  .home-band ~ .home-band .card-grid > * { scroll-snap-align: start; }
  .home-band ~ .home-band .card-grid > .lead-card { grid-column: auto; padding: var(--im-space-5); }
  .home-glance .stat-band:not(.is-compact):not(.is-strip) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--im-space-3); }
}

/* ---------- Page hero & page blocks ---------- */
.page-hero { position: relative; min-block-size: clamp(18rem, 42vh, 26rem); display: grid; align-items: end; color: #fff; isolation: isolate; background: var(--im-navy-950); }
.page-hero > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; z-index: -2; }
.page-hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(8, 13, 30, .9), rgba(8, 13, 30, .25)); }
.page-hero-content { padding-block: var(--im-space-10); display: grid; gap: var(--im-space-3); justify-items: start; }
.page-hero-content h1 { color: #fff; font-size: var(--im-text-display); margin: 0; }
.page-hero-content p { color: var(--im-on-dark); font-size: var(--im-text-lg); max-inline-size: 60ch; margin: 0; }
.article-cover { margin: 0 0 var(--im-space-8); }
.article-cover img { inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--im-radius-lg); background: var(--im-surface-muted); display: block; }
.article-cover figcaption { font-size: var(--im-text-sm); color: var(--im-text-secondary); margin-block-start: var(--im-space-2); }
.ceo-article-portrait { float: inline-start; margin: 0 0 var(--im-space-4); margin-inline-end: var(--im-space-6); inline-size: min(14rem, 40%); text-align: center; }
.ceo-article-portrait img { inline-size: 100%; block-size: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 6px var(--im-gold-50); }
.ceo-article-portrait figcaption { font-weight: 700; margin-block-start: var(--im-space-3); }
.article-ceo .prose::after { content: ""; display: block; clear: both; }
.key-facts .meta-list { margin: 0; }
.gallery-wall { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.gallery .gallery-link { position: relative; display: block; border-radius: var(--im-radius-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--im-surface-muted); cursor: zoom-in; box-shadow: var(--im-shadow-xs); transition: box-shadow var(--im-duration-slow) ease, transform var(--im-duration-slow) ease; }
.gallery .gallery-link img { transition: transform var(--im-duration-slower) ease; }
.gallery .gallery-link::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8, 13, 30, .55), transparent 55%); opacity: 0; transition: opacity var(--im-duration-slow) ease; }
.gallery .gallery-link:hover, .gallery .gallery-link:focus-visible { box-shadow: var(--im-shadow-raised); transform: translateY(-2px); }
.gallery .gallery-link:hover img, .gallery .gallery-link:focus-visible img { transform: scale(1.05); }
.gallery .gallery-link:hover::after, .gallery .gallery-link:focus-visible::after { opacity: 1; }
.gallery-zoom { position: absolute; z-index: 1; inset-block-end: .75rem; inset-inline-start: .75rem; display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border-radius: var(--im-radius-pill); background: var(--im-glass-solid); color: var(--im-navy-950); font-size: var(--im-text-xs); font-weight: 700; opacity: 0; transform: translateY(6px); transition: opacity var(--im-duration-slow) ease, transform var(--im-duration-slow) ease; }
.gallery-zoom svg { inline-size: 1rem; block-size: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.gallery .gallery-link:hover .gallery-zoom, .gallery .gallery-link:focus-visible .gallery-zoom { opacity: 1; transform: none; }
.gallery-wall figcaption { font-size: var(--im-text-sm); color: var(--im-text); font-weight: 600; margin-block-start: var(--im-space-2); }
@media (hover: none) { .gallery-zoom { opacity: 1; transform: none; } }

/* ---------- Visual timeline ---------- */
.visual-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--im-space-5); position: relative; }
.visual-timeline::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: calc(50% - 1px); inline-size: 2px; background: var(--im-border); }
.visual-timeline li { display: grid; grid-template-columns: 1fr 1fr; position: relative; }
.visual-timeline li::before { content: ""; position: absolute; inset-inline-start: calc(50% - .5rem); inset-block-start: 1.5rem; inline-size: 1rem; block-size: 1rem; border-radius: 50%; background: var(--im-gold-500); box-shadow: 0 0 0 4px var(--im-bg); }
.visual-timeline li:nth-child(odd) .visual-timeline-card { grid-column: 1; margin-inline-end: var(--im-space-8); }
.visual-timeline li:nth-child(even) .visual-timeline-card { grid-column: 2; margin-inline-start: var(--im-space-8); }
.visual-timeline-card { background: var(--im-surface); border: 1px solid var(--im-border); border-radius: var(--im-radius-lg); overflow: hidden; }
.visual-timeline-card img { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.visual-timeline-body { padding: var(--im-space-4) var(--im-space-5); display: grid; gap: var(--im-space-1); }
.visual-timeline-body time { font-size: var(--im-text-sm); font-weight: 700; color: var(--im-blue-800); }
.visual-timeline-body h3 { margin: 0; font-size: var(--im-text-lg); }
@media screen and (max-width: 1000px) {
  .visual-timeline::before { inset-inline-start: .5rem; }
  .visual-timeline li { grid-template-columns: 1fr; }
  .visual-timeline li::before { inset-inline-start: 0; }
  .visual-timeline li:nth-child(n) .visual-timeline-card { grid-column: 1; margin-inline: var(--im-space-8) 0; }
}

/* ---------- Header dropdown & brand ---------- */
.brand-logo { inline-size: 2.5rem; block-size: 2.5rem; object-fit: contain; border-radius: var(--im-radius-sm); }
.card-media.is-empty::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(25, 72, 144, .12) 0 2.5rem, transparent 2.6rem); }
img.is-broken { visibility: hidden; }


/* ---------- Final UI pass: image size caps, hero legibility, stat overflow ---------- */
/* Images never size their container: the frame (aspect-ratio or min/max height) decides, the picture is cropped to fit. */
.card-media img { position: absolute; inset: 0; }
.card-media:not([class*="ratio-"]) { aspect-ratio: 16 / 9; }
.entry-card.lead-card .card-media { min-block-size: 18rem; max-block-size: 28rem; }
.card-list .card-media { min-block-size: 11rem; max-block-size: 16rem; }
.article-cover img, .page-block-media img, .visual-timeline-card img { max-block-size: min(32rem, 70vh); }
.article-body img, .page-block-body img, .site-main figure img { max-inline-size: 100%; block-size: auto; max-block-size: min(36rem, 75vh); object-fit: contain; }
.page-hero > img { max-block-size: none; }
/* Phones: a card without a picture keeps a short tinted strip (with its badges and date) instead of a tall empty frame. */
@media screen and (max-width: 720px) { .card-media.is-empty { aspect-ratio: auto; block-size: 5.5rem; } }

/* Hero text over photos: stronger, text-side scrim plus a readable panel so light images keep 4.5:1 contrast. */
.page-hero-shade { background: linear-gradient(0deg, rgba(8, 13, 30, .94) 0%, rgba(8, 13, 30, .72) 45%, rgba(8, 13, 30, .45) 100%), linear-gradient(270deg, rgba(8, 13, 30, .7), transparent 70%); }
.page-hero-content { position: relative; }
.page-hero-content > * { position: relative; }
.page-hero-content h1, .page-hero-content p { text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 2px 18px rgba(0, 0, 0, .45); }
.page-hero-content p { color: var(--im-on-image); }
.page-hero .chip { background: var(--im-glass-solid); color: var(--im-navy-950); text-shadow: none; }
.home-slide-content p { color: var(--im-on-image); text-shadow: 0 1px 2px rgba(0, 0, 0, .55); }

/* Statistics: long numbers shrink with the card instead of overflowing it. */

/* Long words, e-mails and URLs wrap inside cards. */
.entry-card, .person, .contact-card, .stat, .card { min-inline-size: 0; overflow-wrap: break-word; }
.person details summary { cursor: pointer; color: var(--im-blue-800); font-weight: 600; }

/* "At a glance": statistic bands and text + image items share one column and rhythm. */
.glance-items { display: grid; gap: var(--im-space-6); }
.glance-items .page-block-text h3 { margin: 0; font-size: var(--im-text-xl); }
/* About page sections: optional image under the section heading and the introduction sentence. */
.about-section-image { margin-block-end: var(--im-space-6); }
.about-section-image img { aspect-ratio: 21 / 9; max-block-size: 22rem; }
#intro > .container > .lead { margin-block: 0 var(--im-space-4); color: var(--im-text-secondary); font-size: var(--im-text-lg); }
/* Page-builder images keep their own 16:9 frame; the 4:3 gallery tile frame would leave an empty strip under them. */
/* A lone statistic card keeps a card width instead of stretching across the row. */
/* Company members on the about page: one block per group (CEO, board, unit managers); the CEO card is larger. */
.member-group + .member-group { margin-block-start: var(--im-space-8); }
.member-group-title { margin: 0 0 var(--im-space-4); font-size: var(--im-text-lg); color: var(--im-text-secondary); }
.person-grid.is-lead { grid-template-columns: minmax(min(100%, 16rem), 28rem); }
.person-grid .manager-card.is-featured { padding: var(--im-space-6); border-color: var(--im-gold-500); }
.person-grid .manager-card.is-featured .person-photo { inline-size: 7.5rem; block-size: 7.5rem; }
.person-grid .manager-card.is-featured h3 { font-size: var(--im-text-xl); }
/* Magazine: wider cards with a taller image; the home page band sits on the warm tint of the brand gold. */
.home-band.band-magazine { background: var(--im-gold-50); }
.home-band.band-magazine .card-grid, .grid-magazine { grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); }
.magazine-card .card-title, .magazine-card h2, .magazine-card h3 { font-size: var(--im-text-xl); line-height: var(--im-leading-tight); }
.magazine-card .entry-meta > span, .magazine-card .entry-meta > time { display: inline-flex; align-items: center; gap: var(--im-space-1); }
/* Name of the person holding a position, under the title of the unit (tree node and card). */
.org-holder { display: block; color: var(--im-blue-800); font-weight: 600; font-size: var(--im-text-sm); }
.department-card p.org-holder { margin: 0; }
/* ---------- Contact page ----------
   A navy panel with the two main actions (new request, tracking), then two panels side by side: the contact ways
   (rows with a round icon) and the communication channels. Narrow screens stack everything in one column. */
.contact-overview { display: grid; gap: var(--im-space-6); }
.contact-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: var(--im-space-6) var(--im-space-8); padding: clamp(1.5rem, 4vw, 2.75rem); border-radius: calc(var(--im-radius-lg) * 1.5); background: linear-gradient(135deg, var(--im-navy-950) 0%, var(--im-navy-900) 55%, var(--im-blue-900) 100%); color: #fff; box-shadow: var(--im-shadow-md); }
.contact-hero::before, .contact-hero::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.contact-hero::before { inset-block-start: -9rem; inset-inline-end: -7rem; inline-size: 22rem; block-size: 22rem; background: radial-gradient(circle, rgba(215, 177, 111, .3), transparent 68%); }
.contact-hero::after { inset-block-end: -11rem; inset-inline-start: -8rem; inline-size: 24rem; block-size: 24rem; background: radial-gradient(circle, rgba(42, 98, 196, .45), transparent 68%); }
.contact-hero-text { display: grid; gap: var(--im-space-2); }
.contact-hero-eyebrow { display: inline-flex; align-items: center; gap: var(--im-space-2); color: var(--im-gold-500); font-size: var(--im-text-sm); font-weight: 600; }
.contact-hero-eyebrow::before { content: ""; inline-size: 1.75rem; block-size: 2px; border-radius: 2px; background: var(--im-gold-500); }
.contact-hero h2 { margin: 0; color: #fff; font-size: var(--im-text-2xl); line-height: var(--im-leading-tight); }
.contact-hero p { margin: 0; color: #d6dceb; max-inline-size: 46ch; }
/* Two action cards side by side while each keeps a readable width; otherwise one under the other. */
.contact-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--im-space-3); }
.contact-action { display: flex; align-items: center; gap: var(--im-space-3); min-inline-size: 0; padding: var(--im-space-4); border: 1px solid var(--im-glass-3); border-radius: var(--im-radius-lg); background: var(--im-glass-1); color: #fff; text-decoration: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform var(--im-duration) var(--im-ease), background var(--im-duration), border-color var(--im-duration), box-shadow var(--im-duration); }
.contact-action:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .15); border-color: var(--im-glass-4); color: #fff; box-shadow: var(--im-shadow-on-dark); }
.contact-action:focus-visible { outline: 2px solid var(--im-gold-500); outline-offset: 3px; box-shadow: none; }
.contact-action.is-primary { background: var(--im-gold-500); border-color: var(--im-gold-500); color: var(--im-navy-950); }
.contact-action.is-primary:hover { background: var(--im-gold-300); border-color: var(--im-gold-300); color: var(--im-navy-950); }
.contact-action.is-primary:focus-visible { outline-color: #fff; }
.contact-action-icon { flex: none; display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%; background: var(--im-glass-2); }
.contact-action.is-primary .contact-action-icon { background: rgba(13, 24, 50, .12); }
.contact-action-icon .icon { inline-size: 1.35rem; block-size: 1.35rem; }
.contact-action-text { display: grid; gap: 2px; min-inline-size: 0; }
.contact-action-text strong { font-size: var(--im-text-md); line-height: var(--im-leading-tight); }
.contact-action-text small { font-size: var(--im-text-xs); line-height: 1.6; opacity: .88; }
.contact-action-arrow { flex: none; margin-inline-start: auto; opacity: .7; transition: translate var(--im-duration) var(--im-ease), opacity var(--im-duration); }
.contact-action:hover .contact-action-arrow { opacity: 1; translate: -4px 0; }
[dir="ltr"] .contact-action:hover .contact-action-arrow { translate: 4px 0; }

.contact-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: start; gap: var(--im-space-6); }
.contact-panel { display: grid; gap: var(--im-space-5); min-inline-size: 0; padding: clamp(1.25rem, 3vw, 1.75rem); border: 1px solid var(--im-border); border-radius: var(--im-radius-lg); background: var(--im-surface); box-shadow: var(--im-shadow-sm); }
.contact-panel-head { display: flex; align-items: center; gap: var(--im-space-3); padding-block-end: var(--im-space-4); border-block-end: 1px solid var(--im-divider); }
.contact-panel-head h2 { margin: 0; font-size: var(--im-text-xl); line-height: var(--im-leading-tight); }
.contact-panel-head p { margin: 2px 0 0; color: var(--im-text-secondary); font-size: var(--im-text-sm); }
.contact-panel-icon { flex: none; display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; border-radius: var(--im-radius-md); background: var(--im-navy-950); color: var(--im-gold-500); }
.contact-panel-icon .icon { inline-size: 1.4rem; block-size: 1.4rem; }
.contact-subtitle { margin: var(--im-space-2) 0 0; color: var(--im-text-secondary); font-size: var(--im-text-sm); font-weight: 600; }
/* One column on phones, two beside each other otherwise; an odd last way takes the whole row instead of half of it. */
.contact-ways { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--im-space-2); }
@media print, (min-width: 30rem) {
  .contact-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-ways > :not(.is-wide):nth-child(odd of :not(.is-wide)):last-child { grid-column: 1 / -1; }
}
.contact-ways > .is-wide { grid-column: 1 / -1; }
.contact-way { display: flex; align-items: center; gap: var(--im-space-3); block-size: 100%; min-inline-size: 0; padding: var(--im-space-3); border: 1px solid transparent; border-radius: var(--im-radius-md); background: var(--im-surface-muted); color: var(--im-text); text-decoration: none; transition: background var(--im-duration), border-color var(--im-duration), box-shadow var(--im-duration); }
a.contact-way:hover, a.contact-way:focus-visible { background: var(--im-surface); border-color: var(--im-border-strong); box-shadow: var(--im-shadow-md); color: var(--im-text); }
.contact-way-icon { flex: none; display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%; background: var(--im-blue-50); color: var(--im-blue-800); transition: background var(--im-duration), color var(--im-duration); }
a.contact-way:hover .contact-way-icon, a.contact-way:focus-visible .contact-way-icon { background: var(--im-navy-950); color: var(--im-gold-500); }
.contact-way-icon .icon { inline-size: 1.3rem; block-size: 1.3rem; }
.contact-way-text { display: grid; gap: 2px; min-inline-size: 0; overflow-wrap: anywhere; }
.contact-way-label { color: var(--im-text-secondary); font-size: var(--im-text-xs); }
.contact-way-value { font-weight: 600; line-height: 1.7; text-align: start; }
.contact-way-value a { color: var(--im-blue-800); }
.contact-way-sub { font-size: var(--im-text-sm); color: var(--im-text-secondary); }
.footer-postal { display: block; margin-block-start: 2px; font-size: var(--im-text-xs); opacity: .9; }
/* Location card of the contact page (LocationCard.razor): the picture is not a link; the links under it are. */
.location-card { margin-block-start: var(--im-space-6); }
.location-image { margin: 0 0 var(--im-space-4); border-radius: var(--im-radius-md); overflow: hidden; background: var(--im-surface-muted); }
.location-image img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 2 / 1; max-block-size: 28rem; object-fit: cover; }
.location-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--im-space-2); }
.location-link { display: inline-flex; align-items: center; gap: var(--im-space-2); min-block-size: var(--im-control-height); padding: 0 var(--im-space-4); border: 1px solid var(--im-control-border); border-radius: 999px; background: var(--im-surface); color: var(--im-blue-800); font-weight: 600; text-decoration: none; }
.location-link:hover { border-color: var(--im-blue-800); background: var(--im-blue-50); }
.location-link-icon { display: inline-grid; place-items: center; inline-size: 1.5rem; block-size: 1.5rem; }
.location-link-icon img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.location-link-arrow { inline-size: 1rem; block-size: 1rem; opacity: .7; }
.location-card.is-preview { margin: 0; }
.contact-way-text .chip { justify-self: start; margin-block-start: 2px; }
/* Channels inside the panel: quiet tiles with an arrow that lights up on hover. */
.contact-panel .channel-links { gap: var(--im-space-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.contact-panel .channel-link { block-size: 100%; padding: var(--im-space-3); border-color: transparent; border-radius: var(--im-radius-md); background: var(--im-surface-muted); }
.contact-panel .channel-link:hover, .contact-panel .channel-link:focus-visible { background: var(--im-surface); border-color: var(--im-border-strong); }
.contact-panel .channel-link:hover .channel-icon, .contact-panel .channel-link:focus-visible .channel-icon { background: var(--im-navy-950); color: var(--im-gold-500); }
.channel-icon { transition: background var(--im-duration), color var(--im-duration); }
.channel-arrow { flex: none; margin-inline-start: auto; inline-size: 1.1rem; block-size: 1.1rem; color: var(--im-text-disabled); transition: color var(--im-duration); }
.channel-link:hover .channel-arrow, .channel-link:focus-visible .channel-arrow { color: var(--im-blue-800); }
@media screen and (max-width: 1000px) {
  .contact-hero { grid-template-columns: minmax(0, 1fr); }
}
@media screen and (max-width: 480px) {
  .contact-panel-icon { inline-size: 2.5rem; block-size: 2.5rem; }
}
/* Reduced motion (durations: im.css): the action cards do not lift on hover. */
@media (prefers-reduced-motion: reduce) { .contact-action:hover { transform: none; } }
/* ---------- Media gallery (/media) ----------
   A toolbar with the section tabs (all, videos, photos) and the search, then the videos as cards that play in place and
   the photos as a wall that opens in the lightbox. Each item names the page it comes from. */
.gallery-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--im-space-3) var(--im-space-5); padding: var(--im-space-3); margin-block-end: var(--im-space-6); border: 1px solid var(--im-border); border-radius: calc(var(--im-radius-lg) * 1.25); background: var(--im-surface); box-shadow: var(--im-shadow-sm); }
.gallery-tabs { display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--im-radius-pill); background: var(--im-surface-muted); }
.gallery-tabs a { display: inline-flex; align-items: center; justify-content: center; gap: var(--im-space-2); min-block-size: 2.5rem; padding: 0 var(--im-space-4); border-radius: var(--im-radius-pill); color: var(--im-text); font-size: var(--im-text-sm); font-weight: 600; text-decoration: none; white-space: nowrap; transition: background var(--im-duration), color var(--im-duration); }
.gallery-tabs a:hover { background: var(--im-blue-50); color: var(--im-blue-800); }
.gallery-tabs a[aria-current="page"] { background: var(--im-navy-950); color: #fff; }
.gallery-tabs .icon { inline-size: 1.1rem; block-size: 1.1rem; }
.gallery-count { min-inline-size: 1.6rem; padding: 0 .4rem; border-radius: var(--im-radius-pill); background: rgba(13, 24, 50, .08); font-size: var(--im-text-xs); line-height: 1.5rem; text-align: center; }
.gallery-tabs a[aria-current="page"] .gallery-count { background: var(--im-gold-500); color: var(--im-navy-950); }
.gallery-search { display: flex; flex: 1 1 18rem; max-inline-size: 32rem; gap: var(--im-space-2); margin: 0; }
.gallery-search-field { position: relative; flex: 1; min-inline-size: 0; }
.gallery-search-field .icon { position: absolute; inset-inline-start: .85rem; inset-block-start: 50%; transform: translateY(-50%); color: var(--im-text-secondary); pointer-events: none; }
.gallery-search-field input { inline-size: 100%; padding-inline-start: 2.6rem; border-radius: var(--im-radius-pill); }
.gallery-search .btn { border-radius: var(--im-radius-pill); }
.gallery-result { display: flex; flex-wrap: wrap; align-items: center; gap: var(--im-space-2) var(--im-space-4); margin: 0 0 var(--im-space-5); color: var(--im-text-secondary); }
.gallery-result a { font-weight: 600; }
.gallery-section + .gallery-section { margin-block-start: var(--im-space-10); padding-block-start: var(--im-space-8); border-block-start: 1px solid var(--im-divider); }
.gallery-section .section-head { margin-block-end: var(--im-space-5); }
.gallery-section .section-head h2 { display: flex; align-items: center; gap: var(--im-space-3); }
.gallery-section-icon { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--im-radius-md); background: var(--im-navy-950); color: var(--im-gold-500); }
.gallery-section-icon .icon { inline-size: 1.25rem; block-size: 1.25rem; }
/* A few videos share the row and grow with it; a single one keeps a comfortable width instead of filling the page. */
.video-grid { display: grid; gap: var(--im-space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); }
.video-grid > :only-child { max-inline-size: 42rem; }
.video-card { display: grid; grid-template-rows: auto 1fr; min-inline-size: 0; overflow: hidden; border: 1px solid var(--im-border); border-radius: var(--im-radius-lg); background: var(--im-surface); box-shadow: var(--im-shadow-sm); transition: box-shadow var(--im-duration), border-color var(--im-duration); }
.video-card:hover, .video-card:focus-within { border-color: var(--im-border-strong); box-shadow: var(--im-shadow-md); }
.video-card .video-frame { border-radius: 0; }
.video-card-body { display: grid; align-content: start; gap: var(--im-space-1); padding: var(--im-space-4); overflow-wrap: anywhere; }
.video-card-body h3 { margin: 0; font-size: var(--im-text-md); line-height: var(--im-leading-tight); }
.gallery-source { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--im-space-2); color: var(--im-text-secondary); font-size: var(--im-text-xs); font-weight: 400; }
.gallery-source a { color: var(--im-blue-800); text-decoration: none; }
.gallery-source a:hover, .gallery-source a:focus-visible { text-decoration: underline; }
.gallery-source time + a::before, .gallery-source time + span::before { content: "·"; margin-inline-end: var(--im-space-2); color: var(--im-text-disabled); }
.gallery-wall figcaption { display: grid; gap: 2px; overflow-wrap: anywhere; }
@media screen and (max-width: 720px) {
  .gallery-toolbar { padding: var(--im-space-2); }
  .gallery-tabs { inline-size: 100%; }
  .gallery-tabs a { flex: 1; padding: 0 var(--im-space-2); }
  .gallery-search { flex-basis: 100%; max-inline-size: none; }
}
@media screen and (max-width: 420px) {
  .gallery-tabs .icon { display: none; }
  .gallery-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ---------- Bold face (im.css: --im-font-bold) ----------
   Text of this layer set in a weight of 600 or more, with the same selectors as above so it wins over "font: inherit". */
.section-head a, .article-meta .chip, .article-outline a::before, .article-facts dd, .lb-btn, .in-page-nav a,
.person-photo, .person details summary, .rating-group label, .entry-more, .ceo-signature, .clarification-label, .event-date span, .view-toggle a,
.ceo-article-portrait figcaption, .gallery-zoom, .gallery-wall figcaption, .visual-timeline-body time,
.org-holder, .contact-hero-eyebrow, .contact-subtitle, .contact-way-value, .gallery-tabs a, .gallery-result a { font-family: var(--im-font-bold); }
.gallery-wall figcaption .gallery-source { font-family: var(--im-font); }
/* A progress bar inside the text of a project report; the request types as wider cards. */
.progress-inline { margin-block: .35rem !important; }
.rating-group.rating-group-wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }

/* ---------- Internal previews (/admin/preview, PreviewLayout): the public renderer without the site shell ---------- */
.preview-main { min-block-size: 100dvh; }
.preview-banner { position: sticky; inset-block-start: 0; z-index: var(--im-z-sticky); display: flex; flex-wrap: wrap; align-items: center; gap: var(--im-space-2) var(--im-space-3); padding: var(--im-space-2) clamp(var(--im-space-4), 3vw, var(--im-space-8)); background: var(--im-warning-bg); color: var(--im-warning); border-block-end: 1px solid var(--im-warning-border); font-family: var(--im-font-bold); font-size: var(--im-text-sm); }
.preview-banner .spacer { flex: 1; }
.preview-draft-note { display: flex; align-items: center; gap: var(--im-space-2); padding: var(--im-space-2) clamp(var(--im-space-4), 3vw, var(--im-space-8)); background: var(--im-info-bg); color: var(--im-info); font-size: var(--im-text-sm); }
.preview-card-stage { padding: var(--im-space-4); display: grid; gap: var(--im-space-3); background: var(--im-bg); min-block-size: 100dvh; align-content: start; }
.preview-card-frame .card-grid { grid-template-columns: minmax(0, 22rem); justify-content: center; }
.preview-card-frame.is-lead .card-grid { grid-template-columns: minmax(0, 1fr); }
.preview-card-stage > p { text-align: center; margin: 0; }

/* Blocks of a timeline event or a progress report, inside its card: a little room above, never wider than the card. */
.timeline-blocks { margin-block-start: var(--im-space-4); min-inline-size: 0; }
.timeline-blocks > * { max-inline-size: 100%; }

/* ---------- Print: A4, in colour, as the web shows it ----------
   A printed page looks like the page on a desktop screen: the phone and tablet rules are for screens only
   ("screen and (max-width)"), the page is laid out about 1080px wide and scaled to the A4 width (196mm of 210mm, so
   zoom = 740.8 / 1080), colours and backgrounds print exactly, and there is no page limit. The controls of the panel's
   previews (banner, draft note) and the lightbox stay off the paper; public.js loads every picture before printing. */
@media print {
  @page { size: A4 portrait; margin: 8mm 7mm; }
  html { zoom: .686; scroll-padding: 0; }
  *, *::before, *::after { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  body { background: var(--im-bg); }
  .preview-banner, .preview-draft-note, .lightbox, .toast-region { display: none !important; }
  .preview-main { min-block-size: 0; }
  .site-header, .sticky-aside, .article-aside, .in-page-nav { position: static !important; }
  img, svg, video, iframe, figure, blockquote, tr, .card, .entry-card, .doc-item, .video-frame, .gallery figure, .key-facts { break-inside: avoid; }
  h1, h2, h3, h4 { break-after: avoid; }
}