@charset "UTF-8";
/* ==========================================================================
   AEM-Misioni Ungjillor — stylesheet i vetëm
   Rendi: 1) tokens  2) reset  3) tipografi  4) layout  5) komponentët
          6) media queries  7) utilities
   Zero deklarata me prioritet, zero importe, zero varesi te jashtme.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS — ngjyra, fonte, spacing
   ========================================================================== */
:root{
  /* Brand */
  --brand:        #2c99ce;
  --brand-active: #1e73be;
  --brand-deep:   #1d5f8c;
  --brand-darkest: #154a6d;   /* derivat i --brand-deep, vetem per subfooter */

  /* Bazë */
  --ink:      #000000;
  --ink-soft: #3f4a52;
  --paper:    #ffffff;
  --line:     #dfe5ea;

  /* Pastelet e seksioneve (vetëm aksente) */
  --mist:   #efefef;
  --sky:    #e8eef2;
  --lilac:  #dfcdf4;
  --aqua:   #c9e1f2;
  --sand:   #f4e4d7;
  --stone:  #bdc6cc;

  /* Statuse */

  /* Fonte */
  --font-body:    "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Staatliches", "Arial Narrow", Impact, sans-serif;
  --font-heavy:   "Anton", "Arial Black", sans-serif;
  --font-ui:      "Lato", "Helvetica Neue", Arial, sans-serif;

  /* Tipografi */
  --fs-base: 18px;
  --lh-base: 1.7;

  /* Spacing */
  --space-xs:  8px;
  --space-sm:  14px;
  --space-md:  24px;
  --space-lg:  40px;
  --space-xl:  64px;
  --gutter:    clamp(20px, 4vw, 40px);
  --section-y: clamp(56px, 8vw, 112px);
  --gap:       clamp(20px, 2.4vw, 32px);

  /* Forma */
  --radius:    4px;
  --radius-pill: 999px;
  --shadow-soft: 0 6px 18px rgba(29, 95, 140, .10);
  --shadow-card: 0 10px 28px rgba(29, 95, 140, .14);

  /* Header */
  --header-z: 100;

  /* Lëvizje */
  --ease: cubic-bezier(.2, .6, .2, 1);
  --dur:  .25s;
}

/* ==========================================================================
   2. RESET MODERN
   ========================================================================== */
*,
*::before,
*::after{ box-sizing: border-box; }

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body,
h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dd{
  margin: 0;
  padding: 0;
}

ul, ol{ list-style: none; }

body{
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;          /* clip, jo hidden: sticky mbetet funksional */
}

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

img{ height: auto; }

button, input, textarea, select{
  font: inherit;
  color: inherit;
}

button{
  background: none;
  border: 0;
  cursor: pointer;
}

a{ color: var(--brand-active); }   /* --brand mbi te bardhe = 3.2:1; brand-active = 4.9:1 */

table{ border-collapse: collapse; }

/* ==========================================================================
   3. TIPOGRAFI BAZË
   ========================================================================== */
h1, h2, h3, h4{
  font-weight: 400;
  line-height: 1.08;
  color: var(--ink);
  text-wrap: balance;
}

h1{
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  letter-spacing: .01em;
}

h2{
  font-family: var(--font-heavy);
  font-size: clamp(1.9rem, 4vw, 3rem);
  letter-spacing: .005em;
  line-height: 1.12;
}

h3{
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  letter-spacing: .015em;
}

h4{
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.35;
}

p{ max-width: 68ch; }

p + p{ margin-top: 1.1em; }

/* --- Hapësirë rrjedhëse për elementet "të zhveshur" (faqet e brendshme) ------
   Reset-i i zeron marginat, ndaj tituj si <h1>Kontakt</h1> ngjiteshin pas
   përmbajtjes. Rregulli vlen VETËM për tituj pa atribut class; komponentët
   BEM (.hero__title, .pillar__title, .creed__title, .board__name) nuk preken. */
