/* ==========================================================================
   SOUNDCITY — 2026 rebuild
   Static HTML/CSS/JS. No framework, no build step.
   Palette: near-black stage + signal gold.
   ========================================================================== */

:root{
  /* Ink-navy base, sampled from the reference gradient's darkest corner. The
     purple glow itself is painted by the fixed body::before layer below. */
  --bg:#11111c;
  --bg-2:#161620;
  --surface:#14171b;
  --surface-2:#1b1f24;
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.20);

  --text:#f2f3f5;
  --muted:#9aa1ab;
  /* lifted with the ground: on the old near-black this was 4.2:1, and the new
     base plus the purple glow pushed it to 3.9 and 3.2 - under the minimum */
  --dim:#848b95;

  /* Ground colour as raw channels, so scrims and blurred bars are built from
     it and follow the theme automatically. */
  --bg-rgb:17,17,28;
  --hover:rgba(255,255,255,.05);      /* subtle wash on hoverable rows    */
  --glass:rgba(14,16,19,.72);         /* frosted panel over photography   */
  --tile:#fff;                        /* product / logo tiles             */
  --tile-line:transparent;
  --logo-tile-opacity:.66;
  --client-opacity:.55;
  --cta-bg:linear-gradient(120deg,#0d1218 0%,#141020 100%);
  --shadow-modal:0 40px 90px rgba(0,0,0,.6);
  --shadow-float:0 10px 28px rgba(0,0,0,.45);
  --focus-ring:#fff;
  --map-filter:grayscale(.5) invert(.92) hue-rotate(180deg) contrast(.9);

  /* Brand palette, sampled from soundcity.ge:
     #438bca  the blue of the old navigation bar
     #4ec0e4  the bright cyan used across the site
     #e100ff  the magenta of the hero gradient          */
  --brand:#438bca;
  --accent:#4ec0e4;
  --accent-2:#e100ff;
  --accent-soft:rgba(78,192,228,.15);
  --accent-line:rgba(78,192,228,.45);
  --on-accent:#04191f;

  --maxw:1380px;
  --gut:clamp(20px,5vw,56px);
  --r:14px;
  --r-lg:22px;

  --ease:cubic-bezier(.22,.61,.36,1);

  --font-display:"Oswald","Noto Sans Georgian",system-ui,sans-serif;
  --font-body:"Inter","Noto Sans Georgian",system-ui,-apple-system,Segoe UI,sans-serif;
}

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

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  position:relative;
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Georgian needs a slightly different display face */
html[lang="ka"]{--font-display:"Noto Sans Georgian","Oswald",sans-serif}
html[lang="ka"] .display{letter-spacing:0}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}

::selection{background:var(--accent);color:var(--on-accent)}

/* ---------- layout primitives ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:clamp(40px,4.6vw,66px)}
.section--tight{padding-block:clamp(30px,3.4vw,48px)}
/* Two stacked sections otherwise add BOTH paddings together, so the visible gap
   between them is roughly double the gap inside one. Trim the following
   section's top pad so the rhythm stays even down the page. */
.section + .section{padding-top:clamp(14px,1.6vw,24px)}

.display{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:.98;
  margin:0;
}
.h-xxl{font-size:clamp(2.15rem,5.2vw,4rem)}
.h-xl{font-size:clamp(1.85rem,3.6vw,2.7rem)}
.h-l{font-size:clamp(1.45rem,2.5vw,1.95rem)}

.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.75rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin:0 0 18px;
}
.kicker::before{content:"";width:28px;height:1px;background:var(--accent);display:block}

.lead{color:var(--muted);font-size:clamp(1rem,1.4vw,1.125rem);max-width:62ch;margin:0}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.section-head{
  display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;
  gap:24px;margin-bottom:clamp(22px,2.6vw,38px);
}
.section-head .lead{max-width:46ch}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;border-radius:100px;border:1px solid transparent;
  font-weight:600;font-size:.9rem;letter-spacing:.04em;text-transform:uppercase;
  cursor:pointer;transition:.28s var(--ease);white-space:nowrap;
}
.btn--accent{background:var(--accent);color:var(--on-accent)}
.btn--accent:hover{background:#7ed3eb;transform:translateY(-2px);box-shadow:0 12px 34px rgba(78,192,228,.30)}
.btn--ghost{background:transparent;border-color:var(--line-strong);color:var(--text)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.btn--sm{padding:10px 18px;font-size:.78rem}

/* ---------- header ---------- */
.site-header{
  position:fixed;inset:0 0 auto;z-index:100;
  transition:background .35s var(--ease),border-color .35s var(--ease),backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{
  background:rgba(var(--bg-rgb),.86);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);
}
.header-inner{display:flex;align-items:center;gap:22px;height:76px}

.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand img{height:38px;width:auto}
.brand-word{font-family:var(--font-display);font-size:1.15rem;letter-spacing:.16em;text-transform:uppercase}
.brand-word span{color:var(--accent)}

.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav a{
  position:relative;padding:9px 13px;border-radius:8px;
  font-size:.8rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
  color:var(--muted);transition:color .22s var(--ease),background .22s var(--ease);
}
.nav a:hover{color:var(--text);background:var(--hover)}
.nav a.is-active{color:var(--accent)}
.nav a.is-active::after{
  content:"";position:absolute;left:13px;right:13px;bottom:3px;height:1px;background:var(--accent);
}

/* ---------- submenus ---------- */
/* A parent item is a real link plus a small toggle: the parent page stays
   reachable in one click, and the children open on hover, on focus, or on a
   tap of the chevron. Hover alone would strand touch and keyboard users. */
.nav__group{position:relative;display:flex;align-items:center}
.nav__toggle{
  display:grid;place-items:center;width:22px;height:22px;margin-left:-6px;
  border:0;background:none;color:var(--muted);cursor:pointer;padding:0;
  transition:transform .22s var(--ease),color .22s var(--ease);
}
.nav__toggle svg{width:13px;height:13px}
.nav__group:hover .nav__toggle,.nav__toggle[aria-expanded="true"]{color:var(--text)}
.nav__toggle[aria-expanded="true"]{transform:rotate(180deg)}
.nav__sub{
  position:absolute;top:100%;left:0;z-index:60;min-width:210px;
  display:flex;flex-direction:column;gap:2px;padding:8px;margin-top:6px;
  background:rgba(var(--bg-rgb),.98);backdrop-filter:blur(20px);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg,0 18px 50px rgba(0,0,0,.35));
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
}
.nav__group:hover > .nav__sub,
.nav__group:focus-within > .nav__sub,
.nav__group.is-open > .nav__sub{opacity:1;visibility:visible;transform:none}
.nav__sub a{
  padding:9px 11px;font-size:.76rem;text-transform:none;letter-spacing:.02em;
  white-space:normal;
}

.header-tools{display:flex;align-items:center;gap:12px;flex-shrink:0}
/* Below the nav breakpoint the menu becomes a fixed overlay and leaves the
   flex row, so nothing pushes the tools right any more - do it here. The phone
   number is hidden at that size too, which left the burger crowding the
   language pills, hence the wider gap. */
@media (max-width:1300px){.header-tools{gap:18px;margin-left:auto}}
@media (max-width:420px){.header-tools{gap:14px}.lang button{padding:6px 9px}}
@media (max-width:1500px){.header-phone{display:none}}
html[lang="ka"] .nav a,html[lang="ru"] .nav a{padding:9px 10px;font-size:.76rem}

.lang{display:flex;border:1px solid var(--line);border-radius:100px;overflow:hidden}
.lang button{
  background:none;border:0;color:var(--dim);cursor:pointer;
  padding:6px 11px;font-size:.72rem;font-weight:700;letter-spacing:.08em;
  transition:.22s var(--ease);
}
.lang button:hover{color:var(--text)}
.lang button.is-active{background:var(--accent);color:var(--on-accent)}

.header-phone{
  display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;
  color:var(--text);white-space:nowrap;
}
.header-phone svg{width:15px;height:15px;color:var(--accent)}

.burger{
  display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:10px;
  background:none;cursor:pointer;position:relative;
}
.burger span{
  position:absolute;left:11px;right:11px;height:1.5px;background:var(--text);
  transition:.3s var(--ease);
}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:20px}
.burger span:nth-child(3){top:25px}
.burger.is-open span:nth-child(1){top:20px;transform:rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){top:20px;transform:rotate(-45deg)}

