/* ==========================================================================
   Kovinski izdelki Hrast d.o.o. — site stylesheet
   Brand: #006369 (logo teal) · #FDC900 (legacy amber accent)
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */

:root {
  /* Brand */
  --brand:          #006369;
  --brand-700:      #00565C;
  --brand-800:      #003F44;
  --brand-900:      #002B2F;
  --brand-050:      #E7F1F1;
  --brand-100:      #CFE3E4;

  --accent:         #FDC900;
  --accent-700:     #E0B000;

  /* Emphasis inside the large hero headline. Deliberately NOT --accent: amber
     works on small elements (buttons, tick marks) but vibrates against the teal
     at display size, and keeping it off the headline leaves the CTA as the only
     warm element on the page. This is a lightened form of the logo teal. */
  --hero-em:        #7FD8CF;

  /* Neutrals */
  --ink:            #16211F;
  --ink-2:          #354644;
  --muted:          #5E706E;
  --line:           #DDE6E5;
  --line-soft:      #EAF0EF;
  --surface:        #FFFFFF;
  --surface-2:      #F4F8F7;
  --surface-3:      #EAF1F0;

  /* Layout */
  --maxw:           1240px;
  --maxw-narrow:    860px;
  --gutter:         clamp(20px, 5vw, 56px);
  --radius:         14px;
  --radius-sm:      9px;

  /* Elevation */
  --shadow-1:       0 1px 2px rgba(0, 45, 48, .06), 0 2px 8px rgba(0, 45, 48, .05);
  --shadow-2:       0 4px 12px rgba(0, 45, 48, .08), 0 14px 34px rgba(0, 45, 48, .09);
  --shadow-3:       0 10px 24px rgba(0, 45, 48, .12), 0 26px 60px rgba(0, 45, 48, .14);

  /* Type */
  --font: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas,
               "Liberation Mono", monospace;

  --step--1: clamp(.82rem, .80rem + .10vw, .88rem);
  --step-0:  clamp(1rem, .97rem + .14vw, 1.075rem);
  --step-1:  clamp(1.16rem, 1.10rem + .28vw, 1.35rem);
  --step-2:  clamp(1.38rem, 1.26rem + .55vw, 1.75rem);
  --step-3:  clamp(1.65rem, 1.42rem + 1.05vw, 2.35rem);
  --step-4:  clamp(2.00rem, 1.60rem + 1.85vw, 3.25rem);
  --step-5:  clamp(2.35rem, 1.75rem + 2.75vw, 4.10rem);

  --header-h: 74px;
  --topbar-h: 38px;
}

/* --- 2. Reset ------------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.68;
  color: var(--ink-2);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .55em;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.018em;
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p  { margin: 0 0 1.15em; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

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

ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; }
li { margin-bottom: .42em; }
li::marker { color: var(--brand); }

strong { color: var(--ink); font-weight: 650; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

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

::selection { background: var(--brand); color: #fff; }

/* --- 3. Layout primitives ------------------------------------------------ */

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

.wrap--narrow { max-width: var(--maxw-narrow); }

.section { padding-block: clamp(56px, 8vw, 104px); }
.section--tight { padding-block: clamp(40px, 5.5vw, 68px); }
.section--alt  { background: var(--surface-2); }
.section--line { border-top: 1px solid var(--line-soft); }

