/* ==========================================================================
   Your Company — public site stylesheet
   "Stage boot / LED wall" theme: the loading screen's look (near-black navy,
   electric-blue glow, LED dot grid, corner brackets, segmented bars, mono
   status labels) applied to the whole public site.

   Brand values come from Settings as CSS variables injected in the document
   head (see lib/helpers.js → themeVars()):
     --accent, --accent-rgb, --secondary, --secondary-rgb,
     --font-heading, --font-body, --font-mono
   The fallbacks below match the shipped defaults.
   ========================================================================== */

:root {
  /* surfaces */
  --bg: #05070d;
  --bg-deep: #03050a;
  --bg-soft: #070b15;
  --panel: #0a1020;
  --panel-2: #0e1728;

  /* type */
  --text: #eef4ff;
  --muted: #93a4bf;
  --muted-dim: #6c7f9c;

  /* brand (overridden from Settings) */
  --accent: #4da3ff;
  --accent-rgb: 77, 163, 255;
  --secondary: #7cf7ff;
  --secondary-rgb: 124, 247, 255;

  /* hairlines + glow derived from the accent */
  --line: rgba(var(--accent-rgb), 0.14);
  --line-strong: rgba(var(--accent-rgb), 0.4);
  --glow-sm: 0 0 10px rgba(var(--accent-rgb), 0.45);
  --glow-md: 0 0 22px rgba(var(--accent-rgb), 0.4);
  --glow-lg: 0 0 40px rgba(var(--accent-rgb), 0.32);

  /* LED dot-grid texture (≈22px pitch, faint dots in the animating colour) */
  --dot-grid: radial-gradient(circle, color-mix(in srgb, var(--t-anim-1) 16%, transparent) 1px, transparent 1.4px);
  --dot-pitch: 22px;

  /* Admin → Theme & style → Colours: the loading screen, the looping
     background light and the scrolling strips. These are classic's defaults;
     a preset stylesheet (loaded after this file) declares its own set on
     [data-theme="<id>"], and the admin prints :root[data-theme="<id>"]{…}
     after that, so nothing here leaks into another theme. */
  /* Classic leaves --t-loader-* unset so the loading screen keeps using
     Admin → Settings → preloader colours until a theme colour is picked. */
  --t-anim-1: #4da3ff;
  --t-anim-2: #7cf7ff;
  --t-anim-3: #4da3ff;
  --t-strip-bg: #070b15;
  --t-strip-text: #93a4bf;
  --t-strip-accent: #4da3ff;

  /* Cairo = body + headings, Rajdhani = kickers / nav / buttons,
     Share Tech Mono = the technical labels (all four come from Settings). */
  --font-heading: 'Cairo', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Cairo', 'Helvetica Neue', Arial, sans-serif;
  --font-accent: 'Rajdhani', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Courier New', monospace;

  --wrap: 1280px;
  --radius: 2px;
  --bracket: 14px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

html {
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  margin: 0;
  background-color: var(--bg);
  background-image: var(--dot-grid);
  background-size: var(--dot-pitch) var(--dot-pitch);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

/* No sideways scrolling on phones. `clip` is used where supported because it
   does not turn the element into a scroll container (the sticky header keeps
   working); `hidden` is the fallback for older browsers. */
html,
body { overflow-x: hidden; }

@supports (overflow: clip) { html, body { overflow-x: clip; } }

body.nav-open { overflow: hidden; }

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

a { color: inherit; text-decoration: none; }

/* ---------------------------------------------------------------- */
/* typography — Cairo 800 uppercase headings, cool grey-blue body */
/* ---------------------------------------------------------------- */

h1, h2, h3, h4, h5 {
  position: relative;
  font-family: var(--font-heading);
  font-weight: 800;
  font-style: normal;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: 0.01em;
  margin: 0 0 0.6em;
  color: #fff;
}

h1 {
  font-size: clamp(2.4rem, 5.6vw, 4.9rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 0.98;
}
h2 { font-size: clamp(1.8rem, 3.3vw, 2.9rem); letter-spacing: 0.01em; }
h3 { font-size: clamp(1.05rem, 1.5vw, 1.35rem); letter-spacing: 0.01em; line-height: 1.1; }
h4 { font-size: 1rem; letter-spacing: 0.01em; }
h5 { font-size: 0.92rem; letter-spacing: 0.02em; }

p { margin: 0 0 1.1em; color: var(--muted); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; color: var(--muted); }
li { margin-bottom: 0.45em; }

strong, b { color: var(--text); font-weight: 600; }

::selection { background: rgba(var(--accent-rgb), 0.9); color: #04070d; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  box-shadow: var(--glow-sm);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #04070d;
  padding: 12px 18px;
  z-index: 200;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
}
.skip-link:focus { left: 12px; top: 12px; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 44px);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- */
/* shared motifs: mono labels, LED dots, corner brackets, seg bars   */
/* ---------------------------------------------------------------- */

/* small letter-spaced uppercase monospace label (loader status row) */
.mono,
.status,
.news-meta,
.article-meta,
.work-meta,
.job-meta,
.filter-count,
.filter-group label,
.breadcrumbs,
.stat-label,
.stat-value,
.team-role,
.field label,
.office-label,
.hero-meta,
.footer-bottom,
.footer-col h3,
.mega-num {
  font-family: var(--font-mono);
}

/* sub-headings, kickers, nav labels and buttons use the accent face */
.kicker,
.socials a,
.text-link,
.btn,
.primary-nav {
  font-family: var(--font-accent);
  font-weight: 600;
}

/* the loader's blinking square dot */
.dot {
  content: '';
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.9);
  animation: dot-blink 1.4s ease-in-out infinite;
}

/* LED dot texture helper for panels that want it stronger than the page */
.led-texture { background-image: var(--dot-grid); background-size: var(--dot-pitch) var(--dot-pitch); }

/* 40-segment bar look (loader progress bar) used for dividers + stats */
.seg-bar,
.section-divider,
.stat::after {
  height: 8px;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(var(--accent-rgb), 0.34) 0,
    rgba(var(--accent-rgb), 0.34) 18px,
    transparent 18px,
    transparent 22px
  );
}
.seg-bar,
.section-divider { display: block; }
.stat::after { content: ''; display: block; margin-top: 18px; }

@keyframes dot-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

/* ---------------------------------------------------------------- */
/* announcement strip — strip colours + mono text + blinking dot     */
/* ---------------------------------------------------------------- */

.announcement {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--t-strip-accent) 12%, transparent), transparent 55%),
    var(--t-strip-bg);
  border-bottom: 1px solid var(--line);
  color: var(--t-strip-text);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.announcement .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 40px;
  padding-top: 8px;
  padding-bottom: 8px;
  flex-wrap: wrap;
  text-align: center;
}
.announcement .wrap > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--t-strip-accent);
  min-width: 0;
}
/* the strip's blinking dot wears the strip accent */
.announcement .wrap > span::before {
  content: '';
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  background: var(--t-strip-accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--t-strip-accent) 90%, transparent);
  animation: dot-blink 1.4s ease-in-out infinite;
}
.announcement a {
  color: var(--t-strip-text);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 1px;
}
.announcement a:hover { color: var(--t-strip-accent); border-color: var(--t-strip-accent); }

