/* --- Self-hosted webfonts -------------------------------------------------
   Served from our own domain on purpose: loading these from Google's CDN
   would disclose every visitor's IP address to a third party, which would
   contradict the no-tracking commitment in /legal/privacy/.
   Syne and DM Sans are licensed under the SIL Open Font License 1.1.       */
@font-face{font-family:'Syne';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/syne-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Syne';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/syne-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Syne';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/syne-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Syne';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/syne-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Syne';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/syne-latin-800-normal.woff2') format('woff2');}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/dm-sans-latin-300-normal.woff2') format('woff2');}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/dm-sans-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/dm-sans-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'DM Sans';font-style:italic;font-weight:300;font-display:swap;src:url('/assets/fonts/dm-sans-latin-300-italic.woff2') format('woff2');}
/* Vargu Digital - shared foundation.
   Loaded by every page before its own <style> block, so page-specific rules
   still win. Rules live here only when they were byte-identical on 2+ pages;
   anything that differed per page deliberately stayed in that page. */


/* --- Design tokens --- */
:root {
  --bg:          #111111;
  --surface:     #191919;
  --surface-2:   #222222;
  --border:      rgba(255,255,255,0.07);
  --border-mid:  rgba(255,255,255,0.13);
  --text:        #f0ede8;
  --text-dim:    rgba(240,237,232,0.52);
  --text-faint:  rgba(240,237,232,0.5);
  --accent:      #f7bd03;
  --accent-dim:  rgba(247,189,3,0.10);
  --accent-glow: rgba(247,189,3,0.25);
  --radius:      12px;
  --radius-lg:   20px;
  --font-display:'Syne', sans-serif;
  --font-body:   'DM Sans', sans-serif;
  --nav-h:       68px;
  --max:         1140px;
  --ease:        cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Reset & base --- */
html {
  scroll-behavior: smooth;
  /* Mobile browsers paint a translucent blue box over anything tapped. It
     fires on cards, nav links and gallery tiles and looks like a rendering
     fault; our own :active / :hover states already give the feedback. */
  -webkit-tap-highlight-color: transparent;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 99px; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
.max-w { max-width: var(--max); margin: 0 auto; padding: 0 32px; }
*,*::before,*::after {box-sizing:border-box;margin:0;padding:0}

/* --- Navigation --- */
body > nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  /* backdrop-filter on a fixed bar makes mobile browsers re-sample the page
     behind it every frame, and while scrolling that lags the bar itself: the
     header tears, showing a strip of stale pixels along its bottom edge.
     Promoting it to its own compositing layer makes the blur composite
     instead of repaint, which removes the tearing. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: backdrop-filter;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: block;                 /* not flex: the mobile menu must stack BELOW the bar */
  background: rgba(17,17,17,0.88);
  backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--border);
  transition: background 0.3s;
}
.nav-inner {
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 32px;
}
.nav-logo { display: flex; align-items: center; flex-shrink: 0; }
.nav-logo svg { height: 36px; width: auto; display: block; }
.nav-links {
  display: flex; align-items: center; gap: 36px;
  list-style: none;
}
.nav-links a {
  font-size: 13.5px; color: var(--text-dim);
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--text); }
.nav-right { display: flex; align-items: center; gap: 28px; }
.nav-mobile-toggle {
  display: none;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--text); font-size: 22px;
}
nav .btn-accent:hover {
  background: var(--accent-dim);
  transform: none; box-shadow: none;
}


/* --- Shared components --- */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.fade-up.visible { opacity: 1; transform: translateY(0); }
.section-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 14px;
  display: block;
}
.portfolio-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.p-cat {
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 4px;
}

/* --- Icons (self-hosted sprite, replaces the Remixicon webfont) --- */
.ic {
  width: 1em; height: 1em;
  fill: currentColor;
  flex-shrink: 0;
  vertical-align: -0.125em;
  pointer-events: none;
}

/* --- Footer -------------------------------------------------------------- */
footer { border-top: 1px solid var(--border); padding: 56px 0 20px; }
/* --- Portfolio covers: video/GIF support (home grid + /work grid) --------- */
/* A <video class="portfolio-bg is-video"> or "p-bg is-video" behaves exactly
   like the background-image div it replaces: fills the card, crops to cover,
   and inherits the same hover scale. */
