/*
Theme Name: Divi Child Theme
Theme URI: https://divireadythemes.com/
Description: Divi Child Theme
Author: Divi Ready Themes
Author URI: https://divireadythemes.com/
Template: Divi
Version: Updated for Divi 3+
*/
/*------------------------------------------------*/
/*-------------------[GLOBAL]--------------------*/
/*------------------------------------------------*/

/* ==========================================================================
   DR. KAMENOV — ORTO PUNKT
   Base styles + Header component
   Container: 1440px | Bulgarian 35+ audience | Conversion-first
   ========================================================================== */

/* --- Reset & Base --- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Colors */
  --color-primary: #0b1d3a; /* Deep navy */
  --color-primary-light: #122b52; /* Lighter navy for hovers */
  --color-accent: #d4873a; /* Warm gold/amber — CTA, highlights */
  --color-accent-hover: #c07830;
  --color-text: #1a1a2e; /* Body text */
  --color-text-light: #4a4a5a; /* Secondary text */
  --color-bg: #ffffff;
  --color-bg-alt: #f5f7fa; /* Alternating sections */
  --color-border: #e2e6ec;
  --color-success: #2d8a4e; /* Call button green */
  --color-success-hover: #246f3e;

  /* Typography */
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --text-base: 17px;
  --text-sm: 15px;
  --text-lg: 19px;
  --line-height: 1.65;

  /* Layout */
  --container: 1440px;
  --container-padding: 24px;

  /* Transitions */
  --transition: 0.25s ease;
}

html {
  font-size: var(--text-base);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: var(--line-height);
  color: var(--color-text);
  background-color: var(--color-bg);
}

body.menu-open {
  overflow: hidden;
}

body.menu-open .top-bar {
  display: none;
}

body.menu-open .header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

ul,
ol {
  list-style: none;
}

#left-area ul,
.entry-content ul,
.et-l--body ul,
.et-l--footer ul,
.et-l--header ul {
  list-style-type: none;
  padding: 0;
  line-height: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --- Container --- */
/* The Divi row is deliberately full-bleed (see "Divi environment fixes" near the
   end of this file), so .wrap is the ONLY thing keeping content off the screen
   edge. Its padding was commented out — that is why sections ran edge-to-edge on
   any viewport narrower than 1440px, phones included. */
.wrap {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* ==========================================================================
   TOP BAR
   ========================================================================== */

.top-bar {
  background-color: var(--color-primary);
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1;
}

.top-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
}

.top-bar__info {
  display: flex;
  align-items: center;
  gap: 24px;
}

.top-bar__item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.top-bar__item svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.top-bar__item a {
  color: rgba(255, 255, 255, 0.85);
  transition: color var(--transition);
}

.top-bar__item a:hover {
  color: #fff;
}

.top-bar__phone a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: color var(--transition);
}

.top-bar__phone a:hover {
  color: var(--color-accent);
}

/* ==========================================================================
   HEADER
   ========================================================================== */

/* Divi Theme Builder wrapper stacking — force header layout above body layout */
.et-l--header {
  position: relative;
  z-index: 9999;
}

.et-l--body {
  position: relative;
  z-index: 1;
}

.header {
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  position: relative;
  z-index: 100;
  transition: box-shadow var(--transition);
}

/* The JS in header.html inserts a spacer below the header when it goes
   fixed, so the page keeps its height and nothing jumps at the toggle.
   No entry animation: at the toggle point the header is already exactly
   at the viewport top, so animating it in would CAUSE visible motion. */
.header.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

.header__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

/* Logo */
.header__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.header__logo img {
  height: 44px;
  width: auto;
}

/* Desktop Menu */
.header__menu {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.header__menu > li > a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 16px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  border-radius: 8px;
  transition:
    background-color var(--transition),
    color var(--transition);
}

.header__menu > li > a:hover,
.header__menu > li > a:focus-visible {
  background-color: var(--color-bg-alt);
  color: var(--color-primary);
}

.header__menu > li > a svg {
  transition: transform var(--transition);
}

/* ==========================================================================
   MEGA MENU
   ========================================================================== */

.has-mega {
  position: static;
}

/* NOTE: full-bleed relies on .header being the nearest positioned ancestor —
   do not add position: relative to .wrap or anything between .header and .mega-menu */
.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity var(--transition),
    visibility var(--transition),
    transform var(--transition);
  z-index: 9999;
}

.has-mega:hover .mega-menu,
.has-mega.is-open .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.has-mega:hover > a svg,
.has-mega.is-open > a svg {
  transform: rotate(180deg);
}

.mega-menu__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: var(--container);
  margin: 0 auto;
  padding: 32px var(--container-padding);
}

.mega-menu__col {
  padding: 0 16px;
  border-right: 1px solid var(--color-border);
}

.mega-menu__col:first-child {
  padding-left: 0;
}

.mega-menu__col:last-child {
  padding-right: 0;
  border-right: none;
}

.mega-menu__heading {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-light);
  padding: 0 10px 12px;
  margin-bottom: 4px;
}

.mega-menu__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px;
  border-radius: 10px;
  transition: background-color var(--transition);
}

.mega-menu__item:hover {
  background-color: var(--color-bg-alt);
}

.mega-menu__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: var(--color-bg-alt);
  border-radius: 10px;
  color: var(--color-primary);
  transition:
    background-color var(--transition),
    color var(--transition);
}

.mega-menu__item:hover .mega-menu__icon {
  background-color: var(--color-primary);
  color: #fff;
}

.mega-menu__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mega-menu__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
}

.mega-menu__desc {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--color-text-light);
  line-height: 1.4;
}

.mega-menu__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Full-bleed background: bar spans the viewport, content stays aligned
     with the 1440px container via the calculated side padding */
  padding: 14px max(var(--container-padding), calc((100% - var(--container)) / 2 + var(--container-padding)));
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-alt);
}

.mega-menu__footer > a:first-child {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  transition: color var(--transition);
}

.mega-menu__footer > a:first-child:hover {
  color: var(--color-accent);
}

.mega-menu__footer-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  transition: color var(--transition);
}

.mega-menu__footer-phone:hover {
  color: var(--color-accent);
}

/* Header CTA */
.header__cta {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  background-color: var(--color-accent);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 700;
  border-radius: 10px;
  transition:
    background-color var(--transition),
    transform var(--transition);
  white-space: nowrap;
}

.header__cta:hover {
  background-color: var(--color-accent-hover);
  transform: translateY(-1px);
}

/* Mobile Toggle */
.header__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px;
}

.header__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--color-text);
  border-radius: 2px;
  transition:
    transform var(--transition),
    opacity var(--transition);
}

.header__toggle.is-active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.header__toggle.is-active span:nth-child(2) {
  opacity: 0;
}

.header__toggle.is-active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ==========================================================================
   MOBILE MENU
   ========================================================================== */

.mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-bg);
  z-index: 9999;
  padding: 0 var(--container-padding) 100px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-menu.is-open {
  display: block;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  padding: 0;
  border-bottom: 1px solid var(--color-border);
  margin: 0 calc(-1 * var(--container-padding));
  padding: 0 var(--container-padding);
  position: sticky;
  top: 0;
  background: var(--color-bg);
  z-index: 1;
}

.mobile-menu__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text);
  border-radius: 8px;
  transition: background-color var(--transition);
}

.mobile-menu__close:hover {
  background-color: var(--color-bg-alt);
}

.mobile-menu > ul {
  list-style: none;
  padding-top: 8px;
}

.mobile-menu > ul > li > a,
.mobile-menu__dropdown > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 0;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.mobile-menu__dropdown > button svg {
  transition: transform var(--transition);
}

.mobile-menu__dropdown.is-open > button svg {
  transform: rotate(180deg);
}

.mobile-menu__dropdown > ul {
  display: none;
  list-style: none;
  padding: 4px 0 8px 16px;
}

.mobile-menu__dropdown.is-open > ul {
  display: block;
}

.mobile-menu__category {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  background: var(--color-bg-alt);
  padding: 10px 12px;
  margin: 12px 0 4px;
  border-radius: 8px;
  border-left: 3px solid var(--color-accent);
}

.mobile-menu__category:first-child {
  margin-top: 8px;
}

.mobile-menu__dropdown > ul a {
  display: block;
  padding: 12px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-light);
  border-bottom: 1px solid var(--color-bg-alt);
}

.mobile-menu__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 24px;
  padding: 16px;
  background-color: var(--color-accent);
  color: #fff;
  font-size: var(--text-base);
  font-weight: 700;
  border-radius: 12px;
}

.mobile-menu__phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 12px;
  padding: 16px;
  background-color: var(--color-bg-alt);
  color: var(--color-primary);
  font-size: var(--text-base);
  font-weight: 700;
  border-radius: 12px;
}

/* ==========================================================================
   STICKY MOBILE BOTTOM BAR
   ========================================================================== */

.mobile-bottom-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  gap: 8px;
}

.mobile-bottom-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  padding: 14px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 12px;
}

.mobile-bottom-bar__call {
  background-color: var(--color-success);
  color: #fff;
}

.mobile-bottom-bar__call:hover {
  background-color: var(--color-success-hover);
}

.mobile-bottom-bar__book {
  background-color: var(--color-accent);
  color: #fff;
}

.mobile-bottom-bar__book:hover {
  background-color: var(--color-accent-hover);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1200px) {
  .mega-menu__inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 0;
  }

  .mega-menu__col:nth-child(2) {
    border-right: none;
  }

  .mega-menu__col:nth-child(3) {
    padding-left: 0;
  }
}

@media (max-width: 1024px) {
  .header__menu > li > a {
    padding: 10px 12px;
    font-size: 14px;
  }

  .header__cta {
    padding: 10px 18px;
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  .top-bar__info {
    display: none;
  }

  .top-bar__phone {
    margin: 0 auto;
  }

  .header__menu,
  .header__cta {
    display: none;
  }

  .header__toggle {
    display: flex;
  }

  .mobile-bottom-bar {
    display: flex;
  }

  /* Offset body for sticky bottom bar */
  body {
    padding-bottom: 80px;
  }
}

/* Tablet and phone: the gutter goes proportional so the content column lands on
   90% of the viewport — the same proportion Divi gives its own rows by default.
   Replaces a flat 16px that only kicked in below 480px and left 481–980px with
   no usable gutter at all. */
@media (max-width: 980px) {
  :root {
    --container-padding: 5vw;
  }
}

/* ==========================================================================
   FOCUS STATES — Accessibility
   ========================================================================== */

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer {
  background-color: var(--color-primary);
  color: rgba(255, 255, 255, 0.8);
  padding-top: 64px;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Brand */
.footer__logo {
  display: inline-block;
  margin-bottom: 20px;
}

.footer__logo img {
  height: 44px;
  width: auto;
}

.footer__desc {
  font-size: var(--text-sm);
  line-height: 1.7;
  margin-bottom: 24px;
  max-width: 320px;
}

.footer__social {
  display: flex;
  gap: 12px;
}

.footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.7);
  transition:
    background-color var(--transition),
    color var(--transition);
}

.footer__social a:hover {
  background: var(--color-accent);
  color: #fff;
}

/* Columns */
.footer__heading {
  font-family: 'JetBrains Mono', 'Inter', monospace;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-accent);
  margin-bottom: 22px;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__links a {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.7);
  transition:
    color var(--transition),
    padding-left var(--transition);
}

.footer__links a:hover {
  color: #fff;
  padding-left: 4px;
}

/* Contact list */
.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--text-sm);
  line-height: 1.5;
}

.footer__contact li svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-accent);
}

.footer__contact a {
  color: rgba(255, 255, 255, 0.8);
  transition: color var(--transition);
}

.footer__contact a:hover {
  color: #fff;
}

/* Footer CTA */
.footer__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background-color: var(--color-accent);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 700;
  border-radius: 10px;
  transition:
    background-color var(--transition),
    transform var(--transition);
}

.footer__cta:hover {
  background-color: var(--color-accent-hover);
  transform: translateY(-1px);
}

/* Bottom bar */
.footer__bottom {
  background: rgba(0, 0, 0, 0.15);
  padding: 20px 0;
  text-align: center;
}

.footer__bottom p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

/* Footer responsive */
@media (max-width: 1024px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .footer {
    padding-top: 48px;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-bottom: 36px;
  }

  .footer__desc {
    max-width: none;
  }

  .footer__cta {
    width: 100%;
    justify-content: center;
    padding: 14px 24px;
  }
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--color-primary);
  border-radius: 0 0 24px 24px;
}

/* Contained split: copy column left, framed photo right. Everything sits
   inside the centered container (aligns with header / footer); only the navy
   background bleeds to the viewport edges. */
.hero__inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 56px var(--container-padding) 64px;
  display: grid;
  grid-template-columns: minmax(0, 580px) minmax(0, 1fr);
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}

/* Eyebrow */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'JetBrains Mono', 'Inter', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 22px;
}

.hero__eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/* Title */
.hero__title {
  font-family: 'Newsreader', Georgia, serif;
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 500;
  line-height: 1.02;
  color: #fff;
  margin-bottom: 20px;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.hero__title em {
  color: var(--color-accent);
  font-style: italic;
  font-weight: 400;
}

/* Subtitle */
.hero__subtitle {
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 28px;
  max-width: 560px;
}

/* The anchor shrink-wraps to the CTA row's intrinsic width; the stat strip
   below stretches to that exact width, so the two always stay flush. */
.hero__anchor {
  display: grid;
  width: max-content;
  max-width: 100%;
}

/* CTA Buttons */
.hero__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  font-size: var(--text-base);
  font-weight: 700;
  border-radius: 12px;
  transition:
    background-color var(--transition),
    transform var(--transition),
    box-shadow var(--transition);
  white-space: nowrap;
}

.hero__cta--primary {
  background-color: var(--color-accent);
  color: #fff;
  box-shadow: 0 4px 24px rgba(212, 135, 58, 0.3);
}

.hero__cta--primary:hover {
  background-color: var(--color-accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(212, 135, 58, 0.4);
}

.hero__cta--secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
}

.hero__cta--secondary:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);
}

/* Stats bento — boxes are wanted here, but they must NOT read as buttons.
   The CTAs above are raised light pills (translucent fill, visible border,
   12px radius, hover lift), so the tiles get the opposite surface: recessed
   wells DARKER than the section navy, whisper 1px edges, larger 16px radius,
   structured icon + number + label content, no hover. Amber stays scoped to
   the stars, the icons and the "+" glyphs. Composition: wide Google-rating
   banner on top, 20+ години and 1000+ пациенти tiles below. */
.hero__bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bento-card {
  position: relative;
  min-width: 0;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(6, 14, 30, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Anchor: Google rating — a wide, short banner across the top */
.bento-card--rating {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  row-gap: 6px;
  padding: 12px 16px;
}

/* number + stars cluster, left of the banner */
.bento-card__score {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Google "G" + brand label, pushed to the right of the banner */
.bento-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.bento-card__mark { flex: 0 0 auto; }

.bento-card__brand {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.005em;
}

/* icon + number row on the small tiles (inline keeps the tiles short) */
.bento-card__top {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 6px;
}

/* Numbers — Newsreader serif, echoes the title */
.bento-card__num {
  margin: 0;
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
}

.bento-card--rating   .bento-card__num { font-size: clamp(30px, 2.6vw, 36px); }
.bento-card--years    .bento-card__num,
.bento-card--patients .bento-card__num { font-size: clamp(25px, 2.1vw, 29px); }

.bento-card__num-suffix {
  font-size: 0.5em;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0;
}

/* The amber "+" — the only amber outside the stars and the icons */
.bento-card__plus { color: var(--color-accent); }

/* Labels — Inter (inherited), 15px floor held */
.bento-card__label {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.68);
  letter-spacing: 0.005em;
}

/* 5-star row — amber, decorative */
.bento-card__stars {
  display: flex;
  gap: 3px;
}

.bento-card__stars svg {
  width: 15px;
  height: 15px;
  fill: var(--color-accent);
  display: block;
}

/* Tile icons (award / patients) — amber stroke */
.bento-card__icon {
  flex: 0 0 auto;
  stroke: rgba(212, 135, 58, 0.85);
}

/* Screen-reader-only rating context (the stars are aria-hidden) */
.hero__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Right column: framed photo, contained (classic, no viewport bleed). The img
   is absolute so the photo NEVER drives section height: the row height comes
   from the copy and the photo stretches to fill it. */
.hero__media {
  position: relative;
  align-self: stretch;
  margin: 0;
  min-height: 440px;
  border-radius: 20px;
  overflow: hidden;
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 30%;
  filter: saturate(0.92);
}

/* quiet navy base at the bottom so the caption reads on the light photo */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11, 29, 58, 0) 60%,
    rgba(11, 29, 58, 0.55) 100%
  );
  pointer-events: none;
}

.hero__media-caption {
  position: absolute;
  left: 24px;
  bottom: 18px;
  z-index: 1;
  margin: 0;
  font-family: 'JetBrains Mono', 'Inter', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}

