/* ==========================================================================
   Components (BEM). Reusable on every page.
   v2 ("Lovable" look): pill buttons, uppercase nav, borderless white
   cards on sand, brown chrome, green CTA band.
   Order: skip-link · icon · button · top-bar · lang-switch · header · nav ·
          hero · page-header · breadcrumbs · card · tile · brand-panel ·
          check-list · steps · facts · timeline · cta-band · footer · form ·
          alert · table · accordion · side-nav · badge · reveal
   ========================================================================== */

/* ---------- Skip link ---------- */

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-skip);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: var(--fw-bold);
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform var(--dur-fast) var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
  color: var(--color-on-accent);
}

/* ---------- Icon (SVG sprite) ---------- */

.icon {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  fill: currentColor; /* Bootstrap Icons are filled glyphs */
}

.icon--sm { width: 1em; height: 1em; }
.icon--lg { width: 1.5rem; height: 1.5rem; }
.icon--xl { width: 2rem; height: 2rem; }

/* Icon in a tinted rounded tile (cards, steps) */
.icon-tile {
  display: inline-grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-md);
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  flex-shrink: 0;
}

.icon-tile--green {
  background: var(--color-secondary-subtle);
  color: var(--color-secondary);
}

.icon-tile--orange {
  background: var(--color-highlight-subtle);
  color: var(--color-highlight);
}

/* ---------- Button ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 3rem;              /* 48px ≥ 44px target */
  padding: 0.85rem 1.6rem;       /* Lovable .btn-coris */
  border: var(--border-w-strong) solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.btn:hover {
  text-decoration: none;
}

.btn:active {
  transform: translateY(1px);
}

/* Primary — green pill, white text (Lovable .btn-coris). ONE per view. */
.btn--primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

.btn--primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-on-accent);
}

/* Secondary — solid teal */
.btn--secondary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.btn--secondary:hover {
  background: var(--color-primary-hover);
  color: var(--color-on-primary);
}

/* Outline — teal border on light backgrounds */
.btn--outline {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn--outline:hover {
  background: var(--color-primary-subtle);
  color: var(--color-primary-hover);
}

/* Inverse outline — on dark (teal) backgrounds */
.btn--inverse {
  background: transparent;
  border-color: var(--color-inverse-text);
  color: var(--color-inverse-text);
}

.btn--inverse:hover {
  background: var(--color-inverse-text);
  color: var(--color-inverse-bg);
}

/* Text-only link button */
.btn--link {
  min-height: 2.75rem;
  padding-inline: 0;
  color: var(--color-link);
  border: 0;
}

.btn--link:hover {
  color: var(--color-link-hover);
}

.btn--link .icon {
  transition: transform var(--dur-fast) var(--ease-out);
}

.btn--link:hover .icon {
  transform: translateX(3px);
}

.btn--lg {
  min-height: 3.25rem;
  padding: 0.85rem 1.75rem;
  font-size: var(--fs-base);
}

.btn--sm {
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
}

.btn--block {
  width: 100%;
}

.btn--icon {
  width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Phone button: two-line label (caption + number) */
.btn__caption {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.9;
}

.btn__stack {
  display: grid;
  text-align: left;
}

/* ---------- Top bar ---------- */

.top-bar {
  font-size: var(--fs-sm);
  background: var(--color-inverse-bg-deep);
  color: var(--color-inverse-muted);
}

.top-bar__logo {
  display: none;
}

.top-bar__logo img {
  display: block;
  width: auto;
  height: 30px;
}

@media (min-width: 64em) {
  .top-bar__logo {
    display: block;
  }
}

.top-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 2.75rem;
}

.top-bar__contacts {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-width: 0;
}

.top-bar__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  color: var(--color-inverse-muted);
  font-weight: var(--fw-regular);
  text-decoration: none;
  white-space: nowrap;
}

.top-bar__phone:hover {
  color: var(--color-inverse-text);
}

.top-bar__phone .icon {
  color: var(--color-inverse-muted);
}

