/* ==========================================================================
   Dossent Dr. Mirxalıq Cavadov — süd vəzi xəstəlikləri mütəxəssisi, ümumi cərrah
   One stylesheet, no framework, no build step.
   Palette: petrol ink + surgical teal + a restrained brass for academic notes.
   Every colour is a token so the dark theme and the high-contrast mode can
   swap the whole surface without touching a single component rule.
   ========================================================================== */

:root {
  color-scheme: light;

  --ink:        #0E1F2A;
  --ink-2:      #16303F;
  --ink-soft:   #33505F;
  --muted:      #5F7885;
  --line:       #E2E0DA;
  --line-soft:  #EDEBE5;
  --paper:      #FBFAF8;
  --paper-2:    #F4F2EC;
  --white:      #FFFFFF;

  --teal:       #17786F;
  --teal-dark:  #0F5C55;
  --teal-tint:  #E8F2F0;
  --teal-on:    #FFFFFF;
  --brass:      #A67C3D;
  --brass-tint: #F6EFE2;
  --wa:         #25D366;
  --wa-on:      #06331A;
  --danger:     #A4362C;
  --danger-tint:#FBEEEC;
  --danger-line:#E7C9C4;

  /* dark bands (footer, CTA strip) keep their own tokens so they stay dark in
     the light theme and merely deepen in the dark one */
  --band:       #0E1F2A;
  --band-2:     #16303F;
  --on-band:    #FFFFFF;
  --on-band-2:  #B9CBD4;
  --on-band-3:  #8FA7B3;
  --on-band-4:  #A9BEC8;
  --band-line:  rgba(255,255,255,.12);
  --band-accent:#7FCFC4;

  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;

  --shadow:    0 1px 2px rgba(14,31,42,.05), 0 8px 24px -12px rgba(14,31,42,.18);
  --shadow-lg: 0 2px 4px rgba(14,31,42,.04), 0 24px 48px -20px rgba(14,31,42,.24);

  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --body-font: var(--sans);

  --wrap: 1140px;
  --gut:  20px;

  --a11y-scale: 1;
  --a11y-lh: 1.65;
  --a11y-ls: 0em;

  --header-h: 70px;
}

/* ------------------------------------------------------------- dark theme */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
  :root:not([data-theme="light"]) {
    --ink:        #E8EFF3;
    --ink-2:      #D3E0E7;
    --ink-soft:   #B3C6D0;
    --muted:      #8CA3B0;
    --line:       #27414F;
    --line-soft:  #1E3543;
    --paper:      #0B1720;
    --paper-2:    #102430;
    --white:      #11222D;

    --teal:       #4FC4B6;
    --teal-dark:  #6FD6C8;
    --teal-tint:  #12312E;
    --teal-on:    #04211E;
    --brass:      #D6AA66;
    --brass-tint: #2B2416;
    --wa:         #25D366;
    --wa-on:      #04240F;
    --danger:     #F1948A;
    --danger-tint:#2C1613;
    --danger-line:#5A2A24;

    --band:       #081219;
    --band-2:     #0E2029;
    --on-band:    #EAF1F4;
    --on-band-2:  #AEC2CC;
    --on-band-3:  #8CA3AF;
    --on-band-4:  #A4B9C3;
    --band-line:  rgba(255,255,255,.10);

    --shadow:    0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    --shadow-lg: 0 2px 4px rgba(0,0,0,.35), 0 24px 48px -20px rgba(0,0,0,.7);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink:        #E8EFF3;
  --ink-2:      #D3E0E7;
  --ink-soft:   #B3C6D0;
  --muted:      #8CA3B0;
  --line:       #27414F;
  --line-soft:  #1E3543;
  --paper:      #0B1720;
  --paper-2:    #102430;
  --white:      #11222D;

  --teal:       #4FC4B6;
  --teal-dark:  #6FD6C8;
  --teal-tint:  #12312E;
  --teal-on:    #04211E;
  --brass:      #D6AA66;
  --brass-tint: #2B2416;
  --wa:         #25D366;
  --wa-on:      #04240F;
  --danger:     #F1948A;
  --danger-tint:#2C1613;
  --danger-line:#5A2A24;

  --band:       #081219;
  --band-2:     #0E2029;
  --on-band:    #EAF1F4;
  --on-band-2:  #AEC2CC;
  --on-band-3:  #8CA3AF;
  --on-band-4:  #A4B9C3;
  --band-line:  rgba(255,255,255,.10);

  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.35), 0 24px 48px -20px rgba(0,0,0,.7);
}

/* photographs and document scans are a touch bright against a dark page */
:root[data-theme="dark"] .figure img,
:root[data-theme="dark"] .doc-grid img,
:root[data-theme="dark"] .cert-card img { filter: brightness(.92) contrast(1.02); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .figure img,
  :root:not([data-theme="light"]) .doc-grid img,
  :root:not([data-theme="light"]) .cert-card img { filter: brightness(.92) contrast(1.02); }
}

/* --------------------------------------------------- accessibility modes */

[data-contrast="on"] {
  --ink: #000000;
  --ink-soft: #111111;
  --muted: #333333;
  --line: #555555;
  --line-soft: #777777;
  --paper: #FFFFFF;
  --paper-2: #FFFFFF;
  --white: #FFFFFF;
  --teal: #005F57;
  --teal-dark: #00443E;
  --teal-tint: #FFFFFF;
  --brass: #6A4A12;
  --brass-tint: #FFFFFF;
  --danger: #8B0000;
  --danger-tint: #FFFFFF;
  --band: #000000;
  --band-2: #000000;
  --on-band: #FFFFFF;
  --on-band-2: #FFFFFF;
  --on-band-3: #EEEEEE;
  --on-band-4: #FFFFFF;
  --band-line: rgba(255,255,255,.6);
  --band-accent: #FFFFFF;
}
[data-contrast="on"][data-theme="dark"],
[data-contrast="on"] .band--ink { color-scheme: light; }
[data-contrast="on"][data-theme="dark"] {
  --ink: #FFFFFF; --ink-soft: #F2F2F2; --muted: #DDDDDD;
  --line: #AAAAAA; --line-soft: #888888;
  --paper: #000000; --paper-2: #000000; --white: #000000;
  --teal: #5FE9DA; --teal-dark: #7DF3E6; --teal-tint: #000000; --teal-on: #000000;
  --brass: #F0C87C; --brass-tint: #000000;
  --danger: #FF9A8C; --danger-tint: #000000;
  --band: #000000; --band-2: #000000;
}
/* High contrast while the device itself is in dark mode and the visitor has
   not picked a theme: the system-dark tokens above outrank a bare
   [data-contrast], so the dark high-contrast palette is repeated here. */