/* ---------------------------------------------------------------- */
/* header + segmented scroll progress                                */
/* ---------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(5, 7, 13, 0.78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.site-header.is-scrolled {
  background: rgba(5, 7, 13, 0.96);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(var(--accent-rgb), 0.25);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 78px;
}

/* Primary conversion path in the header ("Start a project" → /enquiry). */
.header-cta {
  flex: 0 0 auto;
  margin-left: 8px;
  white-space: nowrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 800;
  font-style: normal;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  flex-shrink: 0;
  color: #fff;
}
.brand img { height: 34px; width: auto; }
.brand .brand-mark {
  width: 10px;
  height: 10px;
  background: var(--accent);
  display: inline-block;
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.9);
  animation: dot-blink 2.4s ease-in-out infinite;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.primary-nav > a,
.primary-nav > .nav-item > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 12px;
  background: none;
  border: 0;
  color: var(--text);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  border-radius: var(--radius);
  transition: color 0.2s var(--ease), text-shadow 0.2s var(--ease);
}
.primary-nav > a:hover,
.primary-nav > .nav-item > button:hover { color: var(--accent); text-shadow: 0 0 16px rgba(var(--accent-rgb), 0.75); }
.primary-nav > a.is-active {
  color: var(--accent);
  text-shadow: 0 0 16px rgba(var(--accent-rgb), 0.75);
}

.nav-item { position: relative; }
.nav-item > button::after {
  content: '';
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s var(--ease);
}
.nav-item.is-open > button::after { transform: rotate(225deg) translateY(-2px); }

.mega,
.drop {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.08), transparent 45%),
    var(--panel);
  border: 1px solid var(--line-strong);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(var(--accent-rgb), 0.08);
  z-index: 95;
}
.mega { width: min(880px, 88vw); padding: 24px; }
.drop { width: 300px; padding: 14px; }

.nav-item:hover > .mega,
.nav-item:hover > .drop,
.nav-item.is-open > .mega,
.nav-item.is-open > .drop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* mega menu / dropdown panels get the loader's bracket frame too */
.mega::before,
.drop::before {
  content: '';
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background-image:
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: left top, left top, right top, right top, left bottom, left bottom, right bottom, right bottom;
  background-size: 16px 2px, 2px 16px, 16px 2px, 2px 16px, 16px 2px, 2px 16px, 16px 2px, 2px 16px;
  filter: drop-shadow(0 0 7px rgba(var(--accent-rgb), 0.6));
}

.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.mega-card {
  display: block;
  padding: 14px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.mega-card:hover {
  background: var(--panel-2);
  border-color: var(--line-strong);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.12), 0 0 20px rgba(var(--accent-rgb), 0.12);
}
.mega-num {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 8px;
  text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.6);
}
.mega-card strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 800;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.14;
  color: #fff;
}
.mega-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
}
.mega-tags span {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 2px 7px;
  border-radius: 999px;
}
.mega-all {
  display: inline-block;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--accent);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.mega-all:hover { text-shadow: 0 0 16px rgba(var(--accent-rgb), 0.8); }

.drop a {
  display: block;
  padding: 11px 10px;
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: 0.84rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius);
  color: var(--text);
}
.drop a:hover { background: var(--panel-2); color: var(--accent); text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.7); }

.hamburger {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  border-radius: var(--radius);
  transition: box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
.hamburger:hover { box-shadow: var(--glow-sm); }
.hamburger span {
  width: 20px;
  height: 1.5px;
  background: currentColor;
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.8);
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
body.nav-open .hamburger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.nav-open .hamburger span:nth-child(2) { opacity: 0; }
body.nav-open .hamburger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------------------------------------------------------------- */
/* scroll progress — thin segmented bar under the header             */
/* ---------------------------------------------------------------- */

.scroll-track {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  display: flex;
  gap: 2px;
  pointer-events: none;
  z-index: 3;
}
.scroll-track span {
  flex: 1 1 0;
  min-width: 0;
  background: rgba(var(--accent-rgb), 0.13);
  transition: background-color 0.15s linear, box-shadow 0.15s linear;
}
.scroll-track span.is-on {
  background: var(--accent);
  box-shadow: 0 0 7px rgba(var(--accent-rgb), 0.85);
}

/* ---------------------------------------------------------------- */
/* buttons                                                           */
/* ---------------------------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 14px 26px;
  border: 1px solid var(--line-strong);
  background: rgba(var(--accent-rgb), 0.04);
  color: var(--text);
  font-family: var(--font-accent);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: var(--radius);
  transition: background 0.22s var(--ease), color 0.22s var(--ease), border-color 0.22s var(--ease),
    box-shadow 0.22s var(--ease), transform 0.22s var(--ease);
}
/* secondary = transparent with accent bracket corners */
.btn::before {
  content: '';
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background-image:
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: left top, left top, right top, right top, left bottom, left bottom, right bottom, right bottom;
  background-size: 9px 2px, 2px 9px, 9px 2px, 2px 9px, 9px 2px, 2px 9px, 9px 2px, 2px 9px;
  opacity: 0.9;
  filter: drop-shadow(0 0 5px rgba(var(--accent-rgb), 0.5));
  transition: opacity 0.22s var(--ease), filter 0.22s var(--ease);
}
.btn:hover {
  color: #fff;
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
  box-shadow: var(--glow-md);
}
.btn:hover::before { filter: drop-shadow(0 0 9px rgba(var(--accent-rgb), 0.95)); }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #04101f;
  font-weight: 700;
  box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.42), 0 0 60px rgba(var(--accent-rgb), 0.16);
}
.btn--primary::before { display: none; }
.btn--primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #02080f;
  filter: brightness(1.12);
  box-shadow: 0 0 28px rgba(var(--accent-rgb), 0.7), 0 0 80px rgba(var(--accent-rgb), 0.3);
}
.btn--ghost { background: transparent; }
.btn--sm { min-height: 40px; padding: 10px 18px; font-size: 0.66rem; }
.btn-block { width: 100%; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  font-family: var(--font-accent);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.45);
}
.text-link::after { content: '→'; transition: transform 0.2s var(--ease); }
.text-link:hover { color: #fff; }
.text-link:hover::after { transform: translateX(4px); }

/* ---------------------------------------------------------------- */
/* footer                                                            */
/* ---------------------------------------------------------------- */

.site-footer {
  position: relative;
  border-top: 1px solid var(--line-strong);
  background-color: var(--bg-deep);
  background-image: var(--dot-grid);
  background-size: var(--dot-pitch) var(--dot-pitch);
  margin-top: clamp(60px, 9vw, 120px);
}
.site-footer::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.7), transparent);
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(30px, 5vw, 80px);
  padding-top: clamp(50px, 7vw, 84px);
  padding-bottom: clamp(40px, 5vw, 64px);
}
.footer-brand img { height: 40px; width: auto; margin-bottom: 20px; }
.footer-brand .brand { font-size: 1.5rem; margin-bottom: 18px; }
.footer-brand p { max-width: 42ch; color: var(--muted); font-size: 0.95rem; }
.socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.socials a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border: 1px solid var(--line);
  padding: 10px 14px;
  font-family: var(--font-accent);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.socials a:hover {
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: var(--glow-sm);
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 30px;
}
.footer-col h3 {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.footer-col h3 span {
  color: var(--accent);
  text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.6);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin: 0; }