@media (max-width:1300px){
  .nav{
    position:fixed;inset:76px 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(var(--bg-rgb),.98);backdrop-filter:blur(20px);
    border-block:1px solid var(--line);
    padding:14px var(--gut) 24px;
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:.3s var(--ease);max-height:calc(100vh - 76px);overflow-y:auto;
  }
  .nav.is-open{transform:none;opacity:1;pointer-events:auto}
  /* In the overlay the dropdown becomes an inline, indented list - a floating
     panel inside a scrolling column would be pinned to the wrong place. */
  .nav__group{display:block;border-bottom:1px solid var(--line)}
  .nav__group > a{display:block;border-bottom:0}
  .nav__toggle{position:absolute;right:0;top:8px;width:38px;height:38px;margin:0}
  .nav__toggle svg{width:16px;height:16px}
  .nav__sub{
    position:static;opacity:1;visibility:visible;transform:none;
    background:none;border:0;box-shadow:none;padding:0 0 10px 14px;margin:0;
    backdrop-filter:none;min-width:0;display:none;
  }
  /* Hover must NOT open it here - a tap registers as a hover on touch and the
     list would spring open under the finger. The chevron is the only opener. */
  .nav__group:hover > .nav__sub,.nav__group:focus-within > .nav__sub{display:none}
  .nav__group.is-open > .nav__sub{display:flex}
  .nav__sub a{font-size:.92rem;padding:10px 0;border-bottom:0;color:var(--dim)}
  .nav a{padding:14px 0;font-size:1rem;border-bottom:1px solid var(--line)}
  .nav a.is-active::after{display:none}
  .burger{display:block}
  .header-phone{display:none}
}

/* ---------- dark-theme ground ---------- */
/* A blue-to-purple wash over the near-black ground, so dark mode is not a flat
   black sheet. Painted by a FIXED pseudo-element rather than a background on
   <body>: a body gradient stretches to the full document height, which on the
   18,000px equipment page spreads the colour so thin it disappears. Fixed keeps
   it viewport-sized and it costs nothing to scroll.
   Selector is :not([data-theme="light"]) so it covers both the explicit dark
   choice and the :root default, and never leaks into light mode.
   Alphas are deliberately low - this sits under every page and any more of it
   would start eating the contrast of light type on dark. */
:root:not([data-theme="light"]) body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  /* Matched numerically against the supplied reference image rather than eyeballed:
     rendered at the reference's own size and scored by RMSE against it across four
     rounds of candidates. This one lands at 6.3/255 - about 2.5% mean error, which
     is below what the eye resolves on a gradient this soft.
     The glow anchors OFF the top edge (-12%) because the reference's brightest
     point sits at 72% across and 3% down: to get that falloff on screen the
     circle's centre has to sit above the viewport. */
  background:
    radial-gradient(110% 82% at 74% -12%,
      #4b1162 0%, rgba(60,14,78,.80) 30%, rgba(32,16,45,.45) 60%, transparent 82%),
    linear-gradient(160deg, rgba(45,14,60,.40), transparent 58%);
}
/* The hero, page banners and the footer paint their own grounds, so nothing
   needs to opt out - they simply stack above this layer. */

/* The L-Acoustics parallax watermark was removed on 2026-09-09 at the user's
   request. To bring it back: a fixed body::after at z-index -1 with
   background-image url("../img/lacoustics-watermark.svg"), background-repeat
   repeat-y, background-position center var(--wm-y), and the watermark() module
   in main.js writing --wm-y from scrollY. Both files are still in the repo. */

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:clamp(430px,64vh,640px);
  display:flex;align-items:flex-end;
  padding-top:96px;padding-bottom:clamp(32px,3.6vw,50px);
  overflow:hidden;isolation:isolate;
}
.hero__media{position:absolute;inset:0;z-index:-2}
/* cross-fading hero slideshow */
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--ease)}
.hero__slide.is-active{opacity:1}
.hero__media img{width:100%;height:100%;object-fit:cover;opacity:1}
/* The K2 frame is 1.59:1 against a hero box of roughly 2.2:1, so cover trims it
   top and bottom - centred, that lands on the middle of the cabinets and loses
   the truss and the backlight. Biasing to 35% keeps the tops of both arrays and
   the glow behind them, which is what makes the shot read. */
.hero__slide--k2 img{object-position:50% 35%}
.hero__slide img{transform:scale(1.06);transition:transform 9s linear}
.hero__slide.is-active img{transform:scale(1)}
/* A slide can carry a link. The media layer sits at z-index:-2 so the picture
   itself cannot take a click; the affordance is a chip next to the dots, which
   is also the only version a keyboard can reach. */
.hero__link{
  position:absolute;left:50%;transform:translateX(-50%);bottom:64px;z-index:4;
  display:none;align-items:center;gap:8px;padding:9px 16px;border-radius:100px;
  font-size:.78rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  background:rgba(10,13,18,.55);border:1px solid rgba(255,255,255,.28);color:#fff;
  backdrop-filter:blur(10px);transition:.22s var(--ease);
}
.hero__link.is-on{display:inline-flex}
.hero__link:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.hero__link svg{width:13px;height:13px}
@media (max-width:760px){.hero__link{bottom:54px;font-size:.72rem;padding:8px 13px}}
.hero__dots{
  position:absolute;left:0;right:0;bottom:22px;z-index:3;
  display:flex;justify-content:center;gap:10px;
}
.hero__dots button{
  width:30px;height:4px;padding:0;border:0;border-radius:2px;cursor:pointer;
  background:rgba(255,255,255,.3);transition:.3s var(--ease);
}
.hero__dots button:hover{background:rgba(255,255,255,.55)}
.hero__dots button.is-active{background:var(--accent);width:46px}
.hero__dots button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .hero__slide{transition:none}
  .hero__slide img{transition:none;transform:none}
}
@media (max-width:620px){.hero__dots{bottom:14px}.hero__dots button{width:22px}.hero__dots button.is-active{width:34px}}
/* No scrim: the photographs run at full strength, as asked. The hero type is
   carried by its own shadow instead (see .hero .kicker/h1/.lead below) - if a
   future slide is bright enough to swallow the headline, the fix is to pick a
   darker frame, not to put this overlay back. */
.hero::before{content:none}
.hero__inner{width:100%}
/* belt and braces: a soft shadow under the hero type so a bright frame in the
   slideshow can never drop the headline below a readable contrast */
.hero .kicker,.hero h1,.hero .lead{
  text-shadow:0 1px 2px rgba(4,6,10,.55),0 3px 16px rgba(4,6,10,.72),0 8px 44px rgba(4,6,10,.6);
}
.hero h1{max-width:22ch;margin-bottom:18px}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .lead{max-width:50ch;margin-bottom:26px;font-size:clamp(.94rem,1.2vw,1.05rem)}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px}

/* The stats sit ON the hero photograph, so they are glass in BOTH themes -
   var(--glass) flips to near-solid white in light mode and turned this into
   an opaque slab that covered the slideshow. Fixed colours, not tokens. */
.stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  margin-top:clamp(30px,3.6vw,48px);
  background:rgba(10,13,18,.26);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  backdrop-filter:blur(14px) saturate(130%);
  border:1px solid rgba(255,255,255,.15);
  border-radius:var(--r-lg);overflow:hidden;
}
.stats div{background:none;padding:20px 24px;position:relative}
/* hairline separators drawn inside the panel instead of 1px grid gaps, which
   would show the page behind and break the single sheet of glass */
