/* ==========================================================================
   DAST.EU — Design system (hand-written, no framework)
   Used by: header, footer, home page. Other legacy pages still rely on the
   Tailwind CDN script loaded in layout.php.
   ========================================================================== */

:root {
    --red-700: #a91515;
    --red-600: #d31b1b;
    --red-500: #e2231a;
    --red-50:  #fdecec;

    --ink-900: #14171a;
    --ink-800: #22262b;
    --ink-700: #3a4149;
    --ink-600: #5b636b;
    --ink-500: #7c848c;
    --ink-300: #d5d9dd;
    --ink-200: #e6e9ec;
    --ink-100: #f2f4f6;
    --ink-50:  #f8f9fa;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 28px;

    --shadow-sm: 0 1px 2px rgba(20, 23, 26, 0.06), 0 1px 3px rgba(20, 23, 26, 0.08);
    --shadow-md: 0 8px 24px -8px rgba(20, 23, 26, 0.18);
    --shadow-lg: 0 24px 48px -16px rgba(20, 23, 26, 0.22);

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --header-h-desktop: 68px;
    --header-h-scrolled: 56px;
    --header-h-mobile: 56px;

    /* Header bar glass recipe — see .glass-surface below. */
    --header-glass-bg: rgba(255, 255, 255, 0.75);
    --header-glass-blur: blur(80px) saturate(110%);

    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    margin: 0;
    overflow-x: hidden;
    font-family: var(--font-sans);
    color: var(--ink-800);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

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

img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.35s var(--ease);
}

img[loading="lazy"].is-loaded,
img[loading="lazy"]:not([src]) {
    opacity: 1;
}

a { color: inherit; }

.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

@media (min-width: 768px) {
    .container { padding: 0 2rem; }
}

/* Reveal-on-scroll (toggled once by IntersectionObserver, not on every scroll frame) */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}

/* ---------- Header ---------- */
.glass-surface {
    background: var(--header-glass-bg);
    backdrop-filter: var(--header-glass-blur);
    -webkit-backdrop-filter: var(--header-glass-blur);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass-surface { background: #fff; }
}

/* Border + shadow are constant (not gated by .is-scrolled) on purpose: the glass background
   alone can look like flat white the moment whatever's behind it (top of a hero image, etc.)
   happens to be light-colored too — there's nothing for the blur to visibly blur. A steady,
   always-on edge/shadow means the header reads as a glass pane sitting ON the page from the very
   first pixel of scroll position 0, not just once something darker scrolls in behind it. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--ink-200);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s var(--ease), border-color 0.15s linear, height 0.3s var(--ease);
    overflow: visible;
}

/* Border/shadow disappear while the Kompania Jonë dropdown is open, so the panel below reads as
   a continuation of the header rather than a boxed card sitting under a hard line. */
.site-header.has-menu-open {
    border-bottom: none;
    box-shadow: none;
}

.header-bar {
    height: var(--header-h-mobile);
    display: flex;
    /* stretch, not center: the dropdown panels are positioned top:100% off .nav-dropdown, so
       .nav-dropdown (and everything else here) needs to actually reach the header's real
       bottom edge, not sit centered with empty space below it — that empty space was the gap
       no amount of matching color could hide. */
    align-items: stretch;
    justify-content: space-between;
    gap: 1rem;
    overflow: visible;
}

@media (min-width: 768px) {
    .header-bar { height: var(--header-h-desktop); }
    .site-header.is-scrolled .header-bar { height: var(--header-h-scrolled); }
}

.header-logo {
    display: flex;
    align-items: center;
}

.header-logo img {
    height: 24px;
    width: auto;
    transition: height 0.3s var(--ease);
}

@media (min-width: 768px) {
    .header-logo img { height: 34px; }
    .site-header.is-scrolled .header-logo img { height: 28px; }
}

.main-nav {
    position: relative;
    display: none;
    align-items: center;
    gap: 1.75rem;
    overflow: visible;
}

@media (min-width: 1024px) {
    .main-nav { display: flex; }
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    color: var(--ink-700);
    font-size: 1.05rem;
    font-weight: 500;
    padding: 0.5rem 0;
    transition: color 0.2s var(--ease);
    white-space: nowrap;
}

.nav-link:hover { color: var(--red-600); }

/* Small outline "sketch" icon in front of a top-level nav label (Hyrje/Teknologjitë/Produktet/
   Kompania Jonë) — sized and stroked like the other small UI icons in the header, but kept in
   its own class so it's never caught by .nav-dropdown-btn's chevron-rotation rules below. */
.nav-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--ink-500);
}

.nav-link:hover .nav-icon,
.nav-dropdown-btn:hover .nav-icon { color: var(--red-600); }

.nav-dropdown {
    /* No position:relative here on purpose — the dropdown menu is sized/positioned against
       .main-nav (the shared containing block, see below) so both "Produktet" and "Kompania
       Jonë" open an identically-sized panel spanning the full nav, not one anchored to each
       button's own small box. */
    align-self: stretch;
    display: flex;
    align-items: center;
    overflow: visible;
}

.nav-dropdown-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    border-radius: var(--radius-md);
    font: inherit;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--ink-700);
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    transition: color 0.2s var(--ease), background 0.2s var(--ease);
}

.nav-dropdown-btn:hover { color: var(--red-600); }

/* "Pressed" look while open — a filled pill, not just a color change — and it stays this way
   for as long as the dropdown is open, not only while the mouse happens to be hovering (e.g.
   opened by click and the cursor then moves elsewhere). */
.nav-dropdown.is-open .nav-dropdown-btn,
.nav-dropdown.is-open .nav-dropdown-btn .nav-icon {
    color: var(--red-600);
}

.nav-dropdown.is-open .nav-dropdown-btn {
    background: var(--red-50);
}

.nav-dropdown-menu {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 0.75rem;
    min-width: 15rem;
    /* Strong blur + near-opaque background: the page content scrolling/sitting behind this
       menu was bleeding through and clashing with the category text, hurting readability. */
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(36px) saturate(180%);
    -webkit-backdrop-filter: blur(36px) saturate(180%);
    border: 1px solid rgba(230, 233, 236, 0.85);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    /* Starts pulled up above its own final position and eases down into place on open — reads
       as "descending" out of the category, rather than just fading in place. */
    transform: translateY(-14px);
    transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), visibility 0.45s;
    z-index: 50;
}