.section--dark {
  background:
    radial-gradient(120% 130% at 12% 0%, #00787E 0%, transparent 55%),
    linear-gradient(160deg, var(--brand-800) 0%, var(--brand-900) 100%);
  color: #C8DBDA;
}
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark strong { color: #fff; }
/* :not(.btn) matters — this selector outranks `.btn--accent`, and without the
   exclusion an accent button here renders amber-on-amber (invisible until hover,
   when `.btn--accent:hover` ties on specificity and wins on source order). */
.section--dark a:not(.btn) { color: var(--accent); }

.stack > * + * { margin-top: 1.15em; }

.grid { display: grid; gap: clamp(20px, 2.4vw, 32px); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* --- 4. Type helpers ----------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  margin: 0 0 .9rem;
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--accent);
  flex: none;
}
.section--dark .eyebrow { color: var(--accent); }
.section--dark .eyebrow::before { background: var(--accent); }

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-2);
}
.section--dark .lede { color: #C8DBDA; }

.section-head { max-width: 68ch; margin-bottom: clamp(32px, 4vw, 52px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

.muted { color: var(--muted); }
.small { font-size: var(--step--1); }

/* --- 5. Buttons ---------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: .82em 1.5em;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s,
              transform .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: var(--shadow-1);
}
.btn--primary:hover { background: var(--brand-800); border-color: var(--brand-800); color: #fff; box-shadow: var(--shadow-2); }

.btn--accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #1A1400;
  box-shadow: var(--shadow-1);
}
.btn--accent:hover { background: var(--accent-700); border-color: var(--accent-700); color: #1A1400; box-shadow: var(--shadow-2); }

.btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-050); }

.btn--on-dark {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .38);
  color: #fff;
  backdrop-filter: blur(4px);
}
.btn--on-dark:hover { background: rgba(255, 255, 255, .16); border-color: #fff; color: #fff; }

/* Teal-on-teal and dark-ink-on-teal are unreadable — recolour inside dark bands. */
.section--dark .btn--ghost,
.ctaband .btn--ghost {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .38);
  color: #fff;
}
.section--dark .btn--ghost:hover,
.ctaband .btn--ghost:hover { background: rgba(255, 255, 255, .16); border-color: #fff; color: #fff; }

.section--dark .btn--primary,
.ctaband .btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #1A1400;
}
.section--dark .btn--primary:hover,
.ctaband .btn--primary:hover { background: var(--accent-700); border-color: var(--accent-700); color: #1A1400; }

.section--dark .arrow-link { color: var(--accent); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-weight: 650;
  font-size: var(--step--1);
  letter-spacing: .03em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--brand);
}
.arrow-link::after { content: "→"; transition: transform .2s; }
.arrow-link:hover::after { transform: translateX(4px); }

/* --- 6. Top bar ---------------------------------------------------------- */

.topbar {
  background: var(--brand-900);
  color: #9FBDBC;
  font-size: .8rem;
  letter-spacing: .01em;
}
.topbar__inner {
  min-height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.topbar__facts { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.topbar a { color: #CFE3E2; text-decoration: none; }
.topbar a:hover { color: #fff; text-decoration: underline; }
.topbar__badge {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  color: #EAF3F2;
}
.topbar__badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
@media (max-width: 780px) { .topbar { display: none; } }

/* --- 6a. Cookie notice bar ------------------------------------------------ */

/* Fixed to the bottom rather than pushed into the flow: the bar appears after
   first paint, and any layout-affecting placement would shift the page under
   the reader — a Core Web Vitals penalty on every first visit. It deliberately
   does not cover the page or trap focus. */
.notice-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: var(--ink);
  color: #E8EEEE;
  border-top: 3px solid var(--brand);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, .28);
}
.notice-bar[hidden] { display: none; }

/* The bar is fixed at z-index 200, the drawer paints inside the header's
   stacking context at 100, so on a phone the bar would sit on top of the open
   menu and cover its last item. Raising the header instead would push it past
   the skip link and break keyboard access, so the bar simply steps aside while
   the menu is open and returns when it closes. */
body.nav-open .notice-bar { display: none; }

.notice-bar__inner {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 32px);
  padding-top: 16px;
  padding-bottom: 16px;
}

.notice-bar__text {
  margin: 0;
  font-size: .88rem;
  line-height: 1.55;
  color: #D5DEDE;
}

/* The GDPR link sits on a dark bar, where the default link colour fails
   contrast. Underlined and near-white so it still reads as a link. */
.notice-bar__text a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.notice-bar__text a:hover { color: var(--hero-em); }

.notice-bar__btn {
  flex-shrink: 0;
  padding: .55em 1.8em;
  font-size: .85rem;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .notice-bar__inner { flex-direction: column; align-items: stretch; gap: 14px; }
  .notice-bar__btn { width: 100%; text-align: center; }
}

/* --- 6b. Language switcher ----------------------------------------------- */

/* Rendered twice per page: as a dropdown in the top bar, and as a plain list
   inside the mobile drawer (the top bar is hidden below 780px). */
.langs { position: relative; display: inline-flex; }

/* Inline SVG flags. The hairline ring keeps the light edges of a flag (the white
   band of Slovenia, the white stripe of France) from bleeding into the menu
   background — without it those flags look clipped rather than framed. */
.flag {
  flex: 0 0 auto;
  width: 21px;
  height: 15px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .16) inset;
}
.langs__toggle .flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, .3) inset; }