.stats div + div::before{
  content:"";position:absolute;left:0;top:20%;bottom:20%;width:1px;
  background:rgba(255,255,255,.16);
}
.stats b{
  display:block;font-family:var(--font-display);font-size:clamp(1.65rem,2.8vw,2.3rem);
  line-height:1;color:#7ed3eb;margin-bottom:6px;
  text-shadow:0 2px 14px rgba(4,6,10,.5);
}
.stats span{
  font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(242,243,245,.78);text-shadow:0 1px 10px rgba(4,6,10,.5);
}
@media (max-width:800px){
  .stats{grid-template-columns:repeat(2,1fr)}
  /* three tiles in two columns: the last one takes the full width */
  .stats div:last-child{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.14)}
  .stats div:last-child::before{display:none}
}

/* ---------- page header (inner pages) ---------- */
.page-head{
  position:relative;padding-top:124px;padding-bottom:clamp(38px,4.5vw,60px);
  border-bottom:1px solid var(--line);overflow:hidden;isolation:isolate;
}
.page-head::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(80% 120% at 10% 0%,rgba(67,139,202,.26),transparent 62%),
    radial-gradient(60% 100% at 95% 0%,rgba(225,0,255,.12),transparent 60%);
}
.page-head h1{margin-bottom:16px}

/* ---------- inner-page header with a photo band ---------- */
/* Like the hero, this band is dark in BOTH themes: it sits on photography and
   the type has to stay light to be readable. */
.page-head--photo{
  padding-top:138px;padding-bottom:clamp(44px,5vw,68px);
  border-bottom-color:transparent;color:#f2f3f5;
}
.page-head__media{position:absolute;inset:0;z-index:-3;background:#0b0e12}
.page-head__media img{width:100%;height:100%;object-fit:cover;opacity:.8}
.page-head--photo::before{
  z-index:-2;
  background:
    radial-gradient(85% 130% at 10% 0%,rgba(67,139,202,.30),transparent 60%),
    radial-gradient(60% 110% at 95% 10%,rgba(225,0,255,.16),transparent 58%),
    linear-gradient(180deg,rgba(8,9,11,.84) 0%,rgba(8,9,11,.34) 48%,rgba(8,9,11,.86) 100%);
}
.page-head--photo h1{color:#fff}
.page-head--photo .lead{color:rgba(242,243,245,.82)}
.page-head--photo .crumbs{color:rgba(242,243,245,.62)}
.page-head--photo .crumbs a{color:rgba(242,243,245,.62)}
.page-head--photo .crumbs a:hover{color:var(--accent)}
[data-theme="light"] .page-head--photo{color:#f2f3f5}
[data-theme="light"] .page-head--photo h1{color:#fff}
[data-theme="light"] .page-head--photo .lead{color:rgba(242,243,245,.82)}
[data-theme="light"] .page-head--photo .crumbs,
[data-theme="light"] .page-head--photo .crumbs a{color:rgba(242,243,245,.66)}
@media (max-width:720px){
  .page-head--photo{padding-top:130px}
}
/* the banner is already a big block - the section under it does not need a
   full-size top pad as well, or the first row of content starts below the fold */
.page-head--photo + .section{padding-top:clamp(30px,3.4vw,46px)}
.crumbs{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:20px}
.crumbs a:hover{color:var(--accent)}

/* ---------- service cards ---------- */
.grid{display:grid;gap:clamp(16px,2vw,24px)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:1000px){.grid--4{grid-template-columns:repeat(2,1fr)}.grid--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid--4,.grid--3,.grid--2{grid-template-columns:1fr}}

.card{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:30px 26px 26px;
  transition:.32s var(--ease);overflow:hidden;
}
.card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(80% 60% at 50% 0%,rgba(78,192,228,.14),transparent 70%);
  opacity:0;transition:opacity .32s var(--ease);
}
.card:hover{transform:translateY(-5px);border-color:var(--accent-line);background:var(--surface-2);box-shadow:0 16px 40px rgba(67,139,202,.14)}
.card:hover::after{opacity:1}
/* Service card: the brand icon shown large, on its own blue.
   The source PNGs are white glyphs on a solid #428bca square, so the tile
   background is set to that exact colour and the artwork is contained inside
   it — no crop, no seam, and the glyph scales up cleanly. */
.svc{padding:0;overflow:hidden;display:flex;flex-direction:column}
.svc__media{
  position:relative;aspect-ratio:4/3;background:#428bca;overflow:hidden;
  border-bottom:1px solid rgba(0,0,0,.25);
}
.svc__media img{
  width:104%;height:104%;margin:-2%;object-fit:cover;display:block;
  transition:transform .55s var(--ease);
}
.svc:hover .svc__media img{transform:scale(1.07)}
.svc__body{padding:24px 24px 26px;flex:1;display:flex;flex-direction:column}
.svc__body .card__more{margin-top:auto;padding-top:16px}
@media (max-width:640px){.svc__media{aspect-ratio:16/9}}

.card h3{font-family:var(--font-display);text-transform:uppercase;font-size:1.15rem;letter-spacing:.04em;margin:0 0 10px}
.card p{color:var(--muted);font-size:.92rem;margin:0}
.card__more{
  display:inline-flex;align-items:center;gap:7px;margin-top:18px;
  font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
}
.card__more svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.card:hover .card__more svg{transform:translateX(4px)}

/* ---------- feature split ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.split__media{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);position:relative}
.split__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.split--rev .split__media{order:-1}
@media (max-width:900px){.split--rev .split__media{order:0}}

.ticks{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.ticks li{position:relative;padding-left:30px;color:var(--muted);font-size:.95rem}
.ticks li::before{
  content:"";position:absolute;left:0;top:.55em;width:14px;height:8px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}

/* ---------- project cards ---------- */
.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px)}
@media (max-width:1000px){.projects{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.projects{grid-template-columns:1fr}}

.proj{
  position:relative;display:block;border-radius:var(--r);overflow:hidden;
  background:var(--surface);border:1px solid var(--line);
  aspect-ratio:16/11;transition:.35s var(--ease);
}
.proj img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease),opacity .35s;opacity:.82;
}
.proj::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 30%,rgba(6,7,9,.92) 100%);
}
.proj:hover{border-color:var(--accent-line);transform:translateY(-4px)}
.proj:hover img{transform:scale(1.06);opacity:1}
.proj__body{position:absolute;inset:auto 0 0;padding:20px;z-index:2}
/* Project tiles are dark in both themes (photo + scrim), so the type stays light. */
.proj,[data-theme="light"] .proj{color:#f2f3f5}
.proj__year{
  display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.14em;
  color:var(--on-accent);background:var(--accent);padding:3px 9px;border-radius:4px;margin-bottom:9px;
}
.proj__title{
  font-family:var(--font-display);text-transform:uppercase;font-size:1rem;
  line-height:1.15;letter-spacing:.02em;margin:0;
}
.proj__desc{
  font-size:.8rem;color:rgba(242,243,245,.74);margin:7px 0 0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* ---------- projects rail (home) ---------- */
/* Full-bleed single-row carousel. The rail sits outside .wrap and is padded
   back in, so the first card lines up under the heading at normal widths.
   The pad is CAPPED, though: on a 2000px monitor the content column is only
   1380px wide, so an uncapped pad left ~360px of empty page beside the first
   card and the row read as half-built. Past that cap the rail simply runs
   wider than the text column, which is the point of a full-bleed rail. */
/* The rail lives inside .wrap now, so it inherits the content column's width
   and needs no bleed maths - the old --rail-pad / .rail-head pair is gone. */
.rail{--rail-cols:6;position:relative}
.projects--rail{
  display:flex;grid-template-columns:none;
  --rail-gap:12px;
  gap:var(--rail-gap);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scroll-padding-left:0;
  padding:4px 0 6px;
  /* the native bar would sit under the cards and fight the design; the thin
     progress track below the rail carries that information instead */
  scrollbar-width:none;-ms-overflow-style:none;
}
.projects--rail::-webkit-scrollbar{display:none}

.projects--rail .proj{
  /* Exactly --rail-cols across the content column. A percentage works here
     (unlike the logo marquee) because this flex container is a scroller with a
     definite width - .wrap's - rather than width:max-content. */
  flex:0 0 calc((100% - var(--rail-gap) * (var(--rail-cols) - 1)) / var(--rail-cols));
  aspect-ratio:13/20;
  scroll-snap-align:start;
  border-radius:12px;
  border-color:transparent;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.projects--rail .proj:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 38px rgba(4,6,10,.34);
}
.projects--rail .proj img{opacity:.86;transition:transform .7s var(--ease),opacity .4s}
.projects--rail .proj:hover img{transform:scale(1.08);opacity:1}
.projects--rail .proj__year{font-size:.6rem;padding:2px 7px;margin-bottom:7px}
.projects--rail .proj__tag{font-size:.58rem;padding:3px 7px}
.projects--rail .proj::after{
  background:linear-gradient(180deg,transparent 30%,rgba(6,7,9,.58) 58%,rgba(6,7,9,.96) 100%);
}
.projects--rail .proj__body{padding:16px 15px 17px}
.projects--rail .proj__title{font-size:.83rem;line-height:1.25}
.proj__go{
  display:inline-flex;align-items:center;gap:6px;margin-top:9px;
  font-size:.62rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(242,243,245,.9);
}
.proj__go svg{width:12px;height:12px;transition:transform .3s var(--ease)}
.proj:hover .proj__go svg{transform:translateX(4px)}
.proj:hover .proj__go{color:var(--accent)}

/* --- controls, in the heading row --- */
.rail__ctrl{display:flex;align-items:center;gap:10px}
.rail__nav{
  width:40px;height:40px;border-radius:50%;cursor:pointer;flex:none;
  display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);color:var(--text);
  transition:.25s var(--ease);
}
.rail__nav svg{width:17px;height:17px}
.rail__nav:hover:not([disabled]){background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.rail__nav:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Both arrows stay in place at all times - one that disappears at the start of
   travel reads as a missing control, and its slot collapsing shifts the row. */
.rail__nav[disabled]{opacity:.34;cursor:default}

/* --- scroll progress --- */
/* Replaces the hidden native scrollbar: shows how far along the rail you are
   and how much is left, which arrows alone never communicate. */
.rail__track{
  position:relative;height:2px;border-radius:2px;
  margin:clamp(16px,1.8vw,24px) 0 0;
  background:var(--line);overflow:hidden;
}
.rail__thumb{
  position:absolute;inset:0 auto 0 0;width:20%;
  background:var(--accent);border-radius:2px;
  transition:transform .18s linear;
}

@media (max-width:1100px){.rail{--rail-cols:4}}
@media (max-width:820px){.rail{--rail-cols:3}}
@media (max-width:600px){
  .rail{--rail-cols:2}
  .projects--rail{--rail-gap:10px}
  .rail__nav{display:none}          /* touch devices swipe instead */
}

/* while dragging, suppress the click that would otherwise open a lightbox */
.projects--rail.is-dragging{cursor:grabbing;scroll-snap-type:none}
.projects--rail.is-dragging *{pointer-events:none}

/* ---------- equipment catalog ---------- */
.catalog{display:grid;grid-template-columns:270px minmax(0,1fr);gap:clamp(24px,3vw,44px);align-items:start}
.catalog>*{min-width:0}
@media (max-width:960px){.catalog{grid-template-columns:1fr}}

.filters{position:sticky;top:96px;min-width:0}
@media (max-width:960px){.filters{position:static}}
.filters h4{
  font-family:var(--font-display);text-transform:uppercase;font-size:.85rem;
  letter-spacing:.16em;color:var(--dim);margin:0 0 14px;
}
.search{position:relative;margin-bottom:24px}
.search input{
  width:100%;padding:13px 16px 13px 42px;border-radius:100px;
  background:var(--surface);border:1px solid var(--line);color:var(--text);
  font-family:inherit;font-size:.9rem;outline:none;transition:.25s var(--ease);
}
.search input:focus{border-color:var(--accent-line);background:var(--surface-2)}
.search input::placeholder{color:var(--dim)}
.search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--dim)}