.nav-dropdown.is-open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown-menu a {
    display: block;
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius-sm);
    color: var(--ink-800);
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.nav-dropdown-menu a:hover {
    background: var(--ink-50);
    color: var(--red-600);
}

.nav-dropdown-menu .menu-divider {
    border: none;
    border-top: 1px solid var(--ink-200);
    margin: 0.4rem 0.4rem;
}

.nav-dropdown-menu .menu-highlight {
    color: var(--red-600);
    font-weight: 600;
}

/* Both "Produktet" and "Kompania Jonë" open the exact same size panel: width:100% of .main-nav
   (its containing block, since .nav-dropdown no longer intercepts position:relative — see
   above), i.e. spanning from Hyrje's left edge to Kompania Jonë's right edge, identically,
   regardless of which button opened it. Height is auto/intrinsic, so whichever one has more
   categories/items just grows taller — never wider, never a different footprint. Square corners
   (no border-radius) and the exact same --header-glass-bg/--header-glass-blur tokens as the
   header bar itself — same glass, same shape language, not the base .nav-dropdown-menu's own
   rounded/slightly-different glass recipe. */
.nav-dropdown-menu.is-grid {
    /* A bit wider than .main-nav itself (Hyrje-to-Kompania-Jonë) on both sides — same identical
       size for both dropdowns still holds, just a wider shared size so each column has more
       breathing room and category labels wrap less. */
    left: -6rem;
    right: -6rem;
    width: auto;
    /* No gap — sits flush against the bottom of the button, reading as if it opens directly out
       of the category rather than as a separate floating card further down. */
    margin-top: 0;
    min-width: 0;
    max-width: none;
    /* Solid light gray (--ink-50, already used for hover backgrounds elsewhere in this same
       menu) instead of chasing a transparent glass match that kept showing whatever busy page
       content sits behind it. No bleed-through possible — it's an opaque color, not a see-
       through blur — while still fitting the site's light palette. Light blur kept only for a
       soft edge/depth cue; it has nothing to show through since the background is opaque. */
    background: var(--ink-50);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(230, 233, 236, 0.85);
    border-radius: 0;
    box-shadow: var(--shadow-lg);
    padding: 1.75rem 2rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.3rem 2rem;
}

.nav-dropdown-menu.is-grid .nav-dropdown-col {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

/* Each column's links cascade down into place a beat after the panel itself, staggered
   left-to-right — same "descending" motion as the panel, one layer deeper. Restarts every time
   .is-open is (re)added. */
.nav-dropdown-menu.is-grid a {
    opacity: 0;
    transform: translateY(-10px);
}

.nav-dropdown.is-open .nav-dropdown-menu.is-grid a {
    animation: navColDescend 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.nav-dropdown-menu.is-grid .nav-dropdown-col:nth-child(1) a { animation-delay: 0.15s; }
.nav-dropdown-menu.is-grid .nav-dropdown-col:nth-child(2) a { animation-delay: 0.28s; }
.nav-dropdown-menu.is-grid .nav-dropdown-col:nth-child(3) a { animation-delay: 0.41s; }

@keyframes navColDescend {
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .nav-dropdown-menu.is-grid a { opacity: 1; transform: none; animation: none; }
}

/* Each sub-category link itself is bigger now — larger icon and text — even though the
   surrounding container got shorter. */
.nav-dropdown-menu.is-grid a {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.8rem 0.6rem;
    font-size: 1.2rem;
    font-weight: 500;
}

/* Per-item icon color via a --icon-rgb custom property set inline on the <a> (e.g.
   style="--icon-rgb: 27,138,138") — one real rule, so a per-item color always actually applies
   (a previous attempt used one-off classes like .icon-teal competing against this same selector
   by specificity, which silently lost every time since var(--ink-400) below didn't even exist as
   a token, so nothing but the browser's inherited text color was ever showing). Falls back to
   ink-500's rgb when no --icon-rgb is set. */
.nav-dropdown-menu.is-grid a svg {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: rgb(var(--icon-rgb, 124, 132, 140));
    transition: color 0.15s var(--ease);
}

.nav-dropdown-menu.is-grid a:hover svg { color: var(--red-600); }

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid var(--ink-200);
    background: #fff;
    color: var(--ink-700);
    cursor: pointer;
    transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
    text-decoration: none;
}

.icon-btn:hover {
    border-color: var(--red-500);
    color: var(--red-600);
    background: var(--red-50);
}

.icon-btn svg { width: 18px; height: 18px; }

.lang-switch { position: relative; }

.lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--ink-200);
    background: #fff;
    cursor: pointer;
}

.lang-btn img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.lang-btn svg { width: 12px; height: 12px; color: var(--ink-600); }

.lang-menu {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0.75rem;
    min-width: 11rem;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(36px) saturate(180%);
    -webkit-backdrop-filter: blur(36px) saturate(180%);
    border: 1px solid rgba(230, 233, 236, 0.85);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 0.4rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
    z-index: 50;
}

.lang-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-menu a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--ink-800);
    font-size: 0.88rem;
    transition: background 0.15s var(--ease);
}

.lang-menu a:hover { background: var(--ink-50); }
.lang-menu a img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }

.mobile-menu-btn {
    display: inline-flex;
    border: 1px solid var(--ink-200);
}

@media (min-width: 1024px) {
    .mobile-menu-btn { display: none; }
}

.mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: rgba(20, 23, 26, 0.4);
    opacity: 0;
    transition: opacity 0.3s var(--ease);
}

.mobile-menu-backdrop.hidden { display: none; }

.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 320px;
    max-width: 85vw;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    box-shadow: var(--shadow-lg);
    z-index: 160;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s var(--ease);
}

.mobile-menu.is-open { transform: translateX(0); }

.mobile-menu-head {
    display: flex;
    justify-content: flex-end;
    padding: 1rem;
    border-bottom: 1px solid var(--ink-200);
}

.mobile-menu-body { padding: 1rem; }

.mobile-link {
    display: block;
    padding: 0.7rem 0.6rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--ink-800);
    font-weight: 500;
}

.mobile-link:hover { background: var(--ink-50); }

.mobile-dropdown-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.7rem 0.6rem;
    background: none;
    border: none;
    font: inherit;
    font-weight: 500;
    color: var(--ink-800);
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.mobile-dropdown-btn:hover { background: var(--ink-50); }