/* White bold number on brown */
.top-bar__number {
  color: var(--white);
  font-weight: var(--fw-bold);
}

.top-bar__phone:hover .top-bar__number {
  text-decoration: underline;
}

.top-bar__label {
  color: var(--color-inverse-muted);
}

.top-bar__email {
  display: none;
  align-items: center;
  min-height: 2.75rem;
  gap: var(--space-2);
  color: var(--color-inverse-muted);
  text-decoration: none;
}

.top-bar__email:hover {
  color: var(--color-inverse-text);
  text-decoration: underline;
}

@media (min-width: 48em) {
  .top-bar__email {
    display: inline-flex;
  }
}

@media (max-width: 29.99em) {
  .top-bar__label {
    display: none;
  }
}

/* ---------- Language switcher ---------- */

.lang-switch {
  display: flex;
  gap: var(--space-1);
  padding: 0;
  list-style: none;
}

.lang-switch__link {
  display: inline-grid;
  place-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding-inline: var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-inverse-muted);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-decoration: none;
}

.lang-switch__link:hover {
  color: var(--color-inverse-text);
  background: var(--color-inverse-hover);
}

.lang-switch__link[aria-current="page"] {
  color: var(--color-inverse-text);
  box-shadow: inset 0 -3px 0 var(--color-inverse-accent);
}

/* Light variant (inside mobile drawer) */
.lang-switch--light .lang-switch__link {
  color: var(--color-text-secondary);
  border: var(--border-w) solid var(--color-border);
}

.lang-switch--light .lang-switch__link:hover {
  color: var(--color-text);
  background: var(--color-bg-alt);
}

.lang-switch--light .lang-switch__link[aria-current="page"] {
  color: var(--color-on-primary);
  background: var(--color-inverse-bg);
  border-color: var(--color-inverse-bg);
  box-shadow: none;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-surface);
  box-shadow: var(--shadow-md); /* Lovable .navbar-coris */
  transition: box-shadow var(--dur-base) var(--ease-out);
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-lg);
}

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 4.5rem;
  padding-block: var(--space-2);
}

@media (min-width: 64em) {
  .site-header__inner {
    min-height: var(--header-h);
  }
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

@media (min-width: 64em) {
  .site-header__actions {
    display: none;
  }
}

/* Logo: the original raster (295×97) shown at a fixed height.
   width/height attributes on <img> reserve the space (no layout shift). */
.logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 2.75rem;
  border-radius: var(--radius-sm);
}

/* The PNG has generous built-in white padding, so it is shown larger than
   the visible mark suggests. Never scale above its native 97px height. */
.logo__img {
  width: auto;
  height: 3.25rem;
}

@media (min-width: 64em) {
  .logo__img {
    height: 4.25rem;
  }
}

/* Header call button (mobile/tablet only) */
.header-call {
  color: var(--color-on-accent);
  background: var(--color-accent);
}

.header-call:hover {
  background: var(--color-accent-hover);
  color: var(--color-on-accent);
}

/* Menu toggle (hamburger) */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: 0 var(--space-4);
  border: var(--border-w-strong) solid var(--color-text);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: var(--fw-bold);
  font-size: var(--fs-nav);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
}

.menu-toggle:hover {
  border-color: var(--color-highlight);
  color: var(--color-highlight);
}

.menu-toggle .icon--close,
.menu-toggle[aria-expanded="true"] .icon--menu {
  display: none;
}

.menu-toggle[aria-expanded="true"] .icon--close {
  display: block;
}

/* Without JS the drawer cannot open: hide the toggle, show the nav inline */
.no-js .menu-toggle {
  display: none;
}

/* ---------- Main navigation ----------
   Pattern: "disclosure navigation with top-level links".
   Each top item = link to the section page + a chevron <button> that
   opens a panel (aria-expanded/aria-controls). Mobile: drawer with
   accordion panels. Desktop (≥64em): horizontal bar with wide drop-down
   panels. Without JS: desktop panels open on :hover/:focus-within;
   mobile shows the top-level links only.                                 */