@media (prefers-color-scheme: dark) {
  :root[data-contrast="on"]:not([data-theme="light"]) {
    --ink: #FFFFFF; --ink-soft: #F2F2F2; --muted: #DDDDDD;
    --line: #AAAAAA; --line-soft: #888888;
    --paper: #000000; --paper-2: #000000; --white: #000000;
    --teal: #5FE9DA; --teal-dark: #7DF3E6; --teal-tint: #000000; --teal-on: #000000;
    --brass: #F0C87C; --brass-tint: #000000;
    --danger: #FF9A8C; --danger-tint: #000000;
    --band: #000000; --band-2: #000000;
  }
}
[data-contrast="on"] .card,
[data-contrast="on"] .callout,
[data-contrast="on"] .form-card,
[data-contrast="on"] .toc,
[data-contrast="on"] .resources { border: 2px solid var(--line); }
[data-contrast="on"] .btn { border-width: 2px; border-color: currentColor; }
[data-contrast="on"] .figure img,
[data-contrast="on"] .doc-grid img,
[data-contrast="on"] .cert-card img { filter: none; }

[data-links="underline"] a { text-decoration: underline !important; }
[data-links="underline"] .btn,
[data-links="underline"] .card,
[data-links="underline"] .nav-menu a,
[data-links="underline"] .lang-menu a { text-decoration: none !important; }

[data-font="readable"] {
  --body-font: Verdana, Tahoma, "Segoe UI", system-ui, sans-serif;
  --serif: Verdana, Tahoma, "Segoe UI", system-ui, sans-serif;
  --sans:  Verdana, Tahoma, "Segoe UI", system-ui, sans-serif;
  --a11y-ls: .012em;
}

[data-spacing="loose"] { --a11y-lh: 2; }
[data-spacing="loose"] p,
[data-spacing="loose"] li { margin-bottom: 1.35em; }

[data-motion="reduce"] *,
[data-motion="reduce"] *::before,
[data-motion="reduce"] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}

/* ---------------------------------------------------------------- basics */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body-font);
  font-size: calc(17px * var(--a11y-scale));
  line-height: var(--a11y-lh);
  letter-spacing: var(--a11y-ls);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.012em;
  margin: 0 0 .5em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.35rem + 2.8vw, 3.35rem); }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.3rem); }
h3 { font-size: clamp(1.18rem, 1.05rem + .55vw, 1.45rem); }
h4 { font-size: 1.03rem; font-family: var(--sans); font-weight: 600; letter-spacing: .01em; }
[data-font="readable"] h1, [data-font="readable"] h2,
[data-font="readable"] h3, [data-font="readable"] h4 { letter-spacing: 0; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

a { color: var(--teal-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--teal); }

:focus-visible {
  outline: 2.5px solid var(--teal);
  outline-offset: 2px;
  border-radius: 3px;
}

.container { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--band); color: var(--on-band); padding: 12px 18px; border-radius: 0 0 var(--r) 0;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ icons */

.icon {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.icon-lg { width: 22px; height: 22px; }
.icon--fill { fill: currentColor; stroke: none; }

.flag { width: 21px; height: 14px; flex: none; border-radius: 2px; display: block; }

/* ----------------------------------------------------------------- header */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--line);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .site-header { background: var(--paper); }
}
.bar {
  display: flex; align-items: center; gap: 14px;
  min-height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; margin-right: auto; }
.brand-mark { width: 38px; height: 38px; flex: none; }
.brand-name { display: block; font-family: var(--serif); font-weight: 600; font-size: 1.01rem; line-height: 1.2; letter-spacing: -.01em; white-space: nowrap; }
.brand-sub  { display: block; font-size: .72rem; color: var(--muted); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }

.main-nav { display: none; }

/* top-level items: plain links and disclosure buttons share one look */
.main-nav > a,
.main-nav .nav-top {
  text-decoration: none; color: var(--ink-soft);
  font-family: var(--sans); font-size: .93rem; font-weight: 500;
  padding: 8px 2px; position: relative; white-space: nowrap;
  background: none; border: 0; cursor: pointer; line-height: inherit;
  display: inline-flex; align-items: center; gap: 4px;
}
.main-nav > a:hover,
.main-nav .nav-top:hover { color: var(--ink); }

.main-nav > a[aria-current="page"],
.main-nav .nav-top[data-current="true"] { color: var(--teal-dark); }
.main-nav > a[aria-current="page"]::after,
.main-nav .nav-top[data-current="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--teal); border-radius: 2px;
}
.main-nav > a.nav-cta { display: none; }

.icon--chev { width: 14px; height: 14px; stroke-width: 2; transition: transform .18s; }
.nav-top[aria-expanded="true"] .icon--chev,
.lang-btn[aria-expanded="true"] .icon--chev { transform: rotate(180deg); }

/* ---- disclosure menus ---- */
.nav-group { position: relative; }
.nav-menu { display: none; }

.nav-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: var(--r-sm);
  text-decoration: none; color: var(--ink-soft); font-size: .92rem; font-weight: 500;
}
.nav-menu a:hover { background: var(--teal-tint); color: var(--teal-dark); }
.nav-menu a .icon { width: 17px; height: 17px; color: var(--teal); flex: none; }
.nav-menu-all {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 14px; margin-top: 4px;
  border-top: 1px solid var(--line-soft);
  font-size: .88rem; font-weight: 600; color: var(--teal-dark); text-decoration: none;
}
.nav-menu-all .icon { width: 15px; height: 15px; }
.nav-menu-all:hover { color: var(--teal); }

.header-tools { display: flex; align-items: center; gap: 8px; }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--white); color: var(--ink); cursor: pointer;
}
/* .btn later in the file also sets display, so this needs the extra class to
   win — otherwise the header CTA shows on mobile and squeezes out the burger */
.btn.header-cta { display: none; }

/* --------------------------------------------------------- language picker */

.lang { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--white); color: var(--ink);
  font: inherit; cursor: pointer;
}
.lang-btn .flag { width: 24px; height: 16px; box-shadow: 0 0 0 1px rgba(14,31,42,.12); }
.lang-btn:hover { border-color: var(--teal); color: var(--teal-dark); }
.lang-btn .icon--chev { width: 13px; height: 13px; opacity: .65; }

.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 70;
  min-width: 182px; padding: 6px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s, transform .16s, visibility .16s;
}
.lang-menu.is-open { opacity: 1; visibility: visible; transform: none; }
.lang-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-sm);
  font-size: .92rem; font-weight: 500; color: var(--ink-soft); text-decoration: none;
}
.lang-menu a:hover { background: var(--teal-tint); color: var(--teal-dark); }
.lang-menu a[aria-current="true"] { color: var(--teal-dark); font-weight: 600; background: var(--teal-tint); }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: var(--r-sm); border: 1px solid transparent;
  font: inherit; font-size: .95rem; font-weight: 500; line-height: 1;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .18s, border-color .18s, color .18s, transform .18s;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--teal-dark); color: var(--teal-on); }