.mobile-dropdown-btn svg {
    width: 14px;
    height: 14px;
    transition: transform 0.2s var(--ease);
}

.mobile-submenu {
    padding-left: 1rem;
}

.mobile-submenu a {
    display: block;
    padding: 0.55rem 0.6rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--ink-600);
    font-size: 0.9rem;
}

.mobile-submenu a:hover { background: var(--ink-50); }

.mobile-submenu.hidden,
.nav-dropdown-menu.hidden,
.lang-menu.hidden { display: none; }

/* ---------- Hero ---------- */
.hero {
    position: relative;
    background: var(--ink-900);
    /* Pulled up under the sticky header by exactly its height, so the hero already overlaps the
       header's space at scroll position 0 — sticky positioning only starts overlapping content
       once you actually scroll, so without this the header would sit over nothing but the plain
       page background for the first ~68px, with nothing behind it for the glass blur to show. */
    margin-top: calc(-1 * var(--header-h-mobile));
}

@media (min-width: 768px) {
    .hero { margin-top: calc(-1 * var(--header-h-desktop)); }
}

/* Same sticky-header-overlap fix as .hero/.breadcrumb, generalized for every other page's own
   first section, so the glass header isn't left sitting over plain white on every page but the
   homepage. Two flavors: */

/* 1) A fixed-height decorative hero (video/pattern background, e.g. History/Career) — no inner
   text sits right at its own top edge, so a plain negative margin is enough; nothing needs
   padding-compensating back down. */
.header-overlap-pull {
    margin-top: calc(-1 * var(--header-h-mobile));
}
@media (min-width: 768px) {
    .header-overlap-pull { margin-top: calc(-1 * var(--header-h-desktop)); }
}

/* 2) A padding-sized section whose own text WOULD otherwise end up hidden under the header —
   pulls the background up the same way, then adds the header's height back as extra padding-top
   so the visible content lands exactly where it did before. Two base sizes to match what the
   two callers (page/show.php's compact breadcrumb, About's tall banner) already used. */
.page-header-spacer {
    margin-top: calc(-1 * var(--header-h-mobile));
    padding: calc(1rem + var(--header-h-mobile)) 0 1rem;
}
@media (min-width: 768px) {
    .page-header-spacer { margin-top: calc(-1 * var(--header-h-desktop)); padding-top: calc(1rem + var(--header-h-desktop)); }
}

.page-header-spacer-lg {
    margin-top: calc(-1 * var(--header-h-mobile));
    padding: calc(4rem + var(--header-h-mobile)) 0 4rem;
}
@media (min-width: 768px) {
    .page-header-spacer-lg { margin-top: calc(-1 * var(--header-h-desktop)); padding-top: calc(4rem + var(--header-h-desktop)); }
}

.hero-media {
    position: relative;
    display: block;
    width: 100%;
    /* 2.6/1 (wide banner) only makes sense once there's enough width to keep the photo's own
       content legible — on a phone that ratio squashes it into a sliver a few dozen px tall, so
       mobile gets a much taller crop instead and only switches to the wide banner from tablet up. */
    aspect-ratio: 4 / 3;
    max-height: 640px;
    overflow: hidden;
}

@media (min-width: 640px) {
    .hero-media { aspect-ratio: 16 / 9; }
}

@media (min-width: 768px) {
    .hero-media { aspect-ratio: 2.6 / 1; }
}

.hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.6rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
    border: 2px solid transparent;
}

.btn-primary {
    background: var(--red-600);
    color: #fff;
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    background: var(--red-700);
    transform: translateY(-2px);
}

.btn-outline {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.7);
    color: #fff;
}

.btn-outline:hover {
    background: #fff;
    color: var(--ink-900);
    transform: translateY(-2px);
}

.btn-outline-dark {
    background: transparent;
    border-color: var(--ink-300);
    color: var(--ink-800);
}

.btn-outline-dark:hover {
    background: var(--ink-100);
    border-color: var(--ink-500);
    transform: translateY(-2px);
}

/* ---------- Why DAST ---------- */
.section { padding: 4rem 0; }

.section-head {
    text-align: center;
    max-width: 42rem;
    margin: 0 auto 2.75rem;
}

.section-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--red-600);
    margin: 0 0 0.6rem;
}

.section-title {
    font-size: clamp(1.6rem, 3.4vw, 2.35rem);
    font-weight: 800;
    color: var(--ink-900);
    margin: 0;
}

.carousel-wrap {
    position: relative;
}

/* Round icon buttons, vertically centered over the track, hidden on touch (finger-swipe already
   works there and the buttons would just sit on top of the slides with nothing to click past). */
.carousel-arrow {
    display: none;
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid var(--ink-200);
    /* Same matte-glass recipe as the header bar — not its own separate glass values. */
    background: var(--header-glass-bg);
    backdrop-filter: var(--header-glass-blur);
    -webkit-backdrop-filter: var(--header-glass-blur);
    color: var(--ink-800);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}

.carousel-arrow svg { width: 20px; height: 20px; }

.carousel-arrow:hover {
    background: #fff;
    color: var(--red-600);
    transform: translateY(-50%) scale(1.05);
}

.carousel-arrow-prev { left: 0.75rem; transform: translateY(-50%); }
.carousel-arrow-next { right: 0.75rem; transform: translateY(-50%); }
.carousel-arrow-prev:hover { transform: translateY(-50%) scale(1.05); }

@media (min-width: 1024px) {
    .carousel-arrow { display: flex; }
    .carousel-arrow-prev { left: 1.5rem; }
    .carousel-arrow-next { right: 1.5rem; }
}

/* Apple-style swipeable carousel: native horizontal scroll + scroll-snap does the heavy
   lifting (touch drag works for free), JS only adds autoplay, the dot/play-pause UI, desktop
   mouse-drag, and pausing offscreen videos. No carousel library. */
.carousel-track {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 1rem;
    cursor: grab;
}

.carousel-track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

.carousel-track::-webkit-scrollbar { display: none; }

@media (min-width: 768px) {
    .carousel-track { padding: 0 2rem; gap: 1.25rem; }
}

@media (min-width: 1024px) {
    .carousel-track { padding: 0 max(1.5rem, calc((100vw - 1280px) / 2)); }
}