/* Hero responsive */
@media (max-width: 1024px) {
  /* Stack: content first, photo as a contained banner below */
  .hero {
    border-radius: 0 0 16px 16px;
  }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: 44px;
    padding: 48px var(--container-padding) 56px;
  }

  .hero__copy {
    max-width: 640px;
  }

  .hero__media {
    align-self: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
    max-height: 400px;
  }
}

@media (max-width: 768px) {
  .hero__eyebrow {
    margin-bottom: 18px;
  }

  .hero__subtitle {
    font-size: var(--text-base);
  }

  /* CTAs go full-width, so the anchor stops shrink-wrapping and both the
     buttons and the strip follow the column width */
  .hero__anchor {
    display: block;
    width: auto;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 24px;
  }

  .hero__cta {
    width: 100%;
    justify-content: center;
    padding: 16px 24px;
  }
}

@media (max-width: 480px) {
  .bento-card { padding: 13px 14px; }
  .bento-card--rating { padding: 11px 14px; }

  .hero__media-caption {
    left: 16px;
    bottom: 14px;
  }
}

@media (max-width: 400px) {
  /* Tiles stack so the labels never crush */
  .hero__bento {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   CTA — APPOINTMENT BANNER (primary conversion)
   ========================================================================== */

.cta-book {
  background-color: var(--color-bg);
}

.cta-book__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
  padding: 80px 72px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 24px;
  overflow: hidden;
}

.cta-book__card::before {
  content: "";
  position: absolute;
  right: -160px;
  top: -160px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(212, 135, 58, 0.18) 0%, rgba(212, 135, 58, 0) 65%);
  pointer-events: none;
}

.cta-book__content {
  position: relative;
  z-index: 1;
}

.cta-book__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'JetBrains Mono', 'Inter', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 24px;
}

.cta-book__eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.cta-book__title {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 500;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0 0 24px;
  text-wrap: balance;
}

.cta-book__title em {
  color: var(--color-accent);
  font-style: italic;
  font-weight: 400;
}

.cta-book__desc {
  font-size: 17px;
  line-height: 1.6;
  color: #cbd3e0;
  max-width: 480px;
  margin: 0 0 36px;
}

.cta-book__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.cta-book__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  min-height: 48px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.005em;
  border-radius: 2px;
  transition:
    background-color var(--transition),
    color var(--transition);
}

.cta-book__btn--primary {
  background: var(--color-accent);
  color: #fff;
}

.cta-book__btn--primary:hover {
  background: var(--color-accent-hover);
}

.cta-book__btn--light {
  background: #fff;
  color: var(--color-primary);
}

.cta-book__btn--light:hover {
  background: #f0f3f8;
}

.cta-book__btn svg {
  width: 18px;
  height: 18px;
}

.cta-book__info {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 28px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  padding-left: 48px;
}

.cta-book__info-row {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.cta-book__info-row > svg {
  color: var(--color-accent);
  flex: 0 0 auto;
  margin-top: 2px;
}

.cta-book__info-label {
  font-family: 'JetBrains Mono', 'Inter', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 6px;
}

.cta-book__info-value {
  font-size: 16px;
  color: #fff;
  line-height: 1.45;
}

.cta-book__info-value a {
  color: #fff;
  transition: color var(--transition);
}

.cta-book__info-value a:hover {
  color: var(--color-accent);
}

/* ==========================================================================
   CTA — INLINE STRIP (3 variants: dark, light, accent)
   Shared base styles + per-variant overrides
   ========================================================================== */

.cta-strip {
  padding: 40px 0;
  background-color: var(--color-bg);
}

.cta-strip__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 32px 40px;
  border-radius: 16px;
}

.cta-strip__text {
  flex: 1;
  min-width: 0;
}

.cta-strip__title {
  font-family: 'Newsreader', Georgia, serif;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}

.cta-strip__desc {
  font-size: var(--text-sm);
  margin: 0;
}

.cta-strip__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.cta-strip__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: var(--text-sm);
  font-weight: 700;
  transition:
    background-color var(--transition),
    border-color var(--transition),
    color var(--transition);
}

.cta-strip__button {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  border-radius: 10px;
  font-size: var(--text-sm);
  font-weight: 700;
  transition:
    background-color var(--transition),
    transform var(--transition),
    color var(--transition);
}

.cta-strip__button:hover {
  transform: translateY(-1px);
}

/* --- Variant 1: Dark (navy bg, white text, amber button) --- */
.cta-strip--dark .cta-strip__inner {
  background: var(--color-primary);
  color: #fff;
}

.cta-strip--dark .cta-strip__title {
  color: #fff;
}

.cta-strip--dark .cta-strip__desc {
  color: rgba(255, 255, 255, 0.7);
}

.cta-strip--dark .cta-strip__phone {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
}

.cta-strip--dark .cta-strip__phone svg {
  color: var(--color-accent);
}

.cta-strip--dark .cta-strip__phone:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--color-accent);
}

.cta-strip--dark .cta-strip__button {
  background: var(--color-accent);
  color: #fff;
}

.cta-strip--dark .cta-strip__button:hover {
  background: var(--color-accent-hover);
}

/* --- Variant 2: Light (bg-alt, navy text, navy button) --- */
.cta-strip--light .cta-strip__inner {
  background: var(--color-bg-alt);
  color: var(--color-primary);
  border: 1px solid var(--color-border);
}

.cta-strip--light .cta-strip__title {
  color: var(--color-primary);
}

.cta-strip--light .cta-strip__desc {
  color: var(--color-text-light);
}

.cta-strip--light .cta-strip__phone {
  background: #fff;
  border: 1px solid var(--color-border);
  color: var(--color-primary);
}

.cta-strip--light .cta-strip__phone svg {
  color: var(--color-accent);
}

.cta-strip--light .cta-strip__phone:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.cta-strip--light .cta-strip__button {
  background: var(--color-primary);
  color: #fff;
}

.cta-strip--light .cta-strip__button:hover {
  background: var(--color-accent);
}

/* --- Variant 3: Accent (amber bg, white text, navy button) --- */
.cta-strip--accent .cta-strip__inner {
  background: linear-gradient(
    135deg,
    var(--color-accent) 0%,
    var(--color-accent-hover) 100%
  );
  color: #fff;
}

.cta-strip--accent .cta-strip__title {
  color: #fff;
}

.cta-strip--accent .cta-strip__desc {
  color: rgba(255, 255, 255, 0.85);
}

.cta-strip--accent .cta-strip__phone {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
}

.cta-strip--accent .cta-strip__phone svg {
  color: #fff;
}

.cta-strip--accent .cta-strip__phone:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}

.cta-strip--accent .cta-strip__button {
  background: var(--color-primary);
  color: #fff;
}

.cta-strip--accent .cta-strip__button:hover {
  background: var(--color-primary-light);
}

/* ==========================================================================
   CTA — RESPONSIVE
   ========================================================================== */

@media (max-width: 980px) {
  .cta-book__card {
    grid-template-columns: 1fr;
    padding: 56px 32px;
    gap: 40px;
  }

  .cta-book__info {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-left: 0;
    padding-top: 32px;
  }
}

@media (max-width: 768px) {
  .cta-strip {
    padding: 24px 0;
  }

  .cta-strip__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 28px 24px;
  }

  .cta-strip__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .cta-strip__phone,
  .cta-strip__button {
    justify-content: center;
    padding: 14px 20px;
  }
}

@media (max-width: 480px) {
  .cta-book__actions {
    flex-direction: column;
  }

  .cta-book__btn {
    width: 100%;
  }
}

/* ==========================================================================
   PAGE HERO — inner pages (services / procedures / about / blog posts)
   Subtle bg-alt background, split content/image grid, breadcrumbs
   ========================================================================== */

.page-hero {
  position: relative;
  padding: 32px 0 56px;
  background: linear-gradient(
    180deg,
    var(--color-bg-alt) 0%,
    var(--color-bg) 100%
  );
  overflow: hidden;
}

.page-hero__shape {
  position: absolute;
  top: -160px;
  right: -140px;
  width: 540px;
  height: 540px;
  background: radial-gradient(
    circle at center,
    rgba(212, 135, 58, 0.1) 0%,
    transparent 65%
  );
  pointer-events: none;
}

.page-hero .wrap {
  position: relative;
  z-index: 1;
  /* The Divi row under the hero is full-bleed (see Divi environment fixes),
     so the horizontal gutter must come from the hero's own .wrap — it now does,
     inherited from the generic .wrap rule; no separate padding needed here. */
}

/* --- Breadcrumbs --- */
.page-hero__breadcrumbs {
  margin-bottom: 40px;
}

.page-hero__breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  font-size: 14px;
  color: var(--color-text-light);
}

.page-hero__breadcrumbs li {
  display: inline-flex;
  align-items: center;
}

.page-hero__breadcrumbs li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--color-border);
}

.page-hero__breadcrumbs a {
  color: var(--color-text-light);
  text-decoration: none;
  transition: color var(--transition);
}

.page-hero__breadcrumbs a:hover {
  color: var(--color-accent);
}

.page-hero__breadcrumbs [aria-current="page"] {
  color: var(--color-primary);
  font-weight: 600;
}

/* --- Grid --- */
.page-hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: center;
}

/* --- Content --- */
.page-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  font-family: 'JetBrains Mono', 'Inter', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.page-hero__eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.page-hero__title {
  font-family: 'Newsreader', Georgia, serif;
  font-size: clamp(36px, 5vw, 54px);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--color-primary);
  margin-bottom: 20px;
  text-wrap: balance;
}

.page-hero__lead {
  font-size: 19px;
  line-height: 1.6;
  color: var(--color-text-light);
  margin-bottom: 32px;
  max-width: 560px;
}

/* --- Meta chips --- */
.page-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 32px;
  list-style: none;
  padding: 24px 0;
  margin-bottom: 32px;
}

.page-hero__meta li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-hero__meta li svg {
  flex-shrink: 0;
  color: var(--color-accent);
}

.page-hero__meta div {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.page-hero__meta-label {
  font-family: 'JetBrains Mono', 'Inter', monospace;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-text-light);
}

.page-hero__meta-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary);
}

/* --- Actions --- */
.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 12px;
  transition:
    background-color var(--transition),
    color var(--transition),
    border-color var(--transition),
    transform var(--transition);
}

.page-hero__btn--primary {
  background-color: var(--color-accent);
  color: #fff;
  border: 2px solid var(--color-accent);
}

.page-hero__btn--primary:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  transform: translateY(-2px);
}

.page-hero__btn--ghost {
  background-color: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-border);
}

.page-hero__btn--ghost:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* --- Media --- */
.page-hero__media {
  position: relative;
  aspect-ratio: 4 / 3;
  max-width: 580px;
  margin-left: auto;
}

.page-hero__media-accent {
  position: absolute;
  top: 24px;
  right: -24px;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(11, 29, 58, 0.06) 0%,
    rgba(212, 135, 58, 0.1) 100%
  );
  border-radius: 20px;
  z-index: 0;
}

.page-hero__image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

/* --- Responsive --- */
@media (max-width: 960px) {
  .page-hero {
    padding: 24px 0 48px;
  }

  .page-hero__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .page-hero__media {
    order: -1;
    max-width: 520px;
    margin: 0 auto;
  }

  .page-hero__media-accent {
    right: -12px;
    top: 16px;
  }
}

@media (max-width: 600px) {
  .page-hero {
    padding: 16px 0 40px;
  }

  .page-hero__breadcrumbs {
    margin-bottom: 28px;
    font-size: 13px;
  }

  .page-hero__title {
    font-size: 32px;
  }

  .page-hero__lead {
    font-size: 17px;
    margin-bottom: 24px;
  }

  .page-hero__meta {
    flex-direction: column;
    gap: 16px;
    padding: 20px 0;
    margin-bottom: 24px;
  }

  .page-hero__btn {
    flex: 1;
    justify-content: center;
    padding: 14px 20px;
  }
}

@media (max-width: 400px) {
  .page-hero__actions {
    flex-direction: column;
  }

  .page-hero__btn {
    width: 100%;
  }
}

/* ==========================================================================
   CONTACT (/kontakti/) — appointment form + contact aside + map
   Hero is .page-hero--contact (single-column variant of the shared page-hero,
   so it reuses the :has(.page-hero) full-bleed neutralizer). This section is a
   normal contained block. Inputs mirror the .nf__search-input field language.
   REQUIRES: 'Newsreader' (serif) and 'JetBrains Mono' fonts loaded in <head>.
   ========================================================================== */

/* Hero override: no media column on the contact page */
.page-hero--contact .page-hero__grid {
  grid-template-columns: 1fr;
}

.page-hero--contact .page-hero__lead {
  max-width: 640px;
}

.contact {
  background-color: var(--color-bg);
  padding: 32px 0 64px;
}

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

/* --- Form --- */
.contact__form {
  /* id="appointment" lives here — clear the sticky header on jump */
  scroll-margin-top: 108px;
  padding: 40px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 20px;
}

.contact__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: "JetBrains Mono", "Inter", monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.contact__eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.contact__title {
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  margin: 16px 0 12px;
}

.contact__intro {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-light);
  margin: 0 0 28px;
}

.contact__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.contact__field {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.contact__label {
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary);
}

.contact__label span {
  color: var(--color-accent);
}

.contact__input {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  font-family: inherit;
  font-size: 16px;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
}

.contact__input::placeholder {
  color: var(--color-text-light);
  opacity: 0.85;
}

.contact__input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(212, 135, 58, 0.14);
}

.contact__select {
  /* room for the custom chevron */
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234a4a5a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}

.contact__textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.6;
}

.contact__consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 4px 0 28px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-light);
}

.contact__consent input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--color-accent);
}

.contact__consent a {
  color: var(--color-accent);
  text-decoration: underline;
}

.contact__consent span span {
  color: var(--color-accent);
}

.contact__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 16px 32px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: var(--color-accent);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color var(--transition), transform var(--transition);
}

.contact__submit:hover {
  background: var(--color-accent-hover);
  transform: translateY(-2px);
}

.contact__submit svg {
  flex-shrink: 0;
}

.contact__reassure {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 0;
  font-size: 14px;
  color: var(--color-text-light);
}

.contact__reassure svg {
  flex-shrink: 0;
  color: var(--color-success);
}

/* --- Aside: details card + steps --- */
.contact__aside {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact__card {
  padding: 36px 32px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 20px;
}

.contact__card-title {
  font-family: "Newsreader", Georgia, serif;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  margin: 0 0 24px;
}

.contact__details {
  display: flex;
  flex-direction: column;
  gap: 22px;
  list-style: none;
}

.contact__detail {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.contact__detail > svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--color-accent);
}

.contact__detail div {
  display: flex;
  flex-direction: column;
}

.contact__detail-label {
  font-family: "JetBrains Mono", "Inter", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-bottom: 6px;
}

.contact__detail-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.45;
}

a.contact__detail-value {
  transition: color var(--transition);
}

a.contact__detail-value:hover {
  color: var(--color-accent);
}

.contact__social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  transition: color var(--transition), border-color var(--transition);
}

.contact__social:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.contact__steps {
  padding: 32px;
  background: var(--color-primary);
  border-radius: 20px;
  color: #fff;
}

.contact__steps-title {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: "JetBrains Mono", "Inter", monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 20px;
}

.contact__steps-title::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.contact__steps-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
  counter-reset: none;
}

.contact__steps-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 15px;
  line-height: 1.5;
  color: #cbd3e0;
}

.contact__step-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-family: "Newsreader", Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-accent);
  background: rgba(212, 135, 58, 0.14);
  border-radius: 50%;
}

/* --- Map --- */
.contact__map {
  margin-top: 56px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  line-height: 0;
}

.contact__map iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
  filter: grayscale(0.2);
}

/* --- Responsive --- */
@media (max-width: 960px) {
  .contact__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .contact__map {
    margin-top: 40px;
  }

  .contact__map iframe {
    height: 360px;
  }
}

@media (max-width: 600px) {
  .contact__form {
    padding: 28px 20px;
  }

  .contact__row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .contact__card,
  .contact__steps {
    padding: 28px 22px;
  }

  .contact__submit {
    width: 100%;
  }

  .contact__map iframe {
    height: 300px;
  }
}

/* ==========================================================================
   SERVICES OVERVIEW (Homepage) — editorial row layout
   Numbered rows with category icon, procedure list, internal-link hub.
   REQUIRES: 'Newsreader' (serif) and 'JetBrains Mono' fonts loaded in <head>.
   ========================================================================== */

.services {
  background-color: var(--color-bg-alt);
  padding: 32px 0 64px;
}

/* --- Section header --- */
.services__head {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 64px;
  align-items: end;
  margin-bottom: 64px;
}

.services__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: "JetBrains Mono", "Inter", monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.services__eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.services__title {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 500;
  font-size: clamp(32px, 3.6vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  margin: 18px 0 0;
  text-wrap: balance;
}

.services__lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-text-light);
  max-width: 540px;
  margin: 0;
}

/* --- Rows --- */
.services__list {
  border-top: 1px solid var(--color-border);
}