.btn--primary:hover { background: var(--teal); color: var(--teal-on); }
.btn--ghost { background: var(--white); border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--teal); color: var(--teal-dark); }
.btn--wa { background: var(--wa); color: var(--wa-on); }
.btn--wa:hover { background: #1FBE5B; color: var(--wa-on); }
.btn--sm { padding: 10px 16px; font-size: .88rem; }
.btn--lg { padding: 16px 28px; font-size: 1rem; }
.btn--onDark { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.3); }
.btn--onDark:hover { background: rgba(255,255,255,.2); color: #fff; }

/* ------------------------------------------------------------- structure */

section { padding-block: clamp(48px, 7vw, 88px); }
.section-head { max-width: 68ch; margin-bottom: clamp(28px, 4vw, 44px); }
.section-head p { color: var(--ink-soft); font-size: 1.03rem; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: .74rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--teal-dark);
  margin: 0 0 14px;
}
.eyebrow::before { content: ""; width: 22px; height: 1.5px; background: var(--brass); }

.lede { font-size: clamp(1.05rem, 1rem + .35vw, 1.22rem); color: var(--ink-soft); line-height: 1.6; }

.band--tint { background: var(--paper-2); }
.band--ink  { background: var(--band); color: var(--on-band-2); }
.band--ink h2, .band--ink h3 { color: var(--on-band); }
.band--ink p { color: var(--on-band-2); }
.band--ink .eyebrow { color: var(--band-accent); }
.band--ink .eyebrow::before { background: var(--brass); }

/* ------------------------------------------------------------------- hero */

.hero { padding-block: clamp(40px, 6vw, 76px) clamp(40px, 6vw, 72px); }
.hero-grid { display: grid; gap: clamp(28px, 4vw, 48px); align-items: center; }
.hero h1 { margin-bottom: .3em; }
.hero .lede { max-width: 56ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.qualification {
  font-size: .95rem; color: var(--ink-soft); font-weight: 500;
  margin: 0 0 18px; max-width: 54ch;
}
.qualification strong { color: var(--ink); font-weight: 600; }

.portrait-frame {
  position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-lg);
  overflow: hidden; background: var(--band); box-shadow: var(--shadow-lg);
  max-width: 420px; margin-inline: auto; width: 100%;
}
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait-fallback {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(155deg, #142936 0%, #0E1F2A 58%, #123A38 100%);
}
.portrait-fallback span {
  font-family: var(--serif); font-size: 4.6rem; font-weight: 400; color: #fff;
  letter-spacing: .06em; opacity: .92;
}
.portrait-fallback small {
  position: absolute; bottom: 26px; left: 0; right: 0; text-align: center;
  font-size: .72rem; letter-spacing: .17em; text-transform: uppercase; color: #7FCFC4;
}

/* credential strip */
.creds {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none;
}
.creds li {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 14px 7px 11px;
  font-size: .84rem; color: var(--ink-soft); font-weight: 500;
}
.creds .icon { width: 15px; height: 15px; color: var(--brass); stroke-width: 1.7; }

/* ------------------------------------------------------------------ cards */

.grid { display: grid; gap: 18px; }
.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }

.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px 24px; display: flex; flex-direction: column;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.card h3 { font-size: 1.14rem; margin-bottom: .4em; }
.card p { color: var(--ink-soft); font-size: .95rem; margin-bottom: 1em; }
.card > :last-child { margin-top: auto; }
a.card { text-decoration: none; color: inherit; }
a.card:hover { border-color: var(--teal); box-shadow: var(--shadow); transform: translateY(-2px); }

.card-ico {
  width: 44px; height: 44px; border-radius: var(--r-sm);
  display: grid; place-items: center; margin-bottom: 16px;
  background: var(--teal-tint); color: var(--teal-dark);
}
.card-ico .icon { width: 22px; height: 22px; }
.card-ico--brass { background: var(--brass-tint); color: var(--brass); }

.card-more {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .88rem; font-weight: 500; color: var(--teal-dark);
}
.card-more .icon { width: 16px; height: 16px; transition: transform .2s; }
a.card:hover .card-more .icon { transform: translateX(3px); }

/* "see everything in this section" — a link, deliberately not a button, so the
   one call to action on the page stays the only button-shaped thing on it */
.link-more {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .95rem; font-weight: 600; color: var(--teal-dark); text-decoration: none;
  padding: 4px 0; border-bottom: 1.5px solid color-mix(in srgb, var(--teal) 35%, transparent);
}
.link-more:hover { color: var(--teal); border-bottom-color: var(--teal); }
.link-more .icon { width: 16px; height: 16px; transition: transform .2s; }
.link-more:hover .icon { transform: translateX(3px); }
.band--ink .link-more, .cta-band .link-more { color: var(--band-accent); border-bottom-color: rgba(255,255,255,.3); }

/* a short vertical list of ways to get in touch, used where a second button
   would only compete with the page's single call to action */
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: .94rem;
}
.contact-list li:last-child { border-bottom: 0; }
.contact-list .icon { width: 17px; height: 17px; color: var(--teal-dark); flex: none; }
.contact-list a { color: var(--ink); text-decoration: none; font-weight: 500; }
.contact-list a:hover { color: var(--teal-dark); text-decoration: underline; }

/* -------------------------------------------------------------- figures */

.figure { margin: 30px 0; }
.figure img {
  width: 100%; display: block; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--paper-2);
}
.figure figcaption {
  font-size: .85rem; color: var(--muted); margin-top: 10px; line-height: 1.5;
}
.figure--wide img { aspect-ratio: 16 / 10; object-fit: cover; }
.figure--tall img { aspect-ratio: 4 / 5; object-fit: cover; }
/* keeps the photograph's own proportions — nothing is cropped away; the
   width and height attributes reserve the right box before a lazy image loads */
.figure--portrait { max-width: 400px; }
.figure--center { margin-inline: auto; }

/* side-by-side media, e.g. a podium shot next to an award note */
.media-grid { display: grid; gap: 18px; margin: 30px 0; }
.media-grid .figure { margin: 0; }

/* document scans: contained, never cropped */
.doc-grid { display: grid; gap: 16px; margin: 26px 0; }
.doc-grid figure { margin: 0; }
.doc-grid img {
  width: 100%; display: block; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--white);
}
.doc-grid figcaption { font-size: .82rem; color: var(--muted); margin-top: 8px; }

/* ------------------------------------------------------- certificate wall */