.footer-col a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  font-size: 0.92rem;
  transition: color 0.2s var(--ease), padding-left 0.2s var(--ease);
}
.footer-col a:hover { color: var(--text); padding-left: 4px; }

.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  padding-bottom: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.footer-bottom p { margin: 0; font-family: inherit; font-size: inherit; color: inherit; }
.footer-bottom .cities {
  color: var(--accent);
  text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.45);
}

.to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(5, 7, 13, 0.9);
  color: var(--text);
  cursor: pointer;
  display: none;
  z-index: 80;
  font-size: 1rem;
  transition: box-shadow 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.to-top.is-visible { display: block; }
.to-top:hover { border-color: var(--accent); color: var(--accent); box-shadow: var(--glow-md); }

/* ---------------------------------------------------------------- */
/* hero — LED wall canvas + glowing headline                         */
/* ---------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: min(92vh, 900px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(
      circle at 50% 42%,
      color-mix(in srgb, var(--t-anim-1) 16%, transparent) 0%,
      color-mix(in srgb, var(--t-anim-1) 5%, transparent) 42%,
      transparent 72%
    ),
    var(--bg-deep);
}
.hero::before {
  /* stronger dot grid on the hero, the "wall" the loader is drawn on */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--dot-grid);
  background-size: var(--dot-pitch) var(--dot-pitch);
  opacity: 0.85;
  mask-image: radial-gradient(circle at 50% 45%, #000 0%, rgba(0, 0, 0, 0.35) 65%, transparent 100%);
  pointer-events: none;
}
.hero-wall {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.7;
  pointer-events: none;
}
.hero-media,
.hero-media .slide {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media .slide {
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
  transform: scale(1.03);
}
.hero-media .slide.is-active { opacity: 0.32; }
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 80% 6%, color-mix(in srgb, var(--t-anim-2) 18%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(5, 7, 13, 0.35) 0%, rgba(5, 7, 13, 0.72) 52%, var(--bg) 100%);
  z-index: 2;
}
.hero .wrap {
  position: relative;
  z-index: 3;
  padding-top: clamp(90px, 16vh, 180px);
  padding-bottom: clamp(50px, 8vh, 90px);
  width: 100%;
}
/* the hero content box gets the loader's bracket frame */
.hero-box {
  position: relative;
}
.hero-box::before {
  content: '';
  position: absolute;
  inset: -18px -22px;
  pointer-events: none;
  background-image:
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: left top, left top, right top, right top, left bottom, left bottom, right bottom, right bottom;
  background-size: 24px 2px, 2px 24px, 24px 2px, 2px 24px, 24px 2px, 2px 24px, 24px 2px, 2px 24px;
  opacity: 0.55;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--t-anim-3) 55%, transparent));
  animation: bracket-breathe 2.8s ease-in-out infinite;
  z-index: -1;
}
@keyframes bracket-breathe {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.85; }
}
.hero h1 {
  max-width: 18ch;
  margin-bottom: 22px;
  color: #fff;
  text-shadow: 0 0 22px rgba(var(--accent-rgb), 0.5), 0 0 64px rgba(var(--accent-rgb), 0.28);
}
.hero h1 em {
  font-style: inherit;
  color: var(--secondary);
  text-shadow: 0 0 22px rgba(var(--secondary-rgb), 0.5);
}
.hero-sub {
  max-width: 58ch;
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  color: #c3d2e8;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-meta {
  position: absolute;
  right: clamp(18px, 4vw, 44px);
  bottom: clamp(50px, 8vh, 90px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-dots { display: flex; gap: 4px; }
.hero-dots button {
  position: relative;
  width: 30px;
  height: 44px; /* 44px touch target, the visible bar is drawn by ::after */
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.hero-dots button::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 10px;
  transform: translateY(-50%);
  background: rgba(var(--accent-rgb), 0.18);
  transition: background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.hero-dots button.is-active::after {
  background: var(--accent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.85);
}

/* ---------------------------------------------------------------- */
/* generic section shell                                             */
/* ---------------------------------------------------------------- */

.section {
  position: relative;
  padding: clamp(56px, 8vw, 110px) 0;
}
.section::after {
  /* segmented bar divider, like the loader progress bar */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(var(--accent-rgb), 0.42) 0 10px,
    transparent 10px 14px
  );
  opacity: 0.5;
}
.section:last-of-type::after { display: none; }

.section--soft {
  background-color: var(--bg-soft);
  background-image: var(--dot-grid);
  background-size: var(--dot-pitch) var(--dot-pitch);
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 60px);
  align-items: end;
  margin-bottom: clamp(32px, 5vw, 56px);
}
.section-head h2 { margin-bottom: 0; max-width: 20ch; }
.section-head .section-intro { color: var(--muted); max-width: 46ch; margin: 0; }

/* ---------------------------------------------------------------- */
/* kicker — "01 // Section" in mono with a blinking loader dot       */
/* ---------------------------------------------------------------- */

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-accent);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
  text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.5);
}
.kicker::before {
  content: '';
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.9);
  animation: dot-blink 1.4s ease-in-out infinite;
}

/* ---------------------------------------------------------------- */
/* corner brackets — shared by cards, media and panels              */
/* ---------------------------------------------------------------- */

:is(
  .feature-card, .step, .discipline, .team-card, .work-card, .news-card, .office,
  .stat, .testimonial-slider, .aside-card, .empty-state, .job, .form-notice,
  .map-frame, .project-cover, .article-hero, .tech-media, .detail-media, .about-media,
  .discipline-media, .service-hero-media, .video-embed, .hero-box, .brand-tile, .event-tile
) {
  position: relative;
}

:is(
  .feature-card, .step, .discipline, .team-card, .work-card, .news-card, .office,
  .stat, .testimonial-slider, .aside-card, .empty-state, .job, .form-notice,
  .map-frame, .project-cover, .article-hero, .tech-media, .detail-media, .about-media,
  .discipline-media, .service-hero-media, .video-embed, .hero-box, .brand-tile, .event-tile
)::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: 3;
  pointer-events: none;
  background-image:
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: left top, left top, right top, right top, left bottom, left bottom, right bottom, right bottom;
  background-size:
    var(--bracket) 2px, 2px var(--bracket),
    var(--bracket) 2px, 2px var(--bracket),
    var(--bracket) 2px, 2px var(--bracket),
    var(--bracket) 2px, 2px var(--bracket);
  opacity: 0.5;
  filter: drop-shadow(0 0 5px rgba(var(--accent-rgb), 0.35));
  transition: opacity 0.25s var(--ease), filter 0.25s var(--ease);
}

/* cards that clip their own content (overflow: hidden) keep the brackets inside */
.team-card::before,
.testimonial-slider::before { inset: 0; }