.cat-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.cat-list button{
  width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:10px 12px;border-radius:9px;color:var(--muted);font-size:.86rem;
  display:flex;justify-content:space-between;gap:10px;align-items:center;
  transition:.22s var(--ease);line-height:1.35;
}
.cat-list button:hover{background:var(--hover);color:var(--text)}
.cat-list button.is-active{background:var(--accent-soft);color:var(--accent);font-weight:600}
.cat-list .count{font-size:.72rem;color:var(--dim);flex-shrink:0}
.cat-list button.is-active .count{color:var(--accent)}

@media (max-width:960px){
  .cat-list{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;gap:8px;padding-bottom:8px;max-width:100%;scrollbar-width:thin}
  .cat-list button{border:1px solid var(--line);white-space:nowrap;padding:9px 14px}
}

.results-bar{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--line);
  font-size:.85rem;color:var(--dim);flex-wrap:wrap;
}

.gear-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:clamp(12px,1.4vw,18px)}

.gear{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:.3s var(--ease);display:flex;flex-direction:column;
}
.gear:hover{transform:translateY(-4px);border-color:var(--accent-line);background:var(--surface-2)}
.gear__img{
  aspect-ratio:4/3;background:var(--tile);border-bottom:1px solid var(--tile-line);
  display:grid;place-items:center;padding:14px;overflow:hidden;
}
.gear__img img{max-height:100%;width:auto;object-fit:contain;transition:transform .45s var(--ease)}
.gear:hover .gear__img img{transform:scale(1.05)}
.gear__body{padding:14px 15px 16px;flex:1;display:flex;flex-direction:column;gap:6px}
.gear__cat{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);line-height:1.3}
.gear__name{font-size:.88rem;font-weight:600;line-height:1.35;margin:0}
.gear__link{
  margin-top:auto;padding-top:10px;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);transition:color .22s;
}
.gear:hover .gear__link{color:var(--accent)}

.empty{padding:70px 20px;text-align:center;color:var(--dim)}

/* ---------- photo strip (About) ---------- */
.shot{
  margin:0;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);background:var(--surface);
  box-shadow:var(--card-shadow);
}
.shot img{
  width:100%;aspect-ratio:647/304;object-fit:cover;display:block;
  transition:transform .5s var(--ease);
}
.shot:hover img{transform:scale(1.04)}

/* ---------- logo strips ---------- */
.logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}

/* ---------- logo marquee ---------- */
/* Seven tiles fill the viewport width exactly, so the eighth begins at the
   right edge and the row always reads as continuing rather than ending. */