.cert-grid { display: grid; gap: 20px; margin: 30px 0 0; grid-template-columns: 1fr; }
.cert-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.cert-card:hover { border-color: var(--teal); box-shadow: var(--shadow); transform: translateY(-2px); }
.cert-shot {
  position: relative; display: block; border: 0; padding: 0; margin: 0;
  background: var(--paper-2); cursor: zoom-in; width: 100%;
  aspect-ratio: 4 / 3; overflow: hidden;
}
.cert-shot img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.cert-shot::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(14,31,42,.35));
  opacity: 0; transition: opacity .2s;
}
.cert-card:hover .cert-shot::after { opacity: 1; }
.cert-zoom {
  position: absolute; right: 10px; bottom: 10px; z-index: 1;
  width: 34px; height: 34px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.92); color: #0E1F2A;
  display: grid; place-items: center; opacity: 0; transform: translateY(4px);
  transition: opacity .2s, transform .2s;
}
.cert-card:hover .cert-zoom, .cert-shot:focus-visible .cert-zoom { opacity: 1; transform: none; }
.cert-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.cert-body h3 { font-family: var(--sans); font-size: .99rem; font-weight: 600; margin: 0; line-height: 1.35; }
.cert-org { font-size: .88rem; color: var(--ink-soft); margin: 0; }
.cert-meta {
  font-size: .78rem; color: var(--muted); letter-spacing: .04em;
  margin: 6px 0 0; font-variant-numeric: tabular-nums;
}
.cert-tag {
  align-self: flex-start; margin-top: 10px;
  font-size: .72rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  background: var(--brass-tint); color: var(--brass);
}
.cert-tag--teal { background: var(--teal-tint); color: var(--teal-dark); }

/* lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(6,14,19,.92);
  display: grid; grid-template-rows: 1fr auto; place-items: center;
  padding: 24px 16px;
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: min(1100px, 96vw); max-height: 78vh; width: auto;
  border-radius: var(--r); background: #fff; display: block;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.8);
}
.lightbox-cap {
  color: #DCE7EC; font-size: .92rem; text-align: center;
  max-width: 70ch; margin: 16px auto 0; line-height: 1.5;
}
.lightbox-close {
  position: absolute; top: 16px; right: 16px;
  width: 44px; height: 44px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
  color: #fff; display: grid; place-items: center; cursor: pointer;
}
.lightbox-close:hover { background: rgba(255,255,255,.22); }

/* ---------------------------------------------------------------- video */

.video-block { margin: 30px 0; display: grid; gap: 26px; align-items: center; }
.video-frame {
  border-radius: var(--r-lg); overflow: hidden; background: #06131A;
  border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  line-height: 0;
}
.video-frame video { width: 100%; height: auto; display: block; }
/* the introduction is filmed vertically, so the frame is sized to the footage
   instead of stretching a 9:16 clip across a desktop column */
.video-frame--portrait { max-width: 340px; margin-inline: auto; }
.video-cap { font-size: .86rem; color: var(--muted); margin: 14px 0 0; line-height: 1.55; }
.video-points { list-style: none; margin: 20px 0 0; padding: 0; }
.video-points li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0; border-bottom: 1px solid var(--line-soft); font-size: .96rem;
}
.video-points li:last-child { border-bottom: 0; }
.video-points .icon { width: 18px; height: 18px; color: var(--teal-dark); margin-top: 3px; flex: none; }
@media (min-width: 780px) {
  .video-block { grid-template-columns: 340px minmax(0, 1fr); gap: 40px; }
}

/* --------------------------------------------------------------- prose */

.prose { max-width: 72ch; }
.prose h2 { margin-top: 1.8em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.5em; }
.prose ul, .prose ol { margin: 0 0 1.15em; padding-left: 1.35em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--teal); }
.prose strong { font-weight: 600; color: var(--ink); }

.layout { display: grid; gap: 40px; }

/* table of contents */
.toc {
  background: var(--white); border: 1px solid var(--line);
  border-left: 3px solid var(--teal); border-radius: 0 var(--r) var(--r) 0;
  padding: 20px 22px; margin-bottom: 34px;
}
.toc h2 { font-family: var(--sans); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.toc ol { margin: 0; padding-left: 1.15em; font-size: .93rem; }
.toc li { margin-bottom: .3em; }

/* ------------------------------------------------------------- callouts */

.callout {
  background: var(--teal-tint); border-radius: var(--r);
  padding: 22px 24px; margin: 30px 0;
  display: flex; gap: 15px; align-items: flex-start;
}
.callout .icon { color: var(--teal-dark); margin-top: 3px; }
.callout h3 { font-family: var(--sans); font-size: 1rem; font-weight: 600; margin-bottom: .35em; }
.callout p { font-size: .95rem; color: var(--ink-soft); }
.callout--warn { background: var(--danger-tint); }
.callout--warn .icon { color: var(--danger); }
.callout--warn h3 { color: var(--danger); }
.callout--brass { background: var(--brass-tint); }
.callout--brass .icon { color: var(--brass); }

.emergency {
  border: 1px solid var(--danger-line); background: var(--danger-tint);
  border-radius: var(--r); padding: 24px; margin: 34px 0;
}
.emergency h3 { color: var(--danger); font-family: var(--sans); font-size: 1.03rem; display: flex; align-items: center; gap: 9px; }
.emergency ul { margin: 12px 0 14px; padding-left: 1.3em; font-size: .95rem; }
.emergency li::marker { color: var(--danger); }
.emergency p { font-size: .95rem; margin: 0; }
.emergency strong { color: var(--danger); }

/* ---------------------------------------------------------------- steps */

.steps { list-style: none; margin: 28px 0 0; padding: 0; counter-reset: s; }
.steps li {
  counter-increment: s; position: relative; padding: 0 0 26px 54px;
  border-left: 1px solid var(--line); margin-left: 17px;
}
.steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps li::before {
  content: counter(s); position: absolute; left: -17px; top: -2px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--teal); color: var(--teal-dark);
  display: grid; place-items: center; font-size: .85rem; font-weight: 600; font-family: var(--sans);
}
.steps h3 { font-family: var(--sans); font-size: 1.02rem; font-weight: 600; margin-bottom: .3em; }
.steps p { font-size: .95rem; color: var(--ink-soft); margin: 0; }

/* -------------------------------------------------------------- timeline */

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  display: grid; grid-template-columns: 1fr; gap: 2px;
  padding: 18px 0; border-bottom: 1px solid var(--line-soft);
}
.timeline li:last-child { border-bottom: 0; }
.timeline .yr {
  font-family: var(--sans); font-size: .82rem; font-weight: 600; letter-spacing: .04em;
  color: var(--brass); font-variant-numeric: tabular-nums;
}
.timeline .role { font-weight: 600; font-size: 1rem; }
.timeline .org { color: var(--ink-soft); font-size: .95rem; }