/* brackets brighten on hover — and sit bright on media frames by default */
:is(
  .feature-card, .step, .discipline, .team-card, .work-card, .news-card, .office,
  .stat, .client, .testimonial-slider, .aside-card, .job, .form-notice, .map-frame,
  .project-cover, .article-hero, .tech-media, .detail-media, .about-media,
  .discipline-media, .service-hero-media, .video-embed, .brand-tile, .event-tile
):hover::before,
:is(.project-cover, .article-hero, .tech-media, .detail-media, .about-media, .discipline-media, .service-hero-media)::before {
  opacity: 1;
  filter: drop-shadow(0 0 9px rgba(var(--accent-rgb), 0.85));
}

/* ---------------------------------------------------------------- */
/* scroll reveal + heading scanline shimmer                          */
/* ---------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }

:is(.hero, .page-hero, .section-head, .about-copy, .cta-band, .detail-copy, .tech-copy, .error-page)
  :is(h1, h2)::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: min(100%, 26ch);
  height: 100%;
  pointer-events: none;
  opacity: 0;
  background-image: linear-gradient(104deg, transparent 42%, rgba(255, 255, 255, 0.55) 50%, transparent 58%);
  background-size: 240% 100%;
  background-repeat: no-repeat;
  background-position: 160% 0;
  mix-blend-mode: screen;
}
.hero h1::after,
.page-hero h1::after { animation: scan-sweep 1.2s 0.5s var(--ease) both; }
.reveal.is-visible :is(h1, h2)::after { animation: scan-sweep 1s 0.12s var(--ease) both; }
@keyframes scan-sweep {
  0% { background-position: 160% 0; opacity: 0; }
  15% { opacity: 0.9; }
  70% { opacity: 0.5; }
  100% { background-position: -70% 0; opacity: 0; }
}

/* ---------------------------------------------------------------- */
/* status-style meta rows (loader status line: dot + mono text)      */
/* ---------------------------------------------------------------- */

.meta-row,
.project-facts div,
.news-meta,
.article-meta,
.work-meta,
.job-meta span,
.hero-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.meta-row::before,
.project-facts div::before,
.news-meta::before,
.article-meta::before,
.work-meta::before,
.job-meta span::before,
.hero-status::before {
  content: '';
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  background: var(--accent);
  box-shadow: 0 0 9px rgba(var(--accent-rgb), 0.9);
  animation: dot-blink 1.6s ease-in-out infinite;
}

/* ---------------------------------------------------------------- */
/* about                                                             */
/* ---------------------------------------------------------------- */

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
}
.about-media { position: relative; }
.about-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--line);
  filter: saturate(0.85) contrast(1.05);
}
.about-copy h2 { margin-bottom: 22px; }
.about-copy p { font-size: 1.02rem; }
.about-actions { margin-top: 26px; }

/* ---------------------------------------------------------------- */
/* feature cards                                                     */
/* ---------------------------------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.feature-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 210px;
  padding: clamp(22px, 3vw, 34px);
  background: var(--bg-deep);
  transition: background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.feature-card:hover {
  background: var(--panel);
  box-shadow: inset 0 0 40px rgba(var(--accent-rgb), 0.12);
}
.feature-icon {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 6px;
  text-shadow: 0 0 18px rgba(var(--accent-rgb), 0.9);
}
.feature-card h3 { font-size: 1.15rem; margin: 0; }
.feature-card p { font-size: 0.93rem; margin: 0; }
.feature-card .text-link { margin-top: auto; }

/* ---------------------------------------------------------------- */
/* history timeline                                                  */
/* ---------------------------------------------------------------- */

.timeline { position: relative; margin-top: 10px; }
.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb), 0.45) 12%, rgba(var(--accent-rgb), 0.45) 88%, transparent);
}
.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: clamp(18px, 4vw, 50px);
  padding: 24px 0 24px 28px;
  border-bottom: 1px solid var(--line);
}
.timeline-item:last-child { border-bottom: 0; }
.timeline-item::before {
  /* LED pixel on the timeline rail */
  content: '';
  position: absolute;
  left: -3px;
  top: 34px;
  width: 7px;
  height: 7px;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.95);
}
.timeline-year {
  font-family: var(--font-mono);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--accent);
  line-height: 1;
  text-shadow: 0 0 18px rgba(var(--accent-rgb), 0.6);
}
.timeline-body h3 { margin-bottom: 8px; }
.timeline-body p { margin: 0; font-size: 0.95rem; }

/* ---------------------------------------------------------------- */
/* methodology steps                                                 */
/* ---------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  counter-reset: step;
}
.step {
  position: relative;
  background: var(--bg-deep);
  padding: clamp(20px, 3vw, 30px);
  transition: background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.step:hover {
  background: var(--panel);
  box-shadow: inset 0 0 40px rgba(var(--accent-rgb), 0.12);
}
.step-num {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  line-height: 1;
  color: rgba(var(--accent-rgb), 0.9);
  text-shadow: 0 0 20px rgba(var(--accent-rgb), 0.55);
}
.step h3 { font-size: 1.05rem; margin-bottom: 8px; }
.step p { font-size: 0.9rem; margin: 0; }

/* ---------------------------------------------------------------- */
/* stats                                                             */
/* ---------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.stat {
  background: var(--panel);
  padding: clamp(24px, 3vw, 38px);
}
.stat::after { margin-top: 18px; width: 100%; }
.stat-value {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
  text-shadow: 0 0 26px rgba(var(--accent-rgb), 0.45);
}
.stat-value .suffix {
  font-size: 0.5em;
  color: var(--secondary);
  text-shadow: 0 0 20px rgba(var(--secondary-rgb), 0.7);
}
.stat-label {
  margin-top: 12px;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------------------------------------------------------------- */
/* team, clients, testimonials, news                                 */
/* ---------------------------------------------------------------- */

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.team-card {
  overflow: hidden;
  background: var(--panel);
  transition: box-shadow 0.3s var(--ease);
}
.team-card:hover { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55); }
.team-photo { position: relative; aspect-ratio: 4 / 4.6; overflow: hidden; }
.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.6) contrast(1.05) brightness(0.9);
  transition: transform 0.6s var(--ease), filter 0.4s var(--ease);
}
.team-card:hover .team-photo img { transform: scale(1.04); filter: grayscale(0) contrast(1.1) brightness(1); }
.team-photo::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  background: linear-gradient(180deg, transparent, rgba(5, 7, 13, 0.92));
}
.team-body { padding: 18px 20px 24px; position: relative; }
.team-body h3 { font-size: 1.1rem; margin-bottom: 4px; }
.team-role {
  margin-bottom: 12px;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.5);
}
.team-body p { font-size: 0.92rem; }