.langs__toggle {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .25em .6em;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: transparent;
  color: #CFE3E2;
  font: inherit;
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .08em;
  cursor: pointer;
  transition: background-color .18s, border-color .18s, color .18s;
}
.langs__toggle:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .45); color: #fff; }
.langs__caret { width: 9px; height: 9px; opacity: .7; transition: transform .2s; }
.langs__toggle[aria-expanded="true"] .langs__caret { transform: rotate(180deg); }

.langs__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 120;
  min-width: 168px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s, transform .18s, visibility .18s;
}
.langs__toggle[aria-expanded="true"] + .langs__menu { opacity: 1; visibility: visible; transform: translateY(0); }

.langs__menu li { margin: 0; }
.langs__menu a {
  display: flex;
  align-items: center;
  gap: .65em;
  padding: .5em .8em;
  border-radius: 6px;
  font-size: .88rem;
  font-weight: 550;
  text-decoration: none;
  color: var(--ink-2);
}
.langs__menu a:hover { background: var(--brand-050); color: var(--brand); }
.langs__menu a[aria-current="true"] {
  color: var(--brand);
  background: var(--brand-050);
  font-weight: 650;
}

/* Mobile drawer variant */
.nav__langs { padding: 1.2em .2em .4em; border-bottom: 0 !important; }
.nav__langs-label {
  display: block;
  margin-bottom: .7em;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav__langs ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__langs li { margin: 0; }
.nav__langs a {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .4em .9em;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 550;
  text-decoration: none;
  color: var(--ink-2);
}
.nav__langs a:hover { border-color: var(--brand); color: var(--brand); }
.nav__langs a[aria-current="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
@media (min-width: 1121px) { .nav__langs { display: none; } }

/* --- 7. Header + navigation ---------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow .25s, border-color .25s;
}

/* The frosted background sits on a pseudo-element, NOT on .header itself.
   backdrop-filter makes an element the containing block for its position:fixed
   descendants. With the filter on .header, the mobile drawer (.nav, fixed,
   inset: 74px 0 0) was laid out against the 74px-tall header instead of the
   viewport, so it collapsed to a sliver under the bar and the hero showed
   through. One level down, the drawer is anchored to the viewport again.

   The translucent white has to move here too: backdrop-filter blurs whatever is
   painted *behind* the element, so leaving the background on .header would mean
   this pseudo blurs that flat white instead of the page scrolling underneath. */
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.6) blur(12px);
  pointer-events: none;
}
.header.is-stuck { box-shadow: 0 4px 20px rgba(0, 45, 48, .10); border-color: transparent; }

.header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
}

.brand { display: flex; align-items: center; flex: none; text-decoration: none; }
.brand img { height: 46px; width: auto; }
@media (max-width: 420px) { .brand img { height: 38px; } }