.services__row {
  display: grid;
  grid-template-columns: 60px 72px minmax(0, 1.4fr) minmax(0, 1.9fr) auto;
  gap: 36px;
  align-items: start;
  padding: 44px 0;
  border-bottom: 1px solid var(--color-border);
  clip-path: inset(0 -100vmax);
  transition:
    background-color var(--transition),
    box-shadow var(--transition);
}

.services__row:hover {
  background-color: rgba(212, 135, 58, 0.03);
  box-shadow: 0 0 0 100vmax rgba(212, 135, 58, 0.03);
}

.services__num {
  font-family: "JetBrains Mono", "Inter", monospace;
  font-size: 14px;
  color: var(--color-accent);
  letter-spacing: 0.1em;
  padding-top: 10px;
}

.services__icon {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  background: linear-gradient(
    135deg,
    rgba(11, 29, 58, 0.04) 0%,
    rgba(212, 135, 58, 0.12) 100%
  );
  border: 1px solid rgba(212, 135, 58, 0.18);
  border-radius: 2px;
  color: var(--color-accent);
  transition:
    border-color var(--transition),
    background var(--transition);
}

.services__icon svg {
  width: 34px;
  height: 34px;
  stroke-width: 1.5;
}

.services__row:hover .services__icon {
  border-color: var(--color-accent);
  background: linear-gradient(
    135deg,
    rgba(11, 29, 58, 0.06) 0%,
    rgba(212, 135, 58, 0.18) 100%
  );
}

.services__row-title {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  margin: 0 0 8px;
}

.services__row-tag {
  font-family: "JetBrains Mono", "Inter", monospace;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--color-text-light);
}

/* --- Procedure list --- */
.services__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.services__items li {
  border-bottom: 1px solid var(--color-border);
}

.services__items li:first-child {
  border-top: 1px solid var(--color-border);
}

.services__items a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  font-size: 16px;
  color: var(--color-text);
  text-decoration: none;
  min-height: 48px;
  transition: color var(--transition);
}

.services__items a:hover,
.services__items a:focus-visible {
  color: var(--color-accent);
}

.services__arrow {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--color-text-light);
  transition:
    transform var(--transition),
    color var(--transition);
}

.services__items a:hover .services__arrow,
.services__items a:focus-visible .services__arrow {
  color: var(--color-accent);
  transform: translateX(4px);
}

/* --- "Виж всички" link --- */
.services__see {
  align-self: start;
  padding-top: 6px;
}

.services__see a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1.5px solid var(--color-accent);
  padding: 6px 0;
  min-height: 44px;
  transition: color var(--transition);
}

.services__see a:hover,
.services__see a:focus-visible {
  color: var(--color-accent);
}

/* --- Responsive --- */
@media (max-width: 1100px) {
  .services__row {
    grid-template-columns: 50px 64px minmax(0, 1.2fr) minmax(0, 1.6fr) auto;
    gap: 24px;
  }

  .services__icon {
    width: 64px;
    height: 64px;
  }

  .services__row-title {
    font-size: 28px;
  }
}

@media (max-width: 980px) {
  .services {
    padding: 24px 0 56px;
  }

  .services__head {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 48px;
  }

  .services__row {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 36px 0;
  }

  .services__num {
    padding-top: 0;
  }

  .services__see {
    justify-self: start;
    padding-top: 0;
  }
}

@media (max-width: 600px) {
  .services {
    padding: 16px 0 48px;
  }

  .services__title {
    font-size: 28px;
  }

  .services__row {
    padding: 32px 0;
  }

  .services__row-title {
    font-size: 26px;
  }

  .services__icon {
    width: 60px;
    height: 60px;
  }

  .services__icon svg {
    width: 30px;
    height: 30px;
  }
}

/* ==========================================================================
   ABOUT — За лекаря (Homepage Section 02)
   5/7 split: duotone portrait + amber marker | editorial copy + ghost CTA
   REQUIRES: 'Newsreader' (serif) and 'JetBrains Mono' fonts loaded in <head>.
   ========================================================================== */

.about {
  background-color: var(--color-primary);
  color: rgba(255, 255, 255, 0.85);
  padding: 32px 0 64px;
}

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 80px;
  align-items: start;
}

/* --- Portrait --- */
.about__portrait {
  position: relative;
}

.about__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--color-primary-light);
  overflow: hidden;
  border-radius: 2px;
}

.about__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: luminosity;
  opacity: 0.95;
}

.about__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(11, 29, 58, 0.35) 0%,
    rgba(212, 135, 58, 0.18) 100%
  );
  mix-blend-mode: multiply;
  pointer-events: none;
}

.about__marker {
  position: absolute;
  top: 32px;
  right: -24px;
  display: inline-block;
  padding: 14px 18px;
  background: var(--color-accent);
  color: #fff;
  font-family: "JetBrains Mono", "Inter", monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- Content --- */
.about__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: "JetBrains Mono", "Inter", monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.about__eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.about__role {
  font-family: "JetBrains Mono", "Inter", monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 18px 0 0;
}

.about__title {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 500;
  font-size: 38px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 8px 0 16px;
  text-wrap: balance;
}

.about__lead {
  font-size: 19px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  margin: 24px 0;
  text-wrap: pretty;
}

.about__body {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
  margin: 16px 0;
}

.about__actions {
  margin-top: 36px;
}

.about__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  min-height: 48px;
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.005em;
  border-radius: 2px;
  transition:
    border-color var(--transition),
    color var(--transition),
    background-color var(--transition);
}

.about__cta:hover,
.about__cta:focus-visible {
  border-color: #fff;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.06);
}

.about__cta svg {
  transition: transform var(--transition);
}

.about__cta:hover svg,
.about__cta:focus-visible svg {
  transform: translateX(4px);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .about__grid {
    gap: 56px;
  }

  .about__title {
    font-size: 34px;
  }
}

@media (max-width: 880px) {
  .about {
    padding: 24px 0 56px;
  }

  .about__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .about__portrait {
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
  }

  .about__marker {
    right: 0;
  }
}

@media (max-width: 600px) {
  .about {
    padding: 16px 0 48px;
  }

  .about__title {
    font-size: 30px;
  }

  .about__lead {
    font-size: 17px;
  }

  .about__body {
    font-size: 15px;
  }

  .about__marker {
    top: 20px;
    padding: 12px 16px;
    font-size: 11px;
    letter-spacing: 0.16em;
  }

  .about__cta {
    width: 100%;
  }
}


/* ==========================================================================
   REVIEWS — Отзиви (Homepage Section 03)
   Headline + Google rating callout | 3-card grid w/ Newsreader serif quotes
   REQUIRES: 'Newsreader' (serif) and 'JetBrains Mono' fonts loaded in <head>.
   ========================================================================== */

.reviews {
  background-color: var(--color-bg-alt);
  padding: 32px 0 64px;
}

/* --- Section head --- */
.reviews__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 48px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}

.reviews__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'JetBrains Mono', 'Inter', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.reviews__eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.reviews__title {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 500;
  font-size: clamp(32px, 3.6vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  margin: 18px 0 0;
  max-width: 600px;
  text-wrap: balance;
}

/* --- Google rating callout --- */
.reviews__rating {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #fff;
  border: 1px solid var(--color-border);
  padding: 18px 22px;
  border-radius: 2px;
}

.reviews__rating-num {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 38px;
  font-weight: 500;
  color: var(--color-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}

.reviews__rating-meta {
  font-size: 12px;
  color: var(--color-text-light);
  line-height: 1.4;
}

.reviews__rating-meta strong {
  display: block;
  color: var(--color-text);
  font-weight: 600;
  font-size: 13px;
}

.reviews__rating-stars {
  display: flex;
  gap: 2px;
  color: var(--color-accent);
  margin-bottom: 4px;
}

.reviews__rating-stars svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* --- Grid --- */
.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* --- Card --- */
.reviews__card {
  background: #fff;
  border: 1px solid var(--color-border);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-radius: 2px;
}

.reviews__stars {
  display: flex;
  gap: 3px;
  color: var(--color-accent);
}

.reviews__stars svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.reviews .reviews__quote {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 20px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--color-primary);
  flex: 1 1 auto;
  text-wrap: pretty;
  quotes: none;
}

.reviews .reviews__quote::before {
  content: "\201E";
}

.reviews .reviews__quote::after {
  content: "\201C";
}

.reviews__who {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.reviews__who-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.reviews__who-meta {
  font-family: 'JetBrains Mono', 'Inter', monospace;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--color-text-light);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .reviews__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 880px) {
  .reviews__head {
    margin-bottom: 40px;
  }

  .reviews__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .reviews {
    padding: 16px 0 48px;
  }

  .reviews__title {
    font-size: 28px;
  }

  .reviews__rating {
    padding: 14px 18px;
    gap: 14px;
  }

  .reviews__rating-num {
    font-size: 32px;
  }

  .reviews__card {
    padding: 28px 24px;
  }

  .reviews__quote {
    font-size: 18px;
  }
}


/* ==========================================================================
   BLOG TEASER — Блог (Homepage Section 04)
   3-card grid of latest articles | image + meta + serif title + read link
   REQUIRES: 'Newsreader' (serif) and 'JetBrains Mono' fonts loaded in <head>.
   ========================================================================== */

.blog {
  background-color: var(--color-primary);
  color: rgba(255, 255, 255, 0.85);
  padding: 32px 0 64px;
}

/* --- Section head --- */
.blog__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 64px;
  align-items: end;
  margin-bottom: 56px;
}

.blog__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'JetBrains Mono', 'Inter', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.blog__eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.blog__title {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 500;
  font-size: clamp(32px, 3.6vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 18px 0 0;
  max-width: 600px;
  text-wrap: balance;
}

.blog__head-cta {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  min-height: 48px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.005em;
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  transition:
    border-color var(--transition),
    color var(--transition),
    background-color var(--transition);
}

.blog__head-cta:hover,
.blog__head-cta:focus-visible {
  border-color: #fff;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.06);
}

.blog__head-cta svg {
  transition: transform var(--transition);
}

.blog__head-cta:hover svg,
.blog__head-cta:focus-visible svg {
  transform: translateX(4px);
}

/* --- Grid --- */
.blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}

/* --- Card --- */
.blog__card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: inherit;
  text-decoration: none;
}

.blog__card-img {
  aspect-ratio: 4 / 3;
  background: var(--color-primary-light);
  overflow: hidden;
  border-radius: 2px;
}

.blog__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.blog__card:hover .blog__card-img img,
.blog__card:focus-visible .blog__card-img img {
  transform: scale(1.03);
}

.blog__card-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'JetBrains Mono', 'Inter', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.blog__card-cat {
  color: var(--color-accent);
}

.blog__card-dot {
  width: 3px;
  height: 3px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
}

.blog__card-title {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0;
  text-wrap: balance;
  transition: color var(--transition);
}

.blog__card:hover .blog__card-title,
.blog__card:focus-visible .blog__card-title {
  color: var(--color-accent);
}

.blog__card-desc {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

.blog__card-read {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: 'JetBrains Mono', 'Inter', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  transition: color var(--transition);
}

.blog__card:hover .blog__card-read,
.blog__card:focus-visible .blog__card-read {
  color: var(--color-accent);
}

.blog__card-read svg {
  transition: transform var(--transition);
}

.blog__card:hover .blog__card-read svg,
.blog__card:focus-visible .blog__card-read svg {
  transform: translateX(4px);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .blog__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }

  /* Featured third card: photo left, text right. The card has no wrapper around
     its text, so flex-direction:row laid ALL five children out side by side and
     pushed the page ~53px wider than the viewport (horizontal scroll at
     880–1024px). A 2-column grid gives the same look and holds the text in one
     column: the photo spans every row of column 1, everything else stacks in
     column 2. */
  .blog__grid > .blog__card:nth-child(3) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 50% 1fr;
    column-gap: 32px;
    align-items: center;
    align-content: center;
  }

  .blog__grid > .blog__card:nth-child(3) .blog__card-img {
    grid-column: 1;
    grid-row: 1 / -1;
  }

  .blog__grid > .blog__card:nth-child(3) > :not(.blog__card-img) {
    grid-column: 2;
    min-width: 0;
  }
}

@media (max-width: 880px) {
  .blog__head {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 40px;
  }

  .blog__head-cta {
    justify-self: start;
  }

  .blog__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  /* Single column from here down: undo the grid above and let the card fall back
     to the ordinary stacked flex card. */
  .blog__grid > .blog__card:nth-child(3) {
    grid-column: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }

  .blog__grid > .blog__card:nth-child(3) .blog__card-img {
    flex: initial;
  }
}

@media (max-width: 600px) {
  .blog {
    padding: 16px 0 48px;
  }

  .blog__title {
    font-size: 28px;
  }

  .blog__card-title {
    font-size: 22px;
  }

  .blog__head-cta {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   KLUB POPITAY — program landing (/klub-popitay/)
   Replaces the legacy single-column .klub-popitay article. Six alternating
   full-bleed bands (white / bg-alt / navy) at the 1440px .wrap: intro lede,
   pricing + package, magazine curriculum index, navy rewards pull-quote,
   benefits, expertise split. Prose capped ~65ch; structural modules use the
   full width. Closer = klub-popitay-cta.html (shared .cta-book, club copy).
   Full-bleed handled by the :has(.klub) neutralizer in "Divi environment
   fixes"; lists + the curriculum counter are re-asserted there too (Divi
   strips ul/ol box model). REQUIRES 'Newsreader' + 'JetBrains Mono' in <head>.
   ========================================================================== */

.klub {
  color: var(--color-text);
}

/* --- Bands (each paints its own full-bleed background) --- */
.klub__band {
  background: var(--color-bg);
  padding: clamp(56px, 8vw, 104px) 0;
}

.klub__band:first-child {
  padding-top: clamp(40px, 5vw, 64px);
}

.klub__band--alt {
  background: var(--color-bg-alt);
}

.klub__band--navy {
  position: relative;
  background: var(--color-primary);
  overflow: hidden;
}

.klub__band--navy::before {
  content: "";
  position: absolute;
  top: -160px;
  right: -120px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle at center, rgba(212, 135, 58, 0.16) 0%, transparent 65%);
  pointer-events: none;
}

.klub__band--navy .wrap {
  position: relative;
  z-index: 1;
}

/* --- Mono eyebrow (non-SEO section label) --- */
.klub__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  font-family: 'JetBrains Mono', 'Inter', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.klub__eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/* --- Section heading --- */
.klub__h2 {
  font-family: 'Newsreader', Georgia, serif;
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  margin: 0 0 24px;
  text-wrap: balance;
}

.klub__h2::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--color-accent);
  margin-bottom: 20px;
}

.klub__h2--on-navy {
  color: #fff;
}

/* --- Lead paragraph --- */
.klub__lead {
  margin: 0;
  max-width: 65ch;
  font-size: 19px;
  line-height: 1.65;
  color: var(--color-text-light);
}

.klub__lead strong {
  color: var(--color-primary);
  font-weight: 700;
}

/* === Band 1 · Intro lede === */
.klub__intro {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.klub__tagline {
  margin: 0 0 24px;
  font-family: 'Newsreader', Georgia, serif;
  font-size: clamp(27px, 3.6vw, 40px);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  text-wrap: balance;
}

.klub__intro .klub__lead {
  max-width: 62ch;
  margin: 0 auto;
}

.klub__notes {
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.klub__note {
  display: flex;
  gap: 18px;
  padding: 26px 28px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 16px;
}

.klub__note-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(11, 29, 58, 0.04) 0%, rgba(212, 135, 58, 0.12) 100%);
  border: 1px solid rgba(212, 135, 58, 0.18);
  color: var(--color-accent);
}

.klub__note-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
}

/* === Band 2 · Pricing + package === */
.klub__plans {
  margin: 32px 0 0;
  max-width: 760px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.klub__plan {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 30px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 16px;
}

.klub__plan--main {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.klub__plan-label {
  font-family: 'JetBrains Mono', 'Inter', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-light);
}

.klub__plan--main .klub__plan-label {
  color: var(--color-accent);
}

.klub__plan-price {
  margin-top: 8px;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 52px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--color-primary);
  display: inline-flex;
  align-items: baseline;
}

.klub__plan--main .klub__plan-price {
  color: #fff;
}

.klub__plan-currency {
  margin-left: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-text-light);
}

.klub__plan--main .klub__plan-currency {
  color: rgba(255, 255, 255, 0.65);
}

.klub__plan-note {
  margin-top: 4px;
  font-size: 14px;
  color: var(--color-text-light);
}

.klub__plan--main .klub__plan-note {
  color: rgba(255, 255, 255, 0.65);
}

.klub__includes-label {
  margin: 44px 0 16px;
  font-size: 17px;
  color: var(--color-text);
}

.klub__includes-label strong {
  color: var(--color-primary);
  font-weight: 700;
}

.klub__includes {
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.klub__feature {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 24px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 16px;
}

.klub__feature-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(11, 29, 58, 0.04) 0%, rgba(212, 135, 58, 0.12) 100%);
  border: 1px solid rgba(212, 135, 58, 0.18);
  color: var(--color-accent);
}