.clients-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
/* the client logo wall is a strip: tiles + hover blush read the strip tokens */
.client {
  background: var(--t-strip-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 128px;
  padding: 22px;
  transition: background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.client:hover {
  background: var(--panel-2);
  box-shadow: inset 0 0 34px color-mix(in srgb, var(--t-strip-accent) 14%, transparent);
}
/* every logo gets the same box; contain keeps its proportions inside it */
.client img {
  display: block;
  width: 100%;
  max-width: 168px;
  height: 64px;
  object-fit: contain;
  opacity: 0.6;
  filter: grayscale(1) brightness(1.8);
  transition: opacity 0.25s var(--ease), filter 0.25s var(--ease);
}
.client:hover img { opacity: 1; filter: grayscale(0) brightness(1); }
.client span {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.testimonial-slider {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.07), transparent 55%),
    var(--panel);
}
.testimonial-track {
  display: flex;
  transition: transform 0.5s var(--ease);
  will-change: transform;
}
.testimonial-slide {
  flex: 0 0 100%;
  min-width: 100%;
  padding: clamp(28px, 5vw, 64px);
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
}
.testimonial-slide img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  box-shadow: 0 0 26px rgba(var(--accent-rgb), 0.28);
}
.testimonial-quote {
  margin-bottom: 22px;
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  line-height: 1.3;
  letter-spacing: -0.005em;
  text-transform: none;
  color: #fff;
}
.testimonial-meta strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.testimonial-meta span { color: var(--muted); font-size: 0.85rem; }
.testimonial-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 clamp(28px, 5vw, 64px) clamp(24px, 4vw, 40px);
}
.slider-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.slider-btn:hover {
  background: rgba(var(--accent-rgb), 0.14);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: var(--glow-sm);
}
.slider-dots { display: flex; gap: 5px; margin-left: auto; }
.slider-dots button {
  position: relative;
  width: 26px;
  height: 44px; /* 44px touch target, the visible bar is drawn by ::after */
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.slider-dots button::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 8px;
  transform: translateY(-50%);
  background: rgba(var(--accent-rgb), 0.2);
  transition: background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.slider-dots button.is-active::after {
  background: var(--accent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.85);
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px);
}
.news-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--panel);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.news-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.55), 0 0 30px rgba(var(--accent-rgb), 0.12);
}
.news-thumb { aspect-ratio: 16 / 10; overflow: hidden; }
.news-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.news-card:hover .news-thumb img { transform: scale(1.04); }
.news-body { padding: 20px 22px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.news-meta {
  color: var(--accent);
  text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.4);
}
.news-body h3 { font-size: 1.1rem; margin: 0; }
.news-body p { font-size: 0.9rem; }
.news-body .text-link { margin-top: auto; }

/* ---------------------------------------------------------------- */
/* offices, forms, CTA band                                          */
/* ---------------------------------------------------------------- */

.offices-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px);
}
.office {
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--line);
  background: var(--panel);
}
.office h3 { font-size: 1.05rem; margin-bottom: 14px; }
.office p { font-size: 0.9rem; margin-bottom: 10px; }
.office a { color: var(--text); border-bottom: 1px solid var(--line-strong); }
.office a:hover { color: var(--accent); border-color: var(--accent); }
.office .office-label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-dim);
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.field { display: flex; flex-direction: column; gap: 7px; }
.field.span-2 { grid-column: 1 / -1; }
.field label {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 46px;
  padding: 13px 14px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  border-radius: var(--radius);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent);
  background: var(--panel);
  outline: none;
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.4), 0 0 24px rgba(var(--accent-rgb), 0.22);
}
.field .error { color: #ff9d9d; font-size: 0.8rem; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.captcha-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.captcha-question {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  color: var(--accent);
  text-shadow: 0 0 16px rgba(var(--accent-rgb), 0.5);
  white-space: nowrap;
}
.captcha-row input { max-width: 140px; }

.form-notice {
  border: 1px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
  padding: 14px 18px;
  font-size: 0.92rem;
  margin-bottom: 20px;
  color: var(--text);
  box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.14);
}
.form-notice--ok {
  border-color: var(--secondary);
  background: rgba(var(--secondary-rgb), 0.09);
  box-shadow: 0 0 24px rgba(var(--secondary-rgb), 0.16);
}

.map-frame { margin-top: clamp(24px, 4vw, 44px); border: 1px solid var(--line); overflow: hidden; }
.map-frame iframe,
.map-frame video,
.map-frame embed,
.map-frame object {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 0;
  min-height: 400px;
  filter: grayscale(0.4) contrast(1.05) brightness(0.85) hue-rotate(175deg);
}

.cta-band {
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(90% 130% at 92% 0%, rgba(var(--secondary-rgb), 0.12), transparent 62%),
    radial-gradient(90% 130% at 4% 100%, rgba(var(--accent-rgb), 0.18), transparent 62%),
    var(--bg-soft);
  padding: clamp(44px, 6vw, 78px) 0;
}
.cta-band::before {
  /* segmented rule along the top edge of the band */
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 4px;
  background-image: repeating-linear-gradient(90deg, rgba(var(--accent-rgb), 0.5) 0 10px, transparent 10px 14px);
}
.cta-band .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.cta-band h2 { margin: 0; max-width: 22ch; text-shadow: 0 0 26px rgba(var(--accent-rgb), 0.3); }

/* ---------------------------------------------------------------- */
/* interior page hero                                                */
/* ---------------------------------------------------------------- */

.page-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 10vw, 130px) 0 clamp(36px, 5vw, 60px);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(70% 120% at 85% 0%, rgba(var(--accent-rgb), 0.16), transparent 62%),
    radial-gradient(60% 90% at 10% 100%, rgba(var(--secondary-rgb), 0.07), transparent 65%),
    var(--bg-deep);
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--dot-grid);
  background-size: var(--dot-pitch) var(--dot-pitch);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 85%);
  opacity: 0.7;
  pointer-events: none;
}
.page-hero > .wrap { position: relative; z-index: 1; }
.page-hero h1 {
  max-width: 20ch;
  margin-bottom: 18px;
  text-shadow: 0 0 26px rgba(var(--accent-rgb), 0.35);
}
.page-hero .page-intro {
  max-width: 62ch;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  color: #b3c4dd;
}
.page-hero .hero-actions { margin-top: 26px; }

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
.breadcrumbs a:hover { color: var(--accent); text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.7); }
.breadcrumbs span::before { content: '/'; margin-right: 8px; color: var(--line-strong); }

/* ---------------------------------------------------------------- */
/* services                                                          */
/* ---------------------------------------------------------------- */

.discipline-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(16px, 2vw, 26px);
}
.discipline {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--line);
  background: var(--panel);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.discipline:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.5), 0 0 30px rgba(var(--accent-rgb), 0.12);
}
.discipline-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.discipline-num {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  letter-spacing: 0.14em;
  color: rgba(var(--accent-rgb), 0.85);
  line-height: 1;
  text-shadow: 0 0 18px rgba(var(--accent-rgb), 0.6);
}
.discipline-icon { font-size: 1.5rem; color: var(--accent); line-height: 1; text-shadow: 0 0 20px rgba(var(--accent-rgb), 0.9); }
.discipline h2 { font-size: clamp(1.25rem, 2vw, 1.6rem); margin: 0; }
.discipline p { font-size: 0.95rem; margin: 0; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.05);
}
.discipline .text-link { margin-top: auto; }
.discipline-media { margin: -22px -22px 0; }
.discipline-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.service-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: end;
}
.service-hero img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--line-strong);
  box-shadow: 0 0 40px rgba(var(--accent-rgb), 0.14);
}