.carousel-slide {
    position: relative;
    flex: 0 0 92%;
    scroll-snap-align: center;
    border-radius: var(--radius-xl);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: linear-gradient(150deg, #262626 0%, #1a1a1a 100%);
    text-decoration: none;
    display: block;
    box-shadow: var(--shadow-sm);
}

@media (min-width: 480px) {
    .carousel-slide { aspect-ratio: 1 / 1.05; }
}

@media (min-width: 640px) {
    .carousel-slide { flex-basis: 68%; aspect-ratio: 16 / 11; }
}

@media (min-width: 1024px) {
    .carousel-slide { flex-basis: 46%; }
}

.carousel-slide img,
.carousel-slide video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.carousel-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.22);
}

.carousel-placeholder svg { width: 28%; height: 28%; }

.carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 1.75rem;
}

.carousel-toggle {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid var(--ink-300);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-700);
    cursor: pointer;
    margin-left: 0.5rem;
    transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.carousel-toggle:hover { border-color: var(--red-500); color: var(--red-600); }
.carousel-toggle svg { width: 13px; height: 13px; }
.carousel-toggle .icon-play { display: none; }
.carousel-toggle.is-paused .icon-pause { display: none; }
.carousel-toggle.is-paused .icon-play { display: block; }

/* ---------- Story chapters (m-tec / Laboratory / Academy) ---------- */
/* Apple-style "one claim, one visual" sections: full-width, alternating layout, a big
   number, a short bulleted proof list. Copy is pulled from existing about/history
   translations rather than the compact Why-DAST card text, so the two don't repeat
   each other word for word. */
.chapter { padding: 4rem 0; }

.chapter-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .chapter-grid { grid-template-columns: 1fr 1fr; gap: 4.5rem; }
    .chapter-grid.is-reversed .chapter-visual { order: 2; }
    .chapter-grid.is-reversed .chapter-text { order: 1; }
}

.chapter-panel {
    position: relative;
    border-radius: var(--radius-xl);
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.chapter-panel svg {
    width: 32%;
    height: 32%;
    color: rgba(255, 255, 255, 0.92);
}

.chapter-panel.is-mtec { background: linear-gradient(135deg, #3b7bd6 0%, #16305c 100%); }
.chapter-panel.is-lab { background: linear-gradient(135deg, #9d5bf0 0%, #3f1d75 100%); }
.chapter-panel.is-academy { background: linear-gradient(135deg, #f0a63e 0%, #7a3f06 100%); }

.chapter-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--red-600);
    margin: 0 0 0.75rem;
}

.chapter-title {
    font-size: clamp(1.6rem, 3.6vw, 2.5rem);
    font-weight: 800;
    color: var(--ink-900);
    line-height: 1.15;
    margin: 0 0 1.1rem;
}

.chapter-body {
    font-size: 1.05rem;
    color: var(--ink-600);
    line-height: 1.7;
    margin: 0 0 1.5rem;
}

.chapter-stat {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0 0 1.5rem;
}

.chapter-stat-value {
    font-size: 2.75rem;
    font-weight: 800;
    color: var(--red-600);
    line-height: 1;
}

.chapter-stat-label {
    font-size: 0.95rem;
    color: var(--ink-500);
    font-weight: 600;
}

.chapter-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: var(--red-50);
    color: var(--red-600);
    font-size: 0.85rem;
    font-weight: 700;
    margin: 0 0 1.5rem;
}

.chapter-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.chapter-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.92rem;
    color: var(--ink-700);
    font-weight: 500;
}

.chapter-list svg {
    width: 18px;
    height: 18px;
    flex: none;
    margin-top: 2px;
    color: var(--red-600);
}

/* ---------- Categories ---------- */
/* One strong "module" instead of many small cards trying to each carry their own visual
   weight — Apple's cards work because each is a single idea with a rich visual; 11 near-
   identical category tiles can't do that, so instead the whole browser lives inside one
   big card. */
.category-explorer {
    background: #fff;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--ink-200);
    padding: 1.75rem 1.25rem;
}

@media (min-width: 768px) {
    .category-explorer { padding: 2.75rem; }
}

.category-explorer-head { max-width: 42rem; margin-bottom: 1.75rem; }

.category-explorer-desc {
    color: var(--ink-600);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0.75rem 0 0;
}

.category-explorer-footer {
    margin-top: 2rem;
    text-align: center;
}

/* Hero-style banner above the featured circles — config/category-explorer-media.php. Branded
   gradient placeholder (same recipe as .project-hero) until a real photo/video is set, so this
   never reads as a broken/empty box. */
.category-explorer-hero {
    position: relative;
    aspect-ratio: 21 / 6;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 2rem;
    background:
        radial-gradient(130% 200% at 100% 0%, rgba(211, 27, 27, 0.35) 0%, rgba(211, 27, 27, 0) 55%),
        linear-gradient(160deg, #262626 0%, #1a1a1a 100%);
}

.category-explorer-hero img,
.category-explorer-hero video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-explorer-hero-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.35);
}

.category-explorer-hero-placeholder svg {
    width: 15%;
    height: 15%;
}

@media (max-width: 639px) {
    .category-explorer-hero { aspect-ratio: 16 / 9; }
}

/* Highlighted categories: large photo circles + title + short blurb, 'is_featured' in
   config/categories.php picks which ones show up here. */
.category-featured-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.25rem;
    text-align: center;
}

.category-featured-item {
    --accent-rgb: 211, 27, 27;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    /* Also used on a <button> (the "Kërko një takim" modal trigger, not a real category link) —
       reset it to look identical to the <a> version. */
    background: none;
    border: none;
    font: inherit;
    padding: 0;
    width: 100%;
    cursor: pointer;
}

.category-featured-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--accent-rgb), 0.1);
    color: rgb(var(--accent-rgb));
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.category-featured-item:hover .category-featured-circle {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.category-featured-circle img { width: 100%; height: 100%; object-fit: cover; }
.category-featured-circle svg { width: 34%; height: 34%; }

.category-featured-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ink-900);
}

.category-featured-desc {
    font-size: 0.82rem;
    color: var(--ink-600);
    line-height: 1.5;
    max-width: 15rem;
}

.category-grid-subhead {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ink-800);
    margin: 0 0 1rem;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .categories-grid { grid-template-columns: repeat(3, 1fr); gap: 0.85rem; }
}