:where(h1, h2, h3):not([class]){ margin-bottom: .55em; }

/* .section-head e mban vetë hapësirën e poshtme */
.section-head > h2{ margin-bottom: 0; }

:where(p, ul, ol, img, .info-list, .map) + :where(h2, h3):not([class]){
  margin-top: 1.7em;
}

/* Imazh i vetmuar në rrjedhë (faqja e Gazetës) */
:where(.wrap, .wrap--narrow) > img:not([class]){
  display: block;
  margin-bottom: var(--space-md);
}

/* Buton pas një blloku teksti (Gazeta, 404) */
:where(p, ul, .info-list, .map) + .btn{ margin-top: var(--space-md); }

/* Blloqet me klasë pas tekstit */
:where(p, ul) + :where(.info-list, .map){ margin-top: var(--space-lg); }

strong{ font-weight: 700; }

a{
  text-decoration: none;
  text-underline-offset: .18em;
  transition: color var(--dur) var(--ease);
}

a:hover,
a:focus-visible{
  color: var(--brand-deep);
  text-decoration: underline;
}

/* Fokus i dukshëm kudo */
:focus-visible{
  outline: 2px solid var(--brand-active);
  outline-offset: 2px;
}

/* ==========================================================================
   4. LAYOUT — .wrap / .section / .grid
   ========================================================================== */
.wrap{
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow{ max-width: 820px; }

.section{
  padding-block: var(--section-y);
  scroll-margin-top: 120px;
}

.section--tint{ background: var(--mist); }

.section--sky{ background: var(--sky); }

.eyebrow{
  display: block;
  margin-bottom: var(--space-sm);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .8125rem;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
  /* --brand (#2c99ce) mbi te bardhe jep 3.2:1 → nen 4.5:1 per tekst te vogel;
     --brand-deep mban familjen e brand-it dhe jep 6.9:1 (5.9:1 mbi pastel). */
  color: var(--brand-deep);
}

.section-head{
  max-width: 820px;
  margin-bottom: clamp(32px, 4.5vw, 64px);
}

.section-head p{
  margin-top: var(--space-md);
  color: var(--ink-soft);
}

/* shirit i hollë aksenti nën titullin e seksionit */
.section-head h2::after{
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-top: var(--space-md);
  background: var(--brand);
}

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

.grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--5{ grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* ==========================================================================
   5. KOMPONENTËT (rendi i BRIEF §6)
   ========================================================================== */

/* --- 5.1 Header / nav ---------------------------------------------------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: var(--header-z);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur) var(--ease),
              padding var(--dur) var(--ease);
}

.site-header.is-stuck{
  box-shadow: 0 2px 14px rgba(29, 95, 140, .14);
}

.site-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: 18px;
  transition: padding-block var(--dur) var(--ease);
}

.site-header.is-stuck .site-header__inner{ padding-block: 10px; }

.brand{
  display: block;
  flex: 0 0 auto;
  line-height: 0;
}

.brand:hover,
.brand:focus-visible{ text-decoration: none; }

.brand__logo{
  width: 150px;              /* aspect-ratio 441×229 ruhet nga width/height në HTML */
  height: auto;
  transition: width var(--dur) var(--ease);
}

.site-header.is-stuck .brand__logo{ width: 128px; }

/* Nav — desktop */
.site-nav__list{
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.6vw, 22px);
}

.site-nav__item{ position: relative; }

.site-nav__link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .875rem;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 2px solid transparent;
  transition: color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

.site-nav__link:hover,
.site-nav__link:focus-visible{
  color: var(--brand-active);
  text-decoration: none;
  border-bottom-color: var(--line);
}

.site-nav__link.is-active{
  color: var(--brand-active);          /* teksti: 4.9:1 */
  border-bottom-color: var(--brand);   /* nenvija 2px --brand (element grafik, 3.2:1) */
}