.klub__feature-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text-light);
}

.klub__feature-text strong {
  color: var(--color-primary);
  font-weight: 700;
}

/* === Band 3 · Curriculum index === */
.klub__curriculum {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: clamp(40px, 6vw, 88px);
  counter-reset: ktopic;
}

.klub__topic {
  break-inside: avoid;
  counter-increment: ktopic;
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 22px 2px;
  border-bottom: 1px solid var(--color-border);
  font-size: 18px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--color-primary);
}

.klub__topic::before {
  content: counter(ktopic, decimal-leading-zero);
  flex-shrink: 0;
  min-width: 2.4ch;
  font-family: 'JetBrains Mono', 'Inter', monospace;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 700;
  line-height: 1;
  color: var(--color-accent);
}

/* === Band 4 · Navy rewards pull-quote === */
.klub__finale-motif {
  position: absolute;
  top: 36px;
  right: 6%;
  z-index: 0;
  color: rgba(212, 135, 58, 0.18);
}

.klub__statement {
  max-width: 65ch;
  margin: 0;
  font-family: 'Newsreader', Georgia, serif;
  font-size: clamp(23px, 2.9vw, 33px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: rgba(255, 255, 255, 0.92);
}

.klub__statement em {
  color: var(--color-accent);
  font-style: italic;
}

/* === Band 5 · Benefits === */
.klub__benefits {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.klub__benefit {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px 30px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 16px;
}

.klub__benefit-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(11, 29, 58, 0.04) 0%, rgba(212, 135, 58, 0.12) 100%);
  border: 1px solid rgba(212, 135, 58, 0.18);
  color: var(--color-accent);
}

.klub__benefit-text {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--color-primary);
}

/* === Band 6 · Expertise split === */
.klub__expertise {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.klub__prose p {
  margin: 0 0 20px;
  max-width: 65ch;
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-text);
}

.klub__prose p:last-child {
  margin-bottom: 0;
}

.klub__prose strong {
  color: var(--color-primary);
  font-weight: 700;
}

.klub__authority {
  padding: 30px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 16px;
}

.klub__authority-label {
  margin: 0 0 18px;
  font-size: 16px;
  color: var(--color-text);
}

.klub__authority-label strong {
  color: var(--color-primary);
  font-weight: 700;
}

.klub__pills {
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.klub__pill {
  padding: 10px 18px;
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: 100px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-primary);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .klub__expertise {
    gap: 40px;
  }
}

@media (max-width: 960px) {
  .klub__includes {
    grid-template-columns: repeat(2, 1fr);
  }

  .klub__expertise {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

@media (max-width: 768px) {
  .klub__plans {
    grid-template-columns: 1fr;
    max-width: 440px;
  }

  .klub__curriculum {
    columns: 1;
  }

  .klub__benefits {
    grid-template-columns: 1fr;
  }

  .klub__finale-motif {
    display: none;
  }
}

@media (max-width: 600px) {
  .klub__notes {
    grid-template-columns: 1fr;
  }

  .klub__includes {
    grid-template-columns: 1fr;
  }

  .klub__note,
  .klub__feature,
  .klub__benefit,
  .klub__authority {
    padding: 24px 22px;
  }

  .klub__plan-price {
    font-size: 46px;
  }
}

/* ==========================================================================
   PROCEDURES LANDING (/protseduri/) — category-grouped grid
   Sidebar layout per category: head (icon, num, title, lead) + 2-col card grid.
   Categories use anchor IDs so homepage services links (#kardiologiya etc) work.
   REQUIRES: 'Newsreader' (serif) and 'JetBrains Mono' fonts loaded in <head>.
   ========================================================================== */

.procedures {
  background: var(--color-bg);
  padding: 32px 0 80px;
}

.procedures__category {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr);
  gap: 64px;
  align-items: start;
  padding: 64px 0;
  border-top: 1px solid var(--color-border);
  scroll-margin-top: 100px;
}

.procedures__category:first-child {
  border-top: 0;
  padding-top: 24px;
}

/* --- Head (left column) --- */
.procedures__icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: linear-gradient(
    135deg,
    rgba(11, 29, 58, 0.04) 0%,
    rgba(212, 135, 58, 0.12) 100%
  );
  border: 1px solid rgba(212, 135, 58, 0.18);
  border-radius: 2px;
  color: var(--color-accent);
  margin-bottom: 24px;
}

.procedures__icon svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.5;
}

.procedures__num {
  display: block;
  font-family: 'JetBrains Mono', 'Inter', monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--color-accent);
  margin-bottom: 12px;
}

.procedures__cat-title {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 500;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  margin: 0 0 16px;
  text-wrap: balance;
}

.procedures__cat-lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-light);
  margin: 0 0 20px;
  max-width: 36ch;
}

.procedures__count {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'JetBrains Mono', 'Inter', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin: 0;
}

.procedures__count::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/* --- Grid (right column with cards) --- */
.procedures__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.procedures__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 26px;
  background: var(--color-bg-alt);
  border: 1px solid transparent;
  border-radius: 2px;
  transition:
    background var(--transition),
    border-color var(--transition),
    transform var(--transition);
}

.procedures__card:hover,
.procedures__card:focus-within {
  background: #fff;
  border-color: var(--color-border);
  transform: translateY(-2px);
}

.procedures__card-title {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--color-primary);
  margin: 0;
}

.procedures__card-desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text-light);
  margin: 0;
  flex: 1;
}

.procedures__card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1.5px solid var(--color-accent);
  align-self: flex-start;
  min-height: 28px;
  transition: color var(--transition);
}

.procedures__card-link svg {
  flex-shrink: 0;
  transition: transform var(--transition);
}

.procedures__card-link:hover,
.procedures__card-link:focus-visible {
  color: var(--color-accent);
}

.procedures__card-link:hover svg,
.procedures__card-link:focus-visible svg {
  transform: translateX(4px);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .procedures__category {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
    gap: 48px;
  }
}

@media (max-width: 880px) {
  .procedures__category {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 48px 0;
  }

  .procedures__cat-lead {
    max-width: none;
  }
}

@media (max-width: 600px) {
  .procedures {
    padding: 24px 0 56px;
  }

  .procedures__category {
    padding: 40px 0;
  }

  .procedures__grid {
    grid-template-columns: 1fr;
  }

  .procedures__cat-title {
    font-size: 28px;
  }

  .procedures__card {
    padding: 24px 22px;
  }

  .procedures__card-title {
    font-size: 20px;
  }
}

/* ==========================================================================
   PROCEDURE PAGE — body content template ("Кабинетното досие")
   Two-column architecture: editorial content column + sticky consultation
   rail (doctor photo + navy panel: working hours / contacts / booking button,
   plus the "На един поглед" quick-facts card).
   Mobile <980px: the rail is hidden and static clones flow in the article
   (.proc__rail-mobile blocks). Keep rail and clones in sync per procedure.
   Sticky offset assumes the ~84px sticky site header; tune the
   top:min(104px, ...) value on .proc__rail-inner if the header changes.
   REQUIRES: 'Newsreader' (serif) and 'JetBrains Mono' fonts loaded in <head>.
   ========================================================================== */

.proc{
  background:var(--color-bg);
  padding:24px 0 96px;
  border-top:1px solid var(--color-border);
}

/* --- The two-column architecture --- */
/* NOTE: no align-items:start here. Grid items must STRETCH so .proc__rail
   spans the full row height; otherwise the sticky rail has no travel room. */
.proc__layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 348px;
  gap:100px;
}
.proc__main{min-width:0}

/* Numbered house-motif section eyebrow shared across blocks */
.proc__eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font-family:'JetBrains Mono','Inter',monospace;
  font-size:12px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--color-accent);margin:0 0 18px;
}
.proc__eyebrow::before{content:"";width:28px;height:1px;background:currentColor;opacity:0.6}

.proc__h2{
  font-family:'Newsreader',Georgia,serif;
  font-size:clamp(26px,3vw,34px);
  font-weight:500;line-height:1.15;letter-spacing:-0.02em;
  color:var(--color-primary);margin:0 0 22px;text-wrap:balance;
}

/* Section rhythm: each block is its own beat, separated by generous space + hairline.
   Border-top on every block but the first — robust even when mobile-only nodes
   sit between blocks in the DOM (adjacency-independent). */
.proc__block{padding-top:56px;margin-top:56px;border-top:1px solid var(--color-border)}
.proc__main > .proc__block:first-of-type{padding-top:8px;margin-top:0;border-top:0}
/* anchor jumps from the rail nav clear the 84px sticky header (graft from D) */
.proc__block[id]{scroll-margin-top:108px}

/* --- Overview --- */
.proc__lead{
  font-family:'Newsreader',Georgia,serif;
  font-weight:400;
  font-size:23px;line-height:1.5;letter-spacing:-0.01em;
  color:var(--color-primary);margin:0 0 26px;text-wrap:pretty;
}
.proc__lead em{font-style:italic;color:var(--color-accent)}
.proc__prose p{margin:0 0 20px;font-size:17px;line-height:1.7;color:var(--color-text-light)}
.proc__prose p:last-child{margin-bottom:0}
.proc__prose strong{color:var(--color-primary);font-weight:600}

/* Score chips inside overview — turns dry T/Z prose into a composed pair */
.proc__scores{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--color-border);border:1px solid var(--color-border);border-radius:2px;
  margin-top:28px;overflow:hidden;
}
.proc__score{background:var(--color-bg);padding:20px 22px}
.proc__score-key{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--color-accent);margin-bottom:8px;
}
.proc__score-txt{font-size:15px;line-height:1.55;color:var(--color-text-light)}
.proc__score-txt strong{color:var(--color-primary);font-weight:600}

/* --- Key fact callout (radiation dose) — full-width navy ribbon --- */
.proc__keyfact{
  margin-top:40px;
  background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-light) 100%);
  color:#fff;border-radius:2px;border-left:3px solid var(--color-accent);
  padding:32px 36px;
  display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;
}
.proc__keyfact-fig{
  font-family:'Newsreader',serif;font-weight:500;
  font-size:46px;line-height:1;letter-spacing:-0.02em;color:#fff;
  display:flex;align-items:baseline;gap:6px;white-space:nowrap;
}
.proc__keyfact-fig small{font-size:17px;color:var(--color-accent);font-weight:600;font-family:'JetBrains Mono',monospace;letter-spacing:0.04em}
.proc__keyfact-body{border-left:1px solid rgba(255,255,255,0.14);padding-left:28px}
.proc__keyfact-label{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--color-accent);margin-bottom:8px;
}
.proc__keyfact-value{margin:0;font-size:16px;line-height:1.55;color:#dfe5ee}

/* --- Indications — 2-col checklist grid --- */
.proc__checklist{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:0 36px;
}
.proc__checklist li{
  display:flex;gap:14px;align-items:flex-start;
  padding:16px 0;border-bottom:1px solid var(--color-border);
  font-size:16px;line-height:1.5;color:var(--color-text);
}
.proc__checklist svg{flex:0 0 20px;width:20px;height:20px;color:var(--color-accent);margin-top:2px}
.proc__intro{font-size:17px;line-height:1.7;color:var(--color-text-light);margin:0 0 24px}

/* --- Process steps — refined vertical timeline w/ serif numerals --- */
.proc__steps{list-style:none;margin:0;padding:0;position:relative}
.proc__steps::before{
  content:"";position:absolute;left:23px;top:14px;bottom:14px;width:1px;
  background:var(--color-border);
}
.proc__step{
  position:relative;display:grid;grid-template-columns:48px 1fr;gap:26px;
  padding:0 0 36px;align-items:start;
}
.proc__step:last-child{padding-bottom:0}
.proc__step-num{
  position:relative;z-index:1;
  width:48px;height:48px;border-radius:50%;
  background:var(--color-bg);border:1px solid var(--color-border);
  display:grid;place-items:center;
  font-family:'Newsreader',serif;font-weight:500;font-size:20px;
  color:var(--color-primary);letter-spacing:-0.02em;
  transition:border-color 150ms ease,color 150ms ease;
}
.proc__step:hover .proc__step-num{border-color:var(--color-accent);color:var(--color-accent)}
.proc__step-title{
  font-family:'Newsreader',serif;font-weight:500;font-size:21px;
  line-height:1.2;letter-spacing:-0.015em;color:var(--color-primary);margin:8px 0 6px;
}
.proc__step-desc{margin:0;font-size:16px;line-height:1.6;color:var(--color-text-light)}

/* --- Mid-body booking touchpoint --- */
.proc__touch{
  margin-top:56px;
  background:var(--color-bg-alt);border:1px solid var(--color-border);border-radius:2px;
  padding:32px 36px;
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
}
.proc__touch-pill{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--color-accent);margin-bottom:10px;
}
.proc__touch-title{
  font-family:'Newsreader',serif;font-weight:500;font-size:24px;line-height:1.2;
  letter-spacing:-0.015em;color:var(--color-primary);margin:0;max-width:420px;
}
.proc__touch-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.proc__touch-phone{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Newsreader',serif;font-size:22px;font-weight:500;letter-spacing:-0.01em;
  color:var(--color-primary);min-height:44px;
}
.proc__touch-phone svg{color:var(--color-accent);width:20px;height:20px}
.proc__touch-phone:hover{color:var(--color-accent)}
.proc__touch-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--color-accent);color:#fff;font-weight:600;font-size:15px;
  padding:14px 22px;min-height:48px;border-radius:2px;
  transition:background 120ms ease;
}
.proc__touch-btn:hover{background:var(--color-accent-hover)}

/* --- Preparation — compact ordered do/don't strip --- */
.proc__prep{
  list-style:none;margin:0;padding:0;
  border-top:1px solid var(--color-border);
}
.proc__prep li{
  display:flex;gap:18px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid var(--color-border);
  font-size:16px;line-height:1.55;color:var(--color-text);
}
.proc__prep .pn{
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.1em;
  color:var(--color-accent);flex:0 0 28px;padding-top:1px;
}

/* --- FAQ — native details/summary with В./О. journal motif (graft from C) --- */
/* Reassurance + in-place tel link, placed where hesitation peaks (graft from B) */
.proc__faq-reassure{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;
  margin:0 0 18px;font-size:16px;line-height:1.6;color:var(--color-text-light);
}
.proc__faq-call{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;
  font-weight:600;color:var(--color-primary);
  border-bottom:1.5px solid var(--color-accent);
}
.proc__faq-call svg{width:18px;height:18px;color:var(--color-accent)}
.proc__faq-call:hover{color:var(--color-accent)}
.proc__faq{border-top:1px solid var(--color-border)}
.proc__faq details{border-bottom:1px solid var(--color-border)}
.proc__faq summary{
  list-style:none;cursor:pointer;
  display:grid;grid-template-columns:40px minmax(0,1fr) 24px;
  column-gap:16px;align-items:baseline;
  padding:22px 0;min-height:44px;
}
.proc__faq summary::-webkit-details-marker{display:none}
.proc__faq .qa-mark{
  font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--color-accent);font-weight:500;
}
.proc__faq .qa-q{
  font-family:'Newsreader',serif;font-weight:500;font-size:20px;line-height:1.3;
  letter-spacing:-0.01em;color:var(--color-primary);transition:color 150ms ease;
}
.proc__faq summary:hover .qa-q{color:var(--color-accent)}
.proc__faq summary .ic{
  flex:0 0 24px;width:24px;height:24px;position:relative;align-self:start;margin-top:5px;
  border:1px solid var(--color-border);border-radius:50%;
  transition:border-color 150ms ease,background 150ms ease;
}
.proc__faq summary .ic::before,.proc__faq summary .ic::after{
  content:"";position:absolute;background:var(--color-accent);
  left:50%;top:50%;transform:translate(-50%,-50%);
}
.proc__faq summary .ic::before{width:10px;height:1.5px}
.proc__faq summary .ic::after{width:1.5px;height:10px;transition:transform 200ms ease,opacity 200ms ease}
.proc__faq details[open] summary .ic{border-color:var(--color-accent)}
.proc__faq details[open] summary .ic::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.proc__faq-answer{
  display:grid;grid-template-columns:40px minmax(0,1fr) 24px;
  column-gap:16px;padding:0 0 24px;
}
.proc__faq-answer .qa-mark{align-self:start}
.proc__faq-answer p{grid-column:2 / 3;margin:0;font-size:16px;line-height:1.7;color:var(--color-text-light)}

/* --- Related procedures --- */
.proc__related{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
.proc__related-card{
  display:flex;flex-direction:column;gap:12px;height:100%;
  background:var(--color-bg);border:1px solid var(--color-border);border-radius:2px;
  padding:26px 24px;
  transition:border-color 150ms ease,background 150ms ease;
}
.proc__related-card:hover{border-color:var(--color-accent);background:rgba(212,135,58,0.03)}
.proc__related-title{
  font-family:'Newsreader',serif;font-weight:500;font-size:20px;line-height:1.2;
  letter-spacing:-0.015em;color:var(--color-primary);margin:0;
}
.proc__related-desc{margin:0;font-size:14px;line-height:1.55;color:var(--color-text-light);flex:1 1 auto}
.proc__related-arrow{
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--color-primary);font-weight:500;
  display:inline-flex;align-items:center;gap:8px;
}
.proc__related-card:hover .proc__related-arrow{color:var(--color-accent)}
.proc__related-arrow svg{width:14px;height:14px;transition:transform 150ms ease}
.proc__related-card:hover .proc__related-arrow svg{transform:translateX(4px)}