.portfolio-bg.is-video,
.p-bg.is-video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block; border: 0; background: var(--surface);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  /* poster frame still shows; nothing moves */
  .portfolio-bg.is-video,
  .p-bg.is-video { }
}

/* --- Footer background: bracket field, fading upward --- */
footer { position: relative; overflow: hidden; }
footer > * { position: relative; z-index: 1; }
footer::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1240' height='387' viewBox='0 0 1240 387'><g font-family='ui-monospace,SFMono-Regular,Menlo,Consolas,monospace' font-size='13' letter-spacing='0.06em'><text x='0' y='21' xml:space='preserve'><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>[[(%26lt;%22%22%26gt;)]] {(</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>%26lt;</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>%26gt;)} %26lt;[[[%26lt;%26lt;%26gt;%26gt;]]]%26gt;[{[(())]}] ((([;]))) %26lt;{{{([])}}}%26gt;[%26lt;%26gt;] </tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>(</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>([(((;)))])) {[[%26lt;</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>[</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>]%26gt;]]} {[%26lt;{%26lt;[]%26gt;}%26gt;]}[{{[{}]}}]([%22%22]</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>)</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>[[(;)]] ({[[{[]}]]}) %26lt;{}%26gt;%26lt;{%26lt;[[]]%26gt;</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>}</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>%26gt; %26lt;([</tspan></text><text x='0' y='43' xml:space='preserve'><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>{{[%26lt;%26lt;%26gt;%26gt;</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>]</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>}}%26lt;</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>{</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>([[[]]])}%26gt; (((%26lt;;%26gt;))) [{{[()]}}]([[[]]</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>]</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>)((%22%22))[{{[]}}]{()}%26lt;[]%26gt; [(%26lt;%26gt;)]%26lt;(::)%26gt;{([()])} [%26lt;</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>{</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>()}</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>%26gt;</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>] ([</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>(</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>)])%26lt;([{%26lt;(%26lt;%26gt;)%26gt;}</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>]</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>)%26gt; (%26lt;%26lt;[]%26gt;%26gt;) {([[{</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>{</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>%26lt;%26gt;}}]])} [</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>%26lt;</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>%26gt;</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>]</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'> ({%26lt;(::</tspan></text><text x='0' y='64' xml:space='preserve'><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>([</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>{</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>}]){[%26lt;%26gt;]} [%26lt;(;)%26gt;][[{[(%26lt;%26gt;)]}]]([(()</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>)</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>])[{((:</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>:</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>))}] %26lt;{[]}%26gt;%26lt;%26lt;%26lt;{%26lt;%26gt;}%26gt;%26gt;</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>%26gt;</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'> {%26lt;[%26lt;%26gt;]%26gt;</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>}</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>[%26lt;</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>(</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>[%26lt;[[]]%26gt;])%26gt;]{%26lt;[(())]%26gt;} {{{(;)}}} [[{%26lt;{[]}%26gt;}]] %26lt;[%26lt;[]%26gt;]%26gt; %26lt;%26lt;[[%26lt;(%22%22</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>)</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>%26gt;]]%26gt;%26gt; {(())</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>}</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'> {[(%26lt;:</tspan></text><text x='0' y='86' xml:space='preserve'><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>[{%26lt;%26lt;%26lt;%26gt;%26gt;</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>%26gt;</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>}]%26lt;%26lt;[[%26lt;(())%26gt;]]%26gt;%26gt; %26lt;[[[//]]]%26gt; %26lt;%26lt;</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>/</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>/%26gt;%26gt; </tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>%26lt;</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>[::]%26gt; (</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>[</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>[[{{[]}}]]]) (%26lt;%26lt;[[[]]]%26gt;%26gt;</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>)</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>((([])))(%26lt;[{%22%22}]%26gt;) {{%26lt;({[()]})%26gt;}}({%22%22</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>}</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>) </tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>[</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>((</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>%26lt;</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>({::})%26gt;))]([{;}]) %26lt;[()]%26gt; {(%22%22)}</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>%26lt;</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>%26lt;%26lt;%26lt;/</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>/</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>%26gt;%26gt;</tspan></text><text x='0' y='107' xml:space='preserve'><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>%26lt;{{{{[;]}}}}%26gt;[[[]]] [[{[({%22%22}</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>)</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>]}]] ((</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>{</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>[{{//}}]})) %26lt;%26lt;[({;})]%26gt;%26gt;%26lt;({%26lt;%26lt;(())%26gt;%26gt;}</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>)</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>%26gt; (</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>[</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>%26lt;(%26lt;%26lt;%22%22%26gt;%26gt;)%26gt;]) [%26lt;[[]]%26gt;][%26lt;//%26gt;] ([(%26lt;[]%26gt;)]) {</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>[</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>]} [(</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>;</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>)]%26lt;([({%26lt;::%26gt;})])%26gt;[[</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>[</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>[{%26lt;//%26gt;}]]</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>]</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>] %26lt;%26lt;([</tspan></text><text x='0' y='129' xml:space='preserve'><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>{([()])}%26lt;([[[]]])</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>%26gt;</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'> %26lt;[{{</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>(</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>::)}}]%26gt; %26lt;%26lt;{%26lt;%26gt;}%26gt;%26gt;{[%26lt;[[]]%26gt;]}{[%26lt;[[;]]</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>%26gt;</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>]} [%26lt;%26lt;%26gt;%26gt;] %26lt;([::])%26gt; %26lt;({%22%22})</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>%26gt;</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>((%26lt;[;]%26gt;))(%26lt;{//}%26gt;)[[</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>(</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>(//))]</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>]</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>(%26lt;[%26lt;%26lt;()%26gt;%26gt;]%26gt;)([</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>{</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>}]) (((([{%26lt;%26gt;}])))) %26lt;(%26lt;%26gt;)%26gt; ({::})</tspan></text><text x='0' y='150' xml:space='preserve'><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>{[</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>%26lt;</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>%26lt;[]%26gt;%26gt;]}</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>(</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>([//])) [{%26lt;([%26lt;%26gt;])%26gt;}]%26lt;(//)%26gt;(({%26lt;[[]]%26gt;})) </tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>{</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>{({((</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>%22</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>%22))</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>}</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>)}} %26lt;(</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>(</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>[</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>%26lt;{[]}%26gt;]))%26gt; (((((%22%22)))))%26lt;{{[%26lt;%26gt;]}}%26gt;[{{{</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>{</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>(//)}}}}] ((((::))))[(())] {{[[(%26lt;%26gt;)]]}} [</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>{</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>{([])}}] %26lt;[</tspan></text><text x='0' y='172' xml:space='preserve'><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>{%26lt;//%26gt;} [([;</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>]</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>)]</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>%26lt;</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>(%22%22)%26gt; [{({%26lt;[%26lt;%26gt;]%26gt;})}]{%26lt;()%26gt;} {[[([%26lt;%26lt;%26gt;</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>%26gt;</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>])]]} ([[[%26lt;%26gt;</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>]</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>]])[[([[%22%22]</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>]</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>)]] %26lt;{%26lt;%26lt;{(())</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>}</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>%26gt;</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>%26gt;</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>}%26gt; [[{()}]] [</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>%26lt;</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>%26lt;%26lt;%26lt;%26gt;%26gt;%26gt;%26gt;] ({(([()]))})[{()}][</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>(</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>())]%26lt;%26lt;[[((%22%22</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>)</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>)</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>]</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>]%26gt;%26gt; [[%26lt;{{[</tspan></text><text x='0' y='193' xml:space='preserve'><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>%26lt;</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>(</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>%26lt;//%26gt;)%26gt; [</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>(</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>{%26lt;;%26gt;})] [{{%26lt;%26lt;%26lt;%22%22%26gt;%26gt;%26gt;}}](({{;}})) </tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>%26lt;</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>%26lt;%26gt;%26gt; {[</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>(</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>::)]} ({[{//}]}){(%26lt;;%26gt;)}%26lt;(%26lt;%26lt;%26gt;%26gt;)%26gt; {{[[]]}} ((%22%22)) (({%22%22})</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>)</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>{[</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>{</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>[%26lt;()%26gt;]}</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>]</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>}%26lt;[{;}]%26gt;[[[%26lt;(%22%22)%26gt;]]] (%26lt;[%26lt;{(//)}%26gt;]%26gt;){%26lt;::%26gt;} </tspan></text><text x='0' y='215' xml:space='preserve'><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>(((%26lt;%26lt;%26gt;%26gt;))) [[[</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>]</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>]] </tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>{</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>{[</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>(</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>[;])]}} (</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>[</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>]) </tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>(</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>{[[]]}){()} {((;))} {{%26lt;{({%26lt;%26gt;})}%26gt;}} %26lt;{</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>[</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>(%26lt;%26lt;%26gt;%26gt;)]}%26gt;[%26lt;{[[]]}%26gt;][</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>[</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>[{::}]]] (%26lt;[[]]%26gt;) [(%26lt;{%26lt;(%26lt;%26gt;)%26gt;}%26gt;)</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>]</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'> ({%22%22}){[//]} (([[[%22%22]]])) ({[]}</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>)</tspan></text><text x='0' y='236' xml:space='preserve'><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>(</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>[</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>(%26lt;(::)%26gt;)])[%26lt;{([%26lt;()%26gt;])}</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>%26gt;</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>] ({{{[[]]}}}) ([{{:</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>:</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>}}]) (({([[::]])})) [{({{{()}}})}]{</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>(</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>{[({;</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>}</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>)]})} %26lt;%26lt;%26lt;[%26lt;%26gt;]%26gt;%26gt;%26gt;{</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>(</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>%26lt;</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>{{[]}}%26gt;)}({(%26lt;::%26gt;)})(%26lt;[%26lt;{(//)}%26gt;]%26gt;)</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>%26lt;</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>%26lt;%22%22%26gt;%26gt; (([;]))%26lt;[{([(</tspan></text><text x='0' y='258' xml:space='preserve'><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>%26lt;{%26lt;%26gt;}%26gt;((()))[[()]][{%26lt;[%26lt;%26gt;]%26gt;}][{[//]}]{%26lt;({%26lt;%26gt;})%26gt;}[{%26lt;(%26lt;%26gt;)%26gt;}]%26lt;({[]}</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>)</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>%26gt; [[%22%22]][[[%22%22]]]%26lt;[%26lt;%26gt;]%26gt; ((</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>[</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>%26lt;%26lt;%26gt;%26gt;]))({%22%22}) {%26lt;%22%22%26gt;} %26lt;[%26lt;{[%26lt;%22%22%26gt;]}%26gt;]%26gt;%26lt;(%26lt;[//</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>]</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>%26gt;)%26gt; (%26lt;[({//})]%26gt;)(%26lt;//%26gt;)[[]][{%26lt;</tspan></text><text x='0' y='279' xml:space='preserve'><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>{[[({%26lt;%26gt;})]]}{(%26lt;{{[::]}}%26gt;)}([%26lt;[[{%26lt;%26gt;}]]%26gt;])[((::))] [{(%26lt;{(%22%22)}%26gt;)}] {{;}} {%26lt;;</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>%26gt;</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>}[(%26lt;{[::</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>]</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>}%26gt;)][%26lt;[%26lt;%26lt;%26gt;%26gt;]%26gt;] ({({{%22%22}})})%26lt;[]%26gt;%26lt;[%26lt;%26gt;]%26gt; {</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>[</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>%26lt;(%26lt;[::]%26gt;)%26gt;]} ([[%26lt;%26gt;]])%26lt;%26lt;[%26lt;((()))%26gt;]%26gt;%26gt;[[</tspan></text><text x='0' y='301' xml:space='preserve'><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>%26lt;(//)%26gt; {[%26lt;%26gt;]} ((%26lt;{(%26lt;%26gt;)}%26gt;))[(::)] {[(())]} </tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>{</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>{([])}}{{[{}]}} %26lt;{{;</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>}</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>}%26gt; {((()))} {%26lt;[//]%26gt;} %26lt;[{{[]}}]%26gt; {({([%22%22])})} [</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>[</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>{[()]}]]%26lt;(%26lt;</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>%26gt;</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>)%26gt; (%26lt;%26lt;%26lt;{%26lt;::%26gt;}%26gt;%26gt;%26gt;) ({({})}) {</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>(</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>())</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>}</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'> %26lt;[%26lt;</tspan></text><text x='0' y='322' xml:space='preserve'><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>%26lt;((%26lt;{%26lt;%22%22%26gt;}%26gt;))%26gt;([//</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>]</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>)(%26lt;%26lt;(//)%26gt;%26gt;){(({()}))}{(%26lt;%26lt;{//}%26gt;%26gt;)} </tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>[</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>{({[]})}] ([</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>(</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>(()))])({({{[()]}})})[[;]]([{[]}]) {({//})}%26lt;%26lt;[%22%22]%26gt;%26gt; ((({[]}))) (%26lt;%26lt;[]%26gt;%26gt;){%26lt;([])%26gt;} {[</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>(</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>::)]} {{((</tspan></text><text x='0' y='344' xml:space='preserve'><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>%26lt;([%26lt;;%26gt;])%26gt;%26lt;%26lt;{;}%26gt;%26gt;{%26lt;{::}%26gt;} %26lt;[%26lt;({%26lt;[]%26gt;})%26gt;]</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>%26gt;</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>({()}</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>)</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>[(%26lt;{[]}%26gt;)] [[{</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>%26lt;</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>%26gt;}]] %26lt;%26lt;(::)%26gt;%26gt;(</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>%26lt;</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>[%26lt;({;})%26gt;]%26gt;)</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>(</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>[{{((:</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>:</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>))}}]) ([%22%22])[{}] {{{(%26lt;;%26gt;)}}} %26lt;%26lt;(%26lt;%26lt;%26lt;%26gt;%26gt;%26gt;)%26gt;%26gt;([%26lt;%26gt;])([;])%26lt;(({%26lt;%26gt;}))</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>%26gt;</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'> ([</tspan></text><text x='0' y='365' xml:space='preserve'><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>[([])] %26lt;{{%26lt;{%26lt;%22%22%26gt;}%26gt;}}%26gt;{{%22%22}}{[[{()}]]} [%26lt;%26lt;%26lt;%26gt;%26gt;%26gt;] [(())] [{[%26lt;[()]%26gt;]}]((//)) {</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>(</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>%26lt;::%26gt;)} ({%26lt;;%26gt;})%26lt;{[;]}%26gt;%26lt;({%26lt;%26lt;[//]%26gt;%26gt;})%26gt; (%26lt;%26gt;)%26lt;[({//})]%26gt;%26lt;%26lt;%26lt;[{(())}]%26gt;%26gt;%26gt;({%26lt;([[[]]])%26gt;}</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>)</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>{</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>%26lt;</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>[(%22%22)</tspan></text><text x='0' y='387' xml:space='preserve'><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>{[[]]}[(%22%22)] [%26lt;</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>(</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>(%26lt;%22%22%26gt;)</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>)</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>%26gt;] ((::)){()} {{{%26lt;</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>(</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>%22</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>%22</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>)%26gt;}}} %26lt;(%26lt;[</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>{</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>;}]%26gt;)%26gt; [%26lt;;%26gt;][(%26lt;%26gt;)] [[(%26lt;({%22%22})%26gt;)]] ({[{{[//]}}]}) ([[%26lt;((%26lt;</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>%26gt;</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>))%26gt;]]){{%26lt;[</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>:</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>:]%26gt;</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>}</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>}(%26lt;{</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>%26lt;</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>(%26lt;::%26gt;)%26gt;}%26gt;){{[([::])]}} [%26lt;%26lt;</tspan><tspan fill='rgba(247,189,3,0.38)' xml:space='preserve'>;</tspan><tspan fill='rgba(247,189,3,0.115)' xml:space='preserve'>%26gt;</tspan></text></g></svg>");
  background-repeat: repeat; background-position: left bottom;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.45) 32%, transparent 68%);
          mask-image: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.45) 32%, transparent 68%);
  pointer-events: none; z-index: 0;
}
@media (max-width: 700px) {
  footer::before {
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 28%, rgba(0,0,0,0.3) 48%, transparent 70%);
            mask-image: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 28%, rgba(0,0,0,0.3) 48%, transparent 70%);
  }
}

/* Desktop: original four-column layout */
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 40px; align-items: start;
}
.footer-brand { display: flex; flex-direction: column; gap: 16px; }
.footer-logo { display: flex; align-items: center; }
.footer-col ul.footer-reach { flex-direction: column; }
.footer-note { font-size: 13px; color: var(--text-faint); line-height: 1.65; max-width: 260px; }
.footer-head {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-dim);
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 13.5px; color: var(--text-faint); transition: color 0.2s; }
.footer-reach a {
  color: var(--text-dim);
  text-decoration: underline;
  text-decoration-color: rgba(240, 237, 232, 0.28);
  text-underline-offset: 4px;
  transition: color 0.2s, text-decoration-color 0.2s;
}
.footer-reach a:hover { color: var(--accent); text-decoration-color: var(--accent); }
.footer-col a:hover { color: var(--accent); }
.footer-plain { font-size: 13px; color: var(--text-faint); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
  margin-top: 26px; padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-faint);
}
.footer-meta { margin-top: 16px; }