.nav {
  font-size: var(--fs-base);
}

.nav__list {
  list-style: none;
  padding: 0;
}

.nav__item {
  border-bottom: var(--border-w) solid var(--color-border);
}

.nav__row {
  display: flex;
  align-items: stretch;
}

.nav__link {
  display: flex;
  flex: 1;
  align-items: center;
  min-height: 3rem;
  padding: var(--space-2) var(--space-1);
  color: var(--color-text);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-nav);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  text-decoration: none;
}

/* Lovable: hover + active = orange */
.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--color-highlight);
  text-decoration: none;
}

.nav__toggle {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  min-height: 3rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text);
}

.nav__toggle:hover,
.nav__toggle[aria-expanded="true"] {
  color: var(--color-highlight);
}

.nav__toggle .icon {
  transition: transform var(--dur-base) var(--ease-out);
}

.nav__toggle[aria-expanded="true"] .icon {
  transform: rotate(180deg);
}

.no-js .nav__toggle {
  display: none;
}

.nav__panel {
  display: none;
  padding: 0 0 var(--space-4) var(--space-3);
}

.nav__panel.is-open {
  display: block;
}

.nav__overview {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  font-weight: var(--fw-bold);
  text-decoration: none;
}

.nav__groups {
  display: grid;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
}

.nav__group-link {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--color-text);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

.nav__group-link:hover {
  color: var(--color-highlight);
  text-decoration: underline;
}

.nav__sub {
  list-style: none;
  padding: 0 0 0 var(--space-4);
  border-left: var(--border-w-strong) solid var(--color-border);
}

.nav__sub .nav__sub {
  margin-left: var(--space-2);
}

.nav__sub-link {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
  text-decoration: none;
}

.nav__sub-link:hover {
  color: var(--color-highlight);
  text-decoration: underline;
}

/* Drawer extras (phone + language) — mobile only */
.nav__drawer-extras {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-5);
}

/* ----- Mobile drawer (< 64em) ----- */
@media (max-width: 63.99em) {
  .js .nav {
    position: fixed;
    inset: var(--nav-top, 4rem) 0 0 0;
    z-index: var(--z-drawer);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-2) var(--gutter) var(--space-8);
    background: var(--color-surface);
    border-top: var(--border-w) solid var(--color-border);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-0.5rem);
    transition:
      opacity var(--dur-base) var(--ease-out),
      transform var(--dur-base) var(--ease-out),
      visibility 0s linear var(--dur-base);
  }

  .js .nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition:
      opacity var(--dur-base) var(--ease-out),
      transform var(--dur-base) var(--ease-out);
  }

  /* No JS: plain inline list under the header row */
  .no-js .site-header__inner {
    flex-wrap: wrap;
  }

  .no-js .nav {
    flex-basis: 100%;
    padding-bottom: var(--space-3);
  }

  .no-js .nav__drawer-extras {
    display: none;
  }
}

/* ----- Desktop (≥ 64em) ----- */
@media (min-width: 64em) {
  .nav {
    margin-left: auto;
  }

  .nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }

  .nav__item {
    position: static;
    border: 0;
  }

  .nav__row {
    align-items: center;
  }

  .nav__link {
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-2);
    border-radius: var(--radius-sm);
    white-space: nowrap;
  }

  .nav__item--has-panel .nav__link {
    padding-right: 0;
  }

  .nav__toggle {
    width: 2rem;
    min-height: 2.75rem;
  }

  .nav__toggle .icon {
    width: 1rem;
    height: 1rem;
  }

  .nav__panel {
    position: absolute;
    top: 100%;
    left: var(--gutter);
    right: var(--gutter);
    z-index: var(--z-dropdown);
    padding: var(--space-6);
    border: 0;
    border-top: 3px solid var(--color-highlight);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
  }

  .nav__panel.is-open {
    display: grid;
    gap: var(--space-4);
    animation: nav-panel-in var(--dur-base) var(--ease-out);
  }

  /* No-JS fallback: hover / keyboard focus opens the panel */
  .no-js .nav__item:hover > .nav__panel,
  .no-js .nav__item:focus-within > .nav__panel {
    display: grid;
    gap: var(--space-4);
  }

  .nav__groups {
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: var(--space-5) var(--space-6);
  }

  .nav__drawer-extras {
    display: none;
  }
}