/* ------------------------------------------------------- publication list */

.pubs { list-style: none; margin: 0; padding: 0; counter-reset: p; }
.pubs li {
  counter-increment: p; position: relative;
  padding: 16px 0 16px 38px; border-bottom: 1px solid var(--line-soft);
  font-size: .95rem; line-height: 1.55;
}
.pubs li:last-child { border-bottom: 0; }
.pubs li::before {
  content: counter(p); position: absolute; left: 0; top: 18px;
  font-family: var(--sans); font-size: .78rem; font-weight: 600;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.pubs .t { display: block; color: var(--ink); font-weight: 500; }
.pubs .j { color: var(--muted); font-size: .88rem; }
.pubs .j em { font-style: normal; color: var(--ink-soft); }

/* long secondary lists (congress abstracts) fold away under a summary row */
.more-list {
  margin-top: 16px; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r);
}
.more-list summary {
  display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
  padding: 15px 18px; font-weight: 600; color: var(--ink);
}
.more-list summary::-webkit-details-marker { display: none; }
.more-list summary::after {
  content: "+"; margin-left: auto; font-size: 1.3rem; line-height: 1; color: var(--teal-dark);
}
.more-list[open] summary::after { content: "\2013"; }
.more-count {
  min-width: 26px; padding: 2px 8px; border-radius: 999px; text-align: center;
  background: var(--teal-tint); color: var(--teal-dark); font-size: .8rem;
}
.more-list ol { margin: 0; padding: 0 20px 16px 2.4em; }
.more-list li { margin-bottom: 11px; line-height: 1.5; }
.more-list li span { display: block; color: var(--muted); font-size: .88em; }

/* certificates page: CV courses without a scan on the site */
.cv-extra-h { margin-top: 44px; }
.cv-extra-note { max-width: 72ch; color: var(--ink-soft); }
.cv-list { max-width: 80ch; margin: 14px 0 0; padding-left: 1.2em; }
.cv-list li { margin-bottom: .7em; line-height: 1.55; }

/* ----------------------------------------------------- external resources */

.resources {
  margin: 34px 0 0; padding: 24px 26px;
  background: var(--paper-2); border-radius: var(--r);
  border-left: 3px solid var(--brass);
}
.resources h2 {
  font-family: var(--sans); font-size: 1.02rem; font-weight: 600;
  margin: 0 0 6px; display: flex; align-items: center; gap: 9px;
}
.resources h2 .icon { width: 18px; height: 18px; color: var(--brass); }
.resources > p { font-size: .93rem; color: var(--ink-soft); margin-bottom: 14px; }
.resources ul { list-style: none; margin: 0; padding: 0; }
.resources li { margin-bottom: 9px; }
.resources li a {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .95rem; font-weight: 500; text-decoration: none;
}
.resources li a:hover { text-decoration: underline; }
.resources-note {
  font-size: .82rem; color: var(--muted); margin: 14px 0 0; font-style: italic;
}

/* ------------------------------------------------------------------- faq */

.faq { margin: 30px 0 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 19px 44px 19px 0; position: relative;
  font-weight: 500; font-size: 1.02rem; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px;
  border-right: 1.8px solid var(--teal); border-bottom: 1.8px solid var(--teal);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq summary:hover { color: var(--teal-dark); }
.faq-body { padding: 0 40px 22px 0; }
.faq-body p { color: var(--ink-soft); font-size: .98rem; margin: 0; }

/* -------------------------------------------------------------- cta band */

.cta-band { background: var(--band); color: var(--on-band); }
.cta-inner { display: grid; gap: 26px; align-items: center; }
.cta-band h2 { color: var(--on-band); margin-bottom: .4em; }
.cta-band p { color: var(--on-band-2); margin: 0; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------------- contact */

.nap { list-style: none; margin: 0; padding: 0; }
.nap li { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line-soft); align-items: flex-start; }
.nap li:last-child { border-bottom: 0; }
.nap .icon { color: var(--teal-dark); margin-top: 3px; }
.nap dt, .nap .k { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 2px; }
.nap .v { font-weight: 500; }
.nap a { color: var(--ink); text-decoration: none; }
.nap a:hover { color: var(--teal-dark); text-decoration: underline; }

.map-embed {
  border-radius: var(--r); overflow: hidden; border: 1px solid var(--line);
  background: var(--paper-2); aspect-ratio: 16 / 10;
  display: grid; place-items: center; text-align: center; padding: 26px;
}
.map-embed .icon { width: 32px; height: 32px; color: var(--teal-dark); margin-bottom: 10px; }

/* ------------------------------------------------------------------ form */

.form-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(22px, 3vw, 34px); }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .88rem; font-weight: 500; margin-bottom: 6px; }
.field .hint { font-size: .82rem; color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: .97rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink);
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--teal); background: var(--white); }
.field .err-msg { display: none; font-size: .84rem; color: var(--danger); margin-top: 5px; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--danger); }
.field.is-invalid .err-msg { display: block; }

/* Phone entry, split so the patient types only seven digits.
   [+994] [operator ▾] [1234567] — the country code is fixed text, the operator
   is a short list, and the input accepts nothing but the local number. */
.phone-group {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); overflow: hidden;
}
.phone-group:focus-within { border-color: var(--teal); background: var(--white); }
.phone-cc {
  display: flex; align-items: center; padding: 0 10px 0 14px;
  font-size: .97rem; font-weight: 500; color: var(--ink-soft);
  border-right: 1px solid var(--line); background: var(--paper-2); flex: none;
}
.phone-group select {
  width: auto; flex: none; border: 0; border-right: 1px solid var(--line);
  border-radius: 0; background: var(--paper-2); padding: 12px 8px 12px 10px;
  font-size: .95rem; cursor: pointer; color: var(--ink);
}
.phone-group input {
  flex: 1 1 auto; min-width: 0; border: 0; border-radius: 0;
  background: transparent; letter-spacing: .04em;
}
.phone-group select:focus, .phone-group input:focus { outline: none; background: transparent; }
.field.is-invalid .phone-group { border-color: var(--danger); }

.field-hint { font-size: .82rem; color: var(--muted); margin: 7px 0 0; }

.form-error {
  display: none; margin: 0 0 16px; padding: 11px 14px;
  background: var(--danger-tint); border-radius: var(--r-sm);
  font-size: .9rem; color: var(--danger); font-weight: 500;
}
.form-error.is-on { display: block; }

.form-note { font-size: .84rem; color: var(--muted); margin: 16px 0 0; line-height: 1.6; }