@media (max-width: 860px) {
  .footer-grid {
    display: flex; flex-wrap: wrap; justify-content: center;
    text-align: center; gap: 0;
  }
  .footer-brand {
    order: 1; flex: 1 0 100%;
    align-items: center; padding-bottom: 26px;
  }
  .footer-contact { order: 2; flex: 1 0 100%; padding: 24px 0; }
  .footer-grid nav[aria-label="Site"]  { order: 3; flex: 1 1 0; min-width: 150px; padding: 24px 0 4px; }
  .footer-grid nav[aria-label="Legal"] { order: 4; flex: 1 1 0; min-width: 150px; padding: 24px 0 4px; }
  .footer-contact,
  .footer-grid nav[aria-label="Site"],
  .footer-grid nav[aria-label="Legal"] { border-top: 1px solid var(--border); }
  .footer-grid nav[aria-label="Site"],
  .footer-grid nav[aria-label="Legal"] { text-align: left; }
  .footer-grid nav[aria-label="Site"] ul,
  .footer-grid nav[aria-label="Legal"] ul { align-items: flex-start; }
  .footer-col ul.footer-reach { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px 20px; }
  .footer-social { justify-content: center; }
  .footer-logo { justify-content: center; }
  .footer-bottom { justify-content: center; text-align: center; }
}