.detail-section {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  padding: clamp(40px, 6vw, 76px) 0;
  border-bottom: 1px solid var(--line);
}
.detail-section:last-child { border-bottom: 0; }
.detail-section:nth-child(even) .detail-media { order: -1; }
.detail-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--line);
}
.detail-copy h2 { font-size: clamp(1.4rem, 2.4vw, 2rem); }
.detail-copy ul { margin-top: 14px; }
.detail-media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.detail-media-grid img { aspect-ratio: 1 / 1; }

/* ---------------------------------------------------------------- */
/* technologies                                                      */
/* ---------------------------------------------------------------- */

.tech-stack { display: flex; flex-direction: column; gap: clamp(30px, 5vw, 70px); }
.tech-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding-bottom: clamp(30px, 5vw, 60px);
  border-bottom: 1px solid var(--line);
}
.tech-row:last-child { border-bottom: 0; padding-bottom: 0; }
.tech-row:nth-child(even) .tech-media { order: -1; }
.tech-media img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border: 1px solid var(--line);
}
.tech-copy h2 { font-size: clamp(1.35rem, 2.4vw, 2rem); }
.tech-bullets { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.tech-bullets li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 0.94rem;
  color: var(--muted);
}
.tech-bullets li::before {
  content: '';
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.9);
}

/* small bracketed gallery under the cover image: two thumbs, mono caption */
.tech-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  background: rgba(var(--accent-rgb), 0.03);
}
.tech-shot {
  position: relative;
  display: block;
  overflow: hidden;
}
.tech-shot img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--line);
  transition: filter 0.2s var(--ease), transform 0.3s var(--ease);
}
.tech-shot:hover img { filter: brightness(1.12); transform: scale(1.02); }
.tech-shot::after {
  content: '';
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background-image:
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: left top, right top, left bottom, right bottom;
  background-size: 8px 1px, 8px 1px, 8px 1px, 8px 1px;
  opacity: 0.65;
}

/* ---------------------------------------------------------------- */
/* work / portfolio                                                  */
/* ---------------------------------------------------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: flex-end;
  padding: 22px 0 26px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--line);
}
.filter-group { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.filter-group label {
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
.filter-group select {
  min-height: 44px;
  min-width: 152px;
  padding: 10px 12px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.filter-group select:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.4), 0 0 20px rgba(var(--accent-rgb), 0.22);
}
.filter-count {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.filter-count::before {
  content: '';
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  background: var(--accent);
  box-shadow: 0 0 9px rgba(var(--accent-rgb), 0.9);
  animation: dot-blink 1.6s ease-in-out infinite;
}
.filter-count strong { color: var(--accent); }

/* category chips: the six event categories + "All" */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: flex-end;
  width: 100%;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  font-family: var(--font-accent);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.chip:hover,
.chip:focus-visible {
  color: var(--text);
  border-color: var(--line-strong);
  outline: none;
}
.chip.is-active {
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.35), 0 0 22px rgba(var(--accent-rgb), 0.18);
}
.chip-icon {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1;
  color: var(--accent);
}
/* result count per chip, written by public/js/site.js */
.chip-count {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--muted-dim);
}
.chip.is-active .chip-count { color: var(--accent); }
.chip.is-empty { opacity: 0.5; }
/* "Reset" link in the filter row: only shown while a filter is active */
.filter-reset {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  border-bottom: 1px dashed var(--line-strong);
  color: var(--muted-dim);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.filter-reset::before { content: '['; margin-right: 6px; color: var(--accent); }
.filter-reset::after { content: ']'; margin-left: 6px; color: var(--accent); }
.filter-reset:hover,
.filter-reset:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
  outline: none;
}
.filter-reset[hidden] { display: none; }

/* small mono pills: the event types of a category */
.type-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  background: rgba(var(--accent-rgb), 0.06);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px);
}
.work-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--panel);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.work-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.55), 0 0 30px rgba(var(--accent-rgb), 0.12);
}
.work-thumb { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.work-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.work-card:hover .work-thumb img { transform: scale(1.04); }
.work-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 10px;
  background: rgba(5, 7, 13, 0.85);
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.work-body { display: flex; flex-direction: column; gap: 9px; flex: 1; padding: 18px 20px 22px; }
.work-body h3 { font-size: 1.08rem; margin: 0; }
.work-meta { color: var(--muted); font-size: 0.64rem; }
.work-meta::before { box-shadow: none; opacity: 0.9; }
.work-client { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-dim); }
/* "Corporate & Business // Conferences" — the project's category path */
.work-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.load-more-row { display: flex; justify-content: center; margin-top: 36px; }
/* The `hidden` attribute must win over the flex/grid displays below. */
.work-card[hidden],
.load-more-row[hidden] { display: none; }
/* No results for the chosen filters (written by public/js/site.js) */
.work-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border: 1px dashed var(--line-strong);
  padding: 46px 24px;
  text-align: center;
}
.work-empty[hidden] { display: none; }
.work-empty-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text);
}
.work-empty-text {
  margin: 0 0 8px;
  max-width: 46ch;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}
.empty-state {
  border: 1px dashed var(--line-strong);
  padding: 40px;
  text-align: center;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
}

.project-header {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: end;
}
.project-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--line);
}
.project-facts div {
  justify-content: flex-start;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.64rem;
}
.project-facts dt {
  font-family: var(--font-mono);
  font-size: inherit;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
.project-facts dd {
  margin: 0 0 0 auto;
  text-align: right;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--accent);
  overflow-wrap: anywhere;
}
.project-cover { margin: clamp(24px, 4vw, 44px) 0 0; border: 1px solid var(--line); }
.project-cover img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.video-embed {
  position: relative;
  padding-top: 56.25%;
  margin: clamp(24px, 4vw, 44px) 0 0;
  border: 1px solid var(--line);
  background: #000;
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(24px, 4vw, 40px); }
.gallery-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line); }

/* ---------------------------------------------------------------- */
/* events we produce — homepage category tiles                       */
/* ---------------------------------------------------------------- */

.events-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px);
}
.event-tile {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 22px 26px;
  border: 1px solid var(--line);
  background: var(--panel);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.event-tile:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.55), 0 0 30px rgba(var(--accent-rgb), 0.12);
}
.event-tile-icon {
  font-family: var(--font-mono);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--accent);
  text-shadow: 0 0 16px rgba(var(--accent-rgb), 0.6);
}
.event-tile h3 { font-size: 1.05rem; margin: 0; }
.event-tile-text { margin: 0; color: var(--muted); font-size: 0.88rem; line-height: 1.6; }
.event-tile .type-pills { margin-top: auto; }
.event-tile .text-link { margin-top: 4px; }

/* ---------------------------------------------------------------- */
/* equipment brand wall — uniform logo tiles per discipline          */
/* ---------------------------------------------------------------- */

.brand-group-head {
  display: grid;
  gap: 10px;
  margin-bottom: clamp(22px, 3vw, 34px);
}
.brand-group-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 18px;
}
.brand-group-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.45);
}
.brand-group-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-style: normal;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 0.95;
  text-transform: uppercase;
}
.brand-group-head .section-divider { width: 100%; min-width: 0; }
.brand-group-count {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-dim);
  white-space: nowrap;
}