@media (min-width: 1024px) {
    .categories-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Full photo card, title overlaid at the bottom over a dark gradient (not a separate white
   body) — 'card_media' in config/categories.php; falls back to an accent-tinted icon badge
   when no photo/video is set yet, so this never renders half-broken. */
.category-card {
    --accent-rgb: 211, 27, 27;
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: rgba(var(--accent-rgb), 0.1);
    text-decoration: none;
    transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}

.category-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.category-card img,
.category-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-card-media-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgb(var(--accent-rgb));
}

.category-card-media-fallback svg {
    width: 30%;
    height: 30%;
}

.category-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 0.75rem;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 55%);
}

.category-card-title {
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1.3;
}

.categories-more {
    text-align: center;
    margin-top: 2.5rem;
}

/* ---------- Projects / Realizime ---------- */
.projects-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 640px) {
    .projects-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .projects-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}

.project-card {
    display: block;
    text-decoration: none;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}

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

.project-card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    /* Soft brand-tinted gradient standing in for the real jobsite photo — reads as an
       intentional abstract placeholder rather than an empty gray box. */
    background: linear-gradient(135deg, #f4f5f6 0%, #eceef1 55%, #fbecea 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(211, 27, 27, 0.4);
}

.project-card-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-card-media svg { width: 24%; height: 24%; }

.project-card-body { padding: 1.15rem 1.25rem 1.5rem; }

.project-card-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ink-900);
    margin: 0 0 0.3rem;
}

.project-card-tag {
    font-size: 0.85rem;
    color: var(--ink-500);
    margin: 0;
}

/* ---------- CTA banner ---------- */
/* Apple-style card instead of a full-bleed color band — light background so it sits
   naturally on the page instead of a heavy red slab. */
.cta-banner {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: 3rem 1.5rem;
    text-align: center;
}

@media (min-width: 768px) {
    .cta-banner { padding: 4rem 3rem; }
}

.cta-banner h2 {
    font-size: clamp(1.5rem, 3.4vw, 2.25rem);
    font-weight: 800;
    color: var(--ink-900);
    margin: 0 0 0.75rem;
}

.cta-banner p {
    color: var(--ink-600);
    margin: 0 auto 1.75rem;
    max-width: 40rem;
    font-size: 1.05rem;
}

.cta-banner-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ---------- Stats ---------- */
.stats { background: var(--ink-50); }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 2rem;
    text-align: center;
}

@media (min-width: 768px) {
    .stats-grid { grid-template-columns: repeat(4, 1fr); }
}

.stat-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 1rem;
    color: var(--ink-500);
}

.stat-icon svg { width: 100%; height: 100%; }

.stat-number {
    font-size: clamp(2rem, 5vw, 2.75rem);
    font-weight: 800;
    color: var(--red-600);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.stat-label {
    color: var(--ink-600);
    font-size: 0.95rem;
    margin: 0;
}

/* ---------- Certifications ---------- */
.certifications-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (min-width: 640px) {
    .certifications-row { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
}

.cert-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1.75rem 1rem;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-md);
    background: #fff;
    filter: grayscale(1);
    opacity: 0.6;
    transition: filter 0.3s var(--ease), opacity 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.cert-badge:hover {
    filter: grayscale(0);
    opacity: 1;
    border-color: var(--red-500);
    transform: translateY(-3px);
}

.cert-badge img {
    max-height: 44px;
    width: auto;
}

.cert-badge-code {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--ink-800);
    letter-spacing: 0.02em;
}

.cert-badge-label {
    font-size: 0.75rem;
    color: var(--ink-500);
    text-align: center;
}

/* ---------- Trust / partners strip ---------- */
.trust { background: var(--ink-50); }

.partners-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (min-width: 640px) {
    .partners-row { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
    .partners-row { grid-template-columns: repeat(6, 1fr); gap: 1.25rem; }
}

.partner-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 2.4 / 1;
    padding: 1rem;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-sm);
    background: #fff;
    filter: grayscale(1);
    opacity: 0.55;
    transition: filter 0.3s var(--ease), opacity 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.partner-badge:hover {
    filter: grayscale(0);
    opacity: 1;
    border-color: var(--red-500);
    transform: translateY(-3px);
}

.partner-badge img {
    max-width: 100%;
    max-height: 100%;
}

.partner-badge-label {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--ink-600);
}

/* ---------- Products browser (sidebar + filters + grid on /kategoria) ---------- */
.products-browser {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
}

@media (min-width: 900px) {
    .products-browser { grid-template-columns: 260px 1fr; gap: 2.5rem; }
}

.products-sidebar {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
}

@media (min-width: 900px) {
    .products-sidebar { position: sticky; top: calc(var(--header-h-scrolled) + 1.5rem); }
}

.products-sidebar-title {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--ink-500);
    margin: 0 0 0.75rem;
}

.products-sidebar-link {
    --accent-rgb: 211, 27, 27;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.6rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--ink-700);
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.products-sidebar-link:hover { background: var(--ink-50); }

.products-sidebar-link.is-active {
    background: rgba(var(--accent-rgb), 0.1);
    color: rgb(var(--accent-rgb));
    font-weight: 700;
}

.products-sidebar-icon { flex: none; width: 20px; height: 20px; color: rgb(var(--accent-rgb)); }
.products-sidebar-icon svg { width: 100%; height: 100%; }

.products-sidebar-children {
    padding-left: 2.1rem;
    margin-bottom: 0.25rem;
}

.products-sidebar-sublink {
    display: block;
    padding: 0.4rem 0.5rem;
    font-size: 0.84rem;
    color: var(--ink-500);
    text-decoration: none;
    border-radius: var(--radius-sm);
}

.products-sidebar-sublink:hover { background: var(--ink-50); color: var(--ink-800); }
.products-sidebar-sublink.is-active { color: var(--red-600); font-weight: 700; }

.products-main-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}

.products-main-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: var(--red-50);
    color: var(--red-600);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.products-main-icon svg { width: 22px; height: 22px; }
.products-main-head h2 { font-size: 1.4rem; font-weight: 800; color: var(--ink-900); margin: 0; }

.products-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1rem;
    padding: 4rem 1.5rem;
    border: 1px dashed var(--ink-300);
    border-radius: var(--radius-lg);
    color: var(--ink-500);
}