@media (max-width: 620px) {
  footer { padding: 44px 0 28px; }
  .footer-meta { margin-top: 16px; }

  /* copyright centred */
  .footer-bottom { margin-top: 22px; justify-content: center; text-align: center; }
}

@media (max-width: 360px) {
  .footer-social { gap: 8px; }
  .footer-social a { width: 32px; height: 32px; }
}

/* --- Nav button + shared responsive nav behaviour ------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px; border-radius: var(--radius);
  font-family: var(--font-body); font-size: 13.5px; font-weight: 500;
  cursor: pointer; transition: all 0.22s var(--ease); border: none;
}
.btn-accent { background: var(--accent); color: #111; font-weight: 600; }
.btn-accent:hover { background: #f9cb30; transform: translateY(-1px); box-shadow: 0 8px 28px var(--accent-glow); }

.nav-mobile-menu {
  display: none; flex-direction: column;
  background: rgba(17,17,17,0.98); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border); padding: 12px 20px 24px;
}
.nav-mobile-menu a {
  padding: 12px 0; font-size: 15px; color: var(--text-dim);
  border-bottom: 1px solid var(--border); transition: color 0.2s;
}
.nav-mobile-menu a:last-child { border-bottom: none; }
.nav-mobile-menu a:hover { color: var(--accent); }
body > nav.mobile-open .nav-mobile-menu { display: flex; }

@media (max-width: 700px) {
  .nav-inner { padding: 0 20px; }
  .nav-links { display: none; }
  /* The switcher stays in the bar on mobile rather than folding into the
     hamburger menu, so language can be changed without opening the menu. */
  .nav-right { gap: 18px; }
  .nav-mobile-toggle { display: inline-flex; }
}
@media (max-width: 400px) {
  .nav-inner { padding: 0 14px; gap: 8px; }
  .nav-right { gap: 12px; }
  .nav-logo svg { height: 30px; }
  .lang { font-size: 11px; padding: 5px 5px; letter-spacing: 0.02em; }
}

/* --- Footer social ------------------------------------------------------- */
.footer-social { display: flex; align-items: center; gap: 10px; }
.footer-social a {
  width: 34px; height: 34px; border-radius: var(--radius);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-mid); color: var(--text-faint);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.footer-social a:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
.footer-social .ic { font-size: 16px; }

/* --- Language switcher ---------------------------------------------------
   SQ and DE are placeholders until those translations exist; they are inert
   rather than linked so nothing 404s. See the comment above <nav> to wire. */
.lang-switch { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.lang {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em;
  padding: 5px 8px; border-radius: 7px;
  color: var(--text-faint); background: none; border: none; line-height: 1;
}
.lang.is-active { color: var(--accent); background: var(--accent-dim); }
.lang.is-soon { opacity: 0.45; cursor: not-allowed; }
a.lang { transition: color 0.2s, background 0.2s; }
a.lang:hover { color: var(--text); background: var(--surface-2); }
.nav-links a.active { color: var(--text); }