/* infeksionxestelikler.az — Dr. Xatirə Aslanova. "Laboratory notebook" design:
   warm paper, ink-green type, malachite teal for actions (the teal of the clinic's favicon), culture-dish line art.
   Headings Lexend 400/500, text Fira Sans (both carry Ə/ə). No inline styles anywhere (CSP style-src 'self'). */

/* ---------- fonts (self-hosted; unicode-range keeps Cyrillic files for the research page only) ---------- */
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/lexend-400-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/lexend-400-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/fira-sans-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/fira-sans-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/fira-sans-400-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Fira Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/fira-sans-400-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fira Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/fira-sans-400-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fira Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/fira-sans-400-italic-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/fira-sans-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/fira-sans-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/fira-sans-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/fira-sans-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/fira-sans-600-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

/* ---------- tokens ---------- */
:root {
  --paper: #F6F4EE;
  --paper-2: #EEEAE0;
  --card: #FFFFFF;
  --ink: #15201E;
  --ink-2: #303D3A;
  --muted: #5A6663;
  --line: #E1DBCD;
  --line-2: #CFC7B6;
  --brand: #0F6B5C;
  --brand-700: #0B5649;
  --brand-800: #08423A;
  --brand-50: #E8F1EC;
  --brand-100: #D2E5DC;
  --brand-200: #A8CDBF;
  --amber: #B7792A;
  --amber-50: #F7EEDF;
  --amber-200: #E3C394;
  --violet: #6A5199;
  --violet-50: #EFEAF6;
  --warn: #A13A2F;
  --warn-50: #FBEDEA;
  --warn-200: #EFC9C2;
  --deep: #10201C;
  --deep-2: #18302A;
  --focus: #C47F1E;
  --radius: 18px;
  --radius-lg: 26px;
  --shadow-1: 0 1px 2px rgba(21, 32, 30, .05), 0 4px 14px rgba(21, 32, 30, .05);
  --shadow-2: 0 2px 6px rgba(21, 32, 30, .06), 0 18px 44px rgba(21, 32, 30, .09);
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --head-h: 76px;
  --font-head: 'Lexend', 'Fira Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Fira Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
/* accessibility widget in the site colour (html:root outranks the :root defaults in a11y.css) */
html:root { --uwa-main: #0F6B5C; --uwa-main-rgb: 15, 107, 92; --uwa-main-hover: #0B5649; --uwa-main-dark: #08423A; --uwa-ink: #15201E; --uwa-body: #EEF3F0;
  --uwa-font: 'Fira Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 12px); background: var(--deep); }
body { margin: 0; background: var(--paper); color: var(--ink-2); font: 400 1.0625rem/1.68 var(--font-body); overflow-wrap: break-word; -webkit-font-smoothing: antialiased; }
@supports (overflow: clip) { body { overflow-x: clip; } }
img, svg, video { max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 500; color: var(--ink); line-height: 1.22; letter-spacing: -.012em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(1.85rem, 1.35rem + 1.6vw, 2.45rem); }
h2 { font-size: clamp(1.42rem, 1.15rem + .9vw, 1.95rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--brand-800); }
strong { font-weight: 600; color: var(--ink); }
input, select, textarea, button { font: inherit; color: inherit; }
abbr[title] { text-decoration: underline dotted; cursor: help; }
mark { background: var(--amber-50); color: var(--ink); border-radius: 3px; padding: 0 2px; box-shadow: inset 0 -2px 0 var(--amber-200); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
dialog:not([open]) { display: none !important; }
/* single-column grids never grow past their container (long e-mail addresses, large-text mode); later rules may add columns */
.sub, .paside, .paside__toc ol, .facts, .steps, .gtable__list, .gtable dl, .faq-list, .faq-toc ul, .viewer, .split__side, .kv, .contact__info, .book__side,
.form, .field, .sresults, .drawer__foot, .dnav, .smap__list, .smap__list ul, .fnap, .fcontacts, .fcol ul { grid-template-columns: minmax(0, 1fr); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.i { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
.i-flip { transform: scaleX(-1); }
.skip { position: fixed; left: 12px; top: -60px; z-index: 300; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; text-decoration: none; }
.skip:focus { top: 12px; color: #fff; }
main { display: block; outline: none; }

/* petri-dish badge: icon in a tinted disc with a thin inner ring */
.h-ico, .kicker__ico, .card__ico, .sub__ico, .hero__fico, .facts__ico, .note__ico, .kv__ico, .links__ico, .byline__ico, .vrow__ico, .mapgate__ico, .review__ico {
  display: inline-grid; place-items: center; flex: none; border-radius: 50%; color: var(--brand); background: var(--brand-50);
  box-shadow: inset 0 0 0 1px var(--brand-100), inset 0 0 0 4px var(--brand-50), inset 0 0 0 5px rgba(15, 107, 92, .12);
}
.h-ico { width: 2.5rem; height: 2.5rem; }
.h-ico .i { width: 1.25rem; height: 1.25rem; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 46px; padding: .7rem 1.25rem; border-radius: 999px; border: 1px solid transparent;
  font-weight: 500; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s; }
.btn .i { width: 1.2em; height: 1.2em; }
.btn--primary { background: var(--brand); color: #fff; box-shadow: 0 6px 16px rgba(15, 107, 92, .22); }
.btn--primary:hover { background: var(--brand-700); color: #fff; transform: translateY(-1px); }
.btn--primary-soft { background: var(--brand); color: #fff; }
.btn--primary-soft:hover { background: var(--brand-700); color: #fff; }
.btn--soft { background: var(--brand-50); color: var(--brand-800); border-color: var(--brand-100); }
.btn--soft:hover { background: var(--brand-100); color: var(--brand-800); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); }
.icon-btn { width: 44px; height: 44px; display: inline-grid; place-items: center; flex: none; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink);
  cursor: pointer; text-decoration: none; transition: border-color .2s, color .2s, background-color .2s; }
.icon-btn:hover { border-color: var(--brand-200); color: var(--brand); }
.icon-btn .i { width: 1.25rem; height: 1.25rem; }
.more { display: inline; font-weight: 500; text-decoration: none; color: var(--brand); }
.more .i { width: 1.05em; height: 1.05em; transition: transform .2s; }
.more:hover .i { transform: translateX(3px); }
.more:hover { text-decoration: underline; }

/* ---------- kicker: a specimen label ---------- */
.kicker { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 14px; padding: 4px 14px 4px 4px; border-radius: 999px; background: var(--card);
  border: 1px solid var(--line); font: 500 .86rem/1.3 var(--font-body); color: var(--brand-800); max-width: 100%; }
.kicker > span:not(.kicker__ico) { min-width: 0; }
.kicker__ico { width: 1.9rem; height: 1.9rem; }
.kicker__ico .i { width: 1rem; height: 1rem; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 100; }
.site-header::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(246, 244, 238, .9); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.site-header.is-scrolled::before { border-bottom-color: var(--line); box-shadow: 0 6px 24px rgba(21, 32, 30, .06); }
.hbar { display: flex; align-items: center; gap: 18px; min-height: var(--head-h); }
.brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; text-decoration: none; color: var(--ink); min-width: 0; }
.brand__logo { display: block; width: 54px; height: 54px; flex: none; }
.brand__logo img { display: block; width: 100%; height: 100%; }
.brand__text { display: flex; flex-direction: column; min-width: 0; }
.brand__name { font: 500 1.06rem/1.15 var(--font-head); color: var(--ink); white-space: nowrap; }
.brand__role { font-size: .84rem; color: var(--muted); white-space: nowrap; }
.brand:hover .brand__name { color: var(--brand); }
.nav { flex: 0 1 auto; position: relative; margin-left: 8px; }
.nav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; }
.nav__item.has-mega { position: static; }
.nav__link { display: inline-flex; align-items: center; gap: 4px; padding: .62rem .72rem; border: 0; border-radius: 999px; background: none; color: var(--ink);
  font: 400 .98rem/1.2 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer; position: relative; }
.nav__link .i { width: 1rem; height: 1rem; transition: transform .2s; }
.nav__link:hover { background: rgba(15, 107, 92, .07); color: var(--brand-800); }
.nav__link.is-current { color: var(--brand); }
.nav__link.is-current::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--amber); }
.has-sub.is-open > .nav__link .i { transform: rotate(180deg); }
.nav__panel { position: absolute; left: -10px; top: calc(100% - 14px); padding-top: 22px; z-index: 120; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s, visibility .18s; }
.has-mega > .nav__panel { left: 50%; transform: translate(-50%, 6px); }
.has-sub.is-open > .nav__panel, html:not(.js-menu) .has-sub:hover > .nav__panel, html:not(.js-menu) .has-sub:focus-within > .nav__panel { opacity: 1; visibility: visible; transform: none; }
.has-mega.is-open > .nav__panel, html:not(.js-menu) .has-mega:hover > .nav__panel, html:not(.js-menu) .has-mega:focus-within > .nav__panel { transform: translateX(-50%); }
.nav__panel-in { background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-2); padding: 10px; min-width: 300px; }
.sub { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sub--mega { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(600px, calc(100vw - 48px)); column-gap: 6px; }
.sub a { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 14px; color: var(--ink); text-decoration: none; font-size: .96rem; line-height: 1.3; }
.sub a:hover, .sub a[aria-current] { background: var(--brand-50); color: var(--brand-800); }
.sub__ico { width: 2.1rem; height: 2.1rem; }
.sub__ico .i { width: 1.05rem; height: 1.05rem; }
.sub a:hover .sub__ico { background: var(--card); }
.sub__all { grid-column: 1 / -1; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
.sub__all a { color: var(--brand); font-weight: 500; }
.hactions { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; }
.cta-slot { margin-left: auto; }
.cta { white-space: nowrap; }
.burger { display: none; }
html.nav-collapse .nav { display: none; }
html.nav-collapse .burger { display: inline-grid; }
html.nav-collapse .hactions { justify-content: flex-end; }
html.nav-collapse .hsearch { order: 2; }
html.nav-collapse .cta-slot { order: 1; }
html.nav-collapse .burger { order: 3; }
@media (max-width: 1179.98px) {
  .nav { display: none; }
  .burger { display: inline-grid; }
  .hactions { justify-content: flex-end; }
  .hsearch { order: 2; }
  .cta-slot { order: 1; }
  .burger { order: 3; }
}

/* ---------- breadcrumbs and page head ---------- */
.crumbs { padding-top: 14px; font-size: .88rem; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.crumbs li { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); min-width: 0; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--brand); text-decoration: underline; }
.crumbs__sep { width: .85rem; height: .85rem; opacity: .6; }
.crumbs [aria-current] { color: var(--ink); }
.phead { padding: 22px 0 30px; }
.phead__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
.phead--plate .phead__grid { grid-template-columns: minmax(0, 1fr) auto; }
.phead h1 { margin: 0; max-width: 24em; }
.phead .lead { margin: 14px 0 0; font-size: 1.12rem; max-width: 46em; color: var(--ink-2); }
.pmeta { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 16px 0 0; padding: 0; font-size: .9rem; color: var(--muted); }
.pmeta li { display: inline-flex; align-items: center; gap: 8px; }
.pmeta li:first-child:not(.byline) { padding: 3px 12px; border-radius: 999px; border: 1px dashed var(--line-2); background: var(--card); color: var(--ink-2); }
.byline__ico { width: 1.7rem; height: 1.7rem; }
.byline__ico .i { width: .95rem; height: .95rem; }
@media (max-width: 719.98px) {
  .phead--plate .phead__grid { grid-template-columns: minmax(0, 1fr); }
  .phead .plate { display: none; }
}

/* ---------- culture-dish line art ---------- */
.plate, .culture { position: relative; pointer-events: none; }
.plate { width: clamp(150px, 16vw, 210px); aspect-ratio: 1; flex: none; }
.plate__dish, .culture .plate__dish { position: absolute; inset: 0; width: 100%; height: 100%; }
.dish-fill { fill: var(--card); }
.dish-ring { fill: none; stroke: var(--brand-200); stroke-width: 2; }
.dish-ring2 { fill: none; stroke: var(--brand-100); stroke-width: 1.4; stroke-dasharray: 2 5; }
.dish-dots circle { fill: var(--brand-200); opacity: .55; }
.plate__o, .culture__o { position: absolute; overflow: visible; }
.plate__o--1 { width: 50%; left: 13%; top: 27%; }
.plate__o--2 { width: 30%; right: 12%; top: 13%; }
.plate__o--3 { width: 26%; right: 17%; bottom: 13%; }
.o-body { fill: var(--o-fill, rgba(15, 107, 92, .1)); stroke: var(--o-stroke, #0F6B5C); stroke-width: 1.6; stroke-linejoin: round; }
.o-line { fill: none; stroke: var(--o-stroke, #0F6B5C); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.o-thick { fill: none; stroke: var(--o-stroke, #0F6B5C); stroke-width: 4.5; stroke-linecap: round; }
.o-thin { stroke-width: 2.6; }
.o-dash { stroke-dasharray: 2.2 2.4; }
.o-dot { fill: var(--amber); stroke: none; }
.o-nuc { fill: var(--o-stroke, #0F6B5C); stroke: none; opacity: .55; }
.o-worm { fill: none; stroke: var(--o-stroke, #0F6B5C); stroke-width: 7; stroke-linecap: round; opacity: .9; }
.o-worm-in { fill: none; stroke: var(--card); stroke-width: 2.6; stroke-linecap: round; opacity: .85; }
.o-warm { --o-fill: rgba(183, 121, 42, .16); stroke: var(--amber); }
.o-warm-line { stroke: var(--amber); }
.plate__o--2, .culture__o--2, .culture__o--5, .culture__o--8 { --o-stroke: #9A6A2A; --o-fill: rgba(183, 121, 42, .14); }
.plate__o--3, .culture__o--3, .culture__o--6 { --o-stroke: #6A5199; --o-fill: rgba(106, 81, 153, .12); }

/* hero field: a large dish behind the photo; organisms drift only while it is on screen */
.culture { position: absolute; z-index: -1; width: 112%; aspect-ratio: 1; left: 22%; top: -9%; }
.culture .dish-fill { fill: rgba(255, 255, 255, .55); }
.culture__o { width: 11%; }
.culture__o--1 { left: 75%; top: 16%; width: 13%; }
.culture__o--2 { left: 84%; top: 34%; }
.culture__o--3 { left: 74%; top: 50%; width: 12%; }
.culture__o--4 { left: 85%; top: 63%; width: 10%; }
.culture__o--5 { left: 41%; top: -1%; width: 9%; }
.culture__o--6 { left: 58%; top: 0; width: 9%; }
.culture__o--7 { left: 74%; top: 79%; width: 10%; }
.culture__o--8 { left: 28%; top: 3%; width: 8%; }

@keyframes drift-a { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 6% -7%; rotate: 9deg; } }
@keyframes drift-b { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: -8% 5%; rotate: -12deg; } }
@keyframes drift-c { 0%, 100% { translate: 0 0; rotate: 0deg; } 33% { translate: 5% 6%; rotate: 6deg; } 66% { translate: -4% 2%; rotate: -5deg; } }
@keyframes spin-slow { to { rotate: 360deg; } }
.m-on .is-live .plate__o--1, .m-on .is-live .culture__o--1, .m-on .is-live .culture__o--4, .m-on .is-live .culture__o--7 { animation: drift-a 15s ease-in-out infinite; }
.m-on .is-live .plate__o--2, .m-on .is-live .culture__o--2, .m-on .is-live .culture__o--5, .m-on .is-live .culture__o--8 { animation: drift-b 19s ease-in-out infinite; }
.m-on .is-live .plate__o--3, .m-on .is-live .culture__o--3, .m-on .is-live .culture__o--6 { animation: drift-c 23s ease-in-out infinite; }
.m-on .is-live .dish-dots { animation: spin-slow 160s linear infinite; transform-origin: 100px 100px; }

/* ---------- hero ---------- */
.hero { position: relative; padding: clamp(26px, 5vw, 64px) 0 clamp(24px, 3vw, 44px); overflow: hidden; overflow: clip; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.hero__text { position: relative; z-index: 1; min-width: 0; }
.hero__title { margin: 4px 0 18px; }
.hero__name { display: block; font-size: clamp(2.2rem, 1.45rem + 2.6vw, 3rem); font-weight: 500; line-height: 1.06; letter-spacing: -.02em; }
.hero__role { display: block; margin-top: .45em; font-family: var(--font-head); font-weight: 400; font-size: clamp(1.08rem, .98rem + .55vw, 1.42rem); color: var(--brand); letter-spacing: 0; }
.hero__lead { font-size: 1.12rem; max-width: 33em; color: var(--ink-2); margin: 0; }
.hero__facts { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 22px; max-width: 36em; }
.hero__facts li { display: flex; gap: 12px; align-items: center; font-size: .96rem; line-height: 1.35; color: var(--ink); min-width: 0; }
.hero__fico { width: 2.4rem; height: 2.4rem; }
.hero__media { position: relative; isolation: isolate; justify-self: center; width: min(100%, 440px); }
.hero__photo { position: relative; margin: 0; background: var(--card); border-radius: var(--radius-lg); padding: 10px; box-shadow: var(--shadow-2); border: 1px solid var(--line); }
.hero__img { display: block; width: 100%; border-radius: 18px; }
.hero__photo figcaption { display: flex; align-items: center; gap: 8px; padding: 10px 6px 2px; font-size: .9rem; color: var(--muted); }
.hero__photo figcaption .i { color: var(--brand); }
@media (max-width: 899.98px) {
  /* phones and tablets: the photo comes right after the name */
  .hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kicker" "title" "media" "lead" "facts"; gap: 0; }
  .hero__text { display: contents; }
  .hero__text > .kicker { grid-area: kicker; justify-self: start; }
  .hero__title { grid-area: title; }
  .hero__media { grid-area: media; justify-self: start; width: min(100%, 360px); margin: 6px 0 26px; }
  .hero__lead { grid-area: lead; }
  .hero__facts { grid-area: facts; }
  .culture { width: 108%; left: 18%; top: -7%; }
}
@media (max-width: 479.98px) {
  .hero__facts { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- sections ---------- */
.section { padding: clamp(52px, 7vw, 96px) 0; }
.section--tint { background: var(--paper-2); }
.section__head { max-width: 760px; margin-bottom: 30px; }
.section__head h2 { margin-bottom: .35em; }
.section__head p { color: var(--muted); margin: 0; }
.section__more { margin: 26px 0 0; }

.who__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.who__text p { font-size: 1.08rem; }
.stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 16px; min-width: 0; }
.stat__k { display: block; font: 500 1.3rem/1.2 var(--font-head); color: var(--brand); margin-bottom: 6px; }
.stat__k em { font-style: italic; }
.stat__t { display: block; font-size: .94rem; line-height: 1.45; color: var(--ink-2); }
@media (max-width: 899.98px) { .who__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 419.98px) { .stats { grid-template-columns: minmax(0, 1fr); } }

.sympt__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.checklist { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; font-size: .97rem; line-height: 1.4; min-width: 0; }
.checklist .i { color: var(--brand); margin-top: .1em; }
@media (max-width: 899.98px) { .sympt__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 559.98px) { .checklist { grid-template-columns: minmax(0, 1fr); } }

.principles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.principle { grid-column: span 2; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; min-width: 0; }
.principle--plus { grid-column: span 3; }
.principle__n { display: inline-grid; place-items: center; min-width: 2.6rem; height: 2.6rem; padding: 0 .4rem; border-radius: 999px; font: 500 1rem/1 var(--font-head); color: var(--brand-800);
  background: var(--brand-50); box-shadow: inset 0 0 0 1px var(--brand-100); margin-bottom: 12px; }
.principle h3 { margin-bottom: .4em; }
.principle p { margin: 0; font-size: .97rem; }
@media (max-width: 979.98px) { .principle, .principle--plus { grid-column: span 3; } .principle:nth-child(3) { grid-column: span 6; } }
@media (max-width: 599.98px) { .principles { grid-template-columns: minmax(0, 1fr); } .principle, .principle--plus, .principle:nth-child(3) { grid-column: auto; } }

.intro { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.intro__text p { max-width: 30em; }
@media (max-width: 719.98px) { .intro { grid-template-columns: minmax(0, 1fr); } .intro .vcard { max-width: 300px; } }
.faq-home { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 64px); align-items: start; }
@media (max-width: 899.98px) { .faq-home { grid-template-columns: minmax(0, 1fr); } }

/* ---------- cards ---------- */
.cards { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards--svc { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cards--svc > .card { grid-column: span 2; }
.cards--svc > .card:nth-child(-n+2) { grid-column: span 3; }
@media (max-width: 979.98px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards--svc > .card, .cards--svc > .card:nth-child(-n+2) { grid-column: span 3; }
  .cards--svc > .card:last-child { grid-column: span 6; }
}
@media (max-width: 599.98px) {
  .cards, .cards--svc { grid-template-columns: minmax(0, 1fr); }
  .cards--svc > .card, .cards--svc > .card:nth-child(-n+2), .cards--svc > .card:last-child { grid-column: auto; }
}
.card { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 22px; border-radius: 22px; background: var(--card); border: 1px solid var(--line);
  color: var(--ink-2); text-decoration: none; transition: transform .25s, box-shadow .25s, border-color .25s; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--brand-200); color: var(--ink-2); }
.card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card__ico { width: 3rem; height: 3rem; transition: background-color .25s, color .25s; }
.card__ico .i { width: 1.45rem; height: 1.45rem; }
.card:hover .card__ico { background: var(--brand); color: #fff; box-shadow: none; }
.card__tag { font-size: .78rem; line-height: 1.3; color: var(--brand-800); background: var(--brand-50); border-radius: 999px; padding: 4px 10px; text-align: right; }
.card__title { margin: 4px 0 0; font: 500 1.12rem/1.3 var(--font-head); color: var(--ink); }
.card__text { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--muted); }
.card__more { margin-top: auto; padding-top: 4px; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: .92rem; color: var(--brand); }
.card__more .i { transition: transform .25s; }
.card:hover .card__more .i { transform: translateX(4px); }

/* ---------- text pages ---------- */
.pbody { padding: 6px 0 clamp(60px, 8vw, 100px); }
.prose { max-width: 820px; min-width: 0; }
.prose > :not(:first-child) { margin-top: 1.1rem; }
.prose > h2 { display: flex; align-items: center; gap: 14px; margin: 0 0 1rem; font-size: clamp(1.25rem, 1.12rem + .5vw, 1.55rem); }
.prose > h2:not(:first-child) { margin-top: 2.4rem; }
.prose > :is(.docbox, .quote, .sources, .author, .pvideos):not(:first-child) { margin-top: 2rem; }
.prose > .related:not(:first-child) { margin-top: 2.6rem; }
.prose h3 { margin: 1.6rem 0 .6rem; }
.prose p { margin: 0; }
.prose > ul:not([class]), .prose > ol:not([class]), .docbox__b ul:not([class]), .answer__a ul { padding-left: 1.3rem; margin-bottom: 0; }
.prose li + li { margin-top: .4em; }
.prose ul:not([class]) li::marker { color: var(--brand); }
.prose a:not([class]) { color: var(--brand); }
.prose em { font-style: italic; }
.prose--intro { margin-bottom: 26px; }
.pbody__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 4vw, 64px); align-items: start; }
.paside { position: sticky; top: calc(var(--head-h) + 16px); display: grid; gap: 14px; min-width: 0; max-height: calc(100vh - var(--head-h) - 32px); overflow: auto; scrollbar-width: thin; }
.paside__box { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 16px 18px; }
.paside__t { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 500 .95rem/1.3 var(--font-head); color: var(--ink); }
.paside__t .i { color: var(--brand); }
.paside__toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: t; }
.paside__toc li { counter-increment: t; }
.paside__toc a { display: grid; grid-template-columns: 1.7rem minmax(0, 1fr); gap: 6px; padding: 6px 8px; border-radius: 10px; color: var(--ink-2); text-decoration: none; font-size: .9rem; line-height: 1.35; }
.paside__toc a::before { content: counter(t, decimal-leading-zero); color: var(--brand); font: 500 .8rem/1.7 var(--font-head); }
.paside__toc a:hover { background: var(--brand-50); color: var(--brand-800); }
.paside__doc { display: flex; gap: 12px; align-items: center; }
.paside__photo { flex: none; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px var(--brand-50), 0 0 0 4px var(--brand-100); }
.paside__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.paside__name { margin: 0; font: 500 1rem/1.3 var(--font-head); }
.paside__name a { color: var(--ink); text-decoration: none; }
.paside__name a:hover { color: var(--brand); text-decoration: underline; }
.paside__role { margin: 2px 0 0; font-size: .85rem; color: var(--muted); }
.paside__p { margin: 0 0 8px; font-size: .9rem; }
.paside .cicons { margin-top: 10px; gap: 6px; }
.paside .cicon { width: 40px; height: 40px; }
.paside .cicon .i { width: 1.1rem; height: 1.1rem; }
@media (max-width: 1099.98px) { .pbody__grid { grid-template-columns: minmax(0, 1fr); } .paside { display: none; } }

.answer { position: relative; padding: 22px 24px 22px; border-radius: 22px; background: var(--card); border: 1px solid var(--brand-100); box-shadow: var(--shadow-1); }
.answer::after { content: ''; position: absolute; right: 18px; top: 18px; width: 54px; height: 54px; border-radius: 50%; border: 1.5px dashed var(--brand-100); background: radial-gradient(circle at 34% 40%, var(--brand-200) 0 3px, transparent 3.5px), radial-gradient(circle at 63% 62%, var(--amber-200) 0 2.5px, transparent 3px), radial-gradient(circle at 50% 24%, var(--brand-100) 0 2px, transparent 2.5px); }
.answer__k { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: .82rem; font-weight: 500; color: var(--brand); letter-spacing: .02em; }
.answer__k .i { width: 1.05rem; height: 1.05rem; }
.answer__q { margin: 8px 0 6px; padding-right: 60px; font-size: clamp(1.15rem, 1.06rem + .35vw, 1.32rem); }
.answer__a p { font-size: 1.07rem; color: var(--ink); margin: 0; }
.answer__a p + p { margin-top: .7em; }

.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.facts li { display: grid; grid-template-columns: 2.8rem minmax(0, 1fr); gap: 16px; padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin: 0; }
.facts__ico { width: 2.8rem; height: 2.8rem; }
.facts__ico .i { width: 1.3rem; height: 1.3rem; }
.facts__k { display: block; margin-bottom: 2px; font: 500 1.02rem/1.35 var(--font-head); color: var(--ink); }

.docbox { padding: 22px 24px; border-radius: 22px; background: var(--brand-50); border: 1px solid var(--brand-100); }
.docbox__head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.docbox__mark { width: 3.2rem; height: 3.2rem; flex: none; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .7); }
.docbox__mark img { display: block; width: 100%; height: 100%; }
.docbox h2 { margin: 0; font-size: 1.12rem; }
.docbox__b > * + * { margin-top: .7rem; }
.docbox__b p { margin: 0; }
.docbox__b li + li { margin-top: .35em; }

.note { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.note > p, .note > div, .note > span { margin: 0; min-width: 0; }
.note > div p { margin: 0; }
.note > div p + p { margin-top: .5em; }
.note__ico { width: 2.2rem; height: 2.2rem; }
.note__ico .i { width: 1.1rem; height: 1.1rem; }
.note--warn { background: var(--warn-50); border-color: var(--warn-200); }
.note--warn .note__ico { color: var(--warn); background: #fff; box-shadow: inset 0 0 0 1px var(--warn-200); }
.note--do { background: var(--brand-50); border-color: var(--brand-100); }
.tel103 { font-weight: 600; white-space: nowrap; }

.quote { position: relative; margin: 2rem 0 0; padding: 26px 28px 24px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.quote__ico { position: absolute; left: 24px; top: -18px; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--amber-50); color: var(--amber);
  box-shadow: inset 0 0 0 1px var(--amber-200); }
.quote blockquote { margin: 0; }
.quote blockquote p { font: 400 clamp(1.15rem, 1.05rem + .45vw, 1.4rem)/1.45 var(--font-head); color: var(--ink); }
.quote figcaption { margin-top: 10px; color: var(--muted); font-size: .94rem; }

.timeline { list-style: none; margin: 0; padding: 0 0 0 4px; position: relative; }
.timeline::before { content: ''; position: absolute; left: 10px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(var(--brand-100), var(--line)); }
.timeline li { position: relative; display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); gap: 14px; padding: 0 0 18px 34px; margin: 0; }
.timeline li::before { content: ''; position: absolute; left: 1px; top: .35em; width: 20px; height: 20px; border-radius: 50%; background: var(--card); border: 2px solid var(--brand-200); box-shadow: inset 0 0 0 4px var(--card), inset 0 0 0 10px var(--brand-50); }
.timeline__when { font: 500 .95rem/1.5 var(--font-head); color: var(--brand-800); }
.timeline__what { min-width: 0; }
@media (max-width: 559.98px) { .timeline li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

.steps { list-style: none; counter-reset: st; margin: 0; padding: 0; display: grid; gap: 10px; }
.steps li { counter-increment: st; position: relative; padding: 14px 16px 14px 58px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; margin: 0; }
.steps li::before { content: counter(st); position: absolute; left: 14px; top: 12px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 500 .92rem/1 var(--font-head);
  color: var(--brand-800); background: var(--brand-50); box-shadow: inset 0 0 0 1px var(--brand-100); }

/* tables */
.twrap { overflow-x: auto; border-radius: 18px; border: 1px solid var(--line); background: var(--card); }
.twrap:focus-visible { outline-offset: 3px; }
.twrap table { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.45; }
.twrap th, .twrap td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.twrap tr:last-child th, .twrap tr:last-child td { border-bottom: 0; }
.twrap thead th { background: var(--brand-50); color: var(--brand-800); font: 500 .9rem/1.35 var(--font-head); }
.twrap tbody th { color: var(--ink); font-weight: 600; }
.t--stack tbody td:first-child { min-width: 6.2rem; }
.t--kv th { width: 34%; background: var(--paper); }
@media (max-width: 759.98px) {
  .t--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .t--stack tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .t--stack tr:last-child { border-bottom: 0; }
  .t--stack td, .t--stack tbody th { display: block; border: 0; padding: 4px 14px; }
  .t--stack td::before { content: attr(data-label); display: block; font-size: .78rem; font-weight: 500; color: var(--brand); text-transform: none; }
  .t--rowhead tbody th { font-family: var(--font-head); font-weight: 500; padding-top: 8px; }
  .t--kv th, .t--kv td { display: block; width: auto; }
  .t--kv th { padding-bottom: 2px; background: none; }
}
.gtable { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.gtable__g { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 18px; min-width: 0; }
.gtable__t { margin: 0 0 10px; font-size: 1.02rem; color: var(--brand-800); }
.gtable__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gtable__list li { margin: 0; padding-top: 10px; border-top: 1px solid var(--line); }
.gtable__list li:first-child { padding-top: 0; border-top: 0; }
.gtable__name { margin: 0 0 4px; font: 500 1rem/1.35 var(--font-head); color: var(--ink); }
.gtable dl { margin: 0; display: grid; gap: 2px; font-size: .92rem; }
.gtable dl div { display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); gap: 8px; }
.gtable dt { color: var(--muted); }
.gtable dd { margin: 0; }
@media (max-width: 759.98px) { .gtable { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 419.98px) { .gtable dl div { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* FAQ */
.faq-list { display: grid; gap: 10px; }
.faq { background: var(--card); border: 1px solid var(--line); border-radius: 18px; transition: border-color .2s, box-shadow .2s; }
.faq[open] { border-color: var(--brand-200); box-shadow: var(--shadow-1); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; cursor: pointer; list-style: none; font: 500 1.03rem/1.4 var(--font-head); color: var(--ink); border-radius: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .i { width: 1.25rem; height: 1.25rem; color: var(--brand); transition: transform .25s; }
.faq[open] summary .i { transform: rotate(180deg); }
.faq summary:hover { color: var(--brand-800); }
.faq__a { padding: 0 18px 18px; }
.faq__a > * + * { margin-top: .8rem; }
.faq__a p { margin: 0; }
.faq__a .cicons { margin-top: 12px; }
.faq-wrap { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.faq-toc { position: sticky; top: calc(var(--head-h) + 16px); }
.faq-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.faq-toc a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; color: var(--ink); text-decoration: none; font-size: .95rem; }
.faq-toc a:hover { background: var(--brand-50); color: var(--brand-800); }
.faq-toc .i { color: var(--brand); }
.faq-groups { min-width: 0; max-width: 820px; }
.faq-group + .faq-group { margin-top: 2.6rem; }
.faq-group h2 { display: flex; align-items: center; gap: 14px; font-size: clamp(1.2rem, 1.1rem + .4vw, 1.45rem); }
@media (max-width: 899.98px) { .faq-wrap { grid-template-columns: minmax(0, 1fr); } .faq-toc { position: static; } .faq-toc ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479.98px) { .faq-toc ul { grid-template-columns: minmax(0, 1fr); } }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .m-on .faq::details-content { height: 0; overflow: clip; transition: height .3s ease, content-visibility .3s allow-discrete; }
  .m-on .faq[open]::details-content { height: auto; }
}
.fvid { display: flex; gap: 12px; align-items: center; margin-top: 14px; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper); text-decoration: none; color: var(--ink-2); }
.fvid:hover { border-color: var(--brand-200); color: var(--ink-2); }
.fvid__thumb { position: relative; flex: none; width: 54px; aspect-ratio: 9 / 16; border-radius: 8px; overflow: hidden; background: var(--paper-2); }
.fvid__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fvid__thumb .i { position: absolute; inset: 0; margin: auto; width: 1.4rem; height: 1.4rem; color: #fff; fill: #fff; stroke: none; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5)); }
.fvid__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: .9rem; }
.fvid__k { font-size: .76rem; font-weight: 600; color: var(--brand); }
.fvid__t { font-weight: 500; color: var(--ink); line-height: 1.35; }
.fvid__m { color: var(--muted); font-size: .82rem; }
.fvid__go { display: inline-flex; align-items: center; gap: 6px; color: var(--brand); font-weight: 500; }

/* related links, sources, author */
.related { margin-top: 2.6rem; padding-top: 1.8rem; border-top: 1px solid var(--line); }
.related__title { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 1.1rem; }
.related__title .h-ico { width: 2.1rem; height: 2.1rem; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips a, .chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink);
  text-decoration: none; font-size: .93rem; line-height: 1.3; cursor: pointer; max-width: 100%; }
.chips a > span, .chip > span { min-width: 0; overflow-wrap: anywhere; }
.chips a .i, .chip .i { color: var(--brand); }
.chips a:hover, .chip:hover { border-color: var(--brand-200); color: var(--brand-800); }
.chip.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip.is-on .i { color: #fff; }
.sources { display: flex; gap: 10px; align-items: flex-start; margin-top: 2rem; font-size: .9rem; color: var(--muted); }
.sources .i { color: var(--brand); margin-top: .2em; }
.author { display: flex; gap: 16px; align-items: center; margin-top: 2rem; padding: 18px 20px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.author__photo { flex: none; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px var(--brand-50), 0 0 0 4px var(--brand-100); }
.author__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.author__txt { min-width: 0; }
.author__txt p { margin: 0; }
.author__k { font-size: .8rem; color: var(--muted); }
.author__name { font: 500 1.08rem/1.35 var(--font-head); }
.author__name a { color: var(--ink); text-decoration: none; }
.author__name a:hover { color: var(--brand); text-decoration: underline; }
.author__role { font-size: .92rem; color: var(--muted); }

/* videos */
.pvideos { margin-top: 2.4rem; }
.pvideos h2 { display: flex; align-items: center; gap: 14px; font-size: clamp(1.2rem, 1.1rem + .4vw, 1.45rem); }
.vgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.vgrid--1 { grid-template-columns: minmax(0, 260px); }
@media (max-width: 979.98px) { .vgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 699.98px) { .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vcard { margin: 0; display: flex; flex-direction: column; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.vcard__media { position: relative; aspect-ratio: 9 / 16; background: var(--paper-2); overflow: hidden; }
.vcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.vcard:hover .vcard__media img { transform: scale(1.03); }
.vcard__play { position: absolute; inset: 0; display: grid; place-items: center; }
.vcard__pi { width: 3.2rem; height: 3.2rem; padding: .85rem .7rem .85rem 1rem; border-radius: 50%; background: rgba(16, 32, 28, .55); color: #fff; fill: #fff; stroke: none; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); transition: transform .25s, background-color .25s; }
.vcard:hover .vcard__pi { transform: scale(1.08); background: rgba(15, 107, 92, .85); }
.vcard figcaption { display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 16px; flex: 1; }
.vcard__title { margin: 0; font: 500 .98rem/1.35 var(--font-head); color: var(--ink); }
.vcard__meta { margin: 0; font-size: .82rem; color: var(--muted); }
.vcard__btn { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; font-weight: 500; text-decoration: none; color: var(--brand); align-self: flex-start; max-width: 100%; }
.vcard__btn:hover { text-decoration: underline; }
.vrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 18px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.vrow__ico { width: 2.6rem; height: 2.6rem; }
.vrow__txt { flex: 1 1 260px; min-width: 0; }
.vrow__txt p { margin: 0; }
.vrow__btn { flex: 0 1 auto; max-width: 100%; text-align: center; }
.vnote { display: flex; gap: 8px; align-items: center; margin-top: 12px; font-size: .86rem; color: var(--muted); }
.vnote .i { color: var(--brand); }
.vcard--intro { max-width: 300px; }

/* certificates */
.docs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 899.98px) { .docs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479.98px) { .docs { grid-template-columns: minmax(0, 1fr); } }
.docs__item { margin: 0; min-width: 0; }
.docs__link { display: flex; flex-direction: column; height: 100%; border-radius: 20px; background: var(--card); border: 1px solid var(--line); overflow: hidden; text-decoration: none; color: var(--ink-2); transition: box-shadow .25s, border-color .25s; }
.docs__link:hover { box-shadow: var(--shadow-2); border-color: var(--brand-200); color: var(--ink-2); }
.docs__thumb { display: block; aspect-ratio: 4 / 3; min-height: 0; overflow: hidden; background: var(--paper-2); padding: 12px; }
.docs__thumb img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(21, 32, 30, .14)); transition: transform .4s; }
.docs__link:hover .docs__thumb img { transform: scale(1.03); }
.docs__txt { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px 16px; }
.docs__title { font: 500 1rem/1.35 var(--font-head); color: var(--ink); }
.docs__line { font-size: .88rem; color: var(--muted); }
.viewer { display: grid; gap: 12px; }
.viewer__stage { display: grid; place-items: center; min-height: 0; max-height: calc(100dvh - 190px); overflow: auto; background: var(--paper-2); border-radius: 14px; }
.viewer__stage img { display: block; max-width: 100%; max-height: calc(100dvh - 200px); width: auto; height: auto; }
.viewer__nav { display: flex; align-items: center; justify-content: center; gap: 16px; }
.viewer__count { margin: 0; min-width: 4.5em; text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; }

/* links list (social) */
.links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.links a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); text-decoration: none; color: var(--ink); min-width: 0; }
.links a:hover { border-color: var(--brand-200); color: var(--ink); }
.links a > span:not(.links__ico) { display: flex; flex-direction: column; min-width: 0; }
.links__ico { width: 2.4rem; height: 2.4rem; }
.links__k { font-size: .82rem; color: var(--muted); }
.links__v { font-weight: 500; overflow-wrap: anywhere; }
@media (max-width: 559.98px) { .links { grid-template-columns: minmax(0, 1fr); } }

/* hubs, articles filter */
.hub-note { margin-top: 26px; max-width: 820px; }
.filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.filter-empty { color: var(--muted); }

/* about */
.split { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.split__side { position: sticky; top: calc(var(--head-h) + 16px); display: grid; gap: 22px; min-width: 0; }
.split__side .pvideos { margin-top: 0; }
.split__side .pvideos h2 { font-size: 1.1rem; gap: 12px; }
.split__side .vgrid--1 { grid-template-columns: minmax(0, 220px); }
.split__main { min-width: 0; }
.photo-card { margin: 0; padding: 10px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.photo-card img { display: block; width: 100%; border-radius: 18px; }
.photo-card figcaption { padding: 10px 6px 2px; font-size: .9rem; color: var(--muted); }
@media (max-width: 899.98px) { .split { grid-template-columns: minmax(0, 1fr); } .split__side { position: static; max-width: 420px; } }

/* ---------- panels, key/value rows, contact icons ---------- */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: clamp(18px, 3vw, 28px); min-width: 0; }
.panel h2 { display: flex; align-items: center; gap: 12px; font-size: 1.2rem; }
.panel h2 .h-ico { width: 2.2rem; height: 2.2rem; }
.kv { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.kv li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 14px; align-items: start; margin: 0; }
.kv__ico { width: 2.4rem; height: 2.4rem; }
.kv__ico .i { width: 1.15rem; height: 1.15rem; }
.kv__k { display: block; font-size: .82rem; color: var(--muted); }
.kv__v { color: var(--ink); }
.cicons { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cicon { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--brand-50); color: var(--brand-800); border: 1px solid var(--brand-100);
  text-decoration: none; transition: background-color .2s, color .2s, transform .2s; }
.cicon .i { width: 1.25rem; height: 1.25rem; }
.cicon:hover { background: var(--brand); border-color: var(--brand); color: #fff; transform: translateY(-2px); }

/* contact */
.contact { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(20px, 3vw, 32px); align-items: start; }
.contact__info { display: grid; gap: 18px; min-width: 0; }
.contact__icons { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.contact__k { margin: 0 0 10px; font-size: .86rem; color: var(--muted); }
.contact__form .note { margin-top: 16px; }
@media (max-width: 899.98px) { .contact { grid-template-columns: minmax(0, 1fr); } }
.mapgate { position: relative; border-radius: 24px; overflow: hidden; border: 1px solid var(--line); background: var(--card); aspect-ratio: 16 / 10; width: 100%; }
.mapgate__ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px;
  background: radial-gradient(circle at 50% 42%, var(--brand-50) 0, var(--card) 62%); }
.mapgate__ph p { margin: 0; }
.mapgate__ico { width: 3.4rem; height: 3.4rem; margin-bottom: 10px; }
.mapgate__ico .i { width: 1.6rem; height: 1.6rem; }
.mapgate__t { font: 500 1.1rem/1.3 var(--font-head); color: var(--ink); }
.mapgate__a { color: var(--ink-2); }
.mapgate__note { font-size: .84rem; color: var(--muted); margin-top: 6px !important; }
.mapgate__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px !important; }
.mapgate iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 479.98px) { .mapgate { aspect-ratio: auto; min-height: 320px; } }
.review { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 20px; background: var(--amber-50); border: 1px solid var(--amber-200); }
.review p { margin: 0 0 2px; color: var(--ink); }
.review__ico { width: 2.6rem; height: 2.6rem; color: var(--amber); background: #fff; box-shadow: inset 0 0 0 1px var(--amber-200); }

/* booking */
.book { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(20px, 3vw, 32px); align-items: start; }
.book__side { display: grid; gap: 16px; position: sticky; top: calc(var(--head-h) + 16px); }
.book__side h2 { margin: 0; }
.book__side .note { margin: 0; }
@media (max-width: 899.98px) { .book { grid-template-columns: minmax(0, 1fr); } .book__side { position: static; } }

/* ---------- forms ---------- */
.form { display: grid; gap: 16px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 559.98px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.field > label { font-size: .92rem; font-weight: 500; color: var(--ink); }
.req { color: var(--warn); }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: .7rem .9rem; border-radius: 14px; border: 1px solid var(--line-2); background: #fff; color: var(--ink);
  transition: border-color .2s, box-shadow .2s; }
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(15, 107, 92, .15); }
.field input::placeholder, .field textarea::placeholder { color: #8A938F; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--warn); }
.hint { margin: 0; font-size: .82rem; color: var(--muted); }
.err { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .86rem; color: var(--warn); }
.err .i { width: 1rem; height: 1rem; }
.field--check { gap: 4px; }
.field .check { display: flex; align-items: flex-start; gap: 12px; font-size: .9rem; font-weight: 400; color: var(--ink-2); cursor: pointer; }
.field .check input { width: 22px; height: 22px; min-height: 0; flex: none; margin: 2px 0 0; padding: 0; accent-color: var(--brand); }
.form-actions .btn { width: 100%; }
.form-hint { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: .86rem; color: var(--muted); }
.form-hint .i { color: var(--brand); margin-top: .15em; }
.form-status { margin: 0; font-size: .9rem; color: var(--brand-800); }
.form-status:empty { display: none; }

/* ---------- search ---------- */
.sform { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.sform__in { flex: 1; min-width: 0; min-height: 50px; padding: .7rem 1rem; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; }
.sform__in:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(15, 107, 92, .15); }
.shint { margin: 14px 0 8px; color: var(--muted); font-size: .9rem; }
.sresults { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sresults a { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); text-decoration: none; }
.sresults a:hover, .sresults a:focus-visible { border-color: var(--brand-200); }
.sresults strong { font: 500 1rem/1.35 var(--font-head); color: var(--ink); }
.sresults span { font-size: .9rem; line-height: 1.5; }
.search-page { max-width: 820px; }

/* ---------- dialogs and drawer ---------- */
html.has-modal { overflow: hidden; }
.dlg { width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); margin: auto; padding: 0; border: 0; background: transparent; color: var(--ink-2); overflow: visible; }
.dlg::backdrop, .drawer::backdrop { background: rgba(16, 32, 28, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.dlg__box { display: grid; grid-template-rows: auto minmax(0, 1fr); max-height: calc(100dvh - 24px); background: var(--card); border-radius: 24px; box-shadow: var(--shadow-2); overflow: hidden; }
.dlg__head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 12px 20px; border-bottom: 1px solid var(--line); }
.dlg__title { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 1.2rem; flex: 1; outline: none; }
.dlg__title .h-ico { width: 2.2rem; height: 2.2rem; }
.dlg__head .icon-btn { margin-left: auto; }
.dlg__body { min-height: 0; overflow: auto; padding: 18px 20px 22px; }
.dlg__lead { margin: 0 0 14px; color: var(--muted); font-size: .95rem; }
.dlg--viewer { width: min(1100px, calc(100vw - 24px)); }
.drawer { position: fixed; inset: 0 0 0 auto; width: min(420px, 100vw); height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; }
.drawer__in { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; background: var(--card); box-shadow: var(--shadow-2); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.brand--sm .brand__logo { width: 44px; height: 44px; }
.drawer__body { min-height: 0; overflow: auto; padding: 10px 12px; }
.drawer__foot { display: grid; gap: 12px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--paper); }
.drawer__foot .cta-slot { position: static; margin: 0; }
.drawer__foot .cta { width: 100%; }
.dnav { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dnav__row { display: flex; align-items: center; gap: 6px; }
.dnav__link { flex: 1; padding: 12px 12px; border-radius: 12px; color: var(--ink); text-decoration: none; font: 500 1.05rem/1.3 var(--font-head); }
.dnav__link:hover, .dnav__link[aria-current] { background: var(--brand-50); color: var(--brand-800); }
.dnav__toggle { width: 44px; height: 44px; border-radius: 12px; border: 0; background: none; color: var(--brand); display: grid; place-items: center; cursor: pointer; }
.dnav__toggle .i { transition: transform .2s; }
.dnav__toggle[aria-expanded="true"] .i { transform: rotate(180deg); }
.dnav .sub { padding: 2px 0 8px 8px; }
.dnav .sub--mega { grid-template-columns: minmax(0, 1fr); width: auto; }
@media (prefers-reduced-motion: no-preference) {
  .m-on .drawer[open] .drawer__in { animation: slide-in .28s ease-out; }
  .m-on .dlg[open] .dlg__box { animation: pop-in .22s ease-out; }
}
@keyframes slide-in { from { translate: 30px 0; opacity: .6; } }
@keyframes pop-in { from { translate: 0 10px; opacity: 0; } }

/* phones: the one CTA is docked at the bottom, next to the accessibility button */
@media (max-width: 767.98px) {
  :root { --head-h: 66px; }
  .hbar { gap: 10px; }
  .brand__logo { width: 46px; height: 46px; }
  .brand__name { font-size: .98rem; }
  .brand__role { font-size: .78rem; }
  .hactions > .cta-slot { position: fixed; left: 72px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 90; margin: 0; }
  .hactions > .cta-slot .cta { width: 100%; min-height: 50px; box-shadow: 0 10px 30px rgba(16, 32, 28, .28); }
  .site-footer { padding-bottom: 84px; }
}
/* with the nav folded away the brand may shrink (its text wraps in large-text mode) so the search and menu buttons stay on screen */
@media (max-width: 1179.98px) { .brand { flex-shrink: 1; } }
html.nav-collapse .brand { flex-shrink: 1; }
@media (max-width: 767.98px) { html:is([data-uwa-text="3"], [data-uwa-text="4"]) .brand__role { display: none; } }
@media (max-width: 379.98px) { .brand__role { display: none; } }
@media (max-width: 339.98px) { .hsearch { display: none; } }
.drawer__search { padding: 4px 4px 10px; }
.drawer__search .sform__in { min-height: 46px; }

/* ---------- rəqəmsal kartvizit (/vizit-karti/): card layout after drfuadismayilov.az/vizitkart/, site palette ---------- */
.kart-stage { position: relative; overflow: hidden; overflow: clip; isolation: isolate; display: flex; justify-content: center;
  padding: clamp(28px, 6vw, 72px) 16px clamp(56px, 8vw, 96px); background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); }
.kart-stage::before, .kart-stage::after { content: ''; position: absolute; z-index: -1; left: 50%; top: clamp(150px, 22vw, 230px); border-radius: 50%; pointer-events: none; translate: -50% -50%; }
.kart-stage::before { width: 760px; height: 760px; border: 1.5px dashed rgba(15, 107, 92, .16); }
.kart-stage::after { width: 640px; height: 640px; border: 1px solid rgba(15, 107, 92, .1); }
.kart-wrap { position: relative; width: min(400px, 100%); }
.kart { position: relative; overflow: hidden; border-radius: 28px; background: var(--card); box-shadow: 0 30px 60px -34px rgba(21, 32, 30, .45), 0 0 0 1px rgba(21, 32, 30, .05); }
html.m-on:not([data-uwa-pause]) .kart { animation: kart-up .45s cubic-bezier(.2, .8, .2, 1) backwards; }
@keyframes kart-up { from { opacity: 0; translate: 0 14px; } }
.kart__head { padding: 28px 26px 58px; text-align: center; border-bottom: 1px solid var(--line);
  background: linear-gradient(150deg, var(--brand-50) 0%, var(--paper) 55%, var(--amber-50) 100%); }
.kart__head .kicker { justify-content: center; margin: 0 0 20px; }
.kart__photo { display: block; width: 120px; height: 120px; margin: 0 auto; border-radius: 50%; overflow: hidden; border: 3px solid var(--card);
  background: var(--paper-2); box-shadow: 0 16px 32px -18px rgba(21, 32, 30, .55), 0 0 0 1px rgba(21, 32, 30, .06); }
.kart__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kart__name { margin: 16px 0 0; font: 500 1.4rem/1.2 var(--font-head); letter-spacing: -.01em; color: var(--ink); }
.kart__role { margin: 4px 0 0; font: 400 .95rem/1.4 var(--font-head); color: var(--brand); }
.kart__loc { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 10px 0 0; font-size: .84rem; line-height: 1.5; color: var(--ink-2); }
.kart__dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--amber); }
.cicons--kart { justify-content: center; gap: 10px; margin-top: 18px; }
.cicons--kart .cicon { background: var(--card); }
.kart__body { position: relative; margin-top: -30px; padding: 0 24px 26px; }
.kart__acts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.kart__act { display: grid; place-items: center; width: 100%; height: 64px; padding: 0; border-radius: 16px; background: var(--card); border: 1px solid var(--line);
  color: var(--brand); text-decoration: none; cursor: pointer; box-shadow: 0 10px 24px -16px rgba(21, 32, 30, .4); transition: border-color .2s, color .2s, background-color .2s; }
.kart__act .i { width: 24px; height: 24px; }
.kart__act:hover { border-color: var(--brand); color: var(--brand-800); background: var(--brand-50); }
.kart__msg { margin: 0; font-size: .84rem; line-height: 1.5; color: var(--brand); text-align: center; }
.kart__msg:not(:empty) { margin-top: 10px; }
.kart__save { width: 100%; margin-top: 12px; }
.kart__rows { margin: 16px 0 0; }
.kart__row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 12px 4px; border-bottom: 1px solid var(--paper-2); }
.kart__row:last-child { border-bottom: 0; }
.kart__row dt { flex: none; font-size: .8rem; color: var(--muted); }
.kart__row dd { margin: 0; min-width: 0; font-size: .86rem; font-weight: 500; line-height: 1.5; text-align: right; color: var(--ink); }
.kart__spec { margin-top: 6px; }
.kart__lbl { margin: 0 0 10px; font: 600 .72rem/1.6 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.kart__spec ul { list-style: none; margin: 0; padding: 0 0 0 13px; border-left: 2px solid var(--brand-200); }
.kart__spec li { margin: 0; }
.kart__spec li + li { margin-top: 9px; }
.kart__spec a { font-size: .95rem; font-weight: 500; line-height: 1.3; color: var(--ink); text-decoration: none; }
.kart__spec a:hover { color: var(--brand); text-decoration: underline; }
.kart__review { width: 100%; margin-top: 18px; }
.kart__review .i { color: var(--amber); }
.kart__site { width: 100%; margin-top: 10px; background: var(--deep); color: #fff; }
.kart__site:hover { background: var(--brand-800); color: #fff; }
@media (max-width: 479.98px) { .kart__acts { gap: 6px; } .kart__body { padding-inline: 18px; } .kart__head { padding-inline: 18px; } .kart-stage::before, .kart-stage::after { display: none; } }

/* ---------- site map, 404 ---------- */
.smap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 979.98px) { .smap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599.98px) { .smap { grid-template-columns: minmax(0, 1fr); } }
.smap__card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 20px; min-width: 0; }
.smap__card h2 { display: flex; align-items: center; gap: 12px; font-size: 1.12rem; }
.smap__card h2 .h-ico { width: 2.2rem; height: 2.2rem; }
.smap__list, .smap__list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.smap__list a { display: inline-flex; align-items: center; gap: 2px; padding: 4px 0; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.smap__list a:hover { color: var(--brand); text-decoration: underline; }
.smap__list a .i { color: var(--brand); width: .95rem; height: .95rem; }
.smap__fold summary { display: flex; align-items: center; gap: 6px; padding: 6px 0; cursor: pointer; color: var(--brand-800); font-weight: 500; list-style: none; }
.smap__fold summary::-webkit-details-marker { display: none; }
.smap__fold summary .i { width: 1rem; height: 1rem; transition: transform .2s; }
.smap__fold details[open] summary .i { transform: rotate(180deg); }
.smap__fold ul { padding-left: 12px !important; border-left: 2px solid var(--brand-100); }
.nf { padding: clamp(40px, 8vw, 100px) 0; }
.nf__in { max-width: 680px; text-align: center; display: grid; justify-items: center; }
.nf__art .plate { width: 160px; margin-bottom: 18px; }
.nf .lead { color: var(--muted); }
.nf .chips { justify-content: center; margin: 10px 0 24px; }
.nf__search { width: min(100%, 520px); }

/* ---------- footer ---------- */
.site-footer { background: var(--deep); color: #C9D6D1; padding: clamp(48px, 7vw, 80px) 0 0; font-size: .95rem; }
.site-footer a { color: #E9F1EE; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.fgrid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.fbrand__row { display: flex; align-items: center; gap: 14px; }
.fbrand__logo { width: 64px; height: 64px; flex: none; }
.fbrand__logo img { display: block; width: 100%; height: 100%; }
.fbrand__name { margin: 0; font: 500 1.12rem/1.3 var(--font-head); color: #fff; }
.fbrand__role { margin: 0; color: #9FB3AC; font-size: .9rem; }
.fbrand__bio { margin: 16px 0 14px; color: #B7C7C1; max-width: 32em; }
.fnap { display: grid; gap: 8px; margin-bottom: 18px; }
.fnap p { display: flex; gap: 10px; align-items: flex-start; margin: 0; color: #C9D6D1; }
.fnap .i { color: #7FC4AF; margin-top: .25em; }
.fcontacts { display: grid; gap: 12px; }
.site-footer .cicon { background: var(--deep-2); color: #DCEBE5; border-color: #27443C; }
.site-footer .cicon:hover { background: #7FC4AF; border-color: #7FC4AF; color: var(--deep); text-decoration: none; }
.fcol h2 { font: 500 1rem/1.3 var(--font-head); color: #fff; margin: 4px 0 14px; }
.fcol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fcol a { color: #C9D6D1; }
.i-ext { width: .9em; height: .9em; opacity: .75; }
.fbottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: clamp(32px, 5vw, 56px); padding: 22px 0 26px; border-top: 1px solid #27443C; font-size: .86rem; color: #9FB3AC; }
.fcopy { margin: 0; max-width: 52em; }
.fnote { order: 3; flex-basis: 100%; margin: 0; max-width: 60em; font-size: .82rem; }
.site-footer .fnote a { color: #C9D6D1; }
.flegal { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; }
.site-footer .flegal a { color: #C9D6D1; }
.site-footer .fotx { color: #7FC4AF; font-weight: 500; }
@media (max-width: 1099.98px) { .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fbrand { grid-column: 1 / -1; } }
@media (max-width: 519.98px) { .fgrid { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 768px) { .fbottom { padding-right: 70px; padding-bottom: 76px; } } /* the last line stays clear of the accessibility button */

/* ---------- motion: entrances like a microscope coming into focus ---------- */
@media (prefers-reduced-motion: no-preference) {
  .m-on .rv:not(.is-in) { opacity: 0; }
  .m-on .rv.is-in { animation: focus-in .7s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: var(--m-d, 0s); }
  .m-on .hero__text > * { animation: focus-in .8s cubic-bezier(.2, .7, .2, 1) backwards; }
  .m-on .hero__text > :nth-child(2) { animation-delay: .08s; }
  .m-on .hero__text > :nth-child(3) { animation-delay: .16s; }
  .m-on .hero__text > :nth-child(4) { animation-delay: .24s; }
  .m-on .hero__photo { animation: focus-in .9s .1s cubic-bezier(.2, .7, .2, 1) backwards; }
  .m-on .culture .plate__dish { animation: dish-in 1.2s ease-out backwards; }
  @view-transition { navigation: auto; }
}
@keyframes focus-in { from { opacity: 0; translate: 0 10px; filter: blur(5px); } }
@keyframes dish-in { from { opacity: 0; scale: .92; } }
html[data-uwa-pause] *, html[data-uwa-pause] *::before, html[data-uwa-pause] *::after { animation: none !important; transition: none !important; }
html[data-uwa-pause]::view-transition-group(*), html[data-uwa-pause]::view-transition-old(*), html[data-uwa-pause]::view-transition-new(*) { animation: none !important; }

/* ---------- accessibility modes: decorations step back, pseudo-element surfaces follow the contrast ---------- */
html[data-uwa-contrast] .culture, html[data-uwa-contrast] .plate, html[data-uwa-contrast] .answer::after { display: none !important; }
html:is([data-uwa-contrast="dark"], [data-uwa-contrast="light"]) .site-header::before { background: var(--uwa-page, transparent) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-uwa-contrast="dark"] .site-header::before { background: #000 !important; border-color: #fff; }
html[data-uwa-contrast="light"] .site-header::before { background: #fff !important; border-color: #000; }
html[data-uwa-contrast] .nav__link.is-current::after, html[data-uwa-contrast] .timeline li::before { background: currentColor !important; border-color: currentColor !important; }
html[data-uwa-contrast] .timeline::before { background: currentColor !important; }
html[data-uwa-text] .brand__name, html[data-uwa-text] .brand__role, html[data-uwa-text] .nav__link { white-space: normal; }
html[data-uwa-spacing] body svg, html[data-uwa-spacing] body svg * { letter-spacing: normal !important; word-spacing: normal !important; }

/* ---------- print ---------- */
@media print {
  .site-header, .site-footer, .drawer, .dlg, .uwa-fab, .cta-slot, .culture, .plate, .related, .crumbs, .filter { display: none !important; }
  body { background: #fff; color: #000; }
  .rv { opacity: 1 !important; animation: none !important; }
  a { color: #000; }
}