.products-prompt svg { width: 40px; height: 40px; color: var(--ink-300); }

.products-filter-bar {
    background: var(--ink-50);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1.25rem;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 180px;
}

.filter-group-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink-600);
    margin: 0;
}

.filter-select-wrap { position: relative; }

.filter-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    padding: 0.55rem 2.25rem 0.55rem 0.85rem;
    border: 1px solid var(--ink-300);
    border-radius: var(--radius-sm);
    background: #fff;
    font-family: inherit;
    font-size: 0.88rem;
    color: var(--ink-800);
    cursor: pointer;
    transition: border-color 0.2s var(--ease);
}

.filter-select:hover,
.filter-select:focus-visible {
    border-color: var(--red-500);
    outline: none;
}

.filter-select-arrow {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--ink-500);
    pointer-events: none;
}

.filter-actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    align-self: flex-end;
    padding-bottom: 0.1rem;
}

.filter-clear {
    font-size: 0.85rem;
    color: var(--ink-500);
    text-decoration: underline;
}

.filter-clear:hover { color: var(--red-600); }

/* ---------- Breadcrumb ---------- */
.breadcrumb {
    background: var(--ink-50);
    border-bottom: 1px solid var(--ink-200);
    /* Same fix as .hero: pulled up under the sticky header by its height (margin-top negative),
       with that same amount added back as padding-top so the breadcrumb's own text stays exactly
       where it was — only the background extends up behind the header. Without this, the header
       sits over nothing but plain body background at scroll 0 (sticky doesn't overlap content
       until you actually scroll), so the glass blur has nothing but flat white to show. */
    margin-top: calc(-1 * var(--header-h-mobile));
    padding: calc(0.85rem + var(--header-h-mobile)) 0 0.85rem;
}

@media (min-width: 768px) {
    .breadcrumb {
        margin-top: calc(-1 * var(--header-h-desktop));
        padding-top: calc(0.85rem + var(--header-h-desktop));
    }
}

.breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    font-size: 0.85rem;
    color: var(--ink-500);
}

.breadcrumb a {
    text-decoration: none;
    color: var(--ink-600);
    transition: color 0.2s var(--ease);
}

.breadcrumb a:hover { color: var(--red-600); }

.breadcrumb .is-current {
    color: var(--ink-900);
    font-weight: 600;
}

/* ---------- Category hero (mini banner on category show page) ---------- */
.category-hero {
    position: relative;
    padding: 3rem 0;
    color: #fff;
    background:
        radial-gradient(130% 200% at 100% 0%, rgba(211, 27, 27, 0.35) 0%, rgba(211, 27, 27, 0) 55%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0px, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 15px),
        linear-gradient(160deg, #262626 0%, #1a1a1a 100%);
}

.category-hero-icon {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    color: var(--red-500);
}

.category-hero-icon svg { width: 28px; height: 28px; }

.category-hero h1 {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 800;
    margin: 0;
}

/* ---------- Project hero (mini banner on /realizime/{slug}) ---------- */
.project-hero {
    position: relative;
    overflow: hidden;
    padding: 4rem 0;
    color: #fff;
    background:
        radial-gradient(130% 200% at 100% 0%, rgba(211, 27, 27, 0.35) 0%, rgba(211, 27, 27, 0) 55%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0px, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 15px),
        linear-gradient(160deg, #262626 0%, #1a1a1a 100%);
    /* Same header-overlap fix as .hero/.breadcrumb — see .hero for the full explanation. */
    margin-top: calc(-1 * var(--header-h-mobile));
    padding-top: calc(4rem + var(--header-h-mobile));
}

@media (min-width: 768px) {
    .project-hero {
        margin-top: calc(-1 * var(--header-h-desktop));
        padding-top: calc(4rem + var(--header-h-desktop));
    }
}

.project-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 23, 26, 0.4) 0%, rgba(20, 23, 26, 0.8) 100%);
}

.project-hero-content { position: relative; z-index: 1; }

.project-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--red-500);
    margin: 0 0 0.75rem;
}

.project-hero h1 {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 800;
    margin: 0;
}

/* ---------- Products used in a project (detail page) ---------- */
.product-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.product-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1rem 0.5rem 0.5rem;
    border: 1px solid var(--ink-200);
    border-radius: 999px;
    background: #fff;
    text-decoration: none;
    color: var(--ink-800);
    font-size: 0.88rem;
    font-weight: 600;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}

.product-chip:hover {
    border-color: var(--red-500);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.product-chip-thumb {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ink-100);
    color: var(--ink-400);
}

.product-chip-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-chip-thumb svg { width: 16px; height: 16px; }

/* ---------- Product placeholder grid (category show page) ---------- */
.products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

@media (min-width: 640px) {
    .products-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
    .products-grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
}

.product-card {
    display: block;
    text-decoration: none;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}

.product-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.product-card-media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--ink-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-300);
}

.product-card-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-card-media svg { width: 30%; height: 30%; }

.product-card-body { padding: 0.9rem 1rem 1.1rem; }

.product-card-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink-800);
    margin: 0;
}

.products-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3.5rem 1.5rem;
    border: 1px dashed var(--ink-300);
    border-radius: var(--radius-lg);
    color: var(--ink-500);
}

.products-empty svg {
    width: 40px;
    height: 40px;
    margin: 0 auto 1rem;
    color: var(--ink-300);
}

/* ---------- DAST & Nature (Apple "and the environment" section style) ---------- */
.eco-section { background: var(--ink-50); }

.eco-heading {
    font-size: clamp(1.8rem, 4vw, 2.75rem);
    font-weight: 800;
    color: var(--ink-900);
    line-height: 1.15;
    margin: 0 0 0.75rem;
    max-width: 18ch;
}

.eco-link {
    display: inline-block;
    color: var(--red-600);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    margin-bottom: 2.5rem;
}

.eco-link:hover { text-decoration: underline; }

.eco-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .eco-grid { grid-template-columns: repeat(3, 1fr); }
}

.eco-card {
    position: relative;
    display: block;
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.5rem 4rem;
    min-height: 200px;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}

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

.eco-card-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 1.25rem;
}

.eco-card-icon svg { width: 100%; height: 100%; }

