:root{
  --bg:#0b1320;        /* deep navy */
  --text:#e8eef7;      /* almost-white with a hint of blue */
  --muted:#9fb0c3;     /* slate blue-gray for secondary text */
  --gold:#5aa8ff;      /* accent blue (kept var name for compatibility) */
  --card:#0f1b2d;      /* card/navy surface */
  --line:#1e2a44;      /* subtle blue-gray borders */
  --container:1200px;
  --radius:18px;
  --accent: var(--gold);
  --accent-contrast: #071323;
  --surface: var(--card);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:100%;max-width:var(--container);margin:auto;padding:0 20px}
.btn{display:inline-flex;gap:.6rem;align-items:center;border:1px solid var(--gold);color:#071323;background:var(--gold);padding:.9rem 1.2rem;border-radius:999px;font-weight:700;letter-spacing:.3px;transition:.25s;white-space:nowrap}
.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.btn.secondary{background:transparent;color:var(--text);border-color:var(--line)}
.pill{display:inline-block;border:1px solid var(--line);background:#101a2b;;color:var(--muted);padding:.4rem .8rem;border-radius:999px;font-size:.85rem}
.kicker{color:var(--gold);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.8rem}

/* Header */
header{position:sticky;top:0;z-index:50;background:rgba(11,19,32,.7);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid #132038}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding-block:2rem;   /* keep top/bottom, preserve container’s side padding */
}
.brand{display:flex;align-items:center;gap:.7rem;font-weight:800}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--gold)}
.menu{display:flex;gap:1.2rem}
.menu a{color:var(--muted)}
.menu a.active,.menu a:hover{color:var(--text)}
.burger{display:none;cursor:pointer;border:1px solid var(--line);padding:.5rem .7rem;border-radius:12px;background:transparent;color:var(--text)}
.mobile { display: none; }

/* Mobile menu */
@media (max-width:900px){
  .menu{display:none}
  .burger{display:block}
  .mobile{display:none;position:fixed;inset:60px 16px auto 16px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}
  .mobile a{display:block;padding:12px;border-bottom:1px solid #1d1d1d;color:var(--muted)}
  .mobile a:last-child{border-bottom:none}
  .mobile.is-open { display:block; }
}
@media (max-width:900px){
  .mobile.is-open { display:block; }               /* ensure open on small screens */
}
.mobile { z-index: 60; }

/* Mobile drawer socials */
.mobile .social {
  justify-content: center;     /* center icons */
  margin-top: 12px;            /* space from last menu link */
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.mobile .social a {
  padding: 0;                  /* remove menu link padding */
  border-bottom: 0;            /* no dividers on icons */
}

@media (min-width: 901px) {
  /* Ensure the drawer socials never appear on desktop accidentally */
  .mobile .social { display: none; }
}

/* Hero */
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(1200px 400px at 70% -10%, rgba(90,168,255,.18), transparent),radial-gradient(600px 300px at 10% -10%,  rgba(90,168,255,.12), transparent)}
.hero .wrap{
  display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:center;
  padding-block:72px 56px;   /* only vertical padding */
}
.hero h1{font-size:clamp(30px,5vw,56px);line-height:1.06;margin:.4rem 0 1rem;font-weight:800}
.hero p{color:var(--muted);font-size:clamp(16px,2.3vw,18px);line-height:2}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:48px}
.badgebar{display:flex;gap:18px;align-items:center;margin-top:48px;color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.hero .photo{aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.hero .photo img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){
  .hero .wrap{
    grid-template-columns:1fr;gap:24px;
    padding-block:52px;       /* only vertical padding */
  }
}
  .hero .photo{order:-1}

/* Fix hero overlay capturing clicks */
.hero { position: relative; } /* already present, keep it */
.hero::before {
  pointer-events: none;   /* don't intercept mouse */
  z-index: 0;             /* stay behind content */
}
.hero .wrap {
  position: relative;
  z-index: 1;             /* ensure text/buttons are above */
}

/* Trust bar */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#0d1626}
.trust .row{display:flex;gap:40px;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px 0}
.trust img{height:26px;opacity:.7;filter:grayscale(1)}

/* Content sections */
.section{padding:64px 0}
.section .head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:22px}
.section h2{font-size:clamp(24px,3.5vw,36px);margin:6px 0}

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