.marquee{
  --marquee-cols:7;
  --marquee-gap:12px;
  position:relative;overflow:hidden;
  /* the row fades out into the page at both ends instead of being cut off */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.marquee__track{
  display:flex;grid-template-columns:none;   /* overrides .logos' grid */
  gap:var(--marquee-gap);width:max-content;
  animation:marquee var(--marquee-time,80s) linear infinite;
}
/* BOTH selectors are needed. display:contents on the clone promotes its tiles
   to flex items of the track, but the CHILD COMBINATOR still walks the DOM, so
   ".marquee__track > *" never matches them - they were sizing to their content
   while the originals were 171px, and the two halves came out different widths.
   That is what broke the loop: the seam was out by 1184px, not a rounding blip. */
.marquee__track > *,
.marquee__clone > *{
  /* Sized off the CONTENT COLUMN, not the raw viewport: .marquee sits inside
     .wrap, which is capped at --maxw, so 100vw alone made the tiles too wide
     and only 6.6 of them fitted. A percentage cannot be used here - the track
     is width:max-content, so a percentage on its children is cyclic and the
     browser resolves it to auto. */
  flex:0 0 calc((min(100vw, var(--maxw)) - var(--gut) * 2
                 - var(--marquee-gap) * (var(--marquee-cols) - 1))
                / var(--marquee-cols));
}
/* the clone is a flex child too, so it has to lay its own tiles out the same way */
.marquee__clone{display:contents}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{
  from{transform:translateX(0)}
  /* -50% alone is half a gap short: the track is 52 tiles joined by 51 gaps, so
     half of it is 26 tiles + 25.5 gaps, while one full copy is 26 tiles + 26
     gaps. Without the correction the row twitches once per lap. */
  to{transform:translateX(calc(-50% - var(--marquee-gap) / 2))}
}

@media (prefers-reduced-motion:reduce){
  /* no motion at all - the row becomes a plain scroller the visitor drives */
  .marquee__track{animation:none}
  .marquee{overflow-x:auto;scrollbar-width:none}
  .marquee::-webkit-scrollbar{display:none}
}
@media (max-width:900px){.marquee{--marquee-cols:4}}
@media (max-width:560px){.marquee{--marquee-cols:3}}
.logo-tile{
  background:var(--tile);border:1px solid var(--tile-line);
  border-radius:12px;padding:16px;aspect-ratio:16/9;
  display:grid;place-items:center;opacity:var(--logo-tile-opacity);transition:.3s var(--ease);
}
.logo-tile:hover{opacity:1;transform:translateY(-3px)}
.logo-tile img{max-height:100%;width:auto;object-fit:contain}

.clients{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}

/* Two fixed rows that scroll sideways, instead of eight rows of wall.
   grid-auto-flow:column fills DOWN the two rows first and then moves right,
   which is what keeps the reading order left-to-right across the pair. */
.clients--rail{
  --cl-cols:10;
  --cl-gap:10px;
  grid-template-columns:none;
  grid-template-rows:repeat(2,auto);
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - var(--cl-gap) * (var(--cl-cols) - 1)) / var(--cl-cols));
  gap:var(--cl-gap);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  padding-bottom:4px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.clients--rail::-webkit-scrollbar{display:none}
.clients--rail img{scroll-snap-align:start}
.clients--rail.is-dragging{cursor:grabbing;scroll-snap-type:none}
.clients--rail.is-dragging *{pointer-events:none}
@media (max-width:1100px){.clients--rail{--cl-cols:7}}
@media (max-width:820px){.clients--rail{--cl-cols:5}}
@media (max-width:600px){.clients--rail{--cl-cols:3;--cl-gap:8px}}
.clients img{
  width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;
  filter:grayscale(1);opacity:var(--client-opacity);transition:.3s var(--ease);
}
.clients img:hover{filter:none;opacity:1;transform:scale(1.04)}

/* ---------- FAQ ---------- */
.faq-list{display:grid;gap:10px;max-width:900px}
.faq-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.28s var(--ease)}
.faq-item:hover{border-color:var(--line-strong)}
.faq-item.is-open{border-color:var(--accent-line);background:var(--surface-2)}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:18px;
  background:none;border:0;color:var(--text);cursor:pointer;text-align:left;
  padding:20px 22px;font-size:1rem;font-weight:600;line-height:1.4;
}
.faq-q i{
  flex-shrink:0;width:22px;height:22px;position:relative;
}
.faq-q i::before,.faq-q i::after{
  content:"";position:absolute;background:var(--accent);border-radius:2px;
  left:50%;top:50%;transition:.3s var(--ease);
}
.faq-q i::before{width:14px;height:2px;transform:translate(-50%,-50%)}
.faq-q i::after{width:2px;height:14px;transform:translate(-50%,-50%)}
.faq-item.is-open .faq-q i::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq-a p{padding:0 22px 22px;color:var(--muted);font-size:.94rem;margin:0}

/* ---------- CTA band ---------- */
/* Full-bleed band, edge to edge - no card, no radius, no border. The photo is
   pale enough to be a light ground, so this band is LIGHT IN BOTH THEMES and
   its type is pinned dark, the same way the hero is pinned light over dark
   photography. Without that, dark mode would put white text on white boxes. */
.cta-band{
  position:relative;overflow:hidden;isolation:isolate;
  padding-block:clamp(46px,6vw,86px);
  color:#0e141a;
  background:#e9f1fb url("../img/cta-band.jpg") right center / cover no-repeat;
}
/* Wash over the left half only, so the type has a clean ground while the line
   array on the right stays visible. Inside the band's own stacking context a
   z-index:-1 pseudo-element paints ABOVE the element's background but below its
   content - which is exactly the layer needed here. */
.cta-band::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(96deg,
    rgba(238,245,253,.94) 0%, rgba(238,245,253,.86) 34%,
    rgba(238,245,253,.42) 56%, rgba(238,245,253,0) 74%);
}
.cta-band .display{margin-bottom:16px;max-width:20ch;color:#0e141a}
.cta-band .lead{margin-bottom:26px;color:#41505f;max-width:46ch}
.cta-band .kicker{color:#1c73ab}
.cta-band .kicker::before{background:#1c73ab}
/* The band is a light ground in both themes, so the primary button has to use
   the LIGHT accent too - dark mode's #4ec0e4 is a pale cyan that all but
   disappears against this photograph. */
.cta-band .btn--accent{background:#1c73ab;color:#fff}
.cta-band .btn--accent:hover{background:#2489c9;box-shadow:0 12px 34px rgba(28,115,171,.28)}
.cta-band .btn--ghost{color:#0e141a;border-color:rgba(12,17,22,.30)}
.cta-band .btn--ghost:hover{color:#0e141a;border-color:rgba(12,17,22,.62);background:rgba(255,255,255,.55)}
@media (max-width:820px){
  /* the speaker stack would sit behind the text at this width, so the wash
     covers the full frame and the photo becomes a tint rather than a subject */
  .cta-band::before{background:rgba(238,245,253,.90)}
}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.info-row{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
.info-row:first-child{padding-top:0}
.info-row__ico{
  flex-shrink:0;width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent);
}
.info-row__ico svg{width:18px;height:18px}
.info-row h4{margin:0 0 3px;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:600}
.info-row p{margin:0;font-size:1rem}
.info-row a:hover{color:var(--accent)}

.map{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);min-height:420px}
/* NO --map-filter here. That token is an invert() hack built for the OpenStreetMap
   tile this replaced; run a Google map through it and the roads, water and POI
   pins come out in false colour. A Google map is legible in both themes as it
   ships, so it is left alone. */
.map iframe{width:100%;height:100%;min-height:420px;border:0;display:block}
/* Address card floating on the map. `pointer-events:none` on the card with it
   restored on the link, so the card never blocks panning or zooming the map
   underneath it - only the button is clickable. */
.map__card{
  position:absolute;left:14px;bottom:14px;right:14px;z-index:2;
  pointer-events:none;
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;
  padding:14px 16px;border-radius:14px;
  background:var(--glass);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--line);box-shadow:0 10px 30px rgba(4,6,10,.22);
}
.map__name{
  margin:0;font-family:var(--font-display);text-transform:uppercase;
  font-size:.9rem;letter-spacing:.06em;color:var(--text);flex:none;
}
.map__addr{margin:0;font-size:.84rem;color:var(--muted);flex:1 1 12ch;min-width:0}
.map__open{
  pointer-events:auto;flex:none;
  display:inline-flex;align-items:center;
  padding:9px 15px;border-radius:100px;
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:var(--accent);color:var(--on-accent);
  box-shadow:0 6px 20px rgba(4,6,10,.28);transition:.25s var(--ease);
}
.map__open:hover{filter:brightness(1.08);transform:translateY(-2px)}
.map__open:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (max-width:520px){
  .map__card{left:10px;right:10px;bottom:10px;padding:12px 13px}
  .map__addr{flex-basis:100%}
}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.form-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:7px}
.field--full{grid-column:1/-1}
.field label{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:600}
.field input,.field textarea,.field select{
  background:var(--surface);border:1px solid var(--line);border-radius:11px;
  padding:13px 15px;color:var(--text);font-family:inherit;font-size:.94rem;
  outline:none;transition:.25s var(--ease);
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent-line);background:var(--surface-2)}
.field textarea{resize:vertical;min-height:130px}
.form-note{font-size:.8rem;color:var(--dim);margin-top:14px}

/* ---------- footer ---------- */
.site-footer{background:var(--bg-2);border-top:1px solid var(--line);padding-top:clamp(38px,4.2vw,60px)}
.foot-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr 1.2fr;gap:clamp(24px,3vw,48px)}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}
.foot-grid h5{
  font-family:var(--font-display);text-transform:uppercase;font-size:.82rem;
  letter-spacing:.16em;color:var(--dim);margin:0 0 18px;font-weight:600;
}
.foot-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot-list a{color:var(--muted);font-size:.9rem;transition:color .22s}
.foot-list a:hover{color:var(--accent)}
.foot-about p{color:var(--muted);font-size:.9rem;max-width:38ch}
.socials{display:flex;gap:10px;margin-top:20px}
.socials a{
  width:40px;height:40px;border:1px solid var(--line);border-radius:11px;
  display:grid;place-items:center;color:var(--muted);transition:.26s var(--ease);
}
.socials a:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-3px)}
.socials svg{width:17px;height:17px}
.foot-bottom{
  margin-top:clamp(26px,3vw,42px);padding-block:20px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-size:.8rem;color:var(--dim);
}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  *{animation:none!important}
}