.eco-card.is-green .eco-card-icon { color: #16a34a; }
.eco-card.is-blue .eco-card-icon { color: #2563c9; }
.eco-card.is-teal .eco-card-icon { color: #0d9488; }

.eco-card-text {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink-900);
    line-height: 1.4;
    margin: 0;
}

.eco-highlight { font-weight: 800; }
.eco-card.is-green .eco-highlight { color: #16a34a; }
.eco-card.is-blue .eco-highlight { color: #2563c9; }
.eco-card.is-teal .eco-highlight { color: #0d9488; }

/* Dark frosted-glass pill (label + colored circular icon), matching Apple's
   "Compare iPhone design" style pill — reserved for this kind of expand/compare
   trigger, not the site's regular red CTA buttons. */
.eco-card-expand {
    position: absolute;
    left: 1.5rem;
    bottom: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    border: none;
    padding: 0.4rem 0.4rem 0.4rem 1.15rem;
    border-radius: 999px;
    background: rgba(20, 23, 26, 0.55);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    color: #fff;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}

.eco-card-expand:hover,
.eco-card-expand:focus-visible {
    background: rgba(20, 23, 26, 0.78);
    transform: translateY(-2px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .eco-card-expand { background: rgba(20, 23, 26, 0.88); }
}

.eco-card-expand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: var(--red-600);
    flex: none;
}

.eco-card.is-green .eco-card-expand-icon { background: #16a34a; }
.eco-card.is-blue .eco-card-expand-icon { background: #2563c9; }
.eco-card.is-teal .eco-card-expand-icon { background: #0d9488; }

.eco-card-expand-icon svg { width: 13px; height: 13px; color: #fff; }

/* ---------- Glass modal (eco cards "+") ---------- */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(20, 23, 26, 0.32);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease), visibility 0.3s;
}

.modal-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 201;
    width: min(90vw, 560px);
    max-height: 80vh;
    /* overflow-y lives on .modal-scroll below, not here — a scrollbar on this element
       would render outside its own rounded corners (a well-known browser quirk),
       which is exactly the ugly "elevator sticking out" look this fixes. */
    overflow: hidden;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(36px) saturate(180%);
    -webkit-backdrop-filter: blur(36px) saturate(180%);
    border: 1px solid rgba(230, 233, 236, 0.7);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -46%);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}

.modal-scroll {
    max-height: 80vh;
    overflow-y: auto;
    padding: 2.75rem 2rem 2rem;
}

.modal.is-open {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%);
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, 0.6);
}

.modal-body h3 {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--ink-900);
    margin: 0 0 1.1rem;
    padding-right: 2rem;
}

.modal-body p {
    color: var(--ink-700);
    line-height: 1.7;
    margin: 0 0 1rem;
}

.modal-readmore { margin-top: 0.5rem; }

/* "Kërko një takim" modal content: hero photo/video (config/appointment-modal-media.php) +
   a short contact list. Same branded placeholder gradient as .project-hero/.category-explorer-
   hero until a real asset is set. */
.modal-hero {
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin: 0 0 1.25rem;
    background: linear-gradient(150deg, #262626 0%, #1a1a1a 100%);
}

.modal-hero img,
.modal-hero video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal-hero-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.35);
}

.modal-hero-placeholder svg { width: 20%; height: 20%; }

.modal-contact-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.modal-contact-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    background: var(--ink-50);
    color: var(--ink-800);
    text-decoration: none;
    font-weight: 600;
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.modal-contact-item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--red-600);
}

.modal-contact-item:hover {
    background: var(--ink-100);
    color: var(--red-600);
}

/* Contact page (page/contact.php) — same .modal-contact-item rows as the "Kërko një takim"
   modal, just reused on a full page instead of inside a modal. Card + contact grid sit side by
   side to use the full page width instead of a single narrow column with empty space beside it. */
.contact-details {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 1.5rem;
    align-items: stretch;
}

@media (max-width: 767px) {
    .contact-details { grid-template-columns: 1fr; }
}

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

@media (min-width: 768px) and (max-width: 900px) {
    .contact-details-grid { grid-template-columns: 1fr; }
}

.contact-company-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.5rem 1.75rem;
    background: var(--ink-50);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-lg);
    margin-bottom: 0;
    text-decoration: none;
    transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}

.contact-company-card:hover {
    background: #fff;
    border-color: var(--red-600);
    box-shadow: var(--shadow-sm);
}

.contact-company-name {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ink-900);
    margin: 0 0 0.35rem;
}

.contact-company-address {
    color: var(--ink-600);
    margin: 0;
    transition: color 0.15s var(--ease);
}

.contact-company-card:hover .contact-company-address {
    color: var(--red-600);
}

/* Phone/email/Instagram/Facebook side by side instead of one long stacked column. */
.contact-page-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
}

@media (max-width: 479px) {
    .contact-page-list { grid-template-columns: 1fr; }
}

.contact-page-list .modal-contact-item {
    font-size: 1rem;
    padding: 0.9rem 1.1rem;
}

/* Hero photo at the top of the Contact page — config/contact-hero-media.php. Same branded
   placeholder gradient as the other hero-media slots (.project-hero etc.) until a real photo is
   set. */
.contact-hero {
    aspect-ratio: 16 / 6;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 2rem;
    background: linear-gradient(150deg, #262626 0%, #1a1a1a 100%);
}

@media (max-width: 639px) {
    .contact-hero { aspect-ratio: 4 / 3; }
}

.contact-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact-hero-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.35);
}

.contact-hero-placeholder svg { width: 12%; height: 12%; }

.contact-welcome-desc {
    max-width: 46rem;
    color: var(--ink-700);
    font-size: 1.15rem;
    line-height: 1.8;
    margin: 0 0 2rem;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .modal-backdrop { background: rgba(20, 23, 26, 0.55); }
    .modal { background: #fff; }
}

/* ---------- Tools page (page/tools.php) ---------- */
.tools-subhead {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--ink-900);
    margin: 0 0 0.4rem;
}

.tools-subhead-desc {
    color: var(--ink-600);
    margin: 0 0 1.5rem;
    max-width: 40rem;
}

.guide-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 3rem;
}

@media (min-width: 640px) {
    .guide-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .guide-grid { grid-template-columns: repeat(3, 1fr); }
}

.guide-card {
    --accent-rgb: 211, 27, 27;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1.1rem 1.15rem;
    background: var(--ink-50);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-md);
    transition: border-color 0.2s var(--ease);
}