.service{position:relative;overflow:hidden}
.service .thumb{aspect-ratio:1/1;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.service .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.service:hover .thumb img{transform:scale(1.05)}
.service .meta{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.service h3{font-size:1.1rem;margin:0}
.service p{color:var(--muted);margin: 1rem 1rem 0 0;font-size:.95rem}
/* ===== Visibility & layout fixes for Services ===== */
.service { color: var(--text); }   /* ensure headings inherit visible color */
.service .thumb { display: block; }/* anchor behaves as a proper block card */
.service p { color: var(--muted); }/* keep descriptions slightly muted */

/* Stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.stat{border:1px solid var(--line);background:var(--card);border-radius:16px;padding:18px;text-align:center}
.stat .n{font-size:clamp(26px,4vw,40px);font-weight:800;color:var(--gold)}
.stat .l{color:var(--muted)}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}}

/* Testimonials */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.quote{border:1px solid var(--line);background:var(--card);border-radius:16px;padding:18px}
.quote p{margin:0 0 .8rem;color:#dfe7f4}
.quote .name{color:var(--muted);font-size:.9rem}
@media (max-width:1000px){.quotes{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.quotes{grid-template-columns:1fr}}
/* Rating stars */
.rating{display:flex;gap:6px;margin-bottom:10px;align-items:center}
.rating .star{width:18px;height:18px;color:var(--gold);display:block}
.rating .star path{vector-effect:non-scaling-stroke}


/* CTA block */
.cta-block{display:grid;grid-template-columns:1.2fr 1fr;gap:18px;align-items:center}
.cta-block .panel{border:1px solid var(--line);background:linear-gradient(160deg,#0f1b2d,#0b1422);border-radius:20px;padding:24px}
.cta-block h3{margin:.2rem 0 1rem;font-size:clamp(22px,3vw,30px)}
.cta-block p{color:var(--muted)}
.cta-block .cover{aspect-ratio:4/3;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
@media (max-width:900px){.cta-block{grid-template-columns:1fr}}

/* Footer */
footer{border-top:1px solid var(--line);background:#0d1626;padding:28px 0;margin-top:48px}
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:18px}
.foot h4{margin:.2rem 0 1rem}
.foot a{display:block;color:var(--muted);padding:.2rem 0}
.copy{margin-top:18px;color:var(--muted);font-size:.9rem}
@media (max-width:900px){.foot{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.foot{grid-template-columns:1fr}}

/* Footer Social — minimal icon style */
.social{
  display:flex;
  gap:16px;
  margin:14px 0 12px;
}

.social a{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  transition:.25s ease;
  flex-shrink:0;
}

.social .icon{
  width:22px;
  height:22px;
  fill:currentColor; /* ✅ ensures perfect visibility */
}

/* Hover = brand accent & gentle lift */
.social a:hover{
  color:var(--gold);
  transform:translateY(-2px);
  filter:drop-shadow(0 0 6px rgba(90,168,255,.35));
}


/* Inline filter (dropdown) */
.filters-inline{display:flex;align-items:center;gap:10px}
.filter-label{color:var(--muted);font-size:.9rem}
.select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:var(--card);border:1px solid var(--line);color:var(--text);padding:.55rem .9rem;border-radius:12px;min-width:180px}
.select:focus{outline:2px solid var(--gold);outline-offset:1px}


/* Pricing table */
.table-scroll{border:1px solid var(--line);border-radius:16px;background:var(--card);overflow-x:auto}
.pricing table{width:100%;border-collapse:collapse;min-width:760px}
.pricing thead th{font-weight:700;text-align:left;padding:14px;border-bottom:1px solid var(--line)}
.pricing tbody td{padding:14px;border-bottom:1px solid var(--line)}
.pricing tbody tr:nth-child(odd){background:rgba(255,255,255,.02)}
.pricing strong{color:var(--gold);font-weight:800}


@media (max-width:640px){
.filters-inline{width:100%;justify-content:flex-end}
}


/* Timeline */
.timeline{position:relative;display:grid;gap:14px;margin-top:8px}
.timeline::before{
  content:"";position:absolute;left:28px;top:0;bottom:0;width:2px;background:var(--line)
}
.step{
  position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:18px 18px 18px 68px
}
.step::before{
  content:attr(data-step);position:absolute;left:16px;top:18px;width:24px;height:24px;
  border-radius:50%;display:grid;place-items:center;background:var(--gold);color:#071323;
  font-weight:800;font-size:.95rem
}
.step-head{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.step h3{margin:0}
.step p{margin:.35rem 0 .6rem;color:var(--muted)}
.deliverables{list-style:none;margin:0;padding:0}
.deliverables li{display:flex;gap:8px;align-items:flex-start;color:var(--muted)}
.deliverables li::before{content:"✓";color:var(--gold);font-weight:800;line-height:1.2;margin-top:2px}

/* Feature bar (extras) */
.feature-bar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.feature{border:1px solid var(--line);background:var(--card);border-radius:12px;padding:12px 14px;color:var(--muted)}
@media (max-width:900px){
  .timeline::before{left:22px}
  .step{padding-left:64px}
}
@media (max-width:700px){
  .feature-bar{grid-template-columns:1fr}
}


/* Reset default ordered-list numerals on the timeline in the Paslaugos page */
.timeline { list-style: none; padding-left: 0; margin-left: 0; }
.timeline > .step { list-style: none; }

/* Extra safety for browsers that render ::marker */
.timeline > .step::marker { content: ""; }



/* ---- Contacts page additions ---- */

/* Icons */
.icon{
  width: 18px; height: 18px; display:inline-block;
  vertical-align: -3px; margin-right: 8px; color: currentColor;
}
.btn .icon{ margin-right: 8px; }
.qc a .icon{ margin-right: 8px; }
.qc h3{ display:flex; align-items:center; gap:8px; }

/* Optional lead text */
.lead { color: var(--muted); }

/* Form */
.form { margin-top: 8px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.field { display: grid; gap: 6px; }
.field-full { grid-column: 1 / -1; }
.field-inline { grid-column: 1 / -1; }
label { font-weight: 600; }
input, select, textarea {
  width: 100%; background: var(--card); color: var(--text);
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(90,168,255,.15);
}
.checkbox{
  display:flex;
  align-items:center;   /* center vertically with the text */
  gap:8px;              /* tighter space between box and sentence */
}

/* Kill default UA margins that push it away on desktop */
.checkbox input[type="checkbox"]{
  width:18px;
  height:18px;
  margin:0;             /* <-- important */
  flex:0 0 auto;
  accent-color: var(--gold);  /* matches your brand */
}

/* Make the sentence look like body text, not a bold label */
.checkbox span{
  font-weight:400;      /* overrides global label { font-weight:600 } */
  line-height:1.5;
  color:var(--muted);
}

/* Keyboard focus ring for accessibility */
.checkbox input[type="checkbox"]:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}
.form-note { color: var(--muted); margin-top: 10px; }

/* Quick contact cards */
.quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.qc .small { padding: .6rem .9rem; border-radius: 10px; font-weight: 600; }

/* Map wrapper */
.mapwrap { overflow: hidden; border-radius: var(--radius); }
.mapwrap iframe { width: 100%; height: 360px; border: 0; }

@media (max-width: 900px) {
  .form-grid { grid-template-columns: 1fr; }
  .quick-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .quick-grid { grid-template-columns: 1fr; }
}



/* ===== Services grid (equal-height rows) ===== */
.services-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:24px;
  align-items:stretch;
}
@media (max-width:1000px){
  .services-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px){
  .services-grid{ grid-template-columns:1fr; }
}

/* Cards (no per-card CTA anymore) */
.card{
  display:flex;
  flex-direction:column;
  min-height:200px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
  margin:0;
}
.card-head{ margin-bottom:10px; }
.card-title{
  margin:0;
  font-size:clamp(18px, 2.4vw, 22px);
  line-height:1.25;
  letter-spacing:.2px;
}
.card-lead{
  margin:.4rem 0 0;
  color:var(--muted);
  font-size:clamp(14px, 1.9vw, 16px);
}

/* Expandable details */
.card-more{ margin-top:12px; }
.card-more > summary{
  list-style:none;
  cursor:pointer;
  user-select:none;
  border:1px solid var(--line);
  border-radius:12px;
  padding:8px 12px;
  font-size:.95rem;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}
.card-more > summary::-webkit-details-marker{ display:none; }
.card-more[open] > summary{ display:none; }

.more-body{
  margin-top:12px;
  color:var(--text);
  font-size:.98rem;
}
.more-body p{ margin:0 0 12px 0; }
.less-btn{
  display:inline-flex;
  border:1px solid var(--line);
  border-radius:12px;
  padding:8px 12px;
  font-size:.95rem;
  background:transparent;
  cursor:pointer;
}

/* ===== Services: visual uplift (scoped) ===== */
#services{ 
  position:relative; 
  isolation:isolate;            /* keeps backdrop effects contained */
}

/* Aurora/dots backdrop behind the container */
#services::before{
  content:"";
  position:absolute; inset:0;
  background:
    /* soft aurora sweep */
    radial-gradient(900px 280px at 75% -10%, color-mix(in oklab, var(--gold) 12%, transparent), transparent),
    radial-gradient(600px 220px at 10% -15%, color-mix(in oklab, var(--gold) 8%, transparent), transparent),
    /* subtle dot grid using mask so it’s ultra light */
    radial-gradient(currentColor 1px, transparent 1px);
  background-size:
    auto, auto,
    22px 22px;
  background-position:
    center, center,
    center;
  color: rgba(255,255,255,.06); /* dot grid tint */
  opacity:.9;
  z-index:0;
  pointer-events:none;
}

/* lift the whole content above the backdrop */
#services .container{ position:relative; z-index:1; }

/* Stronger card surface + accent edge */
#services .services-grid .card{
  background: linear-gradient(180deg, color-mix(in oklab, var(--card) 92%, #000) 0%, var(--card) 100%);
  border:1px solid color-mix(in oklab, var(--line) 85%, #000);
  box-shadow:
    0 10px 24px rgba(0,0,0,.28),
    0 1px 0 rgba(255,255,255,.02) inset;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position:relative;
  overflow:hidden;
}

/* a 3px accent glow at the top of each card */
#services .services-grid .card::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:3px;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--gold) 70%, #fff) 0%,
    color-mix(in oklab, var(--gold) 30%, #00aaff) 50%,
    color-mix(in oklab, var(--gold) 70%, #fff) 100%);
  opacity:.6;
}

/* hover/focus pop */
@media (hover:hover){
  #services .services-grid .card:hover{
    transform: translateY(-3px);
    box-shadow:
      0 16px 30px rgba(0,0,0,.38),
      0 1px 0 rgba(255,255,255,.03) inset;
    border-color: color-mix(in oklab, var(--gold) 35%, var(--line));
  }
}
#services .services-grid .card:focus-within{
  outline:none;
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--gold) 32%, transparent),
    0 12px 26px rgba(0,0,0,.34);
  border-color: color-mix(in oklab, var(--gold) 45%, var(--line));
}

/* punchier titles with an accent dot */
#services .card-title{
  font-weight:800;
  letter-spacing:.2px;
  display:flex; align-items:center; gap:.55rem;
}
#services .card-title::before{
  content:"";
  width:10px; height:10px; border-radius:999px;
  background: var(--gold);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--gold) 20%, transparent);
  flex:0 0 10px;
}