.site-nav__toggle{
  font: inherit;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.site-nav__chevron{
  width: 11px;
  height: 8px;
  flex: 0 0 auto;
  transition: transform var(--dur) var(--ease);
}

.has-dropdown.is-open .site-nav__chevron{ transform: rotate(180deg); }

.dropdown{
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 220px;
  padding: var(--space-xs) 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 2px solid var(--brand);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility var(--dur) var(--ease);
}

.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown,
.has-dropdown.is-open > .dropdown{
  opacity: 1;
  visibility: visible;
  transform: none;
}

.dropdown__link{
  display: block;
  padding: 10px 18px;
  font-family: var(--font-ui);
  font-size: .9375rem;
  letter-spacing: .03em;
  color: var(--ink);
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

.dropdown__link:hover,
.dropdown__link:focus-visible{
  background: var(--sky);
  color: var(--brand-active);
  text-decoration: none;
}

.dropdown__link.is-active{
  color: var(--brand-active);
  font-weight: 700;
}

/* Hamburger — vetëm mobil (shfaqet në media query <1024px) */
.nav-toggle{
  display: none;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  padding: 11px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.nav-toggle__bar{
  display: block;
  width: 100%;
  height: 2px;
  background: var(--ink);
  transition: transform var(--dur) var(--ease),
              opacity var(--dur) var(--ease);
}

.nav-toggle__bar + .nav-toggle__bar{ margin-top: 5px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){
  transform: translateY(-7px) rotate(-45deg);
}

/* --- 5.2 Hero ------------------------------------------------------------ */
.hero{
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(420px, 66vh, 640px);
  overflow: hidden;
  background: var(--brand-deep);
}

/* .hero__media funksionon si element <img> i drejtpërdrejtë ose si mbështjellës
   i një <img>-i; të dyja rastet mbulojnë hero-n plotësisht. */
.hero__media,
.hero__media > img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}

.hero__media > img{
  display: block;
  max-width: none;
}

/* Gradient blu-i-thellë → transparent nga e majta: garantoi kontrast ≥4.5:1 */
.hero__overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(15, 48, 71, .92) 0%,
      rgba(15, 48, 71, .80) 38%,
      rgba(15, 48, 71, .35) 68%,
      rgba(15, 48, 71, .10) 100%);
}

.hero__content{
  position: relative;
  z-index: 1;
  max-width: 760px;
  padding-block: clamp(48px, 8vw, 96px);
  color: var(--paper);
}

.hero__content .eyebrow{ color: var(--paper); }

.hero__title{
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 9vw, 6.25rem);
  line-height: .98;
  letter-spacing: .01em;
  color: var(--paper);
}

.hero__lead{
  max-width: 56ch;
  margin-top: var(--space-md);
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  color: rgba(255, 255, 255, .94);
}

.hero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* Butonat */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 50px;
  padding: 13px 28px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .875rem;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  border: 2px solid transparent;
  border-radius: var(--radius);
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

.btn:hover,
.btn:focus-visible{ text-decoration: none; }

.btn--primary{
  background: var(--brand-active);
  border-color: var(--brand-active);
  color: var(--paper);
}

.btn--primary:hover,
.btn--primary:focus-visible{
  background: var(--brand-deep);
  border-color: var(--brand-deep);
  color: var(--paper);
  transform: translateY(-2px);
}

.btn--ghost{
  background: transparent;
  border-color: currentColor;
  color: var(--paper);
}

.btn--ghost:hover,
.btn--ghost:focus-visible{
  background: var(--paper);
  border-color: var(--paper);
  color: var(--brand-deep);
  transform: translateY(-2px);
}

/* .btn--ghost mbi sfond të bardhë (jashtë hero-s): tekst i thellë, jo i bardhë */
.section .btn--ghost{
  color: var(--brand-deep);
  border-color: var(--brand-deep);
}

.site-footer .btn--ghost{ color: var(--paper); }

.section .btn--ghost:hover,
.section .btn--ghost:focus-visible{
  background: var(--brand-active);
  border-color: var(--brand-active);
  color: var(--paper);
}