/* ===========================================================
   THE RAIL — consultation card (photo + navy panel) + quick facts
   =========================================================== */
.proc__rail{position:relative}
/* Whole rail is sticky. With the facts card collapsed the rail is ~780px tall,
   so it pins at 104px on most screens; the min() only kicks in on short
   viewports to keep the booking button reachable. */
.proc__rail-inner{
  position:sticky;
  top:min(104px,calc(100vh - 810px));
  display:flex;flex-direction:column;gap:20px;
}
/* expanded facts add ~210px; let the rail ride higher while open */
.proc__rail-inner:has(.rail-more[open]){top:min(104px,calc(100vh - 1020px))}

/* Consultation card — doctor photo flowing into a navy panel:
   working hours rows, contact block, booking button */
.rail-consult{
  background:linear-gradient(160deg,var(--color-primary) 0%,var(--color-primary-light) 100%);
  border-radius:2px;overflow:hidden;
}
.rail-consult__photo{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--color-bg-alt)}
.rail-consult__photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;filter:saturate(0.92)}
.rail-consult__photo::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:72px;
  background:linear-gradient(180deg,rgba(11,29,58,0) 0%,rgba(11,29,58,0.6) 100%);
  pointer-events:none;
}
.rail-consult__panel{position:relative;padding:24px 24px 26px;overflow:hidden}
.rail-consult__panel::before{
  content:"";position:absolute;right:-80px;top:-80px;width:220px;height:220px;
  background:radial-gradient(circle,rgba(212,135,58,0.16) 0%,rgba(212,135,58,0) 65%);
  pointer-events:none;
}
.rail-consult__heading{
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--color-accent);margin:0 0 6px;position:relative;
}
.rail-consult__note{font-size:15px;line-height:1.5;color:#9fb0c8;margin:0 0 2px;position:relative}
.rail-consult__hours{list-style:none;margin:0 0 24px;padding:0;position:relative}
.rail-consult__hours li{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 0;border-bottom:1px solid rgba(255,255,255,0.12);
}
.rail-consult__hours .d{font-size:15px;font-weight:600;color:#fff}
.rail-consult__hours .h{
  font-size:15px;font-weight:600;color:#cbd3e0;
  font-variant-numeric:tabular-nums;text-align:right;
}
.rail-consult__contact{
  list-style:none;margin:0 0 24px;padding:0;
  display:flex;flex-direction:column;gap:14px;position:relative;
}
.rail-consult__contact a{display:flex;align-items:center;gap:14px;min-height:44px;color:#fff}
.rail-consult__contact .ic{
  flex:0 0 42px;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(212,135,58,0.14);border:1px solid rgba(212,135,58,0.35);color:var(--color-accent);
  transition:background 150ms ease,border-color 150ms ease;
}
.rail-consult__contact a:hover .ic{background:rgba(212,135,58,0.26);border-color:var(--color-accent)}
.rail-consult__contact .ic svg{width:18px;height:18px}
.rail-consult__contact .lbl{
  display:block;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;
  letter-spacing:0.16em;text-transform:uppercase;color:#9fb0c8;margin-bottom:3px;
}
.rail-consult__contact .val{
  display:block;font-size:16px;font-weight:600;color:#fff;line-height:1.3;word-break:break-word;
}
.rail-consult__contact a:hover .val{color:var(--color-accent)}
.rail-consult__contact .val--phone{
  font-family:'Newsreader',serif;font-size:21px;font-weight:500;letter-spacing:-0.01em;
}
.rail-consult__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;
  background:#fff;color:var(--color-primary);font-weight:600;font-size:15px;
  min-height:50px;border-radius:2px;position:relative;
  transition:background 120ms ease;
}
.rail-consult__btn:hover{background:#f0f3f8}
.rail-consult__btn svg{width:18px;height:18px}

.rail-card{
  background:var(--color-bg);border:1px solid var(--color-border);border-radius:2px;
  overflow:hidden;
}
.rail-card__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 22px;border-bottom:1px solid var(--color-border);
  background:var(--color-bg-alt);
}
.rail-card__head .t{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--color-primary);font-weight:500;
}
.rail-card__head .n{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.12em;
  color:var(--color-accent);
}

/* On-a-glance quick facts */
.rail-facts{list-style:none;margin:0;padding:6px 22px 12px}
.rail-facts li{
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding:14px 0;border-bottom:1px solid var(--color-border);
}
.rail-facts li:last-child{border-bottom:0}
.rail-facts .k{
  display:flex;align-items:center;gap:10px;
  font-size:15px;color:var(--color-text-light);flex:0 0 auto;
}
.rail-facts .k svg{width:18px;height:18px;color:var(--color-accent);flex:0 0 18px}
.rail-facts .v{font-size:15px;font-weight:600;color:var(--color-primary);text-align:right;line-height:1.35}

/* Допълнителна информация: collapsible facts (native details, closed by default
   so the sticky rail fits the viewport without pinning above the top edge) */
.rail-more summary{cursor:pointer}
.rail-more summary::-webkit-details-marker{display:none}
.rail-more:not([open]) summary{border-bottom:0}
.rail-more summary:hover .t{color:var(--color-accent)}
.rail-more__ic{
  flex:0 0 22px;width:22px;height:22px;position:relative;
  border:1px solid var(--color-border);border-radius:50%;background:#fff;
  transition:border-color 150ms ease;
}
.rail-more__ic::before,.rail-more__ic::after{
  content:"";position:absolute;background:var(--color-accent);
  left:50%;top:50%;transform:translate(-50%,-50%);
}
.rail-more__ic::before{width:9px;height:1.5px}
.rail-more__ic::after{width:1.5px;height:9px;transition:transform 200ms ease,opacity 200ms ease}
.rail-more[open] .rail-more__ic{border-color:var(--color-accent)}
.rail-more[open] .rail-more__ic::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}

/* Mobile clones (hidden on desktop) */
.proc__rail-mobile{display:none}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .proc__layout{grid-template-columns:minmax(0,1fr) 312px;gap:56px}
}
@media (max-width:980px){
  /* rail collapses: becomes a summary block after the lead + flow */
  .proc__layout{grid-template-columns:1fr;gap:0}
  .proc__main{max-width:760px;margin:0 auto;width:100%}
  .proc__rail{display:none}
  .proc__rail-mobile{display:block}
  /* mobile summary right after lead */
  .proc__rail-summary{margin-top:32px}
  /* consultation panel reappears before FAQ */
  .proc__rail-booking{margin-top:8px}
}
@media (max-width:720px){
  .proc__related{grid-template-columns:1fr}
  .proc__keyfact{grid-template-columns:1fr;gap:18px}
  .proc__keyfact-body{border-left:0;border-top:1px solid rgba(255,255,255,0.14);padding-left:0;padding-top:18px}
}
@media (max-width:600px){
  .proc{padding:16px 0 72px}
  .proc__checklist{grid-template-columns:1fr;gap:0}
  .proc__lead{font-size:21px}
  .proc__keyfact{padding:26px 24px}
  .proc__touch{padding:26px 24px;flex-direction:column;align-items:flex-start}
  .proc__touch-actions{width:100%}
  .proc__touch-actions .proc__touch-btn{flex:1}
  .proc__block{padding-top:44px;margin-top:44px}
  .proc__faq summary,.proc__faq-answer{grid-template-columns:30px minmax(0,1fr) 22px;column-gap:12px}
  .proc__faq .qa-q{font-size:19px}
}
@media (max-width:400px){
  .proc__touch-actions{flex-direction:column;align-items:stretch}
  .proc__touch-phone{justify-content:center}
  .proc__touch-actions .proc__touch-btn{width:100%}
}
@media (max-width:360px){
  .proc{padding:12px 0 64px}
  .rail-facts li{flex-wrap:wrap;gap:4px}
  .rail-facts .v{text-align:left}
}

/* ==========================================================================
   ЕКИП — Team page (/ekip/)
   Egalitarian alternating editorial rows + intro/stat strip + values band.
   Portrait duotone ports the homepage .about treatment (navy backdrop,
   luminosity blend, navy->amber multiply overlay, amber marker).
   REQUIRES: 'Newsreader' (serif) and 'JetBrains Mono' fonts loaded in <head>.
   ========================================================================== */

/* --- Intro band + stat strip --- */
.team-intro {
  background-color: var(--color-bg);
  padding: 32px 0 56px;
}

.team-intro__inner {
  max-width: 760px;
}

.team-intro__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'JetBrains Mono', 'Inter', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.team-intro__eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.team-intro__title {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 500;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  margin: 16px 0 16px;
  text-wrap: balance;
}

.team-intro__lead {
  font-size: 19px;
  line-height: 1.6;
  color: var(--color-text-light);
  text-wrap: pretty;
}

.team-intro__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 48px;
  border: 1px solid var(--color-border);
  border-radius: 2px;
}

.team-intro__stat {
  padding: 28px 32px;
  border-left: 1px solid var(--color-border);
}

.team-intro__stat:first-child {
  border-left: 0;
}

.team-intro__stat-num {
  display: block;
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 500;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-primary);
}

.team-intro__stat-label {
  display: block;
  margin-top: 12px;
  font-family: 'JetBrains Mono', 'Inter', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-light);
}

/* --- Doctor row (egalitarian, alternating) --- */
.docrow {
  background-color: var(--color-bg);
  color: var(--color-text);
  padding: 32px 0 64px;
}

.docrow--alt {
  background-color: var(--color-bg-alt);
}

.docrow--navy {
  background-color: var(--color-primary);
  color: rgba(255, 255, 255, 0.85);
}

.docrow__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 80px;
  align-items: center;
}

.docrow__grid--flip {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.docrow__grid--flip .docrow__portrait {
  order: 2;
}

.docrow__grid--flip .docrow__content {
  order: 1;
}

/* --- Portrait + duotone --- */
.docrow__portrait {
  position: relative;
}

.docrow__frame {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 2px;
  background: var(--color-bg-alt);
}

/* Founder (navy band): full signature duotone (matches .about__frame) */
.docrow--navy .docrow__frame {
  background: var(--color-primary-light);
}

.docrow--navy .docrow__img {
  mix-blend-mode: luminosity;
  opacity: 0.95;
}

.docrow--navy .docrow__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(11, 29, 58, 0.35) 0%,
    rgba(212, 135, 58, 0.18) 100%
  );
  mix-blend-mode: multiply;
  pointer-events: none;
}

.docrow__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Light rows: clean portrait + subtle brand tint + thin border */
.docrow:not(.docrow--navy) .docrow__frame {
  border: 1px solid var(--color-border);
}

.docrow:not(.docrow--navy) .docrow__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(11, 29, 58, 0.12) 0%,
    rgba(212, 135, 58, 0.1) 100%
  );
  mix-blend-mode: multiply;
  pointer-events: none;
}

.docrow__marker {
  position: absolute;
  top: 32px;
  right: -24px;
  z-index: 2;
  display: inline-block;
  padding: 14px 18px;
  background: var(--color-accent);
  color: #fff;
  font-family: 'JetBrains Mono', 'Inter', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- Content --- */
.docrow__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'JetBrains Mono', 'Inter', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.docrow__eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.docrow__name {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 500;
  font-size: clamp(30px, 3.6vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  margin: 12px 0 18px;
  text-wrap: balance;
}

.docrow--navy .docrow__name {
  color: #fff;
}

.docrow__bio {
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-text-light);
  max-width: 62ch;
  text-wrap: pretty;
}

.docrow--navy .docrow__bio {
  color: rgba(255, 255, 255, 0.78);
}

/* Specialty tags (mono chips) */
.docrow__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0;
}

.docrow__tag {
  padding: 7px 12px;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  font-family: 'JetBrains Mono', 'Inter', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-light);
}

.docrow--navy .docrow__tag {
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.7);
}

/* Procedure links */
.docrow__links {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

.docrow--navy .docrow__links {
  border-top-color: rgba(255, 255, 255, 0.14);
}

.docrow__links-label {
  margin: 0 0 14px;
  font-family: 'JetBrains Mono', 'Inter', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-light);
}

.docrow--navy .docrow__links-label {
  color: rgba(255, 255, 255, 0.55);
}

.docrow__links-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 28px;
}

/* One-link doctor (dental): single column reads as deliberate, not a gap */
.docrow__links-list--single {
  grid-template-columns: 1fr;
}

.docrow__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-primary);
  transition: color var(--transition);
}

.docrow__link svg {
  flex: 0 0 auto;
  color: var(--color-accent);
  transition: transform var(--transition);
}

.docrow__link:hover {
  color: var(--color-accent-hover);
}

.docrow__link:hover svg {
  transform: translateX(3px);
}

.docrow--navy .docrow__link {
  color: #fff;
}

.docrow--navy .docrow__link:hover {
  color: var(--color-accent);
}

/* Per-doctor CTA (ghost button, matches .about__cta) */
.docrow__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 32px;
  padding: 14px 22px;
  min-height: 48px;
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-border);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.005em;
  border-radius: 2px;
  transition:
    border-color var(--transition),
    color var(--transition),
    background-color var(--transition);
}

.docrow__cta:hover,
.docrow__cta:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent-hover);
  background-color: rgba(212, 135, 58, 0.06);
}

.docrow--navy .docrow__cta {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}

.docrow--navy .docrow__cta:hover,
.docrow--navy .docrow__cta:focus-visible {
  border-color: #fff;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.06);
}

.docrow__cta svg {
  flex: 0 0 auto;
}

/* --- Why one team (navy values band) --- */
.team-values {
  background-color: var(--color-primary);
  color: rgba(255, 255, 255, 0.85);
  padding: 32px 0 64px;
}

.team-values__head {
  margin-bottom: 48px;
}

.team-values__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'JetBrains Mono', 'Inter', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.team-values__eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.team-values__title {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 16px 0 0;
  text-wrap: balance;
}

.team-values__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.team-values__item {
  display: flex;
  flex-direction: column;
}

.team-values__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  color: var(--color-accent);
}

.team-values__icon svg {
  width: 24px;
  height: 24px;
}

.team-values__item-title {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 10px;
}

.team-values__item-text {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

/* --- Team page responsive --- */
@media (max-width: 1024px) {
  .team-values__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 32px;
  }
}