@media (min-width: 80em) {
  .nav__link {
    padding-inline: var(--space-3);
  }
}

@keyframes nav-panel-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* Prevent background scrolling while the mobile drawer is open */
.has-open-drawer {
  overflow: hidden;
}

/* ---------- Hero (Lovable: full-bleed photo + brown gradient) ---------- */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--color-inverse-text);
  background: var(--color-inverse-bg);
}

@media (min-width: 64em) {
  .hero {
    min-height: var(--hero-min-h);
  }
}

/* Background photo: a real <picture>/<img> (srcset, LCP-friendly) */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hero-overlay-mobile);
}

@media (min-width: 64em) {
  .hero::before {
    background: var(--hero-overlay);
  }
}

.hero__inner {
  width: 100%;
  padding-block: var(--space-7) var(--space-8);
}

@media (min-width: 64em) {
  .hero__inner {
    padding-block: var(--space-9);
  }
}

.hero__content {
  max-width: 40rem;
}

.hero__eyebrow {
  margin-bottom: var(--space-4);
}

.hero__title {
  color: var(--color-inverse-text);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
}

.hero__brand {
  display: block; /* brand name always on its own line */
  white-space: nowrap;
  font-size: min(1em, 11vw); /* shrinks only on ~320px phones so it still fits */
  color: var(--color-inverse-accent);
}

/* Buttons always stacked; the grid column takes the widest button's width,
   so both buttons end up the same size. */
.hero__actions {
  display: grid;
  width: fit-content;
  max-width: 100%;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

.hero__call {
  white-space: nowrap;
}

@media (max-width: 29.99em) {
  .hero__actions .btn--lg {
    padding-inline: var(--space-4);
  }
}

/* Keeps "Обадете се 24/7: +359 2 9505010" on one line on 320px phones */
@media (max-width: 22.49em) {
  .hero__actions .btn--lg {
    padding-inline: var(--space-3);
    font-size: var(--fs-sm);
  }
}

.hero__note {
  margin-top: var(--space-5);
  font-size: var(--fs-sm);
  color: var(--color-inverse-muted);
}

/* ---------- Page header (inner pages) ---------- */

.page-header {
  padding-block: var(--space-7) var(--space-8);
  background: var(--color-inverse-bg);
  color: var(--color-inverse-text);
}

.page-header__title {
  color: var(--color-inverse-text);
  margin-top: var(--space-3);
}

.page-header__lead {
  margin-top: var(--space-3);
  max-width: var(--measure);
  font-size: var(--fs-md);
  color: var(--color-inverse-muted);
}

/* ---------- Breadcrumbs ---------- */

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  list-style: none;
  padding: 0;
  font-size: var(--fs-sm);
}

.breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.breadcrumbs__item + .breadcrumbs__item::before {
  content: "/";
  color: var(--color-inverse-muted);
  opacity: 0.7;
}

.breadcrumbs__link {
  color: var(--color-inverse-muted);
}

.breadcrumbs__link:hover {
  color: var(--color-inverse-text);
}

.breadcrumbs__item [aria-current="page"] {
  color: var(--color-inverse-text);
  font-weight: var(--fw-semibold);
}

/* ---------- Check list ---------- */

.check-list {
  display: grid;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
}

.check-list__item {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  font-size: 1.1rem;
}

.check-list__item .icon {
  width: 1.3rem;
  height: 1.3rem;
  color: var(--color-secondary-deco);
}

.u-inverse .check-list__item .icon,
.hero .check-list__item .icon {
  color: var(--color-inverse-accent);
}

/* ---------- Card ---------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-6);           /* Lovable .service-card: 2rem */
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  transition:
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.card__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}