.booking-done {
  display: none; margin-top: 18px; padding: 16px 18px;
  background: var(--teal-tint); border-radius: var(--r-sm); font-size: .93rem;
}
.booking-done.is-on { display: block; }

/* ------------------------------------------------------------ breadcrumbs */

.crumbs { padding: 16px 0 0; font-size: .84rem; color: var(--muted); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.crumbs li::after { content: "/"; margin-left: 6px; color: var(--line); }
.crumbs li:last-child::after { display: none; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--teal-dark); }

/* freshness stamp */
.updated {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .8rem; color: var(--muted); margin-top: 34px;
  padding-top: 16px; border-top: 1px solid var(--line-soft); width: 100%;
}
.updated .icon { width: 14px; height: 14px; }

/* tag list */
.tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.tags li {
  font-size: .82rem; padding: 5px 12px; border-radius: 999px;
  background: var(--paper-2); color: var(--ink-soft); border: 1px solid var(--line-soft);
}
.tags--keywords li { background: var(--teal-tint); color: var(--teal-dark); border-color: transparent; font-weight: 500; }

/* definition rows */
.facts { display: grid; gap: 0; margin: 0; }
.facts > div { padding: 15px 0; border-bottom: 1px solid var(--line-soft); }
.facts > div:last-child { border-bottom: 0; }
.facts dt { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.facts dd { margin: 0; font-size: .98rem; }

/* ---------------------------------------------------------------- footer */

.site-footer { background: var(--band); color: var(--on-band-4); padding-block: clamp(40px, 5vw, 56px) 0; }

.foot-top {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center;
  justify-content: space-between;
  padding-bottom: 30px; margin-bottom: 34px;
  border-bottom: 1px solid var(--band-line);
}
.foot-brand { display: flex; align-items: center; gap: 14px; }
.foot-brand .brand-mark { width: 44px; height: 44px; flex: none; }
.foot-name { font-family: var(--serif); font-size: 1.2rem; color: var(--on-band); margin: 0 0 1px; line-height: 1.2; }
.foot-sub { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--band-accent); margin: 0; }

.foot-grid { display: grid; gap: 30px; padding-bottom: 34px; }
.site-footer h4 { color: var(--on-band); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer li a { color: var(--on-band-4); text-decoration: none; font-size: .92rem; display: inline-flex; align-items: center; gap: 6px; }
.site-footer li a:hover { color: var(--on-band); }
.icon--ext { width: 12px; height: 12px; opacity: .5; }
.site-footer li a:hover .icon--ext { opacity: .9; }

.foot-nap { font-style: normal; font-size: .91rem; line-height: 1.7; margin: 0 0 16px; }
.foot-nap a { color: #CBDBE3; text-decoration: none; }
.foot-nap a:hover { color: var(--on-band); text-decoration: underline; }

.foot-social { display: flex; gap: 9px; }
.foot-social a {
  width: 38px; height: 38px; border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,.18); display: grid; place-items: center; color: var(--on-band-4);
}
.foot-social a:hover { border-color: var(--band-accent); color: var(--on-band); }

.foot-legal { border-top: 1px solid var(--band-line); padding: 22px 0 100px; }
.foot-note { font-size: .84rem; color: var(--on-band-3); max-width: 82ch; margin: 0 0 16px; }
.foot-note strong { color: #E88A7D; }
.foot-bottom { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }
.foot-bottom p { font-size: .81rem; color: var(--on-band-3); margin: 0; }
.credit a { color: var(--on-band-4); text-decoration: none; }
.credit a:hover { color: var(--on-band); }
.foot-legal-links a { color: var(--on-band-4); text-decoration: none; }
.foot-legal-links a:hover { color: var(--on-band); text-decoration: underline; }
.foot-legal-links span { margin: 0 6px; }

/* legal pages: the short summary beside the full text */
.legal-points { margin: 0; padding-left: 1.15em; }
.legal-points li { margin-bottom: .6em; font-size: .93em; line-height: 1.5; color: var(--ink-soft); }
.legal-aside-link { margin: 16px 0 0; font-weight: 600; }

/* ------------------------------------------------------------ mobile bar */
/* One action, the only call to action the page repeats. */

.mbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .mbar { background: var(--paper); }
}
.mbar .btn { flex: 1; padding: 13px 8px; font-size: .93rem; }
.mbar { gap: 8px; }
/* the accessibility control on phones: the icon alone, outlined, so the
   booking button stays the one strong action in the bar */
.mbar-a11y {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 50px; padding: 0; border-radius: var(--r-sm);
  border: 1.5px solid var(--teal-dark); background: var(--white); color: var(--teal-dark);
  cursor: pointer;
}
.mbar-a11y .icon { width: 26px; height: 26px; }

/* --------------------------------------------------- accessibility widget */

/* Desktop: a round icon button in the corner (its name is in aria-label).
   Phones: the same button sits in the bottom bar beside the booking button,
   so nothing floats over the text. Both open one centred dialog. Sizes inside
   the dialog are in rem on purpose — the text-size choice previews on the
   page behind it while the buttons themselves stay put under the finger. */
.a11y-fab {
  position: fixed; left: 18px; bottom: 22px; z-index: 95;
  display: none; align-items: center; justify-content: center;
  width: 54px; height: 54px; padding: 0; border-radius: 50%;
  border: 2px solid var(--white);
  background: var(--teal-dark); color: var(--teal-on);
  box-shadow: var(--shadow-lg); cursor: pointer;
  transition: background-color .18s, transform .18s;
}
.a11y-fab:hover { background: var(--teal); transform: translateY(-2px); }
.a11y-fab .icon { width: 28px; height: 28px; stroke-width: 1.6; }

.a11y-overlay {
  position: fixed; inset: 0; z-index: 130;
  display: grid; place-items: center;
  padding: 16px;
  background: color-mix(in srgb, var(--ink) 52%, transparent);
  animation: a11y-fade .16s ease-out;
}
.a11y-overlay[hidden] { display: none; }

.a11y-dialog {
  width: min(580px, 100%);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  font-family: var(--sans); font-size: 1rem; line-height: 1.45;
  animation: a11y-pop .2s cubic-bezier(.2, .8, .3, 1);
}
@keyframes a11y-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes a11y-pop  { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .a11y-overlay, .a11y-dialog { animation: none; }
}

.a11y-head {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.a11y-head-ico {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--teal-tint); color: var(--teal-dark);
}
.a11y-head-ico .icon { width: 27px; height: 27px; }
.a11y-head-text { flex: 1; min-width: 0; }
.a11y-head h2 {
  font-family: var(--sans); font-size: 1.3rem; font-weight: 700; letter-spacing: 0;
  margin: 2px 0 4px;
}
.a11y-head p { margin: 0; font-size: .93rem; color: var(--ink-soft); }
.a11y-x {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
}
.a11y-x:hover { border-color: var(--teal); color: var(--teal-dark); }
.a11y-x .icon { width: 19px; height: 19px; }

.a11y-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 20px 4px;
}
.a11y-group { border: 0; margin: 0 0 20px; padding: 0; min-width: 0; }
.a11y-group legend {
  padding: 0; margin: 0 0 10px;
  font-size: 1rem; font-weight: 700; color: var(--ink);
}