@media (max-width: 960px) {
  .docrow__grid,
  .docrow__grid--flip {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .docrow__portrait,
  .docrow__grid--flip .docrow__portrait {
    order: -1;
    max-width: 420px;
    width: 100%;
    margin: 0 auto;
  }

  .docrow__grid--flip .docrow__content {
    order: 0;
  }

  .docrow__marker {
    right: -12px;
    top: 24px;
  }
}

@media (max-width: 600px) {
  .team-intro {
    padding: 16px 0 40px;
  }

  .team-intro__title {
    font-size: 26px;
  }

  .team-intro__lead {
    font-size: 17px;
  }

  .team-intro__stats {
    grid-template-columns: 1fr;
  }

  .team-intro__stat {
    border-left: 0;
    border-top: 1px solid var(--color-border);
  }

  .team-intro__stat:first-child {
    border-top: 0;
  }

  .team-intro__stat-num {
    font-size: 38px;
  }

  .docrow {
    padding: 16px 0 48px;
  }

  .docrow__name {
    font-size: 28px;
  }

  .docrow__bio {
    font-size: 16px;
  }

  .docrow__links-list {
    grid-template-columns: 1fr;
  }

  .docrow__cta {
    width: 100%;
  }

  .docrow__marker {
    position: static;
    display: inline-block;
    margin-top: 16px;
    right: auto;
    top: auto;
  }

  .team-values {
    padding: 16px 0 48px;
  }

  .team-values__head {
    margin-bottom: 36px;
  }

  .team-values__title {
    font-size: 26px;
  }

  .team-values__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}


/* --- Divi environment fixes ---------------------------------------------
   1) position:sticky dies if ANY ancestor has overflow other than visible.
      Divi / theme wrappers often ship overflow(-x):hidden; relax them only
      on pages that contain this component (scoped via :has).
   2) Divi list resets strip ul/ol padding+margin inside modules; re-assert
      the component's list box model with raised specificity + !important
      (allowed per PROJECT.md for Divi overrides).
   3) Divi 5 emits the FRONT PAGE's alternating section colours (navy #0b1d3a on
      even sections, #f5f7fa on odd) into the unified stylesheet of EVERY other
      page, with !important and 4-class specificity. The front page is the only
      page in the site that sets section backgrounds on purpose — verified
      against the stored block attributes of every Divi page and post — so on an
      inner page that colour is always wrong. Where the component brings its own
      background it showed as a band down both sides (.proc, .procedures,
      .contact, .cta-strip); where the module is transparent (/blog/, a Text
      module holding .archive__body) it flooded the whole page navy.
      Reset every inner-page section to transparent so the body colour shows;
      `body:not(.home)` both spares the front page and wins the specificity duel.
      Layout is untouched — this only repaints what is behind the component.
      NOTE: if an inner page ever needs a real section background, set it in Divi
      and add an exception here, otherwise this rule will paint over it. */
body:not(.home) .et-l--post > .et_builder_inner_content > .et_pb_section {
  background-color: transparent !important;
}
/* Same leak, different property: a "Width 90%" set on ONE row in the builder
   is emitted as `.et_pb_row_1{width:90%!important}` into the unified stylesheet
   of EVERY page (verified on 6 pages, always exactly one such rule). It was a
   patch for the missing .wrap gutter — one section per page got a margin while
   the rest touched the edge. Now that .wrap carries the gutter everywhere, the
   patch would stack on top of it (90% row × ~90% wrap ≈ 80%), so it is undone
   here. Specificity 0,3,0 beats the emitted 0,1,0 !important; the second half of
   their selector is scoped to single posts without a Theme Builder body and
   never matches, since our post template supplies one. */
.et_pb_section .et_pb_row.et_pb_row_1 {
  width: auto !important;
}
/* Two components come straight out of a Divi module (the blog archive from a Text
   module, the article from a Post Content module) and so have no .wrap of their
   own to carry the gutter — they sat flush against the screen edge on every
   viewport, desktop included. Put the gutter on their Divi row instead of on the
   components, so the article and its consultation rail keep the column gap the
   design gives them. Named components only: no other row is affected. */
.et_pb_row:has(.article),
.et_pb_row:has(.archive__body) {
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}
#page-container:has(.proc),
#et-main-area:has(.proc),
#main-content:has(.proc),
.et-l:has(.proc),
.et_builder_inner_content:has(.proc),
.et_pb_section:has(.proc),
.et_pb_row:has(.proc),
.et_pb_column:has(.proc),
.et_pb_module:has(.proc),
.et_pb_code:has(.proc),
.et_pb_code_inner:has(.proc) {
  overflow: visible !important;
}

/* 3) Full-bleed heroes: both the inner-page .page-hero AND the homepage .hero
   paint their own background, so the Divi section/row/column must never cap or
   pad them on ANY viewport. Divi rows default to ~80% width on mobile, which
   exposed white side bars (section bg) and cut the bleed. With this, the row
   needs NO manual width settings in Divi (leave Section/Row at defaults, do
   NOT switch to a Fullwidth section type — a Code module needs a regular one);
   .wrap inside the hero caps the content at --container and carries the gutter. */
.et_pb_section:has(.page-hero),
.et_pb_section:has(.hero) {
  padding: 0 !important;
}
.et_pb_row:has(.page-hero),
.et_pb_row:has(.hero) {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.et_pb_column:has(.page-hero),
.et_pb_module:has(.page-hero),
.et_pb_code:has(.page-hero),
.et_pb_column:has(.hero),
.et_pb_module:has(.hero),
.et_pb_code:has(.hero) {
  margin: 0 !important;
  padding: 0 !important;
}

/* Full-bleed program bands (/klub-popitay/): the .klub component paints its own
   per-band backgrounds, so Divi must never cap or pad the section/row/column on
   any viewport (same pattern as .page-hero / .hero). On Divi this works whether
   .klub is one Code module or split one-Section-per-band. */
.et_pb_section:has(.klub) {
  padding: 0 !important;
}
.et_pb_row:has(.klub) {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.et_pb_column:has(.klub),
.et_pb_module:has(.klub),
.et_pb_code:has(.klub) {
  margin: 0 !important;
  padding: 0 !important;
}

/* Klub lists — re-assert the box model Divi strips (keep the component margins),
   plus re-assert the curriculum CSS counter (Divi can drop ::before / inject a
   ::marker), or the 01-11 numerals die on dev though the preview looks right. */
ul.klub__notes.klub__notes { padding: 0 !important; margin: 56px 0 0 !important; list-style: none !important; }
ul.klub__includes.klub__includes { padding: 0 !important; margin: 0 !important; list-style: none !important; }
ol.klub__curriculum.klub__curriculum { padding: 0 !important; margin: 8px 0 0 !important; list-style: none !important; }
ul.klub__benefits.klub__benefits { padding: 0 !important; margin: 8px 0 0 !important; list-style: none !important; }
ul.klub__pills.klub__pills { padding: 0 !important; margin: 0 !important; list-style: none !important; }
.klub li { margin: 0 !important; }
.klub__topic::marker { content: "" !important; }
.klub__topic::before { content: counter(ktopic, decimal-leading-zero) !important; }

ul.hero__bento.hero__bento { padding: 0 !important; margin: 0 !important; list-style: none !important; }
ul.rail-facts.rail-facts { padding: 6px 22px 12px !important; margin: 0 !important; list-style: none !important; }
ul.rail-consult__hours.rail-consult__hours { padding: 0 !important; margin: 0 0 24px !important; list-style: none !important; }
ul.rail-consult__contact.rail-consult__contact { padding: 0 !important; margin: 0 0 24px !important; list-style: none !important; }
/* Rail (.rail-consult) inside Divi — the theme overrides three things that look
   fine locally: the amber eyebrows revert to gray, links get an underline/border,
   and list rows get injected bullets. Re-assert (scoped, so .article bullets stay). */
.rail-consult__heading { color: var(--color-accent) !important; }
.rail-consult a { text-decoration: none !important; border-bottom: 0 !important; box-shadow: none !important; }
.rail-consult__hours li::before,
.rail-consult__contact li::before { content: none !important; display: none !important; }
.rail-consult__hours li::marker,
.rail-consult__contact li::marker { content: "" !important; }
.rail-consult__hours li,
.rail-consult__contact li { list-style: none !important; padding-left: 0 !important; background-image: none !important; }
ul.proc__checklist.proc__checklist { padding: 0 !important; margin: 0 !important; list-style: none !important; }
ol.proc__steps.proc__steps { padding: 0 !important; margin: 0 !important; list-style: none !important; }
ul.proc__prep.proc__prep { padding: 0 !important; margin: 0 !important; list-style: none !important; }
ul.proc__related.proc__related { padding: 0 !important; margin: 0 !important; list-style: none !important; }
.proc li { margin: 0 !important; }

/* Contact (/kontakti/) lists — Divi strips ul/ol box model, re-assert */
ul.contact__details.contact__details { padding: 0 !important; margin: 0 !important; list-style: none !important; }
ol.contact__steps-list.contact__steps-list { padding: 0 !important; margin: 0 !important; list-style: none !important; }
.contact__details li, .contact__steps-list li { margin: 0 !important; }

/* ==========================================================================
   404 — PAGE NOT FOUND  ("Вярната посока" — compass wayfinding)
   Signature compass-as-zero motif (static, calm) + conversion actions
   (book / call) + a wayfinding strip (site search + 4 destination cards).
   Root: <div class="nf"> (not <section> — Divi wraps it). Paints its own
   full-bleed gradient, so it uses the :has(.nf) neutralizer at the bottom.
   REQUIRES: 'Newsreader' (serif) + 'JetBrains Mono' fonts loaded in <head>.
   ========================================================================== */

.nf {
  position: relative;
  padding: clamp(56px, 8vw, 104px) 0;
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-alt) 100%);
  overflow: hidden;
}

.nf__wrap {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* --- Hero: copy + compass --- */
.nf__hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.nf__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'JetBrains Mono', 'Inter', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 22px;
}

.nf__eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
  flex-shrink: 0;
}

.nf__title {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 500;
  font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  margin-bottom: 20px;
  text-wrap: balance;
}

.nf__title em {
  color: var(--color-accent);
  font-style: italic;
  font-weight: 400;
}

.nf__lead {
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.7;
  color: var(--color-text-light);
  max-width: 48ch;
  margin-bottom: 32px;
}

/* --- Actions: book (primary) + call, with a quiet home link --- */
.nf__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
}

.nf__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  transition:
    background-color var(--transition),
    border-color var(--transition),
    color var(--transition),
    transform var(--transition);
}

.nf__btn svg {
  flex-shrink: 0;
}

.nf__btn--primary {
  background: var(--color-accent);
  color: #fff;
}

.nf__btn--primary:hover {
  background: var(--color-accent-hover);
  transform: translateY(-2px);
}

.nf__btn--call {
  background: var(--color-bg);
  color: var(--color-primary);
  border: 1px solid var(--color-border);
}

.nf__btn--call:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-2px);
}

.nf__btn--call svg {
  color: var(--color-accent);
}

.nf__home {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-light);
  transition: color var(--transition);
}

.nf__home svg {
  flex-shrink: 0;
}

.nf__home:hover {
  color: var(--color-primary);
}

/* --- Signature compass visual --- */
.nf__visual {
  position: relative;
}

.nf__figure {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1.15 / 1;
  padding: clamp(22px, 4vw, 48px);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background: linear-gradient(155deg, #fff 0%, #fdfaf5 100%);
}

.nf__figure::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(212, 135, 58, 0.18);
  border-radius: 16px;
  pointer-events: none;
}

.nf__svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.nf__ghost {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2;
  opacity: 0.16;
}

.nf__tube {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 13;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nf__tube--ear {
  stroke-width: 11;
}

.nf__olive {
  fill: var(--color-primary);
}

.nf__chest {
  fill: #fff;
  stroke: var(--color-primary);
  stroke-width: 13;
}

.nf__diaphragm {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 6;
}

.nf__diaphragm-dot {
  fill: var(--color-accent);
}

/* --- Wayfinding strip: search + destination cards --- */
.nf__nav {
  margin-top: clamp(48px, 6vw, 72px);
  padding-top: clamp(32px, 4vw, 44px);
  border-top: 1px solid var(--color-border);
}

.nf__nav-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.nf__nav-title {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-primary);
}

.nf__search {
  display: flex;
  align-items: stretch;
  width: min(100%, 400px);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color var(--transition);
}

.nf__search:focus-within {
  border-color: var(--color-accent);
}

.nf__search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  padding: 13px 16px;
  font-family: inherit;
  font-size: 15px;
  color: var(--color-text);
}

.nf__search-input::placeholder {
  color: var(--color-text-light);
}

.nf__search-input:focus {
  outline: none;
}

.nf__search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  background: var(--color-accent);
  color: #fff;
  transition: background-color var(--transition);
}

.nf__search-btn:hover {
  background: var(--color-accent-hover);
}

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

.nf__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.nf__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  padding: 22px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  transition:
    border-color var(--transition),
    transform var(--transition);
}

.nf__card:hover {
  border-color: var(--color-accent);
  transform: translateY(-3px);
}

.nf__card-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--color-bg-alt);
  color: var(--color-accent);
  transition:
    background-color var(--transition),
    color var(--transition);
}

.nf__card:hover .nf__card-ico {
  background: var(--color-accent);
  color: #fff;
}

.nf__card-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--color-primary);
}

.nf__card-name svg {
  margin-left: auto;
  color: var(--color-border);
  transition:
    transform var(--transition),
    color var(--transition);
}

.nf__card:hover .nf__card-name svg {
  color: var(--color-accent);
  transform: translateX(3px);
}

.nf__card-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-light);
}

/* --- 404 responsive --- */
@media (max-width: 920px) {
  .nf__hero {
    grid-template-columns: 1fr;
    gap: 44px;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
  }

  .nf__eyebrow,
  .nf__actions {
    justify-content: center;
  }

  .nf__lead {
    margin-left: auto;
    margin-right: auto;
  }

  /* content-first on mobile: compass follows the actions, never buries them */
  .nf__visual {
    max-width: 360px;
    margin: 8px auto 0;
    width: 100%;
  }

  .nf__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .nf__nav-top {
    justify-content: center;
    text-align: center;
  }

  .nf__search {
    width: 100%;
  }

  .nf__card {
    text-align: left;
  }
}

@media (max-width: 560px) {
  .nf {
    padding: clamp(44px, 11vw, 64px) 0;
  }

  .nf__title {
    font-size: clamp(28px, 8vw, 36px);
  }

  .nf__grid {
    grid-template-columns: 1fr;
  }

  .nf__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .nf__btn {
    width: 100%;
  }

  .nf__visual {
    max-width: 300px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nf__btn:hover,
  .nf__card:hover,
  .nf__card:hover .nf__card-name svg {
    transform: none;
  }
}

/* Divi full-bleed neutralizer for the 404 body (mirrors the .page-hero fix):
   .nf paints its own gradient, so the section/row/column must never cap or
   pad it. Leave Section/Row at defaults in Divi; .nf__wrap caps the content. */
.et_pb_section:has(.nf) {
  padding: 0 !important;
}
.et_pb_row:has(.nf) {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.et_pb_column:has(.nf),
.et_pb_module:has(.nf),
.et_pb_code:has(.nf) {
  margin: 0 !important;
  padding: 0 !important;
}

/* ==========================================================================
   BLOG — SINGLE POST (/blog/{slug}/)
   Editorial centred hero (breadcrumb + category + serif H1 + meta + wide
   featured banner), then a two-column body: .article (styles the imported
   Gutenberg blocks) + the sticky consultation rail REUSED verbatim from the
   procedure template (.rail-consult / .rail-card / .rail-more). Closing CTA =
   cta-appointment (.cta-book). Root <div class="post"> (not <section> — Divi
   wraps it). Hero paints its own gradient: full-bleed via the :has(.post-hero)
   neutralizer at the bottom of this section.
   Divi mapping: hero = Code module; .article = Post Content module given the
   CSS class "article"; rail = Code module. Sticky offset assumes the ~84px
   header, same as .proc__rail.
   REQUIRES: 'Newsreader' (serif) + 'JetBrains Mono' fonts loaded in <head>.
   ========================================================================== */

/* --- Hero ------------------------------------------------------------------ */
.post-hero{
  position:relative;
  padding:40px 0 0;
  background:linear-gradient(180deg,var(--color-bg-alt) 0%,var(--color-bg) 100%);
  overflow:hidden;
}
.post-hero__shape{
  position:absolute;top:-180px;left:50%;transform:translateX(-50%);
  width:760px;height:520px;pointer-events:none;
  background:radial-gradient(circle at center,rgba(212,135,58,0.09) 0%,transparent 62%);
}
.post-hero .wrap{position:relative;z-index:1}

.post-hero__head{max-width:800px;margin:0 auto;text-align:center}
.post-hero__cat{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;
  font-family:'JetBrains Mono','Inter',monospace;
  font-size:12px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--color-accent);
}
.post-hero__cat::before,.post-hero__cat::after{
  content:"";width:24px;height:1px;background:currentColor;opacity:0.5;
}
.post-hero__title{
  font-family:'Newsreader',Georgia,serif;
  font-size:clamp(33px,4.4vw,52px);line-height:1.08;font-weight:500;
  letter-spacing:-0.025em;color:var(--color-primary);margin:0;text-wrap:balance;
}
.post-hero__dek{
  font-size:19px;line-height:1.6;color:var(--color-text-light);
  margin:22px auto 0;max-width:680px;text-wrap:pretty;
}
.post-hero__meta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;
  margin:26px 0 0;list-style:none;padding:0;
  font-family:'JetBrains Mono','Inter',monospace;
  font-size:12px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--color-text-light);
}
.post-hero__meta li{display:inline-flex;align-items:center;gap:14px}
.post-hero__meta li + li::before{
  content:"";width:3px;height:3px;border-radius:50%;background:var(--color-border);
}
.post-hero__meta svg{width:15px;height:15px;color:var(--color-accent);margin-right:7px;vertical-align:-2px}

.post-hero__figure{
  position:relative;margin:48px 0 0;aspect-ratio:16/9;overflow:hidden;
  border-radius:2px;background:var(--color-bg-alt);
}
.post-hero__figure img{width:100%;height:100%;object-fit:cover;display:block}
.post-hero__figure figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:36px 22px 14px;
  font-size:13px;color:#e7ecf3;text-align:left;
  background:linear-gradient(180deg,rgba(11,29,58,0) 0%,rgba(11,29,58,0.7) 100%);
}

/* --- Body: two-column article + sticky rail -------------------------------- */
.post{background:var(--color-bg);padding:56px 0 96px}
.post__layout{display:grid;grid-template-columns:minmax(0,1fr) 348px;gap:100px}
.post__main{min-width:0;max-width:760px}