.nav { margin-left: auto; }
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(2px, 1vw, 8px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__list > li { margin: 0; position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .65em .78em;
  border-radius: 8px;
  font-size: .855rem;
  font-weight: 600;
  letter-spacing: .035em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
  transition: color .18s, background-color .18s;
}
.nav__link:hover { color: var(--brand); background: var(--brand-050); }
.nav__link[aria-current="page"],
.nav__item.is-active > .nav__link { color: var(--brand); }
.nav__item.is-active > .nav__link::after,
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: .78em; right: .78em;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.nav__caret { width: 9px; height: 9px; flex: none; opacity: .55; transition: transform .2s; }
.nav__item:hover .nav__caret, .nav__item:focus-within .nav__caret { transform: rotate(180deg); }

.nav__sub {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 268px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s, transform .18s, visibility .18s;
}
.nav__item:hover > .nav__sub,
.nav__item:focus-within > .nav__sub { opacity: 1; visibility: visible; transform: translateY(0); }

.nav__sub li { margin: 0; }
.nav__sub a {
  display: block;
  padding: .62em .78em;
  border-radius: 6px;
  font-size: .88rem;
  font-weight: 550;
  line-height: 1.35;
  text-decoration: none;
  color: var(--ink-2);
}
.nav__sub a:hover { background: var(--brand-050); color: var(--brand); }
.nav__sub a[aria-current="page"] { color: var(--brand); background: var(--brand-050); }

.header__cta { flex: none; margin-left: 6px; }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 9px;
  cursor: pointer;
  color: var(--ink);
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block;
  width: 19px; height: 2px;
  margin-inline: auto;
  background: currentColor;
  border-radius: 2px;
  transition: transform .25s, opacity .2s;
}
.nav-toggle span { position: relative; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1120px) {
  .nav-toggle { display: block; }
  .header__cta { display: none; }
  .nav {
    position: fixed;
    inset: calc(var(--header-h)) 0 0;
    margin: 0;
    padding: 18px var(--gutter) 48px;
    background: #fff;
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .3s ease, visibility .3s;
  }
  .nav.is-open { transform: translateX(0); visibility: visible; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list > li { border-bottom: 1px solid var(--line-soft); }
  .nav__link { padding: 1.05em .2em; font-size: .95rem; justify-content: space-between; }
  .nav__link::after { display: none !important; }
  .nav__sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--brand-100);
    border-radius: 0;
    margin: 0 0 12px 6px;
    padding: 0 0 0 12px;
  }
  .nav__sub a { padding: .62em .2em; }
  .nav__caret { display: none; }
}

.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 200;
  padding: .7em 1.2em;
  background: var(--brand);
  color: #fff;
  border-radius: 0 0 8px 8px;
  font-weight: 650;
  text-decoration: none;
  transition: top .2s;
}
.skip-link:focus { top: 0; color: #fff; }

/* --- 8. Hero ------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  color: #DCEAE9;
  background: var(--brand-900);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(102deg, rgba(0, 33, 36, .95) 0%, rgba(0, 43, 47, .88) 42%, rgba(0, 62, 66, .62) 72%, rgba(0, 70, 74, .48) 100%);
}
.hero__inner {
  padding-block: clamp(72px, 11vw, 140px);
  max-width: 800px;
}
.hero h1 {
  color: #fff;
  font-size: var(--step-5);
  letter-spacing: -.028em;
  margin-bottom: .45em;
}
.hero h1 em { font-style: normal; color: var(--hero-em); }
.hero__sub {
  font-size: var(--step-1);
  line-height: 1.55;
  color: #C4DAD9;
  max-width: 62ch;
  margin-bottom: 2rem;
}
/* The global `strong { color: var(--ink) }` is near-black and `a { color: var(--brand) }`
   is dark teal — both unreadable on the dark hero, which is not a .section--dark.
   Same applies to pagehero and the CTA band. */
.hero strong,
.pagehero strong,
.ctaband strong { color: #fff; }

.hero__sub a,
.pagehero__sub a,
.ctaband p a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .5);
}
.hero__sub a:hover,
.pagehero__sub a:hover,
.ctaband p a:hover { color: var(--accent); text-decoration-color: var(--accent); }
.hero .eyebrow { color: var(--accent); }
.hero .eyebrow::before { background: var(--accent); }