/* Hero-ja mban ghost-in e bardhe edhe nese HTML-ja e mbeshtjell ne .section */
.hero__actions .btn--ghost{
  color: var(--paper);
}

.hero__actions .btn--ghost:hover,
.hero__actions .btn--ghost:focus-visible{
  background: var(--paper);
  border-color: var(--paper);
  color: var(--brand-deep);
}

/* --- 5.3 Kartat e shërbesave (.pillar) ---------------------------------- */
.pillar{
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 36px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.pillar:hover,
.pillar:focus-within{
  transform: translateY(-4px);
  border-color: var(--brand);
  box-shadow: var(--shadow-card);
}

.pillar__icon{
  width: 72px;
  height: auto;
  margin-bottom: var(--space-md);
}

.pillar__title{
  margin-bottom: var(--space-sm);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.2vw, 1.875rem);
  letter-spacing: .015em;
}

.pillar__body{
  color: var(--ink-soft);
  font-size: 1rem;
}

.pillar__body p{ max-width: none; }

.pillar__body a{
  color: var(--brand-active);
  text-decoration: underline;
}

.pillar__link{
  align-self: flex-start;
  margin-top: var(--space-md);
  padding-bottom: 3px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-active);
  border-bottom: 2px solid var(--line);
  transition: border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

.pillar__link:hover,
.pillar__link:focus-visible{
  color: var(--brand-active);
  border-bottom-color: var(--brand);
  text-decoration: none;
}