/* make the “Plačiau/Mažiau” controls feel like UI, not links */
#services .card-more > summary,
#services .less-btn{
  background: color-mix(in oklab, var(--card) 80%, #000);
  border-color: color-mix(in oklab, var(--line) 80%, #000);
}
#services .card-more > summary:hover,
#services .less-btn:hover{
  border-color: color-mix(in oklab, var(--gold) 35%, var(--line));
  transform: translateY(-1px);
}

/* slightly brighter lead text for readability */
#services .card-lead{
  color: color-mix(in oklab, var(--muted) 85%, #fff);
}

/* tighter rhythm in the expanded body */
#services .more-body{ line-height:1.6; }

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #services .services-grid .card,
  #services .services-grid .card:hover{
    transform:none !important;
    transition:none !important;
  }
}

/* ===== Story section background (same aurora grid as Services) ===== */
#story{
  position:relative;
  isolation:isolate; /* keeps the effect scoped */
}

/* same backdrop design */
#story::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 280px at 75% -10%, color-mix(in oklab, var(--gold) 12%, transparent), transparent),
    radial-gradient(600px 220px at 10% -15%, color-mix(in oklab, var(--gold) 8%, transparent), transparent),
    radial-gradient(currentColor 1px, transparent 1px);
  background-size:
    auto,
    auto,
    22px 22px;
  background-position:center;
  color:rgba(255,255,255,.06);
  opacity:.9;
  pointer-events:none;
  z-index:0;
}