.hero__certs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2.4rem;
  padding: 0;
  list-style: none;
}
.hero__certs li {
  margin: 0;
  padding: .48em 1em;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #DCEAE9;
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(3px);
}

/* Page hero (interior pages) */
.pagehero {
  position: relative;
  isolation: isolate;
  color: #D6E7E6;
  background:
    radial-gradient(90% 140% at 88% 8%, #007A80 0%, transparent 58%),
    linear-gradient(160deg, var(--brand-800) 0%, var(--brand-900) 100%);
}
.pagehero--photo .pagehero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.pagehero--photo .pagehero__media img { width: 100%; height: 100%; object-fit: cover; }
.pagehero--photo::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(0, 33, 36, .94) 0%, rgba(0, 45, 49, .86) 55%, rgba(0, 62, 66, .66) 100%);
}
.pagehero__inner { padding-block: clamp(48px, 7vw, 88px); max-width: 830px; }
.pagehero h1 { color: #fff; margin-bottom: .35em; }
.pagehero__sub { font-size: var(--step-1); line-height: 1.55; color: #B9D2D1; max-width: 62ch; margin: 0; }
.pagehero .eyebrow { color: var(--accent); }
.pagehero .eyebrow::before { background: var(--accent); }

/* --- 9. Breadcrumbs ------------------------------------------------------ */

.crumbs { border-bottom: 1px solid var(--line-soft); background: var(--surface); }
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5em;
  margin: 0;
  padding: .9rem 0;
  list-style: none;
  font-size: .8rem;
  color: var(--muted);
}
.crumbs li { margin: 0; display: flex; align-items: center; gap: .5em; }
.crumbs li + li::before { content: "/"; color: var(--line); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--brand); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* --- 10. Stats ----------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.stat { background: #fff; padding: clamp(20px, 2.6vw, 32px); text-align: center; }
.stat__value {
  display: block;
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.65rem);
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--brand);
  margin-bottom: .3rem;
}
.stat__label {
  font-size: .78rem;
  font-weight: 620;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.4;
}
/* Lifted over the bottom edge of the hero. */
.stats--onhero {
  position: relative;
  z-index: 2;
  margin-top: clamp(-58px, -4vw, -30px);
  box-shadow: var(--shadow-3);
}
@media (max-width: 780px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- 11. Cards ----------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--brand-100); }

.card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-3); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .card__media img { transform: scale(1.045); }

.card__body { padding: clamp(20px, 2.4vw, 28px); display: flex; flex-direction: column; flex: 1; }
.card__body h3 { font-size: var(--step-1); margin-bottom: .5rem; }
.card__body p  { font-size: .955rem; color: var(--muted); }
.card__body .arrow-link { margin-top: auto; padding-top: 1.1rem; align-self: flex-start; }

.card--link { text-decoration: none; color: inherit; }

/* Feature card (icon + text, no photo) */
.fcard {
  padding: clamp(22px, 2.6vw, 32px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.fcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--brand-100); }
.fcard h3 { font-size: var(--step-1); margin-bottom: .5rem; }
.fcard p { font-size: .955rem; color: var(--muted); margin: 0; }
.fcard__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  margin-bottom: 1rem;
  border-radius: 11px;
  background: var(--brand-050);
  color: var(--brand);
  font-weight: 750;
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
}
.section--dark .fcard {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .14);
}
.section--dark .fcard:hover { background: rgba(255, 255, 255, .085); border-color: rgba(255, 255, 255, .3); }
.section--dark .fcard p { color: #B4CDCC; }
.section--dark .fcard__num { background: rgba(253, 201, 0, .16); color: var(--accent); }

/* --- 12. Split (text + image) -------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4.5vw, 68px);
  align-items: center;
}
.split--reverse .split__media { order: -1; }
@media (max-width: 860px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split--reverse .split__media { order: 0; }
}

.split__media img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}
.split__media--framed {
  position: relative;
  /* Own stacking context, so the z-index:-1 frame stays above the section
     background instead of disappearing behind it. */
  isolation: isolate;
  padding: 0 0 16px 16px;
}
.split__media--framed::before {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 62%; height: 68%;
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  z-index: -1;
}
.split__media--framed img { position: relative; }