.brand-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 16px);
}
.brand-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 8px;
  background-color: var(--panel);
  background-image: var(--dot-grid);
  background-size: var(--dot-pitch) var(--dot-pitch);
  border: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
/* display:flex would otherwise beat the UA's [hidden] rule */
.brand-tile[hidden] { display: none; }
.brand-tile--nolink { cursor: default; }
.brand-tile:hover,
.brand-tile:focus-visible {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  outline: none;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), 0 0 26px rgba(var(--accent-rgb), 0.16);
}

/* every tile has the same fixed logo box: 70% wide × 56px tall,
   artwork contained inside it, so all logos read at a similar size */
.brand-logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: clamp(8px, 1.2vw, 14px) 0;
}
.brand-logo {
  display: block;
  width: 70%;
  height: 56px;
  object-fit: contain;
  /* the mono artwork is already white; the filter keeps any logo that could not
     be normalised (a manual upload) in the very same colour */
  filter: brightness(0) invert(1);
  opacity: 0.85;
  transition: opacity 0.25s var(--ease), filter 0.25s var(--ease);
}
.brand-tile:hover .brand-logo,
.brand-tile:focus-visible .brand-logo {
  opacity: 1;
  filter: brightness(0) invert(1) drop-shadow(0 0 14px rgba(var(--accent-rgb), 0.85));
}
.brand-logo--text {
  width: 70%;
  height: auto;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
}
.brand-name {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  color: var(--muted-dim);
  transition: color 0.25s var(--ease);
}
.brand-tile:hover .brand-name,
.brand-tile:focus-visible .brand-name { color: var(--accent); }

/* ---------------------------------------------------------------- */
/* news, article, careers                                            */
/* ---------------------------------------------------------------- */

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.article-hero { margin-bottom: 30px; border: 1px solid var(--line); }
.article-hero img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.article-meta { margin-bottom: 18px; color: var(--accent); font-size: 0.66rem; }

.prose { max-width: 72ch; }
.prose > *:first-child { margin-top: 0; }
.prose h2, .prose h3 { margin-top: 1.5em; }
.prose h3 { font-size: 1.2rem; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li::marker { color: rgba(var(--accent-rgb), 0.8); }
.prose blockquote {
  margin: 1.5em 0;
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--accent);
  font-family: var(--font-heading);
  font-style: normal;
  font-size: 1.15rem;
  color: #fff;
  box-shadow: -1px 0 18px -8px rgba(var(--accent-rgb), 0.8);
}
.prose img { border: 1px solid var(--line); margin: 1.5em 0; }
.prose a { color: var(--accent); border-bottom: 1px solid currentColor; }
.prose a:hover { text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.7); }
/* Rich text can contain pasted media and tables: never let them widen the page. */
.prose img,
.prose video,
.prose svg { max-width: 100%; height: auto; }
.prose iframe,
.prose embed,
.prose object { max-width: 100%; }
.prose iframe,
.prose video { width: 100%; }
.prose table { display: block; width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.prose pre {
  max-width: 100%;
  overflow-x: auto;
  padding: 16px 18px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: #cfe2ff;
}
.prose code { font-family: var(--font-mono); font-size: 0.9em; color: var(--secondary); }

.aside-card { border: 1px solid var(--line); background: var(--panel); padding: 22px; }
.aside-card h3 {
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
.aside-card ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.aside-card a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.92rem;
  color: var(--muted);
  transition: color 0.2s var(--ease), padding-left 0.2s var(--ease);
}
.aside-card a:hover { color: var(--accent); padding-left: 4px; }

.jobs { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.job {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.job h3 { margin: 0 0 8px; font-size: 1.15rem; }
.job-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--muted); }
.job-meta span { font-size: 0.64rem; }
.job-meta span strong { color: var(--muted-dim); font-weight: 500; }
.job-body p { margin: 10px 0 0; font-size: 0.94rem; max-width: 70ch; }
.job-details { padding: 26px 0 34px; border-bottom: 1px solid var(--line); }
.job-details summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.45);
}
.job-details summary::-webkit-details-marker { display: none; }
.job-details summary::after { content: ' +'; }
.job-details[open] summary::after { content: ' −'; }
.job-details .prose { margin-top: 18px; }

/* ---------------------------------------------------------------- */
/* 404 / error                                                       */
/* ---------------------------------------------------------------- */

.error-page {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 64vh;
  padding: clamp(60px, 10vw, 120px) 0;
  background:
    radial-gradient(60% 90% at 20% 10%, rgba(var(--accent-rgb), 0.14), transparent 62%),
    var(--bg-deep);
}
.error-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--dot-grid);
  background-size: var(--dot-pitch) var(--dot-pitch);
  opacity: 0.6;
  pointer-events: none;
  mask-image: radial-gradient(circle at 30% 40%, #000, transparent 80%);
}
.error-page > .wrap { position: relative; z-index: 1; }
.error-code {
  margin-bottom: 20px;
  font-family: var(--font-heading);
  font-size: clamp(4.5rem, 17vw, 13rem);
  font-style: normal;
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--accent-rgb), 0.55);
  text-shadow: 0 0 60px rgba(var(--accent-rgb), 0.25);
}

/* ---------------------------------------------------------------- */
/* responsive                                                        */
/* ---------------------------------------------------------------- */