/* lift content above backdrop */
#story .container{
  position:relative;
  z-index:1;
}

/* ===== Section-level CTAs (no image, strong contrast) ===== */
.cta-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:30px 20px;
  border-radius:16px;

  border:1px solid color-mix(in oklab, var(--accent, #2563eb) 25%, var(--line, #e5e7eb));
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--accent, #2563eb) 12%, transparent) 0%,
      color-mix(in oklab, var(--accent, #2563eb) 8%,  transparent) 100%);
}

.cta-top{ margin:0 0 20px 0; }
.cta-bottom{ margin:60px 0 0 0; }

.cta-copy{
  display:flex; flex-direction:column; gap:4px;
  font-size:clamp(16px, 2.2vw, 18px);
}
.cta-copy strong{
  font-size:clamp(18px, 2.6vw, 20px);
  line-height:1.2;
}
.cta-btn{
  white-space:nowrap;
  padding:10px 16px;
}

/* Primary button that adapts to brand color, with sensible fallbacks */
.btn.primary{
  background:var(--accent, #2563eb);
  color:var(--accent-contrast, #fff);
  border:1px solid color-mix(in oklab, var(--accent, #2563eb) 80%, #000);
}

.btn.primary:hover{
  filter:brightness(1.05);
}

/* Tertiary remains subtle */
.btn.tertiary{
  background:transparent;
  border:1px solid var(--line);
  color:var(--text);
}
.btn.tertiary:hover{ background:rgba(0,0,0,.03); }

/* Focus visible */
a.btn, button.btn, summary.btn{ outline:none; }
a.btn:focus-visible, button.btn:focus-visible, summary.btn:focus-visible{
  box-shadow:0 0 0 3px color-mix(in oklab, var(--accent, #2563eb) 35%, transparent);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}


/* ===== FAQ cards (scoped, independent from services) ===== */
.faq-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
}
@media (max-width:800px){
  .faq-grid{ grid-template-columns:1fr; }
}

.faq-card{
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px 16px;
  background:var(--surface, var(--card));
  color:var(--text);
}

/* Clickable question row */
.faq-card > summary{
  cursor:pointer;
  list-style:none;
  font-weight:600;
  line-height:1.35;
  display:flex;
  align-items:center;
  gap:10px;
}
.faq-card > summary::-webkit-details-marker{ display:none; }

/* Chevron */
.faq-card > summary::after{
  content:"▾";
  margin-left:auto;
  transform:rotate(0deg);
  transition:transform .2s ease;
}
.faq-card[open] > summary::after{ transform:rotate(180deg); }

/* Answer text */
.faq-card p{
  margin:.6rem 0 0 0;
  color:var(--muted);
  font-size:clamp(16px, 1.9vw, 16px);
}

/* Extra spacing when open */
.faq-card[open]{ padding-bottom:16px; }

/* Focus visible (accessibility) */
.faq-card > summary:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px color-mix(in oklab, var(--accent, #2563eb) 35%, transparent);
  border-radius:8px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .faq-card > summary::after{ transition:none; }
}


/* ===== Gallery ===== */
#gallery-head .head { margin-bottom: 0; }

/* Grid */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px;
}
@media (max-width:1000px){ .gallery-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){ .gallery-grid{ grid-template-columns:1fr; } }

/* Tiles */
.tile{
  margin:0;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:10px;
}
.tile-link{
  display:block;
  position:relative;
  border-radius:12px;
  overflow:hidden;
  aspect-ratio: 4 / 3;          /* consistent row height for thumbs */
  background:#0b1422;
}
.tile img, .video-poster{
  width:100%; height:100%; object-fit:cover; display:block;
}
.tile figcaption{
  margin:.6rem .2rem 0;
  color:var(--muted);
  font-size:.95rem;
}

/* Play badge for video tiles */
.play-badge{
  position:absolute; right:10px; bottom:10px;
  font-size:20px; line-height:1;
  padding:.2rem .5rem;
  border-radius:10px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.35);
  color:#fff;
  backdrop-filter: blur(3px);
}

/* Lightbox */
.lightbox{
  position:fixed; inset:0;
  background:rgba(0,0,0,.82);
  display:none;
  z-index:999;
  padding:20px;
  overflow:auto; /* allow scroll on very small screens */
}
.lightbox.is-open{ display:block; }

/* Center media and cap its size */
.lightbox-body{
  max-width:none;
  margin:40px auto;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:10px;

  display:flex;
  align-items:center;
  justify-content:center;
}

.lightbox-body img,
.lightbox-body video{
  width:auto;
  height:auto;
  max-width:92vw;
  max-height:86vh;   /* ✅ keeps tall mobile videos inside viewport on desktop */
  object-fit:contain;
  border-radius:12px;
  background:#000;
}

/* Close button */
.lightbox .close{
  position:fixed; top:18px; right:18px;
  width:36px; height:36px; display:grid; place-items:center;
  border-radius:50%;
  background:rgba(0,0,0,.5); color:#fff; text-decoration:none;
  border:1px solid var(--line);
  font-size:22px; line-height:1;
}

/* Hover lift */
@media (hover:hover){
  .tile-link{ transition:.18s ease; }
  .tile-link:hover{ transform:translateY(-2px); }
}