/* native radios and checkboxes carry the state; only their look is custom */
.a11y-size-opt,
.a11y-tile { position: relative; display: block; cursor: pointer; }
.a11y-size-opt input,
.a11y-tile input {
  position: absolute; top: 0; left: 0;
  width: 1px; height: 1px; margin: 0; opacity: 0;
}

.a11y-sizes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.a11y-size-body {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 7px;
  min-height: 88px; padding: 10px 6px 11px;
  border: 2px solid var(--line); border-radius: var(--r);
  background: var(--paper); color: var(--ink-soft);
  font-size: .84rem; font-weight: 600; line-height: 1.2; text-align: center;
  transition: border-color .15s, background-color .15s;
}
.a11y-aa { font-family: var(--serif); font-weight: 600; line-height: 1; color: var(--ink); }
.a11y-aa--1 { font-size: 1.15rem; }
.a11y-aa--2 { font-size: 1.45rem; }
.a11y-aa--3 { font-size: 1.8rem; }
.a11y-aa--4 { font-size: 2.2rem; }
.a11y-size-opt:hover .a11y-size-body { border-color: var(--teal); }
.a11y-size-opt input:checked + .a11y-size-body {
  border-color: var(--teal-dark); background: var(--teal-tint); color: var(--teal-dark);
}
.a11y-size-opt input:checked + .a11y-size-body .a11y-aa { color: var(--teal-dark); }

.a11y-tiles { display: grid; gap: 8px; }
.a11y-tile-body {
  display: flex; align-items: center; gap: 12px;
  min-height: 66px; padding: 11px 13px;
  border: 2px solid var(--line); border-radius: var(--r);
  background: var(--paper);
  transition: border-color .15s, background-color .15s;
}
.a11y-tile:hover .a11y-tile-body { border-color: var(--teal); }
.a11y-tile-ico { flex: none; width: 27px; height: 27px; color: var(--teal-dark); stroke-width: 1.7; }
.a11y-tile-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.a11y-tile-text strong { font-size: .98rem; font-weight: 600; color: var(--ink); line-height: 1.25; }
.a11y-tile-text small { font-size: .82rem; color: var(--muted); line-height: 1.35; }
.a11y-tile-check {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid var(--line); color: transparent;
}
.a11y-tile-check .icon { width: 16px; height: 16px; stroke-width: 2.6; }
.a11y-tile input:checked + .a11y-tile-body { border-color: var(--teal-dark); background: var(--teal-tint); }
.a11y-tile input:checked + .a11y-tile-body .a11y-tile-check {
  background: var(--teal-dark); border-color: var(--teal-dark); color: var(--teal-on);
}

.a11y-size-opt input:focus-visible + .a11y-size-body,
.a11y-tile input:focus-visible + .a11y-tile-body { outline: 3px solid var(--teal); outline-offset: 2px; }

.a11y-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--line-soft);
}
.a11y-reset {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 15px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--paper); color: var(--ink-soft);
  font-family: inherit; font-size: .93rem; font-weight: 500; cursor: pointer;
}
.a11y-reset:hover { border-color: var(--teal); color: var(--teal-dark); }
.a11y-reset .icon { width: 17px; height: 17px; }
.btn.a11y-done { min-width: 140px; font-size: 1rem; }

@media (min-width: 540px) {
  .a11y-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 539px) {
  /* phones: slimmer tiles so the whole list fits with little or no scrolling,
     and the two footer buttons share one row whenever they fit */
  .a11y-tile-body { min-height: 58px; padding: 9px 12px; gap: 11px; }
  .a11y-reset, .btn.a11y-done { flex: 1 1 auto; justify-content: center; }
  .a11y-reset { padding: 12px; white-space: nowrap; }
  .btn.a11y-done { min-width: 0; }
}
@media (max-width: 380px) {
  .a11y-head { padding: 16px 16px 14px; gap: 12px; }
  .a11y-head-ico { display: none; }
  .a11y-body { padding: 16px 16px 4px; }
  .a11y-foot { padding: 12px 16px 16px; }
  .a11y-sizes { gap: 6px; }
  .a11y-size-body { font-size: .78rem; }
}

/* --------------------------------------------------------------- motion */

.js-loaded .reveal { opacity: 0; transform: translateY(14px); animation: rise .6s cubic-bezier(.22,.7,.3,1) forwards; }
.js-loaded .reveal-2 { animation-delay: .09s; }
.js-loaded .reveal-3 { animation-delay: .18s; }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .js-loaded .reveal { opacity: 1; transform: none; animation: none; }
}
[data-motion="reduce"] .reveal { opacity: 1 !important; transform: none !important; animation: none !important; }

/* ---------------------------------------------------------------- search */

/* Square header buttons: the magnifier, the flag and the burger share one
   footprint so the bar reads as a single row of controls. */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--white); color: var(--ink); cursor: pointer;
}
.icon-btn:hover { border-color: var(--teal); color: var(--teal-dark); }
.icon-btn .icon { width: 20px; height: 20px; }

/* The booking button keeps its colour — the strongest thing in the bar — but
   loses the long label and the generous padding. */
.btn.header-cta {
  height: 42px; padding: 0 15px; gap: 7px;
  font-size: .89rem; font-weight: 600;
}
.btn.header-cta .icon { width: 17px; height: 17px; }

.search {
  position: fixed; inset: 0; z-index: 120;
  padding: clamp(12px, 6vh, 84px) var(--gut) 24px;
  background: color-mix(in srgb, var(--ink) 46%, transparent);
  overflow-y: auto;
}
.search[hidden] { display: none; }

.search-panel {
  max-width: 640px; margin: 0 auto; padding: 14px;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}

.search-form {
  display: flex; align-items: center; gap: 10px;
  padding: 0 10px 0 13px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.search-form:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-tint); }
.search-ico { width: 19px; height: 19px; color: var(--muted); flex: none; }
.search-form input,
.search-page-form input {
  flex: 1; min-width: 0; padding: 14px 0;
  border: 0; background: transparent; outline: none;
  font: inherit; font-size: 1rem; color: var(--ink);
}
.search-form input::-webkit-search-cancel-button,
.search-page-form input::-webkit-search-cancel-button { -webkit-appearance: none; }

