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

  :root {
    --red:        #d7191f; /* 5.19:1 with white text; same red as the scanner app icon */
    --red-dark:   #b8141a;
    --red-light:  #fff0f0;
    --text:       #1a1a1a;
    --text-mid:   #444;
    --text-muted: #666;
    --bg:         #ffffff;
    --bg2:        #f7f7f7;
    --border:     #e4e4e4;
    --star:       #f5a623; /* the review stars */
    --oswald:     'Oswald', sans-serif;
    --inter:      'Inter', sans-serif;
  }

  html { scroll-behavior: smooth; }
  body { background: var(--bg); color: var(--text); font-family: var(--inter); font-size: 16px; line-height: 1.6; }

  /* keyboard focus: an outline only when moving with the keyboard, not on a mouse click */
  :focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

  /* ── UTILITY ── */
  .container { max-width: 1160px; margin: 0 auto; padding: 0 32px; }
  section { padding: 88px 0; }

  .section-title {
    font-family: var(--oswald); font-size: clamp(26px, 3vw, 38px); font-weight: 600;
    text-transform: uppercase; line-height: 1.1; color: var(--text);
    margin-bottom: 40px; padding-bottom: 16px;
    border-bottom: 2px solid var(--border);
  }

  /* ── NAV ── */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    background: rgba(255,255,255,0.97); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
    height: 68px; display: flex; align-items: center;
  }
  .nav-inner {
    max-width: 1160px; margin: 0 auto; padding: 0 32px;
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 32px;
  }
  /* SVG wordmark in nav */
  .nav-wordmark {
    text-decoration: none;
    display: flex; align-items: center;
    flex-shrink: 0;
  }
  .nav-wordmark svg {
    fill: var(--text);
    height: 28px;
    width: auto;
    display: block;
  }
  .nav-links { list-style: none; display: flex; gap: 32px; }
  .nav-links a {
    font-family: var(--oswald); font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase;
    color: var(--text-muted); text-decoration: none; transition: color .2s;
  }
  .nav-links a:hover { color: var(--red); }
  .nav-cta {
    display: flex; align-items: center; gap: 8px;
    background: var(--red); color: #fff; text-decoration: none;
    font-family: var(--oswald); font-size: 15px; font-weight: 600; letter-spacing: .4px;
    padding: 9px 20px; border-radius: 4px;
    transition: background .2s; white-space: nowrap; flex-shrink: 0;
  }
  .nav-cta:hover { background: var(--red-dark); }
  .nav-cta svg { width: 13px; height: 13px; flex-shrink: 0; }

  /* ── HERO ── */
  .hero {
    padding-top: 68px;
    display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
    background: var(--bg);
  }
  .hero-left {
    display: flex; flex-direction: column; justify-content: center;
    padding: 72px 64px 72px 32px;
    max-width: 620px; margin-left: auto;
  }
  .hero-headline {
    font-family: var(--oswald); font-size: clamp(30px, 3.8vw, 50px); font-weight: 700;
    text-transform: uppercase; line-height: 1.25; color: var(--text);
    margin-bottom: 16px;
  }
  .hero-headline span { color: var(--red); }
  .hero-sub {
    font-size: 17px; color: var(--text-muted); line-height: 1.75; max-width: 440px;
    margin-bottom: 32px;
  }
  .hero-sub strong { color: var(--text-mid); font-weight: 600; }
  /* address and hours, under the call button */
  .hero-where {
    display: flex; flex-wrap: wrap; gap: 6px 24px;
    margin-top: 20px; font-size: 15px; color: var(--text-mid);
  }
  .hero-where a, .hero-where > span { display: inline-flex; align-items: center; gap: 8px; }
  .hero-where a {
    color: inherit; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px;
    transition: color .2s;
  }
  .hero-where a:hover { color: var(--red); }
  .hero-where svg { width: 16px; height: 16px; fill: var(--red); flex-shrink: 0; }
  .hero-btn {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--red); color: #fff; text-decoration: none;
    font-family: var(--oswald); font-size: 16px; font-weight: 600; letter-spacing: .5px;
    padding: 15px 30px; border-radius: 4px; align-self: flex-start;
    transition: background .2s, transform .15s;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--red) 20%, transparent);
  }
  .hero-btn:hover { background: var(--red-dark); transform: translateY(-2px); }
  .hero-btn svg { width: 15px; height: 15px; }
  .hero-stats {
    display: flex; gap: 32px; margin-top: 44px;
    padding-top: 32px; border-top: 1.5px solid var(--border);
  }
  .hero-stat .num {
    font-family: var(--oswald); font-size: 32px; font-weight: 700; color: var(--red); line-height: 1;
  }
  /* the years' odometer (site.js): one wheel per digit, a strip of digits that slides up */
  .odo { display: inline-flex; font-variant-numeric: tabular-nums; }
  .odo-wheel { display: block; height: 1em; overflow: hidden; }
  .odo-strip { display: block; transition: transform 2s cubic-bezier(0.16, 1, 0.3, 1) .25s; }
  .odo-strip::before { content: attr(data-digits); display: block; white-space: pre; line-height: 1; }
  .odo-rolled .odo-strip { transform: translateY(calc(var(--steps) * -1em)); }
  .visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .hero-stat .lbl { font-size: 13px; color: var(--text-muted); margin-top: 4px; }

  /* Hero right: the workshop photo, nothing over it (it fades to white at its bottom left, towards the text) */
  .hero-right {
    background: var(--bg2) url('/img/hero.jpg') 60% center / cover no-repeat;
    background-image: image-set(url('/img/hero.avif') type('image/avif'), url('/img/hero.jpg') type('image/jpeg'));
  }

  /* ── WHY US: four points, a plain list in two columns ── */
  .why-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px;
  }
  .why-card { border-top: 1px solid var(--border); padding: 20px 0 24px; }
  .why-card:nth-child(-n+2) { border-top: none; padding-top: 0; } /* the heading's line is above the first row */
  .why-card-header {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 8px;
  }
  .why-card-header svg {
    width: 20px; height: 20px; flex-shrink: 0;
    stroke: var(--red); fill: none;
  }
  .why-card h3 {
    font-family: var(--oswald); font-size: 17px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .4px; color: var(--text);
  }
  .why-card p { font-size: 15px; color: var(--text-muted); line-height: 1.65; max-width: 46ch; }

  /* ── SERVICES ── */
  .services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
  .service-card {
    border: 1.5px solid var(--border); border-radius: 8px;
    overflow: hidden; transition: border-color .2s;
  }
  .service-card:hover { border-color: var(--red); }
  .service-card-top {
    background: var(--text); padding: 48px 36px;
    background-size: cover; background-position: center;
    position: relative; height: 280px;
    display: flex; flex-direction: column; justify-content: flex-end;
  }
  .service-card-top::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.15) 100%);
  }
  .service-card-top--starteriai {
    background-image: url('/img/starteriai.jpg');
    background-image: image-set(url('/img/starteriai.avif') type('image/avif'), url('/img/starteriai.jpg') type('image/jpeg'));
  }
  .service-card-top--generatoriai {
    background-image: url('/img/generatoriai.jpg');
    background-image: image-set(url('/img/generatoriai.avif') type('image/avif'), url('/img/generatoriai.jpg') type('image/jpeg'));
  }
  .service-card-top h3, .service-card-top p {
    position: relative; z-index: 1;
  }
  .service-card-top svg { width: 34px; height: 34px; fill: var(--red); margin-bottom: 18px; display: block; }
  .service-card-top h3 {
    font-family: var(--oswald); font-size: 24px; font-weight: 700;
    text-transform: uppercase; color: #fff; margin-bottom: 10px;
  }
  .service-card-top p { font-size: 14px; color: rgba(255,255,255,0.8); line-height: 1.7; }

  /* ── WHAT WE REPAIR: slim dark band ── */
  #remontuojame { background: var(--text); padding: 64px 0; }
  .repair-inner { display: grid; grid-template-columns: auto 1fr 1fr; gap: 32px 64px; align-items: start; }
  .repair-title {
    font-family: var(--oswald); font-size: clamp(24px, 2.6vw, 32px); font-weight: 600;
    text-transform: uppercase; line-height: 1.1; color: var(--bg);
    border-left: 3px solid var(--red); padding-left: 20px;
  }
  .repair-group h3 {
    font-size: 14px; font-weight: 500; color: color-mix(in srgb, var(--bg) 65%, transparent);
    margin-bottom: 12px;
  }
  .repair-list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 28px; }
  .repair-list li { font-family: var(--oswald); font-size: 20px; line-height: 1.35; color: var(--bg); }

  /* ── CONTACT ── */
  #paslaugos    { background: var(--bg2); }
  #kodel        { background: var(--bg);  }
  #kontaktai    { background: var(--bg2); }
  #atsiliepimai { background: var(--bg);  }
  #galerija     { background: var(--bg2); }
  .contact-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 24px; align-items: stretch; }
  .contact-details {
    background: var(--bg); border: 1.5px solid var(--border); border-radius: 8px; overflow: hidden;
    display: flex; flex-direction: column;
  }
  .contact-detail-items { padding: 8px 28px; flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; }
  .contact-detail-item {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 20px 0; border-bottom: 1px solid var(--border);
  }
  .contact-detail-item:last-child { border-bottom: none; }
  .cd-icon {
    width: 36px; height: 36px; flex-shrink: 0;
    background: var(--red-light); border: 1px solid color-mix(in srgb, var(--red) 15%, transparent);
    border-radius: 7px; display: flex; align-items: center; justify-content: center;
  }
  .cd-icon svg { width: 17px; height: 17px; fill: var(--red); }
  .cd-label { font-size: 13px; color: var(--text-muted); margin-bottom: 2px; }
  .cd-val { font-family: var(--oswald); font-size: 16px; color: var(--text); line-height: 1.35; }
  .cd-val a { color: var(--text); text-decoration: none; transition: color .2s; }
  .cd-val a:hover { color: var(--red); }
  .cd-closed { color: var(--text-muted); font-size: 14px; margin-top: 4px; }
  .map-wrap {
    border: 1.5px solid var(--border); border-radius: 8px; overflow: hidden;
    display: flex; flex-direction: column;
  }
  .map-wrap iframe { flex: 1; border: none; min-height: 340px; width: 100%; display: block; }
  .map-footer {
    padding: 12px 20px; background: var(--bg);
    border-top: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
  }
  .map-footer span { font-size: 12px; color: var(--text-muted); }
  .map-footer a {
    display: inline-flex; align-items: center; gap: 4px;
    font-family: var(--oswald); font-size: 12px; letter-spacing: .5px;
    color: var(--red); text-decoration: none; transition: opacity .2s;
  }
  .map-footer a:hover { opacity: .7; }
  .map-footer a svg { width: 11px; height: 11px; fill: var(--red); }

  /* ── REVIEWS ── */
  .reviews-meta {
    display: flex; align-items: center; gap: 20px;
    margin-bottom: 40px; padding-bottom: 24px;
    border-bottom: 2px solid var(--border);
    flex-wrap: wrap;
  }
  .reviews-score {
    display: flex; align-items: center; gap: 12px;
  }
  .reviews-score .big-score {
    font-family: var(--oswald); font-size: 52px; font-weight: 700;
    color: var(--text); line-height: 1;
  }
  .reviews-score-right { display: flex; flex-direction: column; gap: 4px; }
  .stars-row { display: flex; gap: 3px; }
  .stars-row svg { width: 18px; height: 18px; fill: var(--star); }
  .star-on  { stop-color: var(--star); }   /* the part-filled star: its gradient's two colours */
  .star-off { stop-color: var(--border); }
  .reviews-count { font-size: 12px; color: var(--text-muted); }
  .google-badge {
    display: flex; align-items: center; gap: 7px; margin-left: auto;
    font-size: 12px; color: var(--text-muted);
  }
  .google-badge svg { width: 18px; height: 18px; }

  .reviews-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  }
  .review-card {
    background: var(--bg2); border: 1.5px solid var(--border); border-radius: 8px;
    padding: 24px; display: flex; flex-direction: column; gap: 12px;
    transition: border-color .2s, box-shadow .2s;
    text-decoration: none; color: inherit; cursor: pointer; display: flex;
  }
  .review-card:hover { border-color: var(--red); box-shadow: 0 4px 20px color-mix(in srgb, var(--red) 6%, transparent); }
  .review-card[hidden] { display: none; }
  .svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
  .review-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
  .reviewer-info { display: flex; flex-direction: column; gap: 2px; }
  .reviewer-name { font-family: var(--oswald); font-size: 15px; font-weight: 600; color: var(--text); }
  .review-stars { display: flex; gap: 2px; flex-shrink: 0; }
  .review-stars svg { width: 14px; height: 14px; fill: var(--star); }
  .review-text { font-size: 14px; color: var(--text-mid); line-height: 1.65; flex: 1; }
  .reviews-nav {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    margin-top: 28px;
  }
  .reviews-nav button {
    width: 36px; height: 36px; border-radius: 50%;
    border: 1.5px solid var(--border); background: var(--bg);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: border-color .2s, background .2s;
  }
  .reviews-nav button:hover { border-color: var(--red); background: var(--red-light); }
  .reviews-nav button svg { width: 14px; height: 14px; fill: var(--text-mid); }
  .reviews-nav .dots { display: flex; gap: 6px; }
  .reviews-nav .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--border); transition: background .2s;
  }
  .reviews-nav .dot.active { background: var(--red); }

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

  /* ── GALLERY ── */
  .gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
  }
  .video-wrap {
    border-radius: 8px; overflow: hidden;
    border: 1.5px solid var(--border);
    background: #000;
    position: relative; width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
  }
  .video-wrap--short {
    padding-bottom: 177.78%; /* 9:16 portrait */
  }
  .video-wrap iframe {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    border: none; display: block;
  }
  @media (max-width: 768px) {
    .gallery-grid { grid-template-columns: 1fr; }
  }

  /* ── FOOTER ── */
  footer { background: var(--text); border-top: 3px solid var(--red); }
  .footer-inner {
    max-width: 1160px; margin: 0 auto; padding: 28px 32px;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  }
  .footer-logo-wrap { background: #fff; padding: 6px 12px; border-radius: 3px; }
  .footer-logo-wrap img { height: 30px; display: block; }
  .footer-meta { display: flex; flex-direction: column; gap: 6px; }
  .footer-copy { font-size: 12px; color: #8c8c8c; }
  .footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
  .footer-links a, .footer-links button {
    font-family: var(--inter); font-size: 12px; color: #8c8c8c;
    background: none; border: none; padding: 0; cursor: pointer;
    text-decoration: underline; text-underline-offset: 2px;
  }
  .footer-links a:hover, .footer-links button:hover { color: #fff; }
  .footer-phone {
    display: flex; align-items: center; gap: 6px;
    font-family: var(--oswald); font-size: 14px; color: rgba(255,255,255,0.6);
    text-decoration: none; transition: color .2s;
  }
  .footer-phone:hover { color: #fff; }
  .footer-phone svg { width: 12px; height: 12px; fill: var(--red); }

  /* ── MOBILE ── */
  .mobile-call {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    z-index: 200; display: none;
    background: var(--red); color: #fff; text-decoration: none;
    font-family: var(--oswald); font-size: 15px; font-weight: 600;
    padding: 13px 28px; border-radius: 50px;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--red) 40%, transparent);
    align-items: center; gap: 8px;
  }
  .mobile-call svg { width: 14px; height: 14px; }

  @media (max-width: 1024px) {
    .hero { grid-template-columns: 1fr; min-height: auto; }
    .hero-left { max-width: 100%; padding: 60px 32px 40px; margin: 0; justify-content: flex-start; }
    .hero-right { aspect-ratio: 3 / 2; }
    .services-grid { grid-template-columns: 1fr; }
    .repair-inner { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
    .nav-links, .nav-cta { display: none; }
  }
  @media (max-width: 640px) {
    .mobile-call { display: flex; }
    .hero-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 16px; }
    .hero-stat .num { font-size: 28px; }
    .why-grid { grid-template-columns: 1fr; }
    .why-card:nth-child(2) { border-top: 1px solid var(--border); padding-top: 20px; }
    section { padding: 64px 0; }
    #remontuojame { padding: 48px 0; }
  }

  /* ── HAMBURGER & MOBILE MENU ── */
  .nav-hamburger {
    display: none;
    flex-direction: column; justify-content: center; gap: 5px;
    width: 36px; height: 36px; cursor: pointer;
    background: none; border: none; padding: 4px;
    margin-left: auto;
  }
  .nav-hamburger span {
    display: block; width: 22px; height: 2px;
    background: var(--text); border-radius: 2px;
    transition: transform .2s cubic-bezier(0.4, 0, 0.2, 1),
                opacity .15s ease,
                background .2s ease;
    transform-origin: center;
  }
  .nav-hamburger.open span { background: var(--red); }
  .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .mobile-menu {
    display: flex;
    flex-direction: column;
    position: fixed; top: 68px; left: 0; right: 0;
    background: rgba(255,255,255,0.98); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
    z-index: 99; padding: 0 32px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease,
                visibility 0.25s;
    opacity: 0;
    pointer-events: none;
    visibility: hidden; /* closed: its links are not reachable with Tab */
  }
  .mobile-menu.open {
    max-height: 400px;
    padding: 16px 32px 24px;
    opacity: 1;
    pointer-events: all;
    visibility: visible;
  }
  .mobile-menu a {
    font-family: var(--oswald); font-size: 16px; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--text);
    text-decoration: none; padding: 14px 0;
    border-bottom: 1px solid var(--border);
    transition: color .15s, transform .2s;
    transform: translateY(-6px);
    opacity: 0;
  }
  .mobile-menu.open a {
    transform: translateY(0);
    opacity: 1;
  }
  .mobile-menu.open a:nth-child(1) { transition-delay: 0.05s; }
  .mobile-menu.open a:nth-child(2) { transition-delay: 0.09s; }
  .mobile-menu.open a:nth-child(3) { transition-delay: 0.13s; }
  .mobile-menu.open a:nth-child(4) { transition-delay: 0.17s; }
  .mobile-menu.open a:nth-child(5) { transition-delay: 0.21s; }
  .mobile-menu a:last-child { border-bottom: none; }
  .mobile-menu a:hover { color: var(--red); }

  @media (max-width: 1024px) {
    .nav-hamburger { display: flex; margin-left: 0; }
    .lang-switcher { margin-left: auto; }
  }
  @media (max-width: 640px) {
    .nav-inner { padding: 0 16px; gap: 12px; }
    .nav-wordmark { flex: 0 1 176px; min-width: 0; }
    .nav-wordmark svg { width: 100%; height: auto; }
    .nav-hamburger { width: 44px; height: 44px; padding: 10px; align-items: center; flex-shrink: 0; }
    .mobile-menu, .mobile-menu.open { padding-left: 16px; padding-right: 16px; }
  }


  /* ── LANG SWITCHER ── */
  .lang-switcher {
    position: relative; flex-shrink: 0;
  }
  .lang-btn {
    display: flex; align-items: center; gap: 5px;
    font-family: var(--oswald); font-size: 12px; font-weight: 600;
    letter-spacing: .8px; text-transform: uppercase;
    padding: 7px 12px; cursor: pointer;
    border: 1.5px solid var(--border); border-radius: 4px;
    background: transparent; color: var(--text);
    transition: border-color .2s, background .15s;
  }
  .lang-btn .flag { font-size: 14px; line-height: 1; }
  .lang-btn .chevron {
    width: 10px; height: 10px; margin-left: 2px;
    transition: transform .2s;
  }
  .lang-btn.open .chevron { transform: rotate(180deg); }
  .lang-btn:hover, .lang-btn.open { border-color: var(--red); background: var(--bg2); }
  .lang-dropdown {
    position: absolute; top: calc(100% + 6px); right: 0;
    background: var(--bg); border: 1.5px solid var(--border);
    border-radius: 6px; overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    min-width: 120px; z-index: 200;
    opacity: 0; transform: translateY(-6px);
    pointer-events: none; visibility: hidden;
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
  }
  .lang-dropdown.open {
    opacity: 1; transform: translateY(0); pointer-events: all; visibility: visible;
  }
  .lang-option {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; cursor: pointer;
    font-family: var(--oswald); font-size: 13px; font-weight: 600;
    letter-spacing: .8px; text-transform: uppercase;
    color: var(--text); border: none; background: none;
    width: 100%; transition: background .15s, color .15s;
    text-decoration: none;
  }
  .lang-option:hover { background: var(--bg2); color: var(--red); }
  .lang-option:focus-visible { outline-offset: -3px; } /* inside: the list clips what is outside it */
  .lang-option.active { color: var(--red); }
  .lang-option .flag { font-size: 15px; }

  /* ── COOKIE BANNER ── */
  .cookie-banner {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 500;
    background: var(--text); border-top: 3px solid var(--red);
    padding: 20px 32px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
    transform: translateY(100%);
    transition: transform .35s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .cookie-banner.visible { transform: translateY(0); }
  .cookie-text {
    font-size: 13px; color: rgba(255,255,255,0.8);
    line-height: 1.6; flex: 1; min-width: 200px;
  }
  .cookie-text a {
    color: #fff; text-decoration: underline;
    transition: opacity .2s;
  }
  .cookie-text a:hover { opacity: .75; }
  .cookie-accept {
    display: inline-flex; align-items: center;
    background: var(--red); color: #fff; border: none;
    font-family: var(--oswald); font-size: 13px; font-weight: 600;
    letter-spacing: .5px; text-transform: uppercase;
    padding: 10px 22px; border-radius: 4px; cursor: pointer;
    white-space: nowrap; flex-shrink: 0;
    transition: background .2s;
  }
  .cookie-accept:hover { background: var(--red-dark); }
  .cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }
  .cookie-decline {
    display: inline-flex; align-items: center;
    background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.5);
    font-family: var(--oswald); font-size: 13px; font-weight: 600;
    letter-spacing: .5px; text-transform: uppercase;
    padding: 10px 22px; border-radius: 4px; cursor: pointer;
    white-space: nowrap; transition: border-color .2s;
  }
  .cookie-decline:hover { border-color: #fff; }
  @media (max-width: 640px) {
    .cookie-banner { padding: 16px 20px; }
    .cookie-text { font-size: 12px; }
  }

  /* ── ANIMATIONS ── */
  /* hidden only on a page that runs scripts (the `js` class from <head>), so without JS everything shows */
  .js .fade-in {
    opacity: 0;
    transition: opacity 400ms ease;
  }
  .js .fade-in.visible {
    opacity: 1;
  }

  /* the visitor's system asks for less motion: no fades, slides or smooth scrolling (site.js skips the count-ups) */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js .fade-in { opacity: 1; }
    *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; }
  }