.card .icon-tile {
  margin-bottom: var(--space-3);
}

.card__link {
  color: var(--color-text);
  text-decoration: none;
}

/* Whole card clickable via the title link's pseudo-element */
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
}

.card__link:focus-visible {
  outline: none;
}

.card:has(.card__link:focus-visible) {
  outline: 3px solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(var(--lift-hover));
}

.card__text {
  margin: 0;
  color: var(--color-text-secondary);
}

.card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
  color: var(--color-link);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
}

.card:hover .card__more .icon {
  transform: translateX(3px);
}

.card__more .icon {
  transition: transform var(--dur-fast) var(--ease-out);
}

/* Compact horizontal card (products) */
.card--row {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-4);
}

.card__body {
  display: grid;
  gap: var(--space-2);
}

/* Static (non-link) card */
.card--static:hover {
  transform: none;
  box-shadow: none;
}

/* ---------- Tile (Lovable .product-tile) ----------
   Sand block with a large icon and a bold label; turns orange on hover.   */

.tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
  min-height: 2.75rem;
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  background: var(--color-bg-sunken);
  color: var(--color-text);
  font-weight: var(--fw-bold);
  text-decoration: none;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.tile .icon {
  width: 2rem;
  height: 2rem;
}

.tile:hover,
.tile:focus-visible {
  background: var(--color-highlight);
  color: var(--color-on-highlight);
  text-decoration: none;
}

/* ---------- Brand panel (Lovable .about-panel) ---------- */

.brand-panel {
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-brand-panel);
  color: var(--color-on-brand-panel);
}

@media (min-width: 64em) {
  .brand-panel {
    padding: var(--space-8);
  }
}

.brand-panel h2,
.brand-panel h3 {
  color: var(--color-on-brand-panel);
}

.brand-panel .section__eyebrow {
  color: var(--color-brand-panel-stat);
}

.brand-panel .section__lead {
  color: var(--color-on-brand-panel);
}

.brand-panel :focus-visible {
  outline-color: var(--color-on-brand-panel);
}

.brand-panel__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  text-align: center;
}

.brand-panel__stat {
  display: grid;
  gap: var(--space-1);
}

.brand-panel__stat dd {
  order: -1;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  color: var(--color-brand-panel-stat);
}

/* Multi-line values ("ISO 27001" / "ISO 9001"): half the stat size, and
   shrinks further only if the stat cell is too narrow (320px phones). */
.brand-panel__stat--multi {
  container-type: inline-size;
}

.brand-panel__stat--multi dd {
  font-size: min(var(--fs-stat) / 2, 100cqi / 5.6);
}

.brand-panel__stat dd .icon {
  width: 1em;
  height: 1em;
  margin-inline: auto;
}

/* ---------- Steps ---------- */

.steps {
  display: grid;
  gap: var(--space-5);
  list-style: none;
  padding: 0;
  counter-reset: step;
}

@media (min-width: 64em) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.steps__item {
  position: relative;
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  counter-increment: step;
}

.steps__item::before {
  content: counter(step);
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-display);
  font-weight: var(--fw-black);
}

.steps__title {
  font-size: var(--fs-lg);
}

.steps__text {
  color: var(--color-text-secondary);
}

/* ---------- Facts (definition list of real facts, NOT invented stats) ---------- */

.facts {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
}

.facts__item {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: var(--border-w) solid var(--color-border);
}

.facts__value {
  order: -1;
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-primary);
  font-family: var(--font-display);
}

.facts__label {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}

/* ---------- Timeline ---------- */

.timeline {
  display: grid;
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  border-left: var(--border-w-strong) solid var(--color-border);
}

.timeline__item {
  position: relative;
  padding-left: var(--space-5);
}

.timeline__item::before {
  content: "";
  position: absolute;
  left: calc(-0.5rem - 1px);
  top: 0.35em;
  width: 1rem;
  height: 1rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border: 3px solid var(--color-primary);
}