@media (max-width: 1080px) {
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .events-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clients-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-top { grid-template-columns: 1fr; }
  .hero-meta { display: none; }
  .article-layout { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .hamburger { display: inline-flex; }
  .primary-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(420px, 100%);
    background-color: #060a13;
    background-image: var(--dot-grid);
    background-size: var(--dot-pitch) var(--dot-pitch);
    border-left: 1px solid var(--line-strong);
    flex-direction: column;
    align-items: stretch;
    padding: 96px 22px 40px;
    gap: 2px;
    /* Closed: pushed off-screen, invisible and out of the tab order. Without
       visibility/pointer-events the drawer still widened the document. */
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.3s var(--ease), visibility 0.3s var(--ease);
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 94;
    font-size: 0.9rem;
  }
  body.nav-open .primary-nav {
    transform: none;
    visibility: visible;
    pointer-events: auto;
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.7);
  }
  .primary-nav > a,
  .primary-nav > .nav-item > button {
    justify-content: space-between;
    width: 100%;
    min-height: 48px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--line);
    letter-spacing: 0.16em;
  }
  .nav-item { width: 100%; }
  .mega,
  .drop {
    position: static;
    width: 100%;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: none;
    box-shadow: none;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    padding: 8px 0 16px;
  }
  .nav-item.is-open > .mega,
  .nav-item.is-open > .drop { display: block; }
  .nav-item:hover > .mega,
  .nav-item:hover > .drop { display: none; }
  .nav-item.is-open:hover > .mega,
  .nav-item.is-open:hover > .drop { display: block; }
  .mega::before,
  .drop::before { display: none; }
  .mega-grid { grid-template-columns: 1fr; }
  .mega-card { padding: 12px 0; border-color: transparent; }
  .mega-card:hover { background: transparent; box-shadow: none; }
  .drop a { min-height: 44px; padding: 12px 10px; }
  .section-head { grid-template-columns: 1fr; align-items: start; }
  .about-grid,
  .detail-section,
  .tech-row,
  .contact-layout,
  .service-hero,
  .project-header { grid-template-columns: 1fr; }
  .detail-section:nth-child(even) .detail-media,
  .tech-row:nth-child(even) .tech-media { order: 0; }
  .offices-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .hero-box::before { inset: -12px -14px; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .hero { min-height: 84vh; }
  .hero-actions { gap: 10px; }
  .hero-actions .btn { width: 100%; }
  .header-inner { gap: 10px; min-height: 68px; }
  .brand { font-size: 1.05rem; min-width: 0; gap: 8px; }
  .brand img { height: 28px; }
  .header-cta { padding: 8px 12px; min-height: 34px; font-size: 0.6rem; letter-spacing: 0.1em; }
  .hero-meta { display: none; }
  .team-grid,
  .news-grid,
  .work-grid,
  .events-grid,
  .form-grid,
  .gallery-grid,
  .detail-media-grid { grid-template-columns: 1fr; }
  .clients-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timeline-item { grid-template-columns: 1fr; gap: 6px; padding-left: 22px; }
  .timeline::before { left: 0; }
  .timeline-item::before { left: -3px; top: 30px; }
  .testimonial-slide { grid-template-columns: 1fr; }
  .testimonial-slide img { width: 84px; height: 84px; }
  .cta-band .wrap { flex-direction: column; align-items: flex-start; }
  .footer-bottom { flex-direction: column; }
  .job { grid-template-columns: 1fr; align-items: start; }
  .filters { gap: 14px; }
  .brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-group-title { font-size: clamp(1.6rem, 9vw, 2.4rem); }
  .filter-count { margin-left: 0; }
  .filter-group { flex: 1 1 100%; min-width: 0; }
  .filter-group select { width: 100%; min-width: 0; }
  .filter-count { margin-left: 0; width: 100%; }
  .map-frame iframe,
  .map-frame video,
  .map-frame embed,
  .map-frame object { min-height: 280px; }
  .hero-box::before { inset: -10px -10px; }
}

@media (max-width: 420px) {
  .wrap { padding: 0 16px; }
  .primary-nav { padding: 82px 16px 32px; }
  .testimonial-slide { padding: 22px; }
  .testimonial-controls { padding: 0 22px 24px; }
  .btn { padding: 13px 18px; font-size: 0.68rem; }
  .offices-grid { grid-template-columns: 1fr; }
  .socials a { padding: 10px 12px; }
  .footer-bottom { font-size: 0.62rem; }
  .hero-box::before { inset: -8px -8px; background-size: 16px 2px, 2px 16px, 16px 2px, 2px 16px, 16px 2px, 2px 16px, 16px 2px, 2px 16px; }
}
/* ---------------------------------------------------------------- */
/* event enquiry (/enquiry) — three steps, segmented progress bar    */
/* ---------------------------------------------------------------- */

.enquiry-form { max-width: 940px; }
/* The `hidden` attribute must win over .field{display:flex} / .btn{display:inline-flex}. */
.enquiry-form [hidden] { display: none !important; }

.enquiry-progress {
  margin: 0 0 clamp(22px, 3vw, 34px);
  padding: 16px 18px 14px;
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 160% at 8% 0%, rgba(var(--accent-rgb), 0.12), transparent 62%),
    var(--panel);
  /* bracket corners, like the loading screen's stage box */
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.06), 0 18px 40px rgba(0, 0, 0, 0.35);
}
.enquiry-bar {
  display: flex;
  gap: 3px;
  width: 100%;
  height: 10px;
  margin-bottom: 12px;
}
.enquiry-bar span {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  background: rgba(var(--accent-rgb), 0.12);
  border-radius: 1px;
  transition: background-color 0.25s linear, box-shadow 0.25s linear;
}
.enquiry-bar span.is-on {
  background: var(--accent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.8), 0 0 22px rgba(var(--accent-rgb), 0.3);
}
.enquiry-bar span.is-lead {
  background: #fff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.85), 0 0 24px rgba(var(--accent-rgb), 0.85);
}
.enquiry-steplist {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-accent);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
.enquiry-steplist li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s var(--ease);
}
.enquiry-steplist li.is-active { color: var(--accent); text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.55); }
.enquiry-steplist li.is-done { color: var(--text); }
.enquiry-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.enquiry-step { margin-bottom: clamp(26px, 4vw, 40px); }
.enquiry-step + .enquiry-step {
  padding-top: clamp(22px, 3vw, 30px);
  border-top: 1px solid var(--line);
}
.enquiry-step-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
}
.enquiry-step-head h2 { margin: 0 0 4px; font-size: clamp(1.15rem, 1.8vw, 1.5rem); }
.enquiry-step-head p { margin: 0; color: var(--muted); font-size: 0.92rem; max-width: 60ch; }

.enquiry-services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}
.enquiry-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--bg-deep);
  font-size: 0.92rem;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
.enquiry-check:hover { border-color: var(--line-strong); }
.enquiry-check input { width: 18px; height: 18px; accent-color: var(--accent); flex: 0 0 auto; }
.enquiry-check:has(input:checked) {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.16);
}
.enquiry-check--inline {
  background: none;
  border: 0;
  padding: 4px 0;
  font-size: 0.9rem;
  color: var(--text);
}
.enquiry-preferred { display: flex; flex-wrap: wrap; gap: 18px; }

.enquiry-phone {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 10px;
}
.enquiry-phone select,
.enquiry-phone input { width: 100%; }

.enquiry-nav {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 8px 0 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.enquiry-form.is-stepped .enquiry-nav { display: flex; }
.enquiry-nav-hint {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-dim);
}

/* Without JavaScript every step is visible: one long, complete form. */
.enquiry-form.is-stepped .enquiry-step[hidden] { display: none; }

.enquiry-success {
  max-width: 760px;
  padding: clamp(26px, 4vw, 44px);
  border: 1px solid var(--accent);
  background:
    radial-gradient(120% 140% at 90% 0%, rgba(var(--secondary-rgb), 0.12), transparent 62%),
    radial-gradient(120% 140% at 0% 100%, rgba(var(--accent-rgb), 0.16), transparent 60%),
    var(--panel);
  box-shadow: 0 0 40px rgba(var(--accent-rgb), 0.16);
}
.enquiry-success h2 { margin: 14px 0 12px; }
.enquiry-success p { color: #b9c8de; max-width: 64ch; }
.enquiry-reference {
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--accent);
  text-shadow: 0 0 18px rgba(var(--accent-rgb), 0.6);
}

@media (max-width: 700px) {
  .enquiry-phone { grid-template-columns: 1fr; }
  .enquiry-nav { flex-wrap: wrap; }
  .enquiry-nav-hint { order: -1; width: 100%; }
}

/* ---------------------------------------------------------------- */
/* reduced motion: no LED wall animation, no shimmer, no reveal slide*/
/* ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .reveal-delay-1,
  .reveal-delay-2,
  .reveal-delay-3 { transition-delay: 0s; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  :is(h1, h2)::after { display: none; }
  .hero-box::before { animation: none; opacity: 0.6; }
  .hero-wall { opacity: 0.35; }
}