/* --- 5.4 Doktrina (.creed) ---------------------------------------------- */
.creed{
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.creed__item{
  padding: clamp(22px, 2.6vw, 34px) clamp(22px, 2.6vw, 34px) clamp(22px, 2.6vw, 34px)
           clamp(24px, 2.8vw, 36px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 6px solid var(--stone);   /* shirit aksenti — ngjyra vjen nga variantet */
  border-radius: var(--radius);
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.creed__item:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

.creed__item--lilac{ border-left-color: var(--lilac); }
.creed__item--aqua{  border-left-color: var(--aqua); }
.creed__item--sand{  border-left-color: var(--sand); }
.creed__item--sky{   border-left-color: var(--sky); }

.creed__title{
  margin-bottom: var(--space-md);
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  letter-spacing: .02em;
}

.creed__list{
  display: grid;
  gap: var(--space-sm);
}

.creed__list li{
  position: relative;
  padding-left: 22px;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

.creed__list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
}

/* --- 5.5 Bordi (.board) -------------------------------------------------- */
.board{ /* mbajtësi i grid-it; rrjeti vjen nga .grid .grid--5 */
  align-items: start;
}

.board__member{
  text-align: center;
}

/* NËNSHKRIMI VIZUAL I TRASHËGUAR: rrezja "blob" e portreteve */
.board__photo{
  width: 100%;
  max-width: 200px;
  margin: 0 auto var(--space-md);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 4px solid var(--paper);
  border-radius: 40% 30% 40% 60%;
  box-shadow: var(--shadow-soft);
  background: var(--stone);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.board__member:hover .board__photo{
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}

.board__name{
  font-family: var(--font-display);
  font-size: 1.3125rem;
  letter-spacing: .02em;
  line-height: 1.2;
}

.board__role{
  margin-top: 4px;
  font-family: var(--font-ui);
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* --- 5.6 Kontakt: info-list / map -------------------------------------- */
.info-list{
  margin-top: var(--space-lg);
  border-top: 1px solid var(--line);
}

.info-list__row{
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--line);
}

.info-list__label{
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-active);
  line-height: 1.6;
}

.info-list__value{
  font-size: 1rem;
  color: var(--ink);
}

.info-list__value a{
  color: var(--brand-active);
  text-decoration: underline;
}

.map{
  position: relative;
  margin-top: var(--space-md);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--mist);
}

.map iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* --- 5.7 Footer --------------------------------------------------------- */
.site-footer{
  background: var(--brand-deep);
  color: var(--paper);
  padding-block: clamp(44px, 6vw, 76px);
  font-size: 1rem;
  line-height: 1.7;
}

.site-footer__grid{
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.site-footer__col p{ max-width: 40ch; }

.site-footer a{
  color: var(--paper);
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible{
  color: var(--paper);
  text-decoration: underline;
}

/* ZGJEDHJE: logoblack.png (87×45) është PNG i zeshkët — mbi sfond blu teksti i zi
   bie nën kontrast. Përdorim një "chip" të bardhë me padding + radius në vend të
   filter: brightness(0) invert(1), sepse logoja ka kundër-forma të bardha (barrat
   e "E"-së) që inverti do t'i mbushte dhe logoja do të humbte lexueshmërinë. */
.site-footer__logo{
  width: 130px;
  height: auto;
  padding: 10px 12px;
  background: var(--paper);
  border-radius: var(--radius);
}

.site-footer__name{
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}

.social{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.social__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: var(--paper);
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

.social__link svg{
  width: 20px;
  height: 20px;
}

.social__link:hover,
.social__link:focus-visible{
  background: var(--paper);
  border-color: var(--paper);
  color: var(--brand-deep);
  text-decoration: none;
  transform: translateY(-2px);
}

.subfooter{
  background: var(--brand-darkest);
  color: var(--paper);
  padding-block: var(--space-md);
  font-size: .875rem;
}

.subfooter__inner{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
}

.subfooter p{ max-width: none; }

.subfooter a{
  color: var(--paper);
  text-decoration: underline;
}

.subfooter a:hover,
.subfooter a:focus-visible{ color: var(--paper); }

/* --- 5.8 To-top --------------------------------------------------------- */
.to-top{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--paper);
  background: var(--brand);
  border-radius: 50%;
  box-shadow: var(--shadow-card);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}

.to-top svg{
  width: 22px;
  height: 22px;
}

.to-top.is-visible{
  opacity: 1;
  visibility: visible;
  transform: none;
}

.to-top:hover,
.to-top:focus-visible{ background: var(--brand-active); }

/* ==========================================================================
   6. MEDIA QUERIES — 1024px / 768px / 560px
   ========================================================================== */

/* --- ≤1024px: nav mobile, rrjetat zbresin ------------------------------- */
@media (max-width: 1024px){

  .nav-toggle{
    display: block;
    order: 3;
  }

  .site-nav{
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 78vh;
    overflow-y: auto;
    padding: var(--space-sm) var(--gutter) var(--space-lg);
    background: var(--paper);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 26px rgba(29, 95, 140, .12);
  }

  .site-header__inner{ position: relative; }

  .site-nav.is-open{ display: block; }

  .site-nav__list{
    display: block;
  }

  .site-nav__item{
    border-bottom: 1px solid var(--line);
  }

  .site-nav__link{
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 14px 2px;
    font-size: .9375rem;
    border-bottom: 0;
    border-left: 3px solid transparent;
    padding-left: 12px;
  }

  .site-nav__link:hover,
  .site-nav__link:focus-visible{ border-bottom-color: transparent; }

  .site-nav__link.is-active{
    border-bottom-color: transparent;
    border-left-color: var(--brand);
  }

  /* Dropdown-i bëhet listë e hapur brenda panelit */
  .dropdown{
    position: static;
    min-width: 0;
    padding: 0 0 var(--space-xs) 0;
    border: 0;
    border-left: 1px solid var(--line);
    border-radius: 0;
    margin-left: 14px;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .dropdown__link{
    padding: 10px 14px;
    font-size: .875rem;
  }

  .dropdown__link:hover,
  .dropdown__link:focus-visible{ background: var(--mist); }

  .site-nav__chevron{ display: none; }

  /* Rrjetat */
  .grid--5{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .site-footer__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- ≥769px: harta panoramike ------------------------------------------- */
@media (min-width: 769px){
  .map{ aspect-ratio: 16 / 9; }
}

/* --- ≤768px ------------------------------------------------------------- */
@media (max-width: 768px){

  :root{ --fs-base: 17px; }

  .brand__logo{ width: 124px; }
  .site-header.is-stuck .brand__logo{ width: 112px; }

  .grid--2,
  .grid--3{ grid-template-columns: minmax(0, 1fr); }
  .grid--5{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .creed{ grid-template-columns: minmax(0, 1fr); }

  .hero{ min-height: 460px; }

  .hero__overlay{
    background:
      linear-gradient(90deg,
        rgba(15, 48, 71, .94) 0%,
        rgba(15, 48, 71, .86) 55%,
        rgba(15, 48, 71, .70) 100%);
  }

  .info-list__row{
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .subfooter__inner{
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --- ≤560px ------------------------------------------------------------- */
@media (max-width: 560px){

  .brand__logo{ width: 112px; }
  .site-header.is-stuck .brand__logo{ width: 104px; }

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

  .site-footer__grid{ grid-template-columns: minmax(0, 1fr); }

  .hero__title{ font-size: clamp(2.25rem, 11vw, 3rem); }

  .hero__actions .btn{ width: 100%; }

  .board__photo{ max-width: 220px; }

  .to-top{
    right: 14px;
    bottom: 14px;
    width: 44px;
    height: 44px;
  }
}

/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){

  html{ scroll-behavior: auto; }

  *,
  *::before,
  *::after{
    animation-duration: .001ms;
    animation-iteration-count: 1;
    transition-duration: .001ms;
    transition-delay: 0s;
    scroll-behavior: auto;
  }

  .btn:hover,
  .btn:focus-visible,
  .pillar:hover,
  .pillar:focus-within,
  .creed__item:hover,
  .board__member:hover .board__photo,
  .social__link:hover,
  .social__link:focus-visible,
  .has-dropdown.is-open .site-nav__chevron,
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1),
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){
    transform: none;
  }

  .dropdown{ transform: none; }

  .to-top{ transform: none; }

  /* Reveal gjithmonë i dukshëm */
  .reveal,
  html.js .reveal{
    opacity: 1;
    transform: none;
  }
}

/* Dy butonat e kontaktit (email + telefon) */
.contact-cta{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  max-width: none;
  margin-top: var(--space-lg);
}

/* --- Adresat e email-it (anti-scraping) ---------------------------------
   `.mailto` mbush vetveten me nje <a href="mailto:..."> permes main.js.
   Pa JS shfaqet fallback-u i <noscript>-it; `.mailto__at` e ben te lexueshem
   pa lene ne HTML asnje varg te formes user@domain. */
.mailto{
  display: inline;
}

.mailto__at{
  font-style: normal;
  opacity: .85;
}

/* ==========================================================================
   7. UTILITIES
   ========================================================================== */
.visually-hidden{
  position: absolute;
  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;
}

/* Skip-link: bëhet i dukshëm kur merr fokus */
.skip-link:focus,
.skip-link:focus-visible{
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 200;
  width: auto;
  height: auto;
  margin: 0;
  padding: 12px 20px;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .9375rem;
  color: var(--paper);
  background: var(--brand-deep);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}

/* .reveal — aktiv VETËM kur JS-i shton klasën `js` te <html>,
   kështu pa JS përmbajtja shfaqet normalisht. */
html.js .reveal{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--ease),
              transform .6s var(--ease);
}

html.js .reveal.is-visible{
  opacity: 1;
  transform: none;
}

/* Rrjetë sigurie: browser pa JS-in e aktivizuar → .reveal e dukshme */
@media (scripting: none){
  .reveal{
    opacity: 1;
    transform: none;
  }
}

/* Printimi: seksionet e pashfaqura ende nuk duhet te dalin bosh ne letra */
@media print{
  .reveal,
  html.js .reveal{
    opacity: 1;
    transform: none;
  }
}