.guide-card:hover {
    border-color: rgba(var(--accent-rgb), 0.35);
}

.guide-card-icon {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--accent-rgb), 0.12);
    color: rgb(var(--accent-rgb));
}

.guide-card-icon svg { width: 22px; height: 22px; }

.guide-card-body { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; }

.guide-card-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ink-900);
    line-height: 1.35;
}

.guide-card-desc {
    font-size: 0.85rem;
    color: var(--ink-600);
    line-height: 1.5;
}

.guide-card-calc {
    flex-basis: 100%;
    padding-top: 0.9rem;
    border-top: 1px solid var(--ink-200);
}

.guide-calc-input-row {
    display: flex;
    gap: 0.5rem;
}

.guide-calc-input-row input {
    flex: 1;
    min-width: 0;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    background: #fff;
}

.guide-calc-input-row input:focus {
    outline: none;
    border-color: rgb(var(--accent-rgb));
}

.guide-calc-btn {
    flex: none;
    padding: 0.55rem 1rem;
    border: none;
    border-radius: var(--radius-sm);
    background: rgb(var(--accent-rgb));
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s var(--ease);
}

.guide-calc-btn:hover { opacity: 0.85; }

.guide-calc-results {
    margin-top: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.guide-calc-row {
    padding: 0.6rem 0.7rem;
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-sm);
}

.guide-calc-row-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.guide-calc-row-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink-900);
}

.guide-calc-row-value {
    font-size: 0.9rem;
    font-weight: 800;
    color: rgb(var(--accent-rgb));
    white-space: nowrap;
}

.guide-calc-row-product {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.guide-calc-row-product select {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    background: var(--ink-50);
}

.guide-calc-product-link {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--red-600);
    text-decoration: none;
}

.guide-calc-note {
    font-size: 0.72rem;
    color: var(--ink-500);
    margin: 0.2rem 0 0;
    line-height: 1.4;
}

.guide-card-chips {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.guide-card-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: rgba(var(--accent-rgb), 0.1);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    color: rgb(var(--accent-rgb));
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}

.guide-card-chip svg { width: 14px; height: 14px; flex: none; }

.guide-card-chip:hover {
    background: rgb(var(--accent-rgb));
    color: #fff;
    transform: translateY(-1px);
}

.calc-panel {
    max-width: 40rem;
    padding: 1.75rem 2rem;
    background: var(--ink-50);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-lg);
}

.calc-form {
    display: grid;
    gap: 1rem;
    margin-top: 1.25rem;
}

.calc-field { display: flex; flex-direction: column; gap: 0.4rem; }

.calc-field label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ink-800);
}

.calc-field input {
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 0.95rem;
    background: #fff;
    color: var(--ink-900);
}

.calc-field input:focus {
    outline: none;
    border-color: var(--red-600);
}

.calc-hint {
    font-size: 0.8rem;
    color: var(--ink-500);
}

.calc-product-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--red-600);
    text-decoration: none;
}

.calc-product-link:hover { text-decoration: underline; }

.calc-submit { margin-top: 0.25rem; }

.calc-result {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ink-200);
}

.calc-result-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.1rem;
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-md);
}

.calc-result-label {
    font-size: 0.8rem;
    color: var(--ink-500);
}

.calc-result-value {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--red-600);
}

/* ---------- Product page ---------- */
.product-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-bottom: 2rem;
}

@media (min-width: 900px) {
    .product-layout { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
}

.product-gallery-main {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--ink-100);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.product-gallery-thumb {
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 2px solid transparent;
    padding: 0;
    background: var(--ink-100);
    cursor: pointer;
    transition: border-color 0.2s var(--ease);
}

.product-gallery-thumb.is-active { border-color: var(--red-500); }
.product-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }

.product-title {
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    font-weight: 800;
    color: var(--ink-900);
    margin: 0 0 0.5rem;
}

.product-sku {
    font-size: 0.85rem;
    color: var(--ink-500);
    margin: 0 0 1.25rem;
}

.product-short-desc {
    font-size: 1.05rem;
    color: var(--ink-600);
    line-height: 1.7;
    margin: 0 0 1.5rem;
}

.datasheet-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-md);
    background: #fff;
    text-decoration: none;
    margin-bottom: 1.5rem;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}

.datasheet-card:hover {
    border-color: var(--red-500);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.datasheet-card-icon {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: var(--red-50);
    color: var(--red-600);
    display: flex;
    align-items: center;
    justify-content: center;
}

.datasheet-card-icon svg { width: 22px; height: 22px; }

.datasheet-card-text { display: flex; flex-direction: column; }
.datasheet-card-text strong { color: var(--ink-900); font-weight: 700; font-size: 0.95rem; }
.datasheet-card-text span { color: var(--ink-500); font-size: 0.8rem; }

.product-actions {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.product-description-section {
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--ink-200);
    max-width: 50rem;
}

/* ---------- Footer ---------- */
.site-footer {
    background: var(--ink-900);
    color: rgba(255, 255, 255, 0.72);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 3.5rem 0 2.5rem;
}

@media (min-width: 768px) {
    .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; }
}

.footer-logo { height: 30px; width: auto; margin-bottom: 1rem; filter: brightness(0) invert(1); }

.footer-tagline { font-size: 0.9rem; margin: 0 0 1.25rem; }

.footer-social {
    display: flex;
    gap: 0.75rem;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    text-decoration: none;
    transition: background 0.2s var(--ease);
}

.footer-social a:hover { background: var(--red-600); }
.footer-social svg { width: 18px; height: 18px; }

.footer-heading {
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    margin: 0 0 1rem;
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    font-size: 0.9rem;
}

.footer-links a { text-decoration: none; transition: color 0.2s var(--ease); }
.footer-links a:hover { color: #fff; }

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 1.5rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
    font-size: 0.85rem;
}

@media (min-width: 640px) {
    .footer-bottom { flex-direction: row; justify-content: space-between; }
}

.footer-legal-links {
    display: flex;
    gap: 1.25rem;
}

.footer-legal-links a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s var(--ease);
}

.footer-legal-links a:hover { color: #fff; }

/* ---------- Misc ---------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ink-100); }
::-webkit-scrollbar-thumb { background: var(--ink-300); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-500); }

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--red-500);
    outline-offset: 2px;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media print {
    .site-header, .site-footer, .mobile-menu { display: none; }
}