/* --- 13. Specification tables -------------------------------------------- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); }

table.spec {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: .95rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
table.spec caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 .9rem;
  font-size: .82rem;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
table.spec th, table.spec td {
  padding: .82em 1.1em;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
table.spec thead th {
  background: var(--brand-800);
  color: #fff;
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom: 0;
}
table.spec tbody th { font-weight: 650; color: var(--ink); width: 38%; }
table.spec tbody tr:last-child th, table.spec tbody tr:last-child td { border-bottom: 0; }
table.spec tbody tr:nth-child(even) { background: var(--surface-2); }

/* --- 14. Lists ------------------------------------------------------------ */

.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: .7em; }
.ticks li { position: relative; margin: 0; padding-left: 1.85em; }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: .48em;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(253, 201, 0, .22);
}
.ticks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7em 2em; }
@media (max-width: 620px) { .ticks--2 { grid-template-columns: minmax(0, 1fr); } }
.section--dark .ticks li::before { box-shadow: 0 0 0 3px rgba(253, 201, 0, .18); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chips li {
  margin: 0;
  padding: .45em .95em;
  background: var(--brand-050);
  border: 1px solid var(--brand-100);
  border-radius: 999px;
  font-size: .84rem;
  font-weight: 550;
  color: var(--brand-800);
}
.section--dark .chips li {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .18);
  color: #DCEAE9;
}

/* --- 15. Key facts box (AI/LLM extraction friendly) ---------------------- */

.keyfacts {
  padding: clamp(22px, 2.8vw, 34px);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-sm);
}
.keyfacts h2, .keyfacts h3 {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 1rem;
}
.keyfacts dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .6em 1.4em; font-size: .94rem; }
.keyfacts dt { font-weight: 650; color: var(--ink); }
.keyfacts dd { margin: 0; color: var(--ink-2); }
@media (max-width: 560px) {
  .keyfacts dl { grid-template-columns: minmax(0, 1fr); gap: .15em; }
  .keyfacts dd { margin-bottom: .7em; }
}

/* --- 16. Gallery --------------------------------------------------------- */

.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.gallery--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery figure {
  margin: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-3);
  border: 1px solid var(--line);
}
.gallery img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .45s ease;
}
.gallery figure:hover img { transform: scale(1.05); }
.gallery figcaption {
  padding: .7em .9em;
  font-size: .8rem;
  color: var(--muted);
  background: #fff;
  border-top: 1px solid var(--line-soft);
}
@media (max-width: 900px) { .gallery, .gallery--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .gallery, .gallery--3 { grid-template-columns: minmax(0, 1fr); } }

/* --- 17. FAQ ------------------------------------------------------------- */

.faq { display: grid; gap: 12px; }
.faq details {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.faq details[open] { border-color: var(--brand-100); box-shadow: var(--shadow-1); }
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.2em;
  padding: 1.05em 1.3em;
  cursor: pointer;
  font-size: var(--step-0);
  font-weight: 650;
  color: var(--ink);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  font-size: 1.4em;
  line-height: 1;
  font-weight: 400;
  color: var(--brand);
  transition: transform .25s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--brand); }
.faq__body { padding: 0 1.3em 1.35em; color: var(--ink-2); font-size: .965rem; }
.faq__body > :first-child { margin-top: 0; }

/* --- 18. Certificates ---------------------------------------------------- */

.certs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 28px); }
.cert {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.cert:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--brand-100); }
.cert__img { background: var(--surface-2); padding: 18px; border-bottom: 1px solid var(--line-soft); }
.cert__img img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; object-position: top center; }
.cert__body { padding: 18px 20px 22px; }
.cert__body h3 { font-size: var(--step-0); margin-bottom: .25rem; }
.cert__body p { margin: 0; font-size: .875rem; color: var(--muted); }
@media (max-width: 860px) { .certs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .certs { grid-template-columns: minmax(0, 1fr); } }