.timeline__year {
  display: block;
  font-weight: var(--fw-bold);
  color: var(--color-primary);
}

.timeline__text {
  color: var(--color-text-secondary);
}

/* On the teal brand panel */
.timeline--inverse {
  border-left-color: var(--color-inverse-border);
}

.timeline--inverse .timeline__item::before {
  background: var(--color-brand-panel);
  border-color: var(--color-brand-panel-stat);
}

.timeline--inverse .timeline__year {
  color: var(--color-brand-panel-stat);
  font-family: var(--font-display);
}

.timeline--inverse .timeline__text {
  color: var(--color-on-brand-panel);
}

/* ---------- CTA band (Lovable: green gradient box inside the container) ---------- */

.cta-band {
  padding-block: var(--space-8);
}

.cta-band__inner {
  display: grid;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--cta-band-bg);
  color: var(--color-on-accent);
  text-align: center;
}

@media (min-width: 64em) {
  .cta-band__inner {
    grid-template-columns: 1fr auto;
    padding: var(--space-8);
    text-align: left;
  }
}

.cta-band__title {
  color: var(--color-on-accent);
}

.cta-band__text {
  margin-top: var(--space-2);
  color: var(--color-on-accent);
}

.cta-band__actions {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
}

@media (min-width: 64em) {
  .cta-band__actions {
    justify-items: end;
  }
}

.cta-band__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.75rem;
  color: var(--color-on-accent);
  font-family: var(--font-display);
  font-size: var(--fs-phone);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  text-decoration: none;
  white-space: nowrap;
}

.cta-band__phone:hover {
  color: var(--color-on-accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.cta-band__phone .icon {
  width: 0.85em;
  height: 0.85em;
}

.cta-band :focus-visible {
  outline-color: var(--color-on-accent);
}

/* ---------- Footer ---------- */

.site-footer {
  margin-top: var(--space-5);
  background: var(--color-inverse-bg-deep);
  color: var(--color-inverse-muted);
  font-size: var(--fs-sm);
}

.site-footer__main {
  display: grid;
  gap: var(--space-7);
  padding-block: var(--space-9) var(--space-7);
}

@media (min-width: 48em) {
  .site-footer__main {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64em) {
  .site-footer__main {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
}

.site-footer__title {
  margin-bottom: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  letter-spacing: 0;
  color: var(--color-inverse-muted);
}

/* Lovable wordmark style for the company name (the raster logo has a
   white box and is never placed on brown) */
.site-footer__company {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-heading);
  color: var(--color-primary);
}

.site-footer__company span {
  font-weight: var(--fw-regular);
}

.site-footer__links {
  display: grid;
  gap: 0;
  list-style: none;
  padding: 0;
}

.site-footer__link,
.site-footer a:not([class]) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  color: var(--color-inverse-muted);
  text-decoration: none;
}

.site-footer__link:hover,
.site-footer a:not([class]):hover {
  color: var(--color-highlight);
}

.site-footer :focus-visible {
  outline-color: var(--color-focus-inverse);
}

.site-footer__contact {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-4);
}

.site-footer__contact-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.site-footer__contact-row .icon {
  margin-top: 0.8em;
  color: var(--color-highlight);
}

.site-footer__contact-row > span {
  padding-block: var(--space-2);
}

.site-footer__contact-row > .site-footer__phones,
.site-footer__contact-row > .site-footer__email-wrap {
  padding-block: 0;
}

.site-footer__contact-row .icon {
  flex-shrink: 0;
}

.site-footer__phones {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-4);
}

.site-footer__phone {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: var(--fw-bold);
  color: var(--color-inverse-text);
  text-decoration: none;
}

.site-footer__phone:hover {
  color: var(--color-highlight);
}

.site-footer__bottom {
  border-top: var(--border-w) solid var(--color-inverse-border);
}

.site-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  padding-block: var(--space-4);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-5);
  list-style: none;
  padding: 0;
}

/* ---------- Forms ---------- */

.form {
  display: grid;
  gap: var(--space-5);
}