/* The article scope — styles the imported Gutenberg HTML (wp-block-*). */
.article{font-size:18px}
.article > *:first-child{margin-top:0}
.article p{margin:0 0 24px;font-size:18px;line-height:1.78;color:var(--color-text-light)}
.article > p:first-of-type{
  font-family:'Newsreader',Georgia,serif;font-weight:400;
  font-size:23px;line-height:1.5;letter-spacing:-0.01em;color:var(--color-primary);
  margin-bottom:30px;
}
.article h2,.article h2.wp-block-heading{
  font-family:'Newsreader',Georgia,serif;font-weight:500;
  font-size:clamp(26px,3vw,33px);line-height:1.18;letter-spacing:-0.02em;
  color:var(--color-primary);margin:54px 0 18px;text-wrap:balance;
}
.article h3,.article h3.wp-block-heading{
  font-family:'Newsreader',Georgia,serif;font-weight:500;
  font-size:23px;line-height:1.25;letter-spacing:-0.015em;
  color:var(--color-primary);margin:40px 0 14px;
}
.article h4{font-size:18px;font-weight:700;color:var(--color-primary);margin:32px 0 12px}
.article :is(h2,h3,h4) + p{margin-top:0}
.article strong{color:var(--color-primary);font-weight:600}
.article em{font-style:italic}
.article a{
  color:var(--color-primary);font-weight:500;text-decoration:none;
  box-shadow:inset 0 -1.5px 0 0 var(--color-accent);
  transition:color 150ms ease,box-shadow 150ms ease;
}
.article a:hover{color:var(--color-accent);box-shadow:inset 0 -2px 0 0 var(--color-accent)}

/* Lists — amber discs / mono numerals, list-style reset re-asserted below */
.article ul,.article ol{margin:0 0 26px;padding:0;list-style:none}
.article li{position:relative;padding-left:30px;margin:0 0 12px;font-size:18px;line-height:1.65;color:var(--color-text-light)}
.article ul li::before{
  content:"";position:absolute;left:6px;top:11px;width:7px;height:7px;
  border-radius:50%;background:var(--color-accent);
}
.article ol{counter-reset:art}
.article ol li{counter-increment:art}
.article ol li::before{
  content:counter(art,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;
  letter-spacing:0.04em;color:var(--color-accent);
}

/* Images / figures (wp-block-image) */
.article figure,.article .wp-block-image{margin:38px 0}
.article img{display:block;width:100%;height:auto;border-radius:2px}
.article figcaption{
  margin-top:12px;font-size:14px;line-height:1.5;font-style:italic;
  color:var(--color-text-light);text-align:center;
}

/* Blockquote — Divi adds border-left/padding/italic; reset + restyle (navy serif,
   amber rule). Bumped specificity here; hard reset lives in the Divi-fixes block. */
.article blockquote,.article blockquote.wp-block-quote{
  margin:34px 0;padding:6px 0 6px 28px;border:0;border-left:3px solid var(--color-accent);
  font-family:'Newsreader',Georgia,serif;font-style:normal;font-weight:400;
  font-size:22px;line-height:1.45;letter-spacing:-0.01em;color:var(--color-primary);
}
.article blockquote p{margin:0 0 10px;font:inherit;color:inherit}
.article blockquote p:last-child{margin-bottom:0}
.article blockquote cite{display:block;margin-top:12px;font-family:'JetBrains Mono',monospace;font-style:normal;font-size:12px;letter-spacing:0.08em;color:var(--color-text-light)}

.article hr{border:0;height:1px;background:var(--color-border);margin:44px 0}
.article .wp-block-embed,.article iframe{margin:36px 0;max-width:100%}
.article .wp-block-table table{width:100%;border-collapse:collapse;font-size:16px;margin:32px 0}
.article .wp-block-table td,.article .wp-block-table th{border:1px solid var(--color-border);padding:12px 14px;text-align:left}

/* Safety net for imported markup: hide any stray empty nodes the migration
   left behind, and keep oEmbeds/iframes from breaking the column if one slips
   through the content cleanup. */
.article :is(p,h2,h3,h4,h5,h6,li):empty{display:none}
.article .wp-block-embed__wrapper{max-width:100%}

/* "Прочетете също" related-links block (built from the old oEmbed cards by
   blog-export/clean-content.mjs). Sits at the end of .article, before the foot. */
.article-related{margin:48px 0 0;padding:26px 28px;background:var(--color-bg-alt);border:1px solid var(--color-border);border-radius:4px}
.article-related__label{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--color-accent);margin:0 0 14px;
}
.article-related ul{list-style:none;margin:0;padding:0}
.article-related li{position:relative;padding:0 0 0 26px;margin:0 0 12px;line-height:1.5}
.article-related li:last-child{margin-bottom:0}
.article-related li::before{
  content:"";position:absolute;left:0;top:9px;width:9px;height:9px;
  border-right:2px solid var(--color-accent);border-top:2px solid var(--color-accent);
  transform:rotate(45deg);
}
.article-related a{
  font-family:'Newsreader',serif;font-size:18px;color:var(--color-primary);
  box-shadow:none;font-weight:500;transition:color 150ms ease;
}
.article-related a:hover{color:var(--color-accent);box-shadow:none}

/* --- Article footer: tags + author byline ---------------------------------- */
.article-foot{padding-top:30px;border-top:1px solid var(--color-border)}
.article-tags{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.article-tags li a{
  display:inline-flex;align-items:center;min-height:34px;padding:6px 14px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--color-text-light);
  border:1px solid var(--color-border);border-radius:2px;
  transition:border-color 150ms ease,color 150ms ease;
}
.article-tags li a:hover{border-color:var(--color-accent);color:var(--color-accent)}
.article-byline{
  display:flex;align-items:center;gap:20px;margin-top:30px;
  background:var(--color-bg-alt);border:1px solid var(--color-border);border-radius:2px;
  padding:22px 24px;
}
.article-byline__photo{
  flex:0 0 64px;width:64px;height:64px;border-radius:50%;overflow:hidden;
  background:var(--color-primary);
}
.article-byline__photo img{width:100%;height:100%;object-fit:cover;filter:saturate(0.92)}
.article-byline__role{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--color-accent);margin:0 0 5px;
}
.article-byline__name{font-family:'Newsreader',serif;font-weight:500;font-size:21px;letter-spacing:-0.01em;color:var(--color-primary);margin:0 0 4px}
.article-byline__bio{margin:0;font-size:14px;line-height:1.55;color:var(--color-text-light)}

/* --- Rail (reuses .rail-consult / .rail-card / .rail-more) ------------------ */
.post__rail{position:relative}
.post__rail-inner{position:sticky;top:min(104px,calc(100vh - 760px));display:flex;flex-direction:column;gap:20px}
.post__rail-inner:has(.rail-more[open]){top:min(104px,calc(100vh - 980px))}
.post__rail-mobile{display:none}

/* --- Responsive ------------------------------------------------------------ */
@media (max-width:1080px){
  .post__layout{grid-template-columns:minmax(0,1fr) 312px;gap:56px}
}
@media (max-width:980px){
  .post__layout{grid-template-columns:1fr;gap:0}
  .post__main{max-width:760px;margin:0 auto;width:100%}
  .post__rail{display:none}
  .post__rail-mobile{display:block}
  .post__rail-mobile.post__rail-booking{margin-top:48px}
}
@media (max-width:600px){
  .post{padding:40px 0 72px}
  .post-hero__figure{aspect-ratio:3/2;margin-top:32px}
  .post-hero__meta{gap:10px}
  .article > p:first-of-type{font-size:21px}
  .article p,.article li{font-size:17px}
  .article-byline{flex-direction:column;align-items:flex-start;gap:14px}
}

/* ==========================================================================
   BLOG — ARCHIVE / INDEX (/blog/)
   Light editorial index: breadcrumb hero with count, a wide feature card for
   the latest post, a 3-up card grid, and pagination. Card = light variant of
   the homepage teaser (navy serif title on white, amber category, hairline).
   Root <div class="archive">. Hero is contained (no full-bleed needed).
   Divi mapping: build as a Code module wrapping a Blog module, OR a static
   Code-module grid fed by the loop. REQUIRES the same three fonts.
   ========================================================================== */
.archive{background:var(--color-bg);padding:0px 0 96px}

.archive-hero{max-width:780px;margin:0 0 56px}
.archive-hero__eyebrow{
  display:inline-flex;align-items:center;gap:14px;margin-bottom:18px;
  font-family:'JetBrains Mono','Inter',monospace;
  font-size:12px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--color-accent);
}
.archive-hero__eyebrow::before{content:"";width:28px;height:1px;background:currentColor;opacity:0.6}
.archive-hero__title{
  font-family:'Newsreader',Georgia,serif;font-weight:500;
  font-size:clamp(36px,5vw,56px);line-height:1.04;letter-spacing:-0.025em;
  color:var(--color-primary);margin:0 0 18px;text-wrap:balance;
}
.archive-hero__lead{font-size:19px;line-height:1.6;color:var(--color-text-light);margin:0;max-width:600px}

/* Topic filter — chips link to topical category archives. Requires topical
   categories assigned on migration (recommended); otherwise show one "Всички". */
.archive__filter{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 48px;list-style:none;padding:0}
.archive__filter a{
  display:inline-flex;align-items:center;min-height:42px;padding:9px 18px;
  font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;letter-spacing:0.08em;
  color:var(--color-text-light);border:1px solid var(--color-border);border-radius:2px;
  transition:border-color 150ms ease,color 150ms ease,background 150ms ease;
}
.archive__filter a:hover{border-color:var(--color-accent);color:var(--color-accent)}
.archive__filter a[aria-current="true"]{background:var(--color-primary);border-color:var(--color-primary);color:#fff}

/* Feature card — latest post, wide split */
.archive__feature{
  display:grid;grid-template-columns:1.05fr 0.95fr;gap:0;margin-bottom:56px;
  border:1px solid var(--color-border);border-radius:2px;overflow:hidden;
  background:var(--color-bg);transition:border-color 150ms ease;
}
.archive__feature:hover{border-color:var(--color-accent)}
.archive__feature-img{position:relative;overflow:hidden;background:var(--color-bg-alt);min-height:340px}
.archive__feature-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 500ms ease}
.archive__feature:hover .archive__feature-img img{transform:scale(1.03)}
.archive__feature-flag{
  position:absolute;top:18px;left:18px;z-index:1;padding:7px 13px;
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;
  letter-spacing:0.16em;text-transform:uppercase;color:#fff;
  background:rgba(11,29,58,0.82);border-radius:2px;backdrop-filter:blur(2px);
}
.archive__feature-body{padding:clamp(28px,3.4vw,48px);display:flex;flex-direction:column;justify-content:center}
.archive__feature-meta,.post-card__meta{
  display:flex;align-items:center;gap:12px;margin-bottom:16px;
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;
  letter-spacing:0.13em;text-transform:uppercase;color:var(--color-text-light);
}
.archive__feature-meta .cat,.post-card__meta .cat{color:var(--color-accent)}
.archive__feature-meta .dot,.post-card__meta .dot{width:3px;height:3px;border-radius:50%;background:var(--color-border)}
.archive__feature-title{
  font-family:'Newsreader',serif;font-weight:500;font-size:clamp(26px,2.7vw,34px);
  line-height:1.14;letter-spacing:-0.02em;color:var(--color-primary);margin:0 0 16px;text-wrap:balance;
  transition:color 150ms ease;
}
.archive__feature:hover .archive__feature-title{color:var(--color-accent)}
.archive__feature-desc{font-size:16px;line-height:1.6;color:var(--color-text-light);margin:0 0 24px}
.archive__read{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;
  font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--color-primary);
}
.archive__read svg{width:15px;height:15px;transition:transform 150ms ease}
:is(.archive__feature,.post-card):hover .archive__read{color:var(--color-accent)}
:is(.archive__feature,.post-card):hover .archive__read svg{transform:translateX(4px)}

/* Card grid */
.archive__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 36px}
.post-card{display:flex;flex-direction:column;color:inherit;text-decoration:none}
.post-card__img{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:2px;background:var(--color-bg-alt);margin-bottom:18px}
.post-card__img img{width:100%;height:100%;object-fit:cover;transition:transform 450ms ease}
.post-card:hover .post-card__img img,.post-card:focus-visible .post-card__img img{transform:scale(1.03)}
.post-card__title{
  font-family:'Newsreader',serif;font-weight:500;font-size:22px;line-height:1.22;
  letter-spacing:-0.015em;color:var(--color-primary);margin:0 0 10px;text-wrap:balance;
  transition:color 150ms ease;
}
.post-card:hover .post-card__title,.post-card:focus-visible .post-card__title{color:var(--color-accent)}
.post-card__desc{font-size:15px;line-height:1.55;color:var(--color-text-light);margin:0 0 16px;flex:1 1 auto}
.post-card .archive__read{font-size:11px}

/* Pagination */
.archive__pagination{
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  margin-top:72px;padding-top:40px;border-top:1px solid var(--color-border);
}
.archive__pagination a,.archive__pagination span{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-width:46px;height:46px;padding:0 14px;
  font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:500;
  color:var(--color-text-light);border:1px solid var(--color-border);border-radius:2px;
  transition:border-color 150ms ease,color 150ms ease,background 150ms ease;
}
.archive__pagination a:hover{border-color:var(--color-accent);color:var(--color-accent)}
.archive__pagination [aria-current="page"]{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.archive__pagination .gap{border:0;color:var(--color-border)}
.archive__pagination .prev,.archive__pagination .next{letter-spacing:0.1em;text-transform:uppercase;font-size:11px}
.archive__pagination .prev svg,.archive__pagination .next svg{width:15px;height:15px}

/* Archive responsive */
@media (max-width:1024px){
  .archive__grid{grid-template-columns:repeat(2,1fr);gap:44px 30px}
}
@media (max-width:860px){
  .archive__feature{grid-template-columns:1fr}
  .archive__feature-img{min-height:0;aspect-ratio:16/9}
}
@media (max-width:600px){
  .archive{padding:24px 0 72px}
  .archive__grid{grid-template-columns:1fr;gap:44px}
  .archive-hero{margin-bottom:40px}
  .post-card__img{aspect-ratio:16/10}
}

/* ==========================================================================
   Divi environment fixes — BLOG (mirror the .proc / .page-hero patterns)
   ========================================================================== */
/* 1) sticky rail needs visible overflow up the ancestor chain (scoped via :has) */
#page-container:has(.post),
#et-main-area:has(.post),
#main-content:has(.post),
.et-l:has(.post),
.et_builder_inner_content:has(.post),
.et_pb_section:has(.post),
.et_pb_row:has(.post),
.et_pb_column:has(.post),
.et_pb_module:has(.post),
.et_pb_code:has(.post),
.et_pb_code_inner:has(.post){overflow:visible !important}

/* 2) full-bleed hero (paints its own gradient): zero the Divi section/row/column */
.et_pb_section:has(.post-hero){padding:0 !important}
.et_pb_row:has(.post-hero){width:100% !important;max-width:none !important;margin:0 !important;padding:0 !important}
.et_pb_column:has(.post-hero),
.et_pb_module:has(.post-hero),
.et_pb_code:has(.post-hero){margin:0 !important;padding:0 !important}

/* 3) re-assert list box-model that Divi strips inside modules (raised specificity) */
ul.post-hero__meta.post-hero__meta{padding:0 !important;margin:26px 0 0 !important;list-style:none !important}
ul.article-tags.article-tags{padding:0 !important;margin:0 !important;list-style:none !important}
ul.archive__filter.archive__filter{padding:0 !important;margin:0 0 48px !important;list-style:none !important}
.post .article ul,.post .article ol{padding-left:0 !important;margin:0 0 26px !important;list-style:none !important}
.post .article li{margin:0 0 12px !important}
/* 4) hard-reset Divi's blockquote styling inside the article (border/padding/italic) */
.post .article blockquote{
  border:0 !important;border-left:3px solid var(--color-accent) !important;
  padding:6px 0 6px 28px !important;font-style:normal !important;
  background:transparent !important;
}

.et_pb_row:not([class*=et_flex_column]) {
    width: auto;
    max-width: var(--content-max-width);
    margin: auto;
    position: relative;
}

@media only screen and (min-width: 1800px) {
    .et_block_row {
        padding: 0px !important;
    }
}

/* @media only screen and (min-width: 1800px) {
    .et_pb_section {
        padding: 0px !important;
    }
} */
/* --- Contact Form 7 integration (/kontakti/ appointment form) --------------
   The form markup lives in the CF7 template and reuses the .contact__* classes
   1:1, so the design carries over untouched. CF7 only adds its own wrapper
   spans around each control, and those need three corrections:

   1) .contact__consent styles the flex row; CF7 renders the checkbox and its
      label text inside nested spans, so the row has to be re-established on
      CF7's own list-item label.
   2) The generic `.contact__consent span span` rule exists to tint ONLY the
      asterisk. CF7's extra span nesting made it match the whole sentence and
      paint it accent-orange — reset the sentence, keep the asterisk tinted.
   3) The response/validation messages get the design's own type and colours. */
.contact__consent .wpcf7-form-control-wrap,
.contact__consent .wpcf7-acceptance,
.contact__consent .wpcf7-list-item {
  display: block;
  margin: 0;
  width: 100%;
}
.contact__consent .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}
.contact__consent .wpcf7-list-item-label {
  color: var(--color-text-light);
}
.contact__consent .wpcf7-list-item-label span[aria-hidden="true"] {
  color: var(--color-accent);
}
.contact__form .wpcf7-form-control-wrap {
  display: block;
}
.contact__form .wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: 13px;
  color: #c0392b;
}
.contact__form .wpcf7-response-output {
  margin: 16px 0 0;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
}