/* ---------- utilities ---------- */
.mt-0{margin-top:0}
.center{text-align:center}
.hide{display:none!important}
.divider{height:1px;background:var(--line);border:0;margin:0}

/* ---------- back to top ---------- */
.to-top{
  position:fixed;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);z-index:90;
  width:48px;height:48px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:var(--accent);color:var(--on-accent);
  border:0;box-shadow:var(--shadow-float);
  opacity:0;visibility:hidden;transform:translateY(12px) scale(.9);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s,background .25s;
}
.to-top.is-on{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:#7ed3eb;transform:translateY(-3px)}
.to-top:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.to-top svg{width:20px;height:20px}
@media (prefers-reduced-motion:reduce){.to-top{transition:opacity .2s}.to-top:hover{transform:none}}

/* ---------- home: category preview tiles ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.4vw,18px)}
@media (max-width:1200px){.cat-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:820px){.cat-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.cat-grid{grid-template-columns:repeat(2,1fr)}}

.cat-tile{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  transition:.3s var(--ease);
}
.cat-tile:hover{border-color:var(--accent-line);transform:translateY(-4px);box-shadow:var(--shadow-float)}
.cat-tile__img{
  position:relative;display:block;flex:0 0 auto;
  background:var(--tile);border-bottom:1px solid var(--tile-line);
  aspect-ratio:4/3;
}
/* The image is taken out of flow: a child sized with height:100% inside an
   aspect-ratio box feeds its own intrinsic height back into the box, and the
   tiles stop lining up across the row. */
.cat-tile__img img{
  position:absolute;inset:14px;
  width:calc(100% - 28px);height:calc(100% - 28px);
  object-fit:contain;transition:transform .45s var(--ease);
}
.cat-tile:hover .cat-tile__img img{transform:scale(1.06)}
.cat-tile__body{display:flex;flex-direction:column;gap:6px;padding:16px 16px 18px;flex:1}
.cat-tile__name{
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.02em;
  font-size:.92rem;line-height:1.15;color:var(--text);
}
.cat-tile__desc{font-size:.8rem;color:var(--muted);line-height:1.45;flex:1}
.cat-tile__go{
  display:inline-flex;align-items:center;gap:7px;margin-top:8px;
  font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);
}
.cat-tile__go svg{width:13px;height:13px;transition:transform .3s var(--ease)}
.cat-tile:hover .cat-tile__go svg{transform:translateX(4px)}

/* ---------- numbered process steps ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.step{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2vw,30px);
  align-items:start;padding:clamp(22px,2.4vw,32px);background:var(--surface);
  transition:background .3s var(--ease)}
.step:hover{background:var(--hover)}
.step__n{
  font-family:var(--font-display);font-size:clamp(1.5rem,2.4vw,2rem);line-height:1;
  color:var(--accent);opacity:.85;min-width:2.2ch;
}
.step h3{margin:0 0 8px;font-size:1.05rem}
.step p{margin:0;color:var(--muted);font-size:.94rem;max-width:78ch}
@media (max-width:560px){
  .step{grid-template-columns:1fr;gap:8px}
  .step__n{font-size:1.2rem}
}

/* ---------- direct contact buttons (replaced the mailto form) ---------- */
.con-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:44px}