/* --- 19. CTA band -------------------------------------------------------- */

.ctaband {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(80% 160% at 85% 20%, #007C82 0%, transparent 60%),
    linear-gradient(150deg, var(--brand-800) 0%, var(--brand-900) 100%);
  color: #C8DBDA;
}
.ctaband::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(70% 100% at 30% 50%, #000 0%, transparent 75%);
}
.ctaband__inner {
  padding-block: clamp(52px, 7vw, 92px);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.ctaband h2 { color: #fff; margin-bottom: .5rem; }
.ctaband p { color: #B9D2D1; margin: 0; }
.ctaband__actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.ctaband__actions .btn { width: 100%; }
@media (max-width: 800px) {
  .ctaband__inner { grid-template-columns: minmax(0, 1fr); }
  .ctaband__actions { flex-direction: row; flex-wrap: wrap; }
  .ctaband__actions .btn { width: auto; }
}

/* --- 20. Contact --------------------------------------------------------- */

.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.person {
  padding: clamp(20px, 2.4vw, 28px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .2s, box-shadow .2s;
}
.person:hover { border-color: var(--brand-100); box-shadow: var(--shadow-1); }
.person h3 { font-size: var(--step-0); margin-bottom: .15rem; }
.person__role {
  display: block;
  margin-bottom: .9rem;
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--brand);
}
.person a { display: inline-block; font-size: .93rem; text-decoration: none; font-variant-numeric: tabular-nums; }
.person a:hover { text-decoration: underline; }
@media (max-width: 900px) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .people { grid-template-columns: minmax(0, 1fr); } }

.contact-tile {
  display: block;
  padding: clamp(22px, 2.6vw, 30px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.contact-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--brand-100); color: inherit; }
.contact-tile h3 { font-size: var(--step-0); margin-bottom: .4rem; }
.contact-tile p { font-size: .93rem; color: var(--muted); margin-bottom: .9rem; }
.contact-tile strong { display: block; color: var(--brand); font-size: 1.05rem; word-break: break-word; }

.map-frame {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
  line-height: 0;
}
.map-frame iframe { width: 100%; height: clamp(300px, 42vw, 460px); border: 0; }

/* --- 21. Forms ----------------------------------------------------------- */

.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 620px) { .form__row { grid-template-columns: minmax(0, 1fr); } }

.field { display: grid; gap: .45em; }
.field label { font-size: .84rem; font-weight: 650; color: var(--ink); letter-spacing: .01em; }
.field .req { color: #B4501E; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .78em 1em;
  font: inherit;
  font-size: .96rem;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color .18s, box-shadow .18s;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(0, 99, 105, .14);
}
.field__hint { font-size: .8rem; color: var(--muted); }

.consent { display: flex; gap: .7em; align-items: flex-start; font-size: .86rem; color: var(--muted); }
.consent input { width: 18px; height: 18px; margin-top: .2em; flex: none; accent-color: var(--brand); }

/* --- 22. Documents / downloads ------------------------------------------- */

.doclist { display: grid; gap: 10px; }
.doc {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 1.05em 1.25em;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.doc:hover { border-color: var(--brand); box-shadow: var(--shadow-1); transform: translateX(3px); color: inherit; }
.doc__tag {
  flex: none;
  padding: .3em .6em;
  border-radius: 5px;
  background: var(--brand-050);
  color: var(--brand-800);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
}
.doc__name { flex: 1; font-weight: 600; color: var(--ink); font-size: .96rem; }
.doc__meta { font-size: .8rem; color: var(--muted); }

/* --- 23. Timeline / projects --------------------------------------------- */

.project {
  padding: clamp(24px, 3vw, 38px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.project + .project { margin-top: clamp(20px, 2.4vw, 28px); }
.project__head { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: baseline; margin-bottom: 1.1rem; }
.project__head h3 { margin: 0; font-size: var(--step-2); }
.project__status {
  padding: .3em .8em;
  border-radius: 999px;
  background: var(--brand-050);
  color: var(--brand-800);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.project__funders { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 1.4rem; }
.project__funders img { max-height: 58px; width: auto; }

/* --- 24. Footer ---------------------------------------------------------- */

.footer {
  background: var(--brand-900);
  color: #9EBCBB;
  font-size: .92rem;
}
.footer a { color: #C6DCDB; text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }

.footer__main {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 48px);
  padding-block: clamp(48px, 6vw, 72px);
}
@media (max-width: 940px) { .footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .footer__main { grid-template-columns: minmax(0, 1fr); } }

.footer__logo {
  height: 44px;
  width: auto;
  margin-bottom: 1.2rem;
  background: #fff;
  padding: 7px 11px;
  border-radius: 8px;
}
.footer h2 {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1.15rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: .58em; }
.footer address { font-style: normal; line-height: 1.75; }

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-block: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: center;
  justify-content: space-between;
  font-size: .82rem;
  color: #82A3A2;
}
.footer__certs { display: flex; flex-wrap: wrap; gap: 8px; }
.footer__certs span {
  padding: .32em .8em;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 620;
  letter-spacing: .06em;
  color: #C6DCDB;
}

/* --- 24b. Lightbox ------------------------------------------------------- */

/* Set by JS only on images it actually wires up, so non-clickable images
   (logos, hero backgrounds, navigation thumbnails) keep the default cursor. */
[data-lightbox] { cursor: zoom-in; }

.lb {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: rgba(0, 20, 22, .93);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s;
}
.lb.is-open { opacity: 1; visibility: visible; }

.lb__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(14px, 3vw, 28px);
  color: #9FBDBC;
  font-size: .82rem;
  letter-spacing: .06em;
}

.lb__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0 clamp(14px, 3vw, 28px);
}

.lb__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
  opacity: 0;
  transform: scale(.985);
  transition: opacity .25s ease, transform .25s ease;
}
.lb__img.is-ready { opacity: 1; transform: none; }

.lb__caption {
  padding: 14px clamp(14px, 3vw, 28px) clamp(18px, 3vw, 30px);
  text-align: center;
  color: #C8DBDA;
  font-size: .93rem;
  line-height: 1.5;
  min-height: 3.2em;
}

.lb__btn {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  color: #fff;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, transform .2s, opacity .2s;
}
.lb__btn:hover { background: rgba(255, 255, 255, .18); border-color: #fff; }
.lb__btn:disabled { opacity: .28; cursor: default; }
.lb__btn:disabled:hover { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .28); }

.lb__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.lb__nav--prev { left: clamp(6px, 2vw, 22px); }
.lb__nav--next { right: clamp(6px, 2vw, 22px); }
.lb__nav:hover { transform: translateY(-50%) scale(1.06); }

.lb__spinner {
  position: absolute;
  width: 34px;
  height: 34px;
  border: 2px solid rgba(255, 255, 255, .22);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: lb-spin .7s linear infinite;
  opacity: 0;
  transition: opacity .2s;
}
.lb__spinner.is-on { opacity: 1; }
@keyframes lb-spin { to { transform: rotate(360deg); } }

@media (max-width: 620px) {
  .lb__btn { width: 40px; height: 40px; }
  .lb__caption { font-size: .86rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lb, .lb__img { transition: none; }
  .lb__img { opacity: 1; transform: none; }
  .lb__spinner { animation: none; }
}

body.lb-open { overflow: hidden; }

/* --- 25. Utilities ------------------------------------------------------- */

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

.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-3 { margin-top: clamp(24px, 3vw, 40px); }
.mt-4 { margin-top: clamp(32px, 4vw, 56px); }

/* --- 26. Motion ---------------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .7s cubic-bezier(.22, .8, .3, 1), transform .7s cubic-bezier(.22, .8, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* --- 27. Print ----------------------------------------------------------- */

@media print {
  .header, .topbar, .footer, .ctaband, .nav-toggle, .skip-link { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .section { padding-block: 12pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}