.form__row {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 48em) {
  .form__row--2 {
    grid-template-columns: 1fr 1fr;
  }
}

.fieldset {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-lg);
}

.fieldset__legend {
  padding-inline: var(--space-2);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}

.field {
  display: grid;
  gap: var(--space-2);
}

.field__label {
  font-weight: var(--fw-semibold);
}

.field__required {
  color: var(--color-error);
}

.field__hint {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.field__input,
.field__select,
.field__textarea {
  width: 100%;
  min-height: 3rem;
  padding: var(--space-3) var(--space-4);
  border: var(--border-w) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--fs-base);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.field__textarea {
  min-height: 8rem;
  resize: vertical;
}

.field__input:hover,
.field__select:hover,
.field__textarea:hover {
  border-color: var(--color-text-muted);
}

.field__input:focus-visible,
.field__select:focus-visible,
.field__textarea:focus-visible {
  outline: none;
  border-color: var(--color-focus);
  box-shadow: var(--focus-ring);
}

.field__input:disabled {
  background: var(--color-bg-sunken);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.field--error .field__input,
.field--error .field__select,
.field--error .field__textarea {
  border-color: var(--color-error);
  border-width: var(--border-w-strong);
}

.field--success .field__input {
  border-color: var(--color-success);
}

.field__message {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.field__message .icon {
  margin-top: 0.1em;
}

.field__message--error { color: var(--color-error); }
.field__message--success { color: var(--color-success); }

/* Checkbox / radio */
.choice {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  min-height: 2.75rem;
  padding-block: var(--space-2);
  cursor: pointer;
}

.choice__input {
  flex-shrink: 0;
  width: 1.375rem;
  height: 1.375rem;
  margin-top: 0.1em;
  accent-color: var(--color-primary);
}

/* File upload (native input styled as a drop zone) */
.upload {
  display: grid;
  gap: var(--space-2);
  justify-items: center;
  padding: var(--space-6) var(--space-4);
  border: var(--border-w-strong) dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-bg-alt);
  text-align: center;
}

.upload:focus-within {
  border-color: var(--color-focus);
  box-shadow: var(--focus-ring);
}

.upload .icon {
  color: var(--color-primary);
}

.upload__input {
  max-width: 100%;
  font-size: var(--fs-sm);
}

.upload__input::file-selector-button {
  min-height: 2.75rem;
  margin-right: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border: var(--border-w-strong) solid var(--color-primary);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-primary);
  font-weight: var(--fw-bold);
  cursor: pointer;
}

/* ---------- Alert ---------- */

.alert {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid currentColor;
  border-radius: var(--radius-md);
}

.alert__title {
  font-weight: var(--fw-bold);
}

.alert__body {
  display: grid;
  gap: var(--space-1);
  color: var(--color-text);
}

.alert .icon {
  margin-top: 0.15em;
}

.alert--info    { background: var(--color-info-bg);    color: var(--color-info); }
.alert--success { background: var(--color-success-bg); color: var(--color-success); }
.alert--warning { background: var(--color-warning-bg); color: var(--color-warning); }
.alert--error   { background: var(--color-error-bg);   color: var(--color-error); }

/* ---------- Table ---------- */

.table-wrap {
  overflow-x: auto;
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-lg);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.table caption {
  padding: var(--space-4);
  text-align: left;
  font-weight: var(--fw-bold);
}

.table th,
.table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-w) solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.table thead th {
  background: var(--color-primary-subtle);
  color: var(--color-primary-strong);
  font-weight: var(--fw-bold);
}

.table tbody tr:nth-child(even) {
  background: var(--color-bg-alt);
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

/* ---------- Accordion (native <details>) ---------- */

.accordion {
  border-top: var(--border-w) solid var(--color-border);
}

.accordion__item {
  border-bottom: var(--border-w) solid var(--color-border);
}

.accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 3.5rem;
  padding-block: var(--space-3);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  cursor: pointer;
  list-style: none;
}