/* ---------- crew roles ---------- */
.roles{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.roles li{
  border:1px solid var(--line-strong);border-radius:999px;
  padding:10px 20px;font-size:.86rem;letter-spacing:.02em;color:var(--text);
  background:var(--glass);transition:.28s var(--ease);
}
.roles li:hover{border-color:var(--accent-line);color:var(--accent)}

/* ---------- stage gallery + lightbox ---------- */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,16px)}
@media (max-width:900px){.gal{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.gal{grid-template-columns:1fr}}
.gal__item{
  position:relative;padding:0;border:1px solid var(--line);cursor:pointer;
  border-radius:var(--r);overflow:hidden;background:var(--tile);
  aspect-ratio:3/2;transition:.32s var(--ease);display:block;
}
.gal__item img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease),opacity .3s;opacity:.94;
}
.gal__item::after{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s;
  background:linear-gradient(180deg,transparent 55%,rgba(6,7,9,.5) 100%);
}
.gal__item:hover{border-color:var(--accent-line);transform:translateY(-3px)}
.gal__item:hover img{transform:scale(1.06);opacity:1}
.gal__item:hover::after{opacity:1}
.gal__item:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.lightbox{position:fixed;inset:0;z-index:120;display:grid;place-items:center}
.lightbox[hidden]{display:none}
.lightbox__scrim{position:absolute;inset:0;background:rgba(4,5,7,.93);backdrop-filter:blur(6px)}
.lightbox__fig{
  position:relative;z-index:2;margin:0;max-width:min(1400px,92vw);max-height:88vh;
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.lightbox__fig img{
  max-width:100%;max-height:80vh;object-fit:contain;display:block;
  border-radius:var(--r);box-shadow:0 30px 90px rgba(0,0,0,.6);
}
.lightbox__count{
  font-size:.76rem;letter-spacing:.14em;font-weight:700;color:rgba(242,243,245,.6);
}
.lightbox__yt{
  width:min(1200px,88vw);aspect-ratio:16/9;max-height:78vh;border:0;
  border-radius:var(--r);background:#000;box-shadow:0 30px 90px rgba(0,0,0,.6);
}
.lightbox__out{
  font-size:.78rem;letter-spacing:.06em;color:rgba(242,243,245,.72);
  text-decoration:none;border-bottom:1px solid rgba(242,243,245,.3);padding-bottom:2px;
}
.lightbox__out:hover{color:#fff;border-color:#fff}
.lightbox__out[hidden]{display:none}
.lightbox__fig img[hidden]{display:none}
.lightbox__missing{
  margin:0;padding:60px 30px;text-align:center;font-size:.9rem;
  color:rgba(242,243,245,.6);border:1px dashed rgba(255,255,255,.2);
  border-radius:var(--r);min-width:min(560px,80vw);
}
.lightbox__missing[hidden]{display:none}
.lightbox__btn{
  position:absolute;z-index:3;width:48px;height:48px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#f2f3f5;
  display:grid;place-items:center;transition:.24s var(--ease);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.lightbox__btn svg{width:22px;height:22px}
.lightbox__btn:hover{background:var(--accent);border-color:transparent;color:var(--on-accent)}
.lightbox__btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.lightbox__btn--close{top:22px;right:22px}
.lightbox__btn--prev{left:max(18px,3vw);top:50%;transform:translateY(-50%)}
.lightbox__btn--next{right:max(18px,3vw);top:50%;transform:translateY(-50%)}
@media (max-width:640px){
  .lightbox__btn{width:42px;height:42px}
  .lightbox__btn--prev{left:12px}
  .lightbox__btn--next{right:12px}
  .lightbox__btn--close{top:14px;right:14px}
  .lightbox__fig img{max-height:70vh}
}

/* ---------- stage size charts + download card ---------- */
.charts{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,22px)}
@media (max-width:760px){.charts{grid-template-columns:1fr}}
.chart{
  margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:#fff;padding:10px;
}
.chart img{width:100%;height:auto;display:block}

.dl-card{
  margin-top:clamp(24px,2.8vw,40px);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(18px,2.4vw,34px);
  padding:clamp(22px,2.6vw,34px);
  border:1px solid var(--accent-line);border-radius:var(--r);
  background:var(--cta-bg);
}
.dl-card__ic{
  width:58px;height:58px;border-radius:14px;display:grid;place-items:center;
  background:var(--accent);color:var(--on-accent);flex-shrink:0;
}
.dl-card__ic svg{width:28px;height:28px}
.dl-card__txt .kicker{margin-bottom:6px}
.dl-card__txt h3{margin:0 0 8px}
.dl-card__txt p{margin:0;color:var(--muted);font-size:.92rem;max-width:56ch}
.dl-card__act{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.dl-card__meta{font-size:.72rem;letter-spacing:.12em;font-weight:700;color:var(--dim);text-transform:uppercase}
@media (max-width:860px){
  .dl-card{grid-template-columns:auto 1fr;row-gap:20px}
  .dl-card__act{grid-column:1/-1}
}
@media (max-width:520px){
  .dl-card{grid-template-columns:1fr}
  .dl-card__ic{display:none}
}

/* ---------- youtube facades ---------- */
.videos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px)}
@media (max-width:820px){.videos{grid-template-columns:1fr}}
.vid{
  position:relative;margin:0;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);aspect-ratio:16/9;
  /* If the YouTube poster is unavailable the tile still looks designed. */
  background:
    radial-gradient(85% 100% at 15% 0%,rgba(67,139,202,.42),transparent 62%),
    radial-gradient(70% 90% at 95% 100%,rgba(225,0,255,.24),transparent 60%),
    #10161d;
  transition:.35s var(--ease);
}
.vid:hover{border-color:var(--accent-line);transform:translateY(-3px)}
.vid img,.vid iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
  object-fit:cover;transition:transform .6s var(--ease),opacity .35s;opacity:.9;
}
.vid:hover img{transform:scale(1.04);opacity:1}
.vid__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:74px;height:74px;border-radius:50%;border:0;cursor:pointer;z-index:3;
  background:rgba(255,0,0,.92);color:#fff;display:grid;place-items:center;
  box-shadow:0 10px 34px rgba(0,0,0,.45);transition:.25s var(--ease);
}
.vid__play svg{width:34px;height:34px;margin-left:3px}
.vid:hover .vid__play{transform:translate(-50%,-50%) scale(1.09);background:#f00}
.vid__play:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.vid figcaption{
  position:absolute;inset:auto 0 0;z-index:2;padding:16px 18px;
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.03em;
  font-size:.92rem;color:#f2f3f5;
  background:linear-gradient(180deg,transparent,rgba(6,7,9,.88));
}
.vid.is-playing .vid__play,.vid.is-playing figcaption{display:none}
/* a video sitting in a .split, in place of the usual .split__media photo */
.vid--split{border-radius:var(--r-lg);align-self:start}

/* ---------- project card that links to a video ---------- */
.proj--video .proj__play{
  position:absolute;left:50%;top:calc(50% - 18px);transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;z-index:3;
  background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.55);
  color:#fff;display:grid;place-items:center;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  transition:.3s var(--ease);
}
.proj--video .proj__play svg{width:24px;height:24px;margin-left:2px}
.proj--video:hover .proj__play{background:rgba(255,0,0,.9);border-color:transparent;transform:translate(-50%,-50%) scale(1.08)}
.proj--open{cursor:pointer}
.proj--open:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.proj--video .proj__tag{
  position:absolute;top:14px;left:14px;z-index:3;
  font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:rgba(6,7,9,.62);border:1px solid rgba(255,255,255,.24);
  padding:4px 9px;border-radius:4px;
}

/* ---------- project card without a photo ---------- */
.proj--noimg{
  background:
    radial-gradient(85% 100% at 15% 0%,rgba(67,139,202,.42),transparent 62%),
    radial-gradient(70% 90% at 95% 100%,rgba(225,0,255,.24),transparent 60%),
    #10161d;
  display:flex;align-items:flex-end;
}
.proj--noimg::after{
  background:linear-gradient(180deg,transparent 40%,rgba(6,7,9,.66) 100%);
}
.proj--noimg .proj__body{position:relative}
.proj--noimg .proj__title{font-size:1.05rem}

/* ---------- gear card: photo-count badge, whole card clickable ---------- */
.gear{cursor:pointer}
.gear:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.gear__img{position:relative}
.gear__count{
  position:absolute;right:8px;bottom:8px;
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 8px;border-radius:100px;
  background:rgba(8,9,11,.78);color:#fff;
  font-size:.68rem;font-weight:600;letter-spacing:.03em;
  backdrop-filter:blur(4px);
}
.gear__count svg{width:12px;height:12px}

/* ---------- equipment detail overlay ---------- */
body.is-locked{overflow:hidden}

.gear-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:clamp(12px,3vw,40px)}
.gear-modal[hidden]{display:none}   /* a class rule beats the UA [hidden] rule, so say it explicitly */
.gear-modal__scrim{position:absolute;inset:0;background:rgba(4,5,7,.82);backdrop-filter:blur(6px);animation:gmFade .25s var(--ease)}
@keyframes gmFade{from{opacity:0}to{opacity:1}}