.search-close {
  flex: none; width: 32px; height: 32px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--white); color: var(--ink-soft);
  display: grid; place-items: center; cursor: pointer;
}
.search-close:hover { border-color: var(--teal); color: var(--teal-dark); }
.search-close .icon { width: 15px; height: 15px; }

.search-hint { font-size: .86rem; color: var(--muted); margin: 12px 4px 0; }
.search-hint a, .search-status a { color: var(--teal-dark); font-weight: 600; }

.search-results { list-style: none; margin: 6px 0 0; padding: 0; max-height: 58vh; overflow-y: auto; }
.search-results li + li { border-top: 1px solid var(--line-soft); }
.search-results a {
  display: grid; gap: 3px; padding: 12px 10px;
  border-radius: var(--r-sm); text-decoration: none; color: var(--ink);
}
.search-results a:hover,
.search-results a:focus-visible { background: var(--teal-tint); }
.sr-sec {
  order: -1;
  font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--teal-dark);
}
.sr-title { font-size: .98rem; font-weight: 600; }
.sr-desc {
  font-size: .86rem; color: var(--ink-soft); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.search-results mark { background: var(--brass-tint); color: inherit; border-radius: 3px; padding: 0 1px; }

/* ---- the search page ---- */

.search-page-form {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  max-width: 720px; padding: 5px 5px 5px 14px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
}
.search-page-form:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-tint); }
.search-page-form input { min-width: 180px; font-size: 1.02rem; }
.search-page-form .btn { padding: 12px 20px; }

.search-status { max-width: 720px; margin: 18px 0 0; font-size: .92rem; color: var(--ink-soft); }
.search-results--page { max-width: 720px; max-height: none; margin-top: 8px; overflow: visible; }
.search-results--page a { padding: 16px 12px; }

.search-popular { margin-top: 44px; }
.search-popular h2 { font-size: 1.06rem; margin-bottom: 14px; }
.search-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.search-chips a {
  display: inline-block; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--white);
  font-size: .88rem; color: var(--ink-soft); text-decoration: none;
}
.search-chips a:hover { border-color: var(--teal); color: var(--teal-dark); background: var(--teal-tint); }

/* ---- odds and ends ---- */

/* A lone photograph should not sit in half a column. */
.media-grid.media-grid--one { grid-template-columns: minmax(0, 1fr); max-width: 520px; }

.qual-alt { font-size: .88rem; color: var(--muted); }

/* ------------------------------------------------------------ responsive */

@media (min-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .timeline li { grid-template-columns: 120px 1fr; gap: 4px 20px; }
  .timeline .yr { grid-row: span 2; padding-top: 3px; }
  .facts { grid-template-columns: repeat(2, 1fr); gap: 0 32px; }
  .media-grid { grid-template-columns: repeat(2, 1fr); }
  .doc-grid { grid-template-columns: repeat(2, 1fr); }
  .cert-grid { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 30px; }
}

@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .hero-grid { grid-template-columns: 1.15fr .85fr; }
  .cta-inner { grid-template-columns: 1.6fr 1fr; }
  .layout--sidebar { grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; }
  .layout--split { grid-template-columns: repeat(2, 1fr); gap: 48px; }
  .doc-grid { grid-template-columns: repeat(4, 1fr); }
  .cert-grid { grid-template-columns: repeat(3, 1fr); }
  .foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
}

/* Desktop nav. Five disclosure/link items plus brand, language picker and one
   CTA need roughly 1040px of usable width, so the horizontal bar switches on at
   1100 — below that the hamburger is genuinely the better layout. */
@media (min-width: 1100px) {
  .nav-toggle { display: none; }
  .main-nav { display: flex; align-items: center; gap: 18px; }
  .main-nav a { font-size: .9rem; }
  .btn.header-cta { display: inline-flex; }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .mbar { display: none; }
  /* room under the last line so the accessibility button never covers it */
  .foot-legal { padding-bottom: 92px; }
  .a11y-fab { display: inline-flex; }
  body { font-size: calc(17.5px * var(--a11y-scale)); }
}

@media (min-width: 1300px) {
  .main-nav { gap: 22px; }
  .main-nav a { font-size: .93rem; }
}

/* desktop: menus float below the bar */
@media (min-width: 1100px) {
  .nav-menu {
    display: block; position: absolute; top: calc(100% + 14px); left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 268px; padding: 8px;
    background: var(--white); border: 1px solid var(--line);
    border-radius: var(--r); box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .16s, transform .16s, visibility .16s;
    z-index: 60;
  }
  /* bridge the gap so the pointer can travel from button to menu */
  .nav-group::after {
    content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 16px;
  }
  .nav-group:hover .nav-menu,
  .nav-group:focus-within .nav-menu,
  .nav-menu.is-open {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
}

/* mobile nav panel: the same menus become inline accordions */
@media (max-width: 1099px) {
  .main-nav {
    position: fixed; inset: var(--header-h) 0 auto; display: block;
    background: var(--white); border-bottom: 1px solid var(--line);
    padding: 14px var(--gut) 24px; box-shadow: var(--shadow-lg);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .18s, transform .18s;
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
  }
  .main-nav.is-open { opacity: 1; transform: none; pointer-events: auto; }

  .main-nav > a,
  .main-nav .nav-top {
    display: flex; width: 100%; justify-content: space-between;
    padding: 15px 0; border-bottom: 1px solid var(--line-soft);
    font-size: 1rem; color: var(--ink); text-align: left;
  }
  .main-nav > a[aria-current="page"]::after,
  .main-nav .nav-top[data-current="true"]::after { display: none; }
  .main-nav > a.nav-cta {
    display: flex; margin-top: 16px; border-bottom: 0;
    text-align: center; justify-content: center; color: var(--teal-on);
  }

  .nav-menu { padding: 4px 0 10px 6px; border-bottom: 1px solid var(--line-soft); }
  .nav-menu.is-open { display: block; }
  .nav-menu a { padding: 12px 10px; font-size: .95rem; }
  .nav-menu-all { padding: 12px 10px; }

  /* the bar carries the logo, the language picker and the burger; the name is
     allowed to wrap to two lines rather than pushing them off the edge */
  .brand-sub { display: none; }
  .brand { gap: 9px; }
  .brand-mark { width: 34px; height: 34px; }
  .brand-name { font-size: .92rem; white-space: normal; line-height: 1.25; }
  .bar { gap: 10px; }
}

@media (max-width: 430px) {
  .brand-name { font-size: .86rem; }
  .container { --gut: 16px; }
}

@media print {
  .site-header, .mbar, .site-footer, .hero-actions, .cta-band, .a11y, .crumbs { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
}