.accordion__summary::-webkit-details-marker {
  display: none;
}

.accordion__summary .icon {
  color: var(--color-primary);
  transition: transform var(--dur-base) var(--ease-out);
}

.accordion__item[open] .accordion__summary .icon {
  transform: rotate(180deg);
}

.accordion__content {
  padding-bottom: var(--space-5);
  color: var(--color-text-secondary);
}

/* ---------- Side navigation (inner pages) ---------- */

.side-nav {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.side-nav__title {
  margin-bottom: var(--space-3);
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.side-nav__list {
  list-style: none;
  padding: 0;
}

.side-nav__link {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid transparent;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--color-text);
  text-decoration: none;
}

.side-nav__link:hover {
  background: var(--color-bg);
  color: var(--color-highlight);
}

.side-nav__link[aria-current="page"] {
  border-left-color: var(--color-highlight);
  background: var(--color-bg);
  color: var(--color-highlight);
  font-weight: var(--fw-bold);
}

/* ---------- Badge ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-primary-subtle);
  color: var(--color-primary-strong);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.03em;
}

.badge--inverse {
  background: var(--color-inverse-subtle);
  color: var(--color-inverse-text);
}

/* ---------- Scroll reveal (progressive enhancement) ----------
   Only hidden when JS is running AND motion is allowed. Uses opacity +
   transform only, so there is no layout shift.                         */

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity var(--dur-slow) var(--ease-out),
      transform var(--dur-slow) var(--ease-out);
  }

  .js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }
}

/* Link-style button on the teal brand panel */
.brand-panel .btn--link,
.brand-panel .btn--link:hover {
  color: var(--color-on-brand-panel);
}

/* ---------- Cookie consent (banner + settings dialog) ----------
   Non-modal banner at the bottom: it never blocks the page (no cookie wall).
   "Accept all" and "Reject all" share one style so neither is nudged.   */

.cookie-banner {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-drawer);
  padding: var(--space-3);
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-5);
  background: var(--color-surface);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
}

.cookie-banner__text {
  flex: 1 1 28rem;
  font-size: var(--fs-sm);
}

.cookie-banner__text p {
  margin: 0;
}

.cookie-banner__title,
.cookie-dialog__title {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-md);
}

.cookie-banner .btn--link {
  padding-inline: var(--space-2);
  background: transparent;
}

.cookie-banner__actions,
.cookie-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.cookie-dialog {
  /* the base reset removes the UA's auto margins that centre a modal dialog */
  margin: auto;
  width: min(36rem, calc(100% - 2 * var(--space-4)));
  max-height: calc(100dvh - 2 * var(--space-4));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
}

.cookie-dialog::backdrop {
  background: rgb(0 0 0 / 0.45);
}

.cookie-dialog__form {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-5) var(--space-5);
  font-size: var(--fs-sm);
}

.cookie-dialog__form > p {
  margin: 0;
  padding-right: var(--space-7);
}

.cookie-dialog__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background: transparent;
  color: var(--color-text);
}

.cookie-dialog__list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cookie-dialog__item {
  padding: var(--space-4);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-md);
}

.cookie-dialog__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.cookie-dialog__name {
  font-weight: var(--fw-bold);
}

.cookie-dialog__desc,
.cookie-dialog__note {
  margin: var(--space-2) 0 0;
  color: var(--color-text-secondary);
}

/* On/off switch built on a native checkbox */
.cookie-switch {
  appearance: none;
  flex: none;
  position: relative;
  width: 2.75rem;
  height: 1.5rem;
  margin: 0;
  border-radius: var(--radius-pill);
  background: var(--color-border-strong);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.cookie-switch::after {
  content: "";
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: var(--white);
  transition: transform var(--dur-fast) var(--ease-out);
}

.cookie-switch:checked {
  background: var(--color-primary);
}

.cookie-switch:checked::after {
  transform: translateX(1.25rem);
}

@media (prefers-reduced-motion: reduce) {
  .cookie-switch,
  .cookie-switch::after {
    transition: none;
  }
}