.gear-modal__panel{
  position:relative;z-index:1;width:min(1100px,100%);max-height:calc(100vh - 2*clamp(12px,3vw,40px));
  overflow:auto;display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(20px,3vw,40px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(20px,3vw,36px);box-shadow:var(--shadow-modal);
  animation:gmIn .3s var(--ease);
}
@keyframes gmIn{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
@media (max-width:860px){.gear-modal__panel{grid-template-columns:1fr}}

.gear-modal__x{
  position:absolute;top:12px;right:12px;z-index:2;
  width:38px;height:38px;border-radius:50%;cursor:pointer;
  background:var(--hover);border:1px solid var(--line);color:var(--text);
  display:grid;place-items:center;transition:.25s var(--ease);
}
.gear-modal__x:hover{background:var(--accent);color:var(--on-accent);border-color:transparent}
.gear-modal__x svg{width:17px;height:17px}

.gear-modal__media{display:grid;gap:12px;min-width:0}
.gear-modal__stage{
  background:var(--tile);border-radius:var(--r);overflow:hidden;
  aspect-ratio:4/3;display:grid;place-items:center;padding:18px;
}
.gear-modal__stage img{max-width:100%;max-height:100%;width:auto;object-fit:contain}

.gear-modal__thumbs{display:flex;gap:10px;flex-wrap:wrap}
.gear-modal__thumbs:empty{display:none}
.gear-modal__thumbs button{
  width:74px;height:60px;padding:6px;cursor:pointer;
  background:var(--tile);border:2px solid transparent;border-radius:10px;
  display:grid;place-items:center;opacity:.6;transition:.25s var(--ease);
}
.gear-modal__thumbs button:hover{opacity:1}
.gear-modal__thumbs button.is-active{opacity:1;border-color:var(--accent)}
.gear-modal__thumbs img{max-width:100%;max-height:100%;width:auto;object-fit:contain}

.gear-modal__info{min-width:0;align-self:start}
.gear-modal__cat{
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin:0 0 10px;font-weight:600;
}
.gear-modal__info h2{margin:0 0 16px}
.gear-modal__desc{color:var(--muted);font-size:.95rem;margin:0 0 26px;white-space:pre-line}
.gear-modal__actions{display:flex;flex-wrap:wrap;gap:12px}

/* ==========================================================================
   LIGHT THEME
   Light is the site default: <html> carries data-theme="light", so this block
   applies unless a visitor switches to dark, which drops back to the :root
   values above. To make dark the default again, remove data-theme from the
   <html> tag in build.py (and flip the fallback in theme() in main.js).
   ========================================================================== */
[data-theme="light"]{
  --bg:#ffffff;
  --bg-2:#f2f4f7;
  --surface:#ffffff;
  --surface-2:#f5f7fa;
  --line:rgba(12,17,22,.13);
  --line-strong:rgba(12,17,22,.26);

  --text:#0e141a;
  --muted:#525c67;
  --dim:#69727d;

  --accent:#1c73ab;                 /* the brand blue, darkened for contrast */
  --accent-soft:rgba(28,115,171,.12);
  --accent-line:rgba(28,115,171,.40);
  --on-accent:#ffffff;

  --bg-rgb:255,255,255;
  --hover:rgba(12,17,22,.06);
  --glass:rgba(255,255,255,.88);
  --tile:#f7f9fb;
  --tile-line:rgba(12,17,22,.10);
  --logo-tile-opacity:.9;
  --client-opacity:.7;
  --cta-bg:linear-gradient(120deg,#eaf2f9 0%,#f6eefb 100%);
  --shadow-modal:0 30px 70px rgba(15,23,32,.22);
  --shadow-float:0 10px 26px rgba(15,23,32,.22);
  --card-shadow:0 1px 2px rgba(15,23,32,.05),0 10px 26px rgba(15,23,32,.06);
  --focus-ring:#0e141a;
  --map-filter:grayscale(.2);
}
[data-theme="light"] .btn--accent:hover{background:#2489c9;box-shadow:0 12px 34px rgba(28,115,171,.28)}
[data-theme="light"] .to-top:hover{background:#2489c9}
[data-theme="light"] .page-head:not(.page-head--photo)::before{
  background:
    radial-gradient(80% 120% at 10% 0%,rgba(67,139,202,.14),transparent 62%),
    radial-gradient(60% 100% at 95% 0%,rgba(225,0,255,.07),transparent 60%);
}
[data-theme="light"] .card::after{
  background:radial-gradient(80% 60% at 50% 0%,rgba(28,115,171,.08),transparent 70%);
}
/* The hero keeps its dark scrim in both themes - it sits on photography and
   the type has to stay white to be readable. */
/* In light mode the bar is opaque from the start: the home hero is a dark
   photo, and dark nav text on top of it would be unreadable while the bar is
   still transparent. */
[data-theme="light"] .site-header{
  background:rgba(255,255,255,.90);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);
}
[data-theme="light"] .hero{color:#f2f3f5}
[data-theme="light"] .hero h1 em{color:#7ed3eb}
[data-theme="light"] .hero .lead{color:rgba(242,243,245,.84)}
[data-theme="light"] .hero .kicker{color:#7ed3eb}
[data-theme="light"] .hero .kicker::before{background:#7ed3eb}
[data-theme="light"] .hero .btn--ghost{color:#f2f3f5;border-color:rgba(255,255,255,.34)}
[data-theme="light"] .hero .btn--ghost:hover{color:#fff;border-color:#fff}

/* Cards need a little lift once the page is white */
:root{--card-shadow:none}
.card,.gear,.faq-item{box-shadow:var(--card-shadow)}

/* ---------- header icon buttons (search / theme) ---------- */
.icon-btn{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  border:1px solid var(--line);background:transparent;color:var(--muted);
  display:grid;place-items:center;cursor:pointer;transition:.24s var(--ease);
}
.icon-btn:hover{color:var(--text);border-color:var(--line-strong);background:var(--hover)}
.icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.icon-btn svg{width:17px;height:17px;grid-area:1/1}
.icon-btn .i-moon{display:none}
[data-theme="light"] .icon-btn .i-moon{display:block}
[data-theme="light"] .icon-btn .i-sun{display:none}
@media (max-width:420px){
  .icon-btn{width:34px;height:34px}
  .icon-btn svg{width:15px;height:15px}
}
/* Two extra buttons make the bar tight on the narrowest phones, so shrink the
   whole set rather than let anything clip. */
@media (max-width:400px){
  .brand img{height:30px}
  .header-tools{gap:10px}
  .icon-btn{width:32px;height:32px}
  .lang button{padding:6px 8px;font-size:.68rem}
  .burger{width:36px;height:36px}
  .burger span{left:9px;right:9px}
  .burger span:nth-child(1){top:12px}
  .burger span:nth-child(2){top:17px}
  .burger span:nth-child(3){top:22px}
  .burger.is-open span:nth-child(1),
  .burger.is-open span:nth-child(3){top:17px}
}
@media (max-width:360px){
  .wrap{padding-inline:14px}
  .brand img{height:26px}
  .header-tools{gap:8px}
  .icon-btn{width:30px;height:30px}
  .icon-btn svg{width:14px;height:14px}
  .lang button{padding:5px 7px;font-size:.65rem}
  .burger{width:32px;height:32px}
  .burger span{left:8px;right:8px}
  .burger span:nth-child(1){top:11px}
  .burger span:nth-child(2){top:15px}
  .burger span:nth-child(3){top:19px}
  .burger.is-open span:nth-child(1),
  .burger.is-open span:nth-child(3){top:15px}
}

/* ---------- search overlay ---------- */
.search-modal{
  position:fixed;inset:0;z-index:210;
  display:grid;align-items:start;justify-items:center;
  padding:clamp(56px,9vh,110px) 16px 24px;
}
.search-modal[hidden]{display:none}
.search-modal__scrim{
  position:absolute;inset:0;background:rgba(4,5,7,.7);
  backdrop-filter:blur(5px);animation:gmFade .2s var(--ease);
}
[data-theme="light"] .search-modal__scrim{background:rgba(18,26,34,.42)}
.search-modal__panel{
  position:relative;z-index:1;width:min(680px,100%);
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-modal);
  overflow:hidden;animation:gmIn .22s var(--ease);
}
.search-modal__top{
  display:flex;align-items:center;gap:12px;
  padding:15px 18px;border-bottom:1px solid var(--line);
}
.search-modal__top svg{width:18px;height:18px;color:var(--dim);flex-shrink:0}
.search-modal__top input{
  flex:1;min-width:0;background:none;border:0;outline:none;
  color:var(--text);font:inherit;font-size:1.02rem;
}
.search-modal__top input::placeholder{color:var(--dim)}
.search-modal__esc{
  font-size:.66rem;letter-spacing:.08em;color:var(--dim);
  border:1px solid var(--line);border-radius:6px;padding:3px 7px;flex-shrink:0;
}
.search-modal__results{max-height:min(58vh,520px);overflow-y:auto;padding:8px}
.sr-group{
  padding:14px 12px 6px;font-size:.66rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--dim);
}
.sr-item{
  display:flex;gap:12px;align-items:center;width:100%;text-align:left;
  padding:9px 12px;border-radius:10px;cursor:pointer;color:inherit;
  background:none;border:0;font:inherit;
}
.sr-item:hover,.sr-item.is-sel{background:var(--hover)}
.sr-item.is-sel{outline:1px solid var(--accent-line)}
.sr-item__pic{
  width:46px;height:36px;flex-shrink:0;border-radius:7px;overflow:hidden;
  background:var(--tile);display:grid;place-items:center;
}
.sr-item__pic img{max-width:100%;max-height:100%;width:auto;object-fit:contain}
.sr-item__pic--photo img{width:100%;height:100%;object-fit:cover}
.sr-item__txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.sr-item__t{
  display:block;font-size:.92rem;font-weight:600;line-height:1.3;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sr-item__s{display:block;font-size:.75rem;color:var(--dim);line-height:1.3}
.sr-empty{padding:34px 16px;text-align:center;color:var(--dim);font-size:.92rem}