/* --- Карта на уебсайта (/карта-на-уебсайта/) -------------------------------
   Съдържанието идва от шорткода [orto_sitemap] в functions.php (генерира се
   само, за да не остарява). Тук е само оформлението — по токените на дизайна. */
.sitemap {
  background: var(--color-bg);
  padding: 8px 0 88px;
}
.sitemap__group {
  margin-bottom: 56px;
}
.sitemap__group:last-child {
  margin-bottom: 0;
}
.sitemap__title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
  font-family: 'Newsreader', Georgia, serif;
  font-size: 28px;
  font-weight: 500;
  color: var(--color-primary);
}
.sitemap__count {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-text-light);
}
.sitemap__list {
  columns: 3;
  column-gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sitemap__item {
  break-inside: avoid;
  margin-bottom: 10px;
}
.sitemap__link {
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-light);
  text-decoration: none;
  transition: color var(--transition);
}
.sitemap__link:hover,
.sitemap__link:focus-visible {
  color: var(--color-accent);
  text-decoration: underline;
}
@media (max-width: 980px) {
  .sitemap__list { columns: 2; }
  .sitemap__title { font-size: 24px; }
}
@media (max-width: 600px) {
  .sitemap__list { columns: 1; }
}

/* ==========================================================================
   ConsentMagic — рестайлинг на cookie банера + модала по токените на сайта
   --------------------------------------------------------------------------
   Плъгинът (ConsentMagic Pro 5.x) слага inline стилове на всеки елемент
   (пунктирана рамка, 20px текст, синьо #6ec1e4), затова ВСИЧКО тук е с
   !important — единственият начин да се пребори inline style. Селекторите
   минават през #cs_preview_popup (стабилното ID на front-end контейнера),
   за да бият и най-тежките селектори на плъгина независимо от реда на
   зареждане. Рандомизираният клас на обвивката НЕ се ползва — сменя се.
   Промяна на текстове/бутони става от ConsentMagic админа, не оттук.
   ========================================================================== */

/* Шрифт: банерът зарежда Noto Sans само за себе си — заменяме с Inter.
   (Google Fonts заявката се маха с dequeue в functions.php.) */
#cs_preview_popup .cs_preview_container.cs_default_font {
  --cs-font-family: var(--font-body) !important;
}

/* ConsentMagic променливи (toggle-и, подчертавания) — от синьо към кехлибар */
#cs_preview_popup .preview_wrap > div[style] {
  --cs-color-active-toggle: rgba(212, 135, 58, 0.25) !important;
  --cs-color-active-toggle-button: var(--color-accent) !important;
  --cs-active-toggle-background-color: var(--color-accent) !important;
  --cs-active-toggle-text-color: #fff !important;
  --cs-text-color: var(--color-text) !important;
  --cs-color-underline: var(--color-accent) !important;
  --cs-text-underline-color: rgba(212, 135, 58, 0.5) !important;
  --cs_subtitles_text_color: var(--color-primary) !important;
  --cs_tab_buttons_bg: var(--color-border) !important;
}

/* --- Банерът: от бар на цял ред → плаваща карта ----------------------------
   Плъгинът дава position:fixed + inset-inline:0 + margin:0 auto, така че
   стеснената ширина се центрира сама. */
#cs_preview_popup .cs-public-cookie-bar.bar_large,
#cs_preview_popup .cs-public-cookie-bar.bar_small {
  width: min(1080px, calc(100% - 40px)) !important;
  bottom: 16px !important;
  background-color: var(--color-bg) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 56px rgba(11, 29, 58, 0.22) !important;
  padding: 18px 24px !important;
  min-height: 0 !important;
  font-family: var(--font-body) !important;
  color: var(--color-text) !important;
}

/* Текстът на банера: inline 20px → 15px, компактен (целта: ~2 реда).
   Линкът към политиката влиза в края на изречението вместо на свой ред. */
#cs_preview_popup .bar_description_text {
  display: inline !important;
  color: var(--color-text) !important;
  font-size: var(--text-sm) !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}
#cs_preview_popup .cs-info-bar .policy_wrap {
  display: inline-block !important;
  margin-inline-start: 6px !important;
  font-size: var(--text-sm) !important;
}

/* Линк „Политика за поверителност" (в банера и в модала) */
#cs_preview_popup .policy_wrap a {
  color: var(--color-accent) !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(212, 135, 58, 0.5) !important;
  text-underline-offset: 3px !important;
}
#cs_preview_popup .policy_wrap a:hover,
#cs_preview_popup .policy_wrap a:focus-visible {
  color: var(--color-accent-hover) !important;
  text-decoration-color: currentColor !important;
}
/* Плъгинът рисува собствено подчертаване като ::after → двойна линия. Долу. */
#cs_preview_popup .policy_wrap a::after {
  display: none !important;
}

/* --- Бутони (банер + модал): по идиома на сайта ----------------------------
   12px радиус като .hero__cta, 600 тегло, без inline отстоянията на плъгина */
#cs_preview_popup .btn-row .btn,
#cs_preview_popup .cs-tab-footer .btn {
  border-radius: 12px !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  padding: 14px 24px !important;
  margin: 0 !important;
  opacity: 1 !important;
  cursor: pointer;
  transition:
    background-color var(--transition),
    border-color var(--transition),
    color var(--transition),
    box-shadow var(--transition) !important;
}
#cs_preview_popup .btn-row .btn:focus-visible,
#cs_preview_popup .cs-tab-footer .btn:focus-visible {
  outline: 2px solid var(--color-accent) !important;
  outline-offset: 2px !important;
}
#cs_preview_popup .btns_column .btn-row {
  gap: 12px !important;
  align-items: center !important;
}

/* Подредба на картата: текст горе, бутони долу вдясно. Деленето 50/50 на
   плъгина е тясно — 3-те бутона не се събират до текста на един ред. */
#cs_preview_popup .cs-wrapper .cs-popup-row {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 14px !important;
}
#cs_preview_popup .cs-popup-row .bar-description,
#cs_preview_popup .cs-popup-row .btns_column {
  width: 100% !important;
}

/* Само в банера: по-ниски бутони от тези в модала */
#cs_preview_popup .cs-info-bar .btn-row .btn {
  padding: 11px 20px !important;
}

/* При включен deny плъгинът дава flex-basis 50% на всеки бутон → третият
   винаги пада на нов ред. Над малък мобилен: естествена ширина по съдържание. */
@media (min-width: 481px) {
  #cs_preview_popup .cs-info-bar .btn-row .btn {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* Първичен: „Позволяване/Разрешаване на всички" — кехлибар */
#cs_preview_popup .allow_all_btn {
  background-color: var(--color-accent) !important;
  color: #fff !important;
  border: 1px solid var(--color-accent) !important;
  box-shadow: 0 4px 16px rgba(212, 135, 58, 0.25) !important;
}
#cs_preview_popup .allow_all_btn:hover,
#cs_preview_popup .allow_all_btn:focus-visible {
  background-color: var(--color-accent-hover) !important;
  border-color: var(--color-accent-hover) !important;
  color: #fff !important;
}

/* Вторични: „Повече опции", „Забраняване на всички", „Потвърждаване…" —
   ghost стил, равностойни по видимост (GDPR: отказът да не е скрит) */
#cs_preview_popup .options_btn,
#cs_preview_popup .disable_all_btn,
#cs_preview_popup .minimum_recommended_btn,
#cs_preview_popup .cs_setting_save_button {
  background-color: var(--color-bg) !important;
  color: var(--color-primary) !important;
  border: 1px solid var(--color-border) !important;
}
#cs_preview_popup .options_btn:hover,
#cs_preview_popup .options_btn:focus-visible,
#cs_preview_popup .disable_all_btn:hover,
#cs_preview_popup .disable_all_btn:focus-visible,
#cs_preview_popup .minimum_recommended_btn:hover,
#cs_preview_popup .minimum_recommended_btn:focus-visible,
#cs_preview_popup .cs_setting_save_button:hover,
#cs_preview_popup .cs_setting_save_button:focus-visible {
  background-color: var(--color-bg-alt) !important;
  border-color: #c6cfda !important;
  color: var(--color-primary) !important;
}

/* --- Модал „Настройки за поверителност" ------------------------------------ */
#cs_preview_popup .cs-modal-content.cs-bar-popup {
  background-color: var(--color-bg) !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 80px rgba(11, 29, 58, 0.35) !important;
  padding: 36px 40px !important;
  min-height: 0 !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-base) !important;
  color: var(--color-text) !important;
}
#cs_preview_popup .cs-modal-backdrop {
  background-color: rgba(11, 29, 58, 0.55) !important;
}

/* Заглавия в модала (inline: 20px/500 #333) */
#cs_preview_popup .cs-privacy-overview > p,
#cs_preview_popup .cs_popup_content > p {
  color: var(--color-primary) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

/* Описателни текстове в модала */
#cs_preview_popup .cs-privacy-content-text,
#cs_preview_popup .cm-script-description {
  color: var(--color-text-light) !important;
  font-size: var(--text-sm) !important;
  line-height: 1.6 !important;
}

/* Заглавия на категориите (Необходимо / Аналитика / Маркетинг…) */
#cs_preview_popup .cm-script-title-block p {
  color: var(--color-primary) !important;
  font-size: var(--text-base) !important;
  font-weight: 700 !important;
}

/* „Винаги ВКЛ" — зеленото на сайта вместо #5cb85c */
#cs_preview_popup .green-text,
#cs_preview_popup .green-text span {
  color: var(--color-success) !important;
}

/* --- Toggle-ите: от сини квадрати → кехлибарени pill ключета --------------- */
#cs_preview_popup .primary-switch .primary-switch-btn {
  width: 52px !important;
  height: 28px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: #cdd5df !important;
}
#cs_preview_popup .primary-switch .primary-switch-btn::after {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  top: 3px !important;
  inset-inline-start: 3px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}
#cs_preview_popup .primary-switch .primary-switch-input:checked + .primary-switch-btn {
  background: var(--color-accent) !important;
}
#cs_preview_popup .primary-switch .primary-switch-input:checked + .primary-switch-btn::after {
  inset-inline-start: 27px !important;
}
#cs_preview_popup .primary-switch.disabled .primary-switch-btn {
  background: var(--color-accent) !important;
  opacity: 0.35 !important;
}

/* --- Мобилно ---------------------------------------------------------------- */
@media (max-width: 740px) {
  #cs_preview_popup .cs-public-cookie-bar.bar_large,
  #cs_preview_popup .cs-public-cookie-bar.bar_small {
    width: calc(100% - 20px) !important;
    bottom: 10px !important;
    padding: 16px !important;
    border-radius: 14px !important;
  }
  #cs_preview_popup .btns_column .btn-row {
    gap: 10px !important;
  }
  #cs_preview_popup .cs-modal-content.cs-bar-popup {
    padding: 24px 20px !important;
    border-radius: 14px !important;
  }
}
@media (max-width: 480px) {
  #cs_preview_popup .btn-row .btn {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }
}

/* --- „Моите настройки за съгласие" — постоянното бутонче след съгласие -----
   То е ИЗВЪН #cs_preview_popup (отделен контейнер #cs_preview_popup_button),
   затова правилата по-горе не го хващат, и също носи inline стилове.
   Тук: малко pill чипче долу, тихо, да не се бие със страницата. */
#cs_preview_popup_button .cs-info-sticky {
  min-height: 0 !important;
  bottom: 16px !important;
  padding: 0 16px !important;
}
#cs_preview_popup_button .cs-info-sticky-button {
  background-color: var(--color-bg) !important;
  color: var(--color-primary) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 24px rgba(11, 29, 58, 0.16) !important;
  padding: 8px 16px !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  opacity: 1 !important;
  transition: background-color var(--transition), border-color var(--transition) !important;
}
#cs_preview_popup_button .cs-info-sticky-button:hover {
  background-color: var(--color-bg-alt) !important;
  border-color: #c6cfda !important;
  opacity: 1 !important;
}


/* 29.08.2026 — контраст WCAG AA (4.5:1): тъмносин текст върху кехлибарените бутони, по-тъмен кехлибар за етикетите */
.header__cta, .hero__cta--primary, .footer__cta, .page-hero__btn--primary, .about__marker,
.header__cta:hover, .hero__cta--primary:hover, .footer__cta:hover, .page-hero__btn--primary:hover { color: #0b1d3a !important; }
.services__eyebrow, .reviews__eyebrow, .proc__eyebrow, .article-byline__role, .page-hero__eyebrow,
.proc__lead em, .proc__score-key { color: #a35a17 !important; }


/* 29.08.2026 — визуални корекции по молба на възложителя (WORKLOG 11.10) */
/* 1. Героят: без надписа „ОРТО ПУНКТ · СОФИЯ" (и без затъмняващия градиент, който беше само заради него) */
.hero__media-caption { display: none !important; }
.hero__media::after { display: none !important; }
/* 2. Услуги: последният ред на описанието стъпва на базовата линия на последния ред на заглавието */
.services__head { align-items: last baseline; }
/* 3. Без етикета върху портрета на д-р Каменов */
.about__marker { display: none !important; }
/* 4. Картата „Запазване на час": без бяла рамка около нея (секцията е #f5f7fa) */
.cta-book { background-color: transparent !important; }
/* 5. Мобилен герой: текст → бутони → надничаща снимка → статистиките най-отдолу, равномерни разстояния */
@media (max-width: 768px) {
  .hero__inner { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .hero__copy, .hero__anchor { display: contents; }
  .hero__eyebrow { order: 1; }
  .hero__title { order: 2; }
  .hero__subtitle { order: 3; }
  .hero__actions { order: 4; margin-bottom: 20px; }
  .hero__media { order: 5; width: 100%; height: 200px; min-height: 0; max-height: none; aspect-ratio: auto; margin: 0 0 14px; }
  .hero__actions, .hero__bento { width: 100%; }
  .hero__img { object-position: 55% 22%; }
  .hero__bento { order: 6; }
}

/* 29.08.2026 — cookie банер (ConsentMagic): контраст WCAG AA (Lighthouse a11y), WORKLOG 11.11.
   Бутонът „Позволяване на всички" беше бял текст върху #d4873a (3.1:1) → тъмносин като CTA-тата (5.5:1);
   линкът към Политиката — #d4873a върху бяло (2.9:1) → #a35a17 (4.9:1). Селекторите са с #cs_preview_popup,
   защото рестайлингът по-горе е с тази специфичност. */
#cs_preview_popup .allow_all_btn,
#cs_preview_popup .allow_all_btn:hover,
#cs_preview_popup .allow_all_btn:focus-visible { color: #0b1d3a !important; }
#cs_preview_popup a[href*="politika-za-poveritelnost"] { color: #a35a17 !important; }

/* 29.08.2026 — Google Fonts — @font-face правилата inline (WORKLOG 11.11). Същите шрифтове/тегла/подмножества,
   файловете остават на fonts.gstatic.com; спестява се render-blocking заявката към fonts.googleapis.com/css2
   (~0,8 s на бавна мрежа). Източник: css2?family=Inter:wght@400;500;600;700;800&family=Newsreader:ital,opsz,wght@0,6..72,400;
   0,6..72,500;0,6..72,600;1,6..72,400&family=JetBrains+Mono:wght@500&display=swap, изтеглено с Chrome UA (woff2 + unicode-range). */
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/jetbrainsmono/v24/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8-qxTN1OVgaY.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/jetbrainsmono/v24/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8-qxTPlOVgaY.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/jetbrainsmono/v24/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8-qxTOVOVgaY.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/jetbrainsmono/v24/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8-qxTNVOVgaY.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/jetbrainsmono/v24/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8-qxTNFOVgaY.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;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/jetbrainsmono/v24/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8-qxTOlOV.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;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/newsreader/v26/cY9XfjOCX1hbuyalUrK439vogqCz_goCYw7oRd6JFYkzbBZD.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/newsreader/v26/cY9XfjOCX1hbuyalUrK439vogqCz_goCYw7oRd6JFYgzbBZD.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;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/newsreader/v26/cY9XfjOCX1hbuyalUrK439vogqCz_goCYw7oRd6JFYYzbA.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;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/newsreader/v26/cY9AfjOCX1hbuyalUrK439HyjJBG.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/newsreader/v26/cY9AfjOCX1hbuyalUrK439DyjJBG.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;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/newsreader/v26/cY9AfjOCX1hbuyalUrK4397yjA.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;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/newsreader/v26/cY9AfjOCX1hbuyalUrK439HyjJBG.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/newsreader/v26/cY9AfjOCX1hbuyalUrK439DyjJBG.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;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/newsreader/v26/cY9AfjOCX1hbuyalUrK4397yjA.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;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/newsreader/v26/cY9AfjOCX1hbuyalUrK439HyjJBG.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/newsreader/v26/cY9AfjOCX1hbuyalUrK439DyjJBG.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;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/newsreader/v26/cY9AfjOCX1hbuyalUrK4397yjA.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;
}