/* =========================================================
   Ε. ΦΛΩΡΟΥ — Technical / Blueprint design system
   Monochrome. Grid-driven. Mono annotations.
   ========================================================= */

:root {
  /* Dynamic colors injected from client_data.json via index.php */
  --sans: "Times New Roman", Georgia, serif;
  --sans-ui: "Open Sans", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --maxw: 1440px;
  --gutter: 32px;

  --ease: cubic-bezier(.2, .7, .1, 1);
}

/* ----- Browser chrome: selection, scrollbar, focus ring — branded instead of default blue/system ----- */
::selection {
  background: var(--muted);
  color: var(--paper);
}
:focus-visible {
  outline: 2px solid var(--muted);
  outline-offset: 2px;
}
html {
  color-scheme: dark;
  scrollbar-color: var(--muted) var(--paper-2); /* Firefox */
  scrollbar-width: thin;
}
::-webkit-scrollbar { width: 11px; height: 11px; } /* Chrome / Safari / Edge */
::-webkit-scrollbar-track { background: var(--paper-2); }
::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

/* Small / long-format body copy uses a readable sans (Open Sans).
   Editorial display copy (.lead, .about-quote, .contact-cta) keeps Times New Roman. */
p, li { font-family: var(--sans-ui); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
img { display: block; max-width: 100%; }

/* ----- Type ----- */
.mono { font-family: var(--sans-ui); letter-spacing: 0.02em; }
.kicker {
  font-family: var(--sans-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.kicker .dot { display: inline-block; width: 6px; height: 6px; background: currentColor; margin-right: 10px; transform: translateY(-2px); }
.kicker.ink { color: var(--ink); }
.kicker.paper { color: var(--paper); opacity: .7; }

h1, h2, h3, h4, h5, p { margin: 0; }

.h-display {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(48px, 7.4vw, 116px);
  line-height: 0.96;
  letter-spacing: -0.035em;
}
.h-section {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(36px, 4.8vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.028em;
}
.h-card {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(22px, 1.8vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.lead {
  font-family: var(--sans);
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 60ch;
}
.body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
}

/* ----- Layout ----- */
.shell {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section { position: relative; }

/* Persistent blueprint vertical grid behind everything */
.bp-grid-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: calc((100vw - 64px) / 12) 100%;
  background-position: 32px 0;
  mask-image: linear-gradient(to bottom, black, black);
}

/* ----- Header ----- */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: 72px;
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.78);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.header.is-scrolled {
  background: rgba(255,255,255,0.92);
  border-bottom-color: var(--rule);
}
.header.is-dark {
  background: rgba(10,10,10,0.0);
  color: var(--paper);
}
.header.is-dark.is-scrolled {
  background: rgba(10,10,10,0.78);
  border-bottom-color: rgba(255,255,255,0.08);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.brand-mark {
  height: 48px;
  width: auto;
  transition: opacity .25s var(--ease);
}
.brand-logo-white { display: none !important; }
.brand-logo-dark { display: block !important; }

.header.is-dark .brand-logo-white { display: block !important; }
.header.is-dark .brand-logo-dark { display: none !important; }
.header.is-menu-open .brand-logo-white { display: block !important; }
.header.is-menu-open .brand-logo-dark { display: none !important; }
.brand-meta {
  font-family: var(--sans-ui);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--muted);
  border-left: 1px solid var(--rule);
  padding-left: 14px;
}
.header.is-dark .brand-meta { color: rgba(255,255,255,0.6); border-left-color: rgba(255,255,255,0.18); }

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav a {
  font-family: var(--sans-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 10px 14px;
  position: relative;
  opacity: 0.78;
  transition: opacity .2s var(--ease);
}
.nav a:hover { opacity: 1; }
.nav-cta {
  margin-left: 16px;
  font-family: var(--sans-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 10px 18px;
  border: 1px solid var(--ink);
  color: var(--ink);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.nav-cta:hover { background: var(--ink); color: var(--paper); }
.header.is-dark .nav-cta { border-color: var(--paper); color: var(--paper); }
.header.is-dark .nav-cta:hover { background: var(--paper); color: var(--ink); }

/* ----- Hero ----- */
.hero {
  position: relative;
  min-height: 100vh;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  padding-top: 72px;
}
.hero-photo {
  position: absolute;
  inset: 0;
  background: var(--ink);
  overflow: hidden;
}
.hero-photo-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2;
}
/* Placeholder annotation in the corner of hero photo */
.hero-photo-label {
  position: absolute;
  bottom: 32px;
  right: 32px;
  font-family: var(--sans-ui);
  font-size: 10px;
  color: rgba(255,255,255,0.42);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: right;
  line-height: 1.5;
  z-index: 3;
}
.hero-photo-label .ph-tag {
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,0.25);
  margin-bottom: 8px;
}

/* Hero copy */
.hero-inner {
  position: relative;
  z-index: 5;
  height: calc(100vh - 72px);
  min-height: 640px;
  display: grid;
  grid-template-rows: 1fr auto auto;
  padding: 48px 0 56px;
}
.hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-family: var(--sans-ui);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.hero-top .col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero-top .col strong {
  color: var(--paper);
  font-weight: 500;
}

.hero-body {
  align-self: end;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  max-width: 1200px;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sans-ui);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.hero-eyebrow::before {
  content: "";
  width: 56px;
  height: 1px;
  background: rgba(255,255,255,0.5);
  display: inline-block;
}
.hero-title {
  font-weight: 500;
  font-size: clamp(44px, 6.6vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  max-width: 18ch;
  overflow-wrap: break-word;
}
.hero-title em {
  font-style: normal;
  font-weight: 300;
  color: rgba(255,255,255,0.6);
}
.hero-sub-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: end;
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 24px;
}
.hero-sub {
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
  max-width: 52ch;
}
.hero-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 14px 22px;
  border: 1px solid currentColor;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn .arr { display: inline-block; transition: transform .25s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn-primary { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn-primary:hover { background: transparent; color: var(--paper); }
.btn-ghost { color: var(--paper); border-color: rgba(255,255,255,0.4); }
.btn-ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.btn-ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-ink:hover { background: transparent; color: var(--ink); }
.btn-ink-ghost { color: var(--ink); border-color: var(--ink); }
.btn-ink-ghost:hover { background: var(--ink); color: var(--paper); }

/* Corner ticks (blueprint registration marks) */
.bp-corners > * {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid currentColor;
  opacity: 0.5;
}
.bp-corners .tl { top: 16px; left: 16px; border-right: 0; border-bottom: 0; }
.bp-corners .tr { top: 16px; right: 16px; border-left: 0; border-bottom: 0; }
.bp-corners .bl { bottom: 16px; left: 16px; border-right: 0; border-top: 0; }
.bp-corners .br { bottom: 16px; right: 16px; border-left: 0; border-top: 0; }

/* ----- Section frame ----- */
.section {
  padding: 120px 0;
  position: relative;
  z-index: 2;
  background: var(--paper);
}
.section.dark {
  background: var(--ink);
  color: var(--paper);
}
.section.alt {
  background: var(--paper-2);
}

.section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 80px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--rule);
}
.section.dark .section-head { border-bottom-color: rgba(255,255,255,0.12); }
.section-head .left { display: flex; flex-direction: column; gap: 24px; }
.section-head .right { color: var(--muted); max-width: 48ch; }
.section.dark .section-head .right { color: rgba(255,255,255,0.62); }

.section-index {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--sans-ui);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.section.dark .section-index { color: rgba(255,255,255,0.55); }
.section-index .num { color: var(--ink); font-weight: 500; }
.section.dark .section-index .num { color: var(--paper); }

/* ----- Stats band ----- */
.stats {
  background: #eff0ef;
  color: #0b1018;
  padding: 88px 0 96px;
  position: relative;
  overflow: hidden;
}
.stats::before { content: none; }
.stats-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 56px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(11,16,24,0.14);
  position: relative;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
.stat {
  padding: 8px 28px 8px 0;
  border-left: 1px solid rgba(11,16,24,0.12);
  padding-left: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.stat:first-child { border-left: 0; padding-left: 0; }
.stat { min-width: 0; }
.stat .num {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(48px, 5.2vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.stat .num--long {
  font-size: clamp(28px, 2.8vw, 48px);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.stat .num .suffix {
  font-size: 0.35em;
  font-family: var(--sans-ui);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(11,16,24,0.55);
  align-self: center;
}
.stat .label {
  font-family: var(--sans-ui);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(11,16,24,0.72);
  line-height: 1.4;
}
.stat .desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(11,16,24,0.55);
  max-width: 28ch;
}

/* ----- About ----- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 96px;
  align-items: start;
}
.about-visual {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.about-visual .about-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.about-visual .corner-coords,
.about-visual .ph-label {
  z-index: 2;
}
.about-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 16, 24, 0) 55%, rgba(11, 16, 24, 0.55) 100%);
  pointer-events: none;
  z-index: 1;
}
.about-visual .ph-label {
  position: absolute;
  bottom: 16px; left: 16px;
  font-family: var(--sans-ui);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.about-visual .corner-coords {
  position: absolute;
  font-family: var(--sans-ui);
  font-size: 9.5px;
  color: var(--muted-2);
  letter-spacing: 0.1em;
}
.about-visual .cc-tl { top: 10px; left: 12px; }
.about-visual .cc-tr { top: 10px; right: 12px; }
.about-visual .cc-bl { bottom: 10px; left: 12px; }
.about-visual .cc-br { bottom: 10px; right: 12px; }

.about-text { display: flex; flex-direction: column; gap: 32px; }
.about-text .h-section { max-width: 16ch; }
.about-quote {
  font-family: var(--sans);
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 28ch;
  font-weight: 400;
}
.about-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.about-meta dt {
  font-family: var(--sans-ui);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.about-meta dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

/* ----- Services (horizontal scroll) ----- */
.services {
  background: var(--paper-2);
  padding: 120px 0 80px;
}
.services-head { padding: 0 var(--gutter); max-width: var(--maxw); margin: 0 auto 56px; }
.services-rail-wrap {
  position: relative;
  overflow: hidden;
  padding-bottom: 56px;
}
.services-rail {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 16px var(--gutter) 28px;
  scrollbar-width: none;
}
.services-rail::-webkit-scrollbar { display: none; }
.services-rail > .spacer-end { flex: 0 0 max(0px, calc((100vw - var(--maxw)) / 2 + var(--gutter))); }

.service-card {
  flex: 0 0 clamp(340px, 32vw, 460px);
  scroll-snap-align: start;
  background: var(--paper);
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  cursor: pointer;
  min-height: 540px;
}
.service-card:hover {
  transform: translateY(-4px);
  border-color: var(--ink);
  box-shadow: 0 12px 40px -16px rgba(0,0,0,0.18);
}
.service-card .sc-thumb {
  position: relative;
  aspect-ratio: 16 / 11;
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.service-card .sc-thumb svg.bp {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--ink);
}
.service-card .sc-thumb .sc-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.service-card .sc-thumb.has-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 16, 24, 0.45) 0%, rgba(11, 16, 24, 0.15) 35%, rgba(11, 16, 24, 0.55) 100%);
  pointer-events: none;
  z-index: 1;
}
.service-card .sc-thumb.has-photo svg.bp {
  opacity: 0.25;
  mix-blend-mode: screen;
  z-index: 2;
}
.service-card .sc-thumb .sc-meta { z-index: 3; }
.service-card .sc-meta {
  position: absolute;
  top: 14px; left: 14px;
  font-family: var(--sans-ui);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  gap: 14px;
}
.service-card .sc-meta .num { color: var(--ink); font-weight: 500; }
.service-card .sc-body {
  padding: 28px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}
.service-card .sc-title {
  font-weight: 600;
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin-top: 4px;
}
.service-card .sc-summary {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.service-card .sc-foot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.service-card .sc-more {
  font-family: var(--sans-ui);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.service-card .sc-more .arr { transition: transform .25s var(--ease); }
.service-card:hover .sc-more .arr { transform: translateX(4px); }
.service-card .sc-tag {
  font-family: var(--sans-ui);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.rail-controls {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 var(--gutter);
  max-width: var(--maxw);
  margin: 0 auto;
}
.rail-progress {
  height: 1px;
  background: var(--rule);
  flex: 1;
  margin: 0 28px;
  position: relative;
}
.rail-progress .bar {
  position: absolute;
  top: -1px; left: 0;
  height: 3px;
  background: var(--ink);
  transition: width .25s var(--ease), left .25s var(--ease);
}
.rail-btn {
  width: 48px;
  height: 48px;
  border: 1px solid var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s var(--ease), color .2s var(--ease), opacity .2s var(--ease);
}
.rail-btn:hover { background: var(--ink); color: var(--paper); }
.rail-btn:disabled { opacity: 0.25; cursor: not-allowed; }
.rail-btn:disabled:hover { background: transparent; color: var(--ink); }
.rail-count {
  font-family: var(--sans-ui);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* ----- Service modal ----- */
.modal-back {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 100;
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease);
}
.modal-back.open { opacity: 1; pointer-events: auto; }
.modal {
  width: min(720px, 92vw);
  background: var(--paper);
  height: 100vh;
  overflow-y: auto;
  transform: translateX(40px);
  transition: transform .4s var(--ease);
  display: flex;
  flex-direction: column;
}
.modal-back.open .modal { transform: translateX(0); }

.modal-head {
  position: sticky;
  top: 0;
  background: var(--paper);
  padding: 24px 40px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
}
.modal-close {
  width: 36px; height: 36px;
  border: 1px solid var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.modal-close:hover { background: var(--ink); color: var(--paper); }
.modal-body { padding: 48px 40px 64px; }
.modal-hero {
  aspect-ratio: 16 / 9;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.modal-hero svg { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--ink); }
.company-modal-hero {
  background: #000;
}
.company-modal-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.modal-hero.has-photo svg {
  opacity: 0.25;
  mix-blend-mode: screen;
}
.modal-hero.has-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 16, 24, 0.35) 0%, rgba(11, 16, 24, 0.1) 40%, rgba(11, 16, 24, 0.5) 100%);
  pointer-events: none;
}
.modal-eyebrow {
  display: flex;
  gap: 16px;
  font-family: var(--sans-ui);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.modal h2 {
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 600;
  margin-bottom: 24px;
  max-width: 18ch;
}
.modal-content p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-2);
  margin-bottom: 16px;
}
.modal-content .features {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  border-top: 1px solid var(--rule);
}
.modal-content .features li {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 14.5px;
  line-height: 1.55;
}
.modal-content .features li .idx {
  font-family: var(--sans-ui);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
  padding-top: 2px;
}
.modal-content .features li strong { display: block; font-weight: 600; margin-bottom: 2px; }

/* ----- Modal: shared section header (Gallery / FAQ) ----- */
.modal-section-head {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: baseline;
  gap: 16px;
  margin: 48px 0 20px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}
.modal-section-idx {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
}
.modal-section-title {
  font-family: var(--sans);
  font-size: clamp(22px, 1.8vw, 28px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0;
  color: var(--ink);
}
.modal-section-caption {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
  text-align: right;
}

/* ----- Modal: Gallery ----- */
.modal-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.modal-gallery-cell {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper-3);
  border: 1px solid var(--rule);
}
.modal-gallery-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease);
}
.modal-gallery-cell:hover img {
  transform: scale(1.04);
}
.modal-gallery-cell figcaption {
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-size: 10px;
  letter-spacing: 0.12em;
  padding: 3px 6px;
  background: rgba(11, 16, 24, 0.72);
  color: var(--ink);
  text-transform: uppercase;
}

/* ----- Modal: FAQ ----- */
.modal-faq-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--rule);
}
.modal-faq-item {
  border-bottom: 1px solid var(--rule);
}
.modal-faq-q {
  display: grid;
  grid-template-columns: 60px 1fr 24px;
  gap: 16px;
  align-items: baseline;
  width: 100%;
  padding: 18px 0;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  transition: color 0.2s var(--ease);
}
.modal-faq-q:hover .modal-faq-q-text { color: var(--ink); }
.modal-faq-idx {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
  padding-top: 2px;
}
.modal-faq-q-text {
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-2);
  transition: color 0.2s var(--ease);
}
.modal-faq-toggle {
  font-family: var(--sans-ui);
  font-size: 18px;
  color: var(--muted);
  text-align: right;
  line-height: 1;
  transition: transform 0.3s var(--ease), color 0.2s var(--ease);
}
.modal-faq-item.is-open .modal-faq-toggle {
  transform: rotate(45deg);
  color: var(--ink);
}
.modal-faq-item.is-open .modal-faq-q-text { color: var(--ink); }
.modal-faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--ease);
}
.modal-faq-a > p {
  overflow: hidden;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-3);
  padding: 0 24px 0 76px;
  margin: 0;
}
.modal-faq-item.is-open .modal-faq-a {
  grid-template-rows: 1fr;
}
.modal-faq-item.is-open .modal-faq-a > p {
  padding-bottom: 18px;
}

@media (max-width: 600px) {
  .modal-section-head { grid-template-columns: 44px 1fr; }
  .modal-section-caption { display: none; }
  .modal-gallery-grid { grid-template-columns: 1fr; gap: 8px; }
  .modal-faq-q { grid-template-columns: 44px 1fr 20px; gap: 12px; }
  .modal-faq-a > p { padding-left: 56px; }
}

/* ----- Contact ----- */
.contact {
  background: var(--paper);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: stretch;
}

/* Contact-side visual — mirrors .about-visual so a photo (in place of the
   former map iframe) reads as a deliberate companion to the contact rows. */
.contact-visual {
  position: relative;
  min-height: 480px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.contact-visual .contact-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.contact-visual .contact-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 1;
}
/* The map is a real, interactive control — no dark legibility scrim over it,
   and it isn't part of the page's photo lightbox pool. */
.contact-visual.has-map::after { content: none; }
.contact-visual .corner-coords,
.contact-visual .ph-label {
  z-index: 2;
}
.contact-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 16, 24, 0) 55%, rgba(11, 16, 24, 0.55) 100%);
  pointer-events: none;
  z-index: 1;
}
.contact-visual .ph-label {
  position: absolute;
  bottom: 16px; left: 16px;
  font-family: var(--sans-ui);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(11, 16, 24, 0.72);
  padding: 4px 8px;
}
.contact-visual .corner-coords {
  position: absolute;
  font-family: var(--sans-ui);
  font-size: 9.5px;
  color: var(--muted-2);
  letter-spacing: 0.1em;
}
.contact-visual .cc-tl { top: 10px; left: 12px; }
.contact-visual .cc-tr { top: 10px; right: 12px; }
.contact-visual .cc-bl { bottom: 10px; left: 12px; }
.contact-visual .cc-br { bottom: 10px; right: 12px; }
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.contact-cta {
  font-family: var(--sans);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  font-weight: 500;
  max-width: 56ch;
}
.contact-rows { display: flex; flex-direction: column; }
.contact-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 22px 0;
  border-top: 1px solid var(--rule);
}
.contact-row:last-child { border-bottom: 1px solid var(--rule); }
.contact-row .lbl {
  font-family: var(--sans-ui);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-row .val {
  font-size: 18px;
  line-height: 1.35;
  font-weight: 500;
}
.contact-row .val a:hover { border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.contact-row .ext {
  font-family: var(--sans-ui);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* ----- Footer ----- */
.footer {
  background: #eff0ef;
  color: #0b1018;
  padding: 96px 0 32px;
  position: relative;
  overflow: hidden;
}
.footer::before { content: none; }
.footer-top {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(11,16,24,0.14);
  position: relative;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.footer-brand img { height: 44px; aspect-ratio: 120 / 11; width: auto; object-fit: contain; }
.footer-brand .footer-brand-mark {
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: 210px;
  aspect-ratio: auto;
  object-fit: contain;
  padding: 0;
  margin: 0;
}
.footer-brand p {
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.3;
  letter-spacing: 0.01em;
  font-style: italic;
  font-weight: 400;
  color: rgba(11,16,24,0.85);
  max-width: 24ch;
}
.footer-col h4 {
  font-family: var(--sans-ui);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(11,16,24,0.55);
  font-weight: 500;
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a {
  font-size: 14px;
  color: rgba(11,16,24,0.85);
  transition: color .2s var(--ease), letter-spacing .2s var(--ease);
}
.footer-col a:hover { color: #0b1018; letter-spacing: 0.02em; }
.footer-social {
  display: flex;
  gap: 14px;
  margin-top: 18px;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(11,16,24,0.16);
  border-radius: 50%;
  color: rgba(11,16,24,0.65);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.footer-social a:hover { color: #0b1018; border-color: rgba(11,16,24,0.4); }
.footer-bottom {
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--sans-ui);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(11,16,24,0.55);
  position: relative;
}
.footer-mono-row {
  display: flex;
  gap: 28px;
}

/* ----- Scroll reveal (CSS fallback; GSAP takes over when html.motion-on) ----- */
html:not(.motion-on) .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
html:not(.motion-on) .reveal.in {
  opacity: 1;
  transform: translateY(0);
}
html:not(.motion-on) .reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
html:not(.motion-on) .reveal-stagger.in > * { opacity: 1; transform: translateY(0); }

/* GSAP reveal helpers — overflow masks for word/line slide-up reveals */
.motion-on .gsap-word-mask { display: inline-block; overflow: hidden; vertical-align: bottom; line-height: inherit; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.motion-on .gsap-word-mask > span { display: inline-block; will-change: transform, opacity; }
.motion-on .gsap-line-mask { display: block; overflow: hidden; }
.motion-on .gsap-line-mask > span { display: block; will-change: transform, opacity; }
.motion-on .gsap-clip { will-change: clip-path, transform; }

/* Pre-hide reveal targets so there's no flash between paint and GSAP init.
   reveals.js animates them in; if GSAP fails to load it removes .motion-on and CSS fallback kicks in. */
.motion-on .reveal-stagger > *,
.motion-on .hero-eyebrow,
.motion-on .hero-title,
.motion-on .hero-sub,
.motion-on .hero-actions,
.motion-on .hero-top > *,
.motion-on .h-section,
.motion-on .about-quote,
.motion-on .about-meta > *,
.motion-on .contact-cta,
.motion-on .contact-row,
.motion-on .stat,
.motion-on .services-rail .sc,
.motion-on .footer-col,
.motion-on .footer-brand,
.motion-on .stats-head > *,
.motion-on .services-head > *,
.motion-on .section-head.reveal {
  opacity: 0;
}
/* Visuals: clip-path mask, opacity stays 1 so GSAP can animate the mask cleanly */
.motion-on .about-visual { clip-path: inset(0 0 100% 0); }
.motion-on .contact-visual { clip-path: inset(100% 0 0 0); }

/* Service feature pre-hide (bento) */
.motion-on .bento-video { clip-path: inset(0 0 100% 0); }
.motion-on .feature-night .bento-video { clip-path: inset(100% 0 0 0); }
.motion-on .bento-video-title,
.motion-on .bento-video-tag,
.motion-on .bento-video-bottom,
.motion-on .bento-cell { opacity: 0; }

/* ----- Misc ticks ----- */
.tick-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--sans-ui);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* ----- Mobile menu toggle (hamburger) ----- */
.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  margin-right: -8px;
  position: relative;
  z-index: 60;
}
.menu-icon {
  position: relative;
  width: 24px;
  height: 16px;
  display: inline-block;
}
.menu-icon > span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform .3s var(--ease), opacity .2s var(--ease), top .3s var(--ease);
}
.menu-icon > span:nth-child(1) { top: 0; }
.menu-icon > span:nth-child(2) { top: 7px; }
.menu-icon > span:nth-child(3) { top: 14px; }
.menu-icon.is-open > span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.menu-icon.is-open > span:nth-child(2) { opacity: 0; }
.menu-icon.is-open > span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* ----- Mobile menu overlay -----
   Opens as a curtain wiping down from the header, with the panel contents
   revealing in sequence behind it. Closing plays the same thing in reverse:
   contents retract bottom-to-top first, then the curtain lifts. */
.mobile-menu {
  --mm-items: 4;                 /* highest --i used by .mm-anim children */
  --mm-wipe-in: 0.62s;
  --mm-wipe-out: 0.45s;
  position: fixed;
  inset: 0;
  background: var(--surface-deep, var(--ink));
  color: var(--ink);
  z-index: 55;
  display: flex;
  flex-direction: column;
  /* Closed state */
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  pointer-events: none;
  transition:
    clip-path var(--mm-wipe-out) cubic-bezier(0.76, 0, 0.24, 1) 0.16s,
    visibility 0s linear calc(var(--mm-wipe-out) + 0.16s);
}
.mobile-menu.open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  pointer-events: auto;
  transition:
    clip-path var(--mm-wipe-in) cubic-bezier(0.16, 1, 0.3, 1) 0s,
    visibility 0s linear 0s;
}

/* Staggered reveal for the panel contents.
   The closed-state rule carries the reversed delays, so simply removing
   .open plays the whole sequence backwards. Selectors are scoped to
   .mobile-menu so they outrank the per-element rules further down. */
.mobile-menu .mm-anim {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.26s var(--ease) calc((var(--mm-items) - var(--i, 0)) * 0.04s),
    transform 0.3s cubic-bezier(0.55, 0, 0.55, 0.2) calc((var(--mm-items) - var(--i, 0)) * 0.04s);
}
.mobile-menu.open .mm-anim {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.5s var(--ease) calc(0.18s + var(--i, 0) * 0.07s),
    transform 0.68s cubic-bezier(0.16, 1, 0.3, 1) calc(0.18s + var(--i, 0) * 0.07s);
}

/* Close button fades on its own so its hover transform stays untouched. */
.mobile-menu .mm-close {
  opacity: 0;
  transition: opacity 0.2s var(--ease) 0s,
              background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.mobile-menu.open .mm-close {
  opacity: 1;
  transition: opacity 0.35s var(--ease) 0.3s,
              background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu {
    clip-path: none;
    opacity: 0;
    transition: opacity 0.2s linear, visibility 0s linear 0.2s;
  }
  .mobile-menu.open {
    clip-path: none;
    opacity: 1;
    transition: opacity 0.2s linear, visibility 0s linear 0s;
  }
  .mobile-menu .mm-anim,
  .mobile-menu.open .mm-anim { transform: none; transition: opacity 0.2s linear 0s; }
  .mobile-menu .mm-close,
  .mobile-menu.open .mm-close { transition: opacity 0.2s linear 0s; }
}

.mobile-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
  pointer-events: none;
}
.mobile-menu-inner {
  position: relative;
  padding: 96px var(--gutter) 32px;
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 1;
}
.mm-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--sans-ui);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.mm-meta strong { color: var(--ink); font-weight: 500; }
.mm-nav {
  display: flex;
  flex-direction: column;
  padding-top: 8px;
}
.mm-nav a {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: baseline;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  transition: padding-left .3s var(--ease), color .2s var(--ease);
}
.mm-nav a:hover { padding-left: 8px; }
.mm-nav .mm-num {
  font-family: var(--sans-ui);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.5);
}
.mm-nav .mm-label {
  font-size: clamp(28px, 7vw, 40px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}
.mm-foot {
  margin-top: auto;
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.mm-foot-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: 14px;
}
.mm-foot-row .mm-foot-lbl {
  font-family: var(--sans-ui);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.mm-foot-row a, .mm-foot-row span:not(.mm-foot-lbl) {
  color: rgba(255,255,255,0.92);
  font-weight: 500;
}

/* While menu is open, the header chrome should match the dark overlay */
.header.is-menu-open {
  background: transparent !important;
  border-bottom-color: transparent !important;
  color: var(--paper);
}
.header.is-menu-open .brand-meta { color: rgba(255,255,255,0.55); border-left-color: rgba(255,255,255,0.18); }

/* ----- Services Dropdown (Desktop) ----- */
.nav-dropdown {
  position: relative;
  display: inline-block;
}

.nav-dropdown-trigger {
  font-family: var(--sans-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 10px 14px;
  cursor: pointer;
  opacity: 0.78;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity .2s var(--ease);
}

.nav-dropdown:hover .nav-dropdown-trigger {
  opacity: 1;
}

.nav-dropdown-trigger .chevron {
  display: inline-block;
  font-size: 9px;
  transition: transform .25s var(--ease);
}

.nav-dropdown:hover .nav-dropdown-trigger .chevron {
  transform: translateY(2px);
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  width: 380px;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
  z-index: 100;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  text-align: left;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink);
  transition: background .2s var(--ease), color .2s var(--ease);
  border-bottom: 1px solid var(--rule-soft);
  width: 100%;
  cursor: pointer;
}

.nav-dropdown-item:last-child {
  border-bottom: 0;
}

.nav-dropdown-item .item-num {
  font-family: var(--sans-ui);
  font-size: 10px;
  color: var(--muted);
  font-weight: 500;
  min-width: 18px;
}

.nav-dropdown-item .item-title {
  font-weight: 500;
  line-height: 1.35;
}

.nav-dropdown-item:hover {
  background: var(--paper-2);
}

.nav-dropdown-item:hover .item-num {
  color: var(--ink);
}

/* Dark theme support for header dropdown menu */
.header.is-dark .nav-dropdown-menu {
  background: var(--surface-deep, var(--ink));
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.6);
}

.header.is-dark .nav-dropdown-item {
  color: var(--ink);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.header.is-dark .nav-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.header.is-dark .nav-dropdown-item .item-num {
  color: rgba(255, 255, 255, 0.4);
}

.header.is-dark .nav-dropdown-item:hover .item-num {
  color: var(--paper);
}

/* ----- Mobile Menu Collapsible drawer & Close button ----- */
.mm-close {
  position: absolute;
  top: 24px;
  right: var(--gutter);
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
  cursor: pointer;
  z-index: 60;
}

.mm-close:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--ink);
  transform: scale(1.04);
}

.mm-collapsible {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mm-collapsible-trigger {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: baseline;
  gap: 20px;
  padding: 22px 0;
  text-align: left;
  width: 100%;
  color: inherit;
  cursor: pointer;
}

.mm-collapsible-trigger .mm-num {
  font-family: var(--sans-ui);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.5);
}

.mm-collapsible-trigger .mm-label {
  font-size: clamp(28px, 7vw, 40px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.mm-collapsible-trigger .chevron {
  font-size: 16px;
  opacity: 0.5;
  transition: transform .3s var(--ease);
  margin-right: 8px;
}

.mm-collapsible.is-expanded .mm-collapsible-trigger .chevron {
  transform: rotate(180deg);
}

.mm-collapsible-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s var(--ease), padding-bottom .4s var(--ease);
  display: flex;
  flex-direction: column;
  padding-left: 56px;
}

.mm-collapsible.is-expanded .mm-collapsible-content {
  max-height: 520px;
  padding-bottom: 24px;
}

.mm-sub-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.7);
  transition: color .2s var(--ease), padding-left .2s var(--ease);
}

.mm-sub-link:last-child {
  border-bottom: 0;
}

.mm-sub-link:hover {
  color: var(--paper);
  padding-left: 8px;
}

.mm-sub-num {
  font-family: var(--sans-ui);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
}

.mm-sub-label {
  font-weight: 500;
  line-height: 1.3;
}

/* ----- Responsive ----- */
@media (max-width: 960px) {
  .nav { display: none; }
  .brand-meta { display: none; }
  .menu-toggle { display: inline-flex; }

  .section-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 56px; }
  .about-grid { grid-template-columns: 1fr; gap: 48px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
  .stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
  .hero-sub-row { grid-template-columns: 1fr; gap: 24px; }
  .hero-actions { justify-content: flex-start; flex-wrap: wrap; }
  .section { padding: 80px 0; }

  /* Override the inline 50px paddings the user applied for desktop only */
  .hero-inner { height: auto !important; min-height: calc(100vh - 72px); padding: 32px 24px 48px !important; grid-template-rows: auto 1fr; gap: 40px; }
  .hero-body { align-self: start; }
  .hero-top { height: auto !important; gap: 12px; flex-direction: column; align-items: flex-start; }
  .hero-top .col,
  .hero-top .col[style] { padding: 0 !important; align-items: flex-start !important; text-align: left !important; }
  .hero-top .col:nth-child(2) { display: none; }
  .hero-title,
  .hero-title[style] { padding: 0 !important; font-size: clamp(32px, 8vw, 64px) !important; word-break: break-word; hyphens: auto; }
  .hero-sub,
  .hero-sub[style] { padding: 0 !important; }

  .hero-photo-label { bottom: 16px; right: 16px; font-size: 9px; max-width: 60vw; }

  /* Modal: from side-drawer to full screen */
  .modal { width: 100vw; }
  .modal-back { justify-content: stretch; }

  /* About visual is tall on mobile — limit it */
  .about-visual { aspect-ratio: 4 / 3.6; }
  .about-meta { grid-template-columns: 1fr; gap: 20px; }

  /* Section head smaller */
  .section-head { padding-bottom: 20px; }

  /* Contact rows: stack label above value */
  .contact-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 18px 0;
  }
  .contact-row .ext { display: none; }
  .contact-cta { font-size: clamp(16px, 4.2vw, 20px); max-width: 100%; }

  /* Services rail: smaller cards */
  .service-card { flex: 0 0 78vw; min-height: 480px; }
  .services-rail { gap: 16px; }
  .rail-controls { justify-content: center; }
  .services-rail > .spacer-end { display: none; }

  /* Stats head row */
  .stats-head { margin-bottom: 40px; }
  .stat .num { font-size: clamp(44px, 11vw, 72px); }
}

@media (max-width: 600px) {
  :root { --gutter: 18px; }
  .header { height: 64px; }
  .hero { padding-top: 64px; }
  .hero-inner { min-height: calc(100vh - 64px); padding: 24px 20px 32px !important; }
  .brand-mark { height: 44px; }

  .hero-title,
  .hero-title[style] { font-size: clamp(36px, 10vw, 52px); line-height: 1.0; }
  .hero-top { font-size: 9.5px; }
  .hero-top .col strong { font-size: 9.5px; }

  .stats { padding: 64px 0 72px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 32px; column-gap: 20px; }
  .stat {
    padding: 0 0 0 18px !important;
    border-left: 1px solid rgba(11,16,24,0.12) !important;
    border-top: 0 !important;
    gap: 10px;
  }
  .stat:nth-child(odd) { border-left: 0 !important; padding-left: 0 !important; }
  .stat:nth-child(n+3) { padding-top: 32px !important; border-top: 1px solid rgba(11,16,24,0.12) !important; }
  .stat .num { font-size: clamp(40px, 11vw, 64px); }
  .stat .label { font-size: 10.5px; }
  .stat .desc { font-size: 12.5px; }

  .footer { padding: 72px 0 28px; text-align: center; }
  .footer-top { grid-template-columns: 1fr; gap: 36px; padding-bottom: 40px; }
  .footer-brand { align-items: center; padding: 0 !important; }
  .footer-col { display: flex; flex-direction: column; align-items: center; }
  .footer-col ul { align-items: center; }
  .footer-bottom { flex-direction: column; gap: 12px; align-items: center; justify-content: center; text-align: center; }
  .footer-mono-row { flex-wrap: wrap; gap: 16px; justify-content: center; }

  .modal-body { padding: 32px 20px 48px; }
  .modal-head { padding: 16px 20px; }
  .modal h2 { font-size: clamp(26px, 7vw, 36px); }
  .modal-content .features li { grid-template-columns: 44px 1fr; gap: 12px; }

  .service-card { flex: 0 0 84vw; min-height: 460px; }
  .service-card .sc-body { padding: 22px 22px 22px; }
  .service-card .sc-title { font-size: 19px; }

  .rail-controls { padding: 0 var(--gutter); }
  .rail-btn { width: 44px; height: 44px; }

  /* Section paddings tighter */
  .section { padding: 64px 0; }
  .services { padding: 80px 0 64px; }

  /* About visual aspect a bit shorter */
  .about-visual { aspect-ratio: 4 / 3.2; }

  /* Hero btn group stacks better */
  .hero-actions .btn { padding: 12px 16px; font-size: 11px; }

  /* Mobile menu — slightly smaller labels on tiny screens */
  .mm-nav a { padding: 18px 0; grid-template-columns: 44px 1fr; gap: 14px; }
  .mm-nav .mm-label { font-size: clamp(26px, 8vw, 34px); }
  .mobile-menu-inner { padding: 88px var(--gutter) 28px; }
}

/* Notch / iOS safe area */
@supports (padding: max(0px)) {
  .header-inner { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
  .mobile-menu-inner {
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
    padding-bottom: max(32px, env(safe-area-inset-bottom));
  }
}

/* =========================================================
   CUSTOM PRELOADER (BLUEPRINT / TECHNICAL CAD STYLE)
   ========================================================= */
#preloader {
  position: fixed;
  inset: 0;
  background: var(--surface-deep, var(--ink));
  color: var(--ink);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 0.8s cubic-bezier(0.77, 0, 0.175, 1), transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

#preloader.fade-out {
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
}

/* Background video for Preloader (desktop/mobile chosen via JS) */
.preloader-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  background: var(--surface-deep, var(--paper));
}

/* Dark overlay above video to keep type readable */
.preloader-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 16, 24, 0.55) 0%, rgba(11, 16, 24, 0.7) 100%);
  z-index: 1;
  pointer-events: none;
}

/* CAD Grid Background for Preloader */
.bp-grid-preloader {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 2;
}
.bp-grid-preloader::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 8px 8px;
}

/* Keep CAD corner marks above the video + overlay */
#preloader .bp-corners {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* Preloader Content Card */
.preloader-content {
  position: relative;
  z-index: 3;
  width: 92%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  text-align: center;
}

/* Upper Metadata Row */
.preloader-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 8px;
}
.preloader-meta #preloader-percent {
  color: var(--paper);
  font-weight: 500;
}

/* Preloader Logo Lines — centered, oversized, blur-resolve over exactly 1s.

   This used to be driven from JS via a --reveal custom property fed by the
   progress percentage. That coupled it to the preloader's duration: once the
   hold became 5s, the logo took 5s to come into focus. The resolve is its own
   beat and has nothing to do with how long the hold is, so it now owns its
   timing in CSS and the JS no longer touches it. */
.preloader-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  will-change: filter, opacity;
  animation: preloader-logo-resolve 1s var(--ease) both;
}
@keyframes preloader-logo-resolve {
  from { filter: blur(18px); opacity: 0.35; }
  to   { filter: blur(0px);  opacity: 1; }
}
/* No blur-in for anyone who has asked for less motion — show it resolved. */
@media (prefers-reduced-motion: reduce) {
  .preloader-logo {
    animation: none;
    filter: none;
    opacity: 1;
  }
}
.logo-line-1 {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: clamp(280px, 48vw, 560px);
  line-height: 0;
  overflow: hidden;
}
.preloader-logo-img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}
/* Un-redact wipe: cream bar sweeps across the word on click */
.logo-line-1::after {
  content: "";
  position: absolute;
  inset: -2px 0;
  background: var(--ink);
  transform: translateX(-105%);
  pointer-events: none;
}
#preloader.is-entering .logo-line-1::after {
  animation: si-redact 0.62s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
@keyframes si-redact {
  0%   { transform: translateX(-105%); }
  45%  { transform: translateX(0); }
  55%  { transform: translateX(0); }
  100% { transform: translateX(105%); }
}
.logo-line-2 {
  font-size: clamp(20px, 3.4vw, 28px);
  font-weight: 400;
  letter-spacing: 0.32em;
  line-height: 1.1;
  color: rgba(255, 255, 255, 0.85);
  padding-left: 0.32em; /* optical centering for tracked-out text */
}
.logo-line-3 {
  font-family: var(--sans-ui);
  font-size: clamp(10px, 2vw, 12px);
  font-weight: 400;
  letter-spacing: 0.34em;
  line-height: 1.2;
  color: var(--muted-2);
  text-transform: uppercase;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255, 255, 255, 0.15);
  align-self: stretch;
}

/* Horizontal Progress Bar */
.preloader-bar-wrap {
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}
.preloader-bar {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0%;
  background: var(--paper);
  transition: width 0.08s ease-out;
}

.preloader-hint {
  text-align: center;
  font-family: var(--sans-ui);
  font-size: clamp(16px, 2.2vw, 24px);
  letter-spacing: 0;
  color: var(--paper);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  pointer-events: none;
  margin: 14px 0 6px;
}
.preloader-hint.visible {
  opacity: 0.8;
  transform: translateY(0);
  animation: preloader-blink 1.4s infinite;
}
@keyframes preloader-blink {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.95; }
}

/* Preloader Bottom Footer Annotations */
.preloader-foot {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 8px;
}

/* Language Switcher Styling */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 12px;
  font-family: var(--sans-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.lang-btn {
  padding: 4px 6px;
  opacity: 0.55;
  transition: opacity .2s var(--ease), color .2s var(--ease);
  cursor: pointer;
}
.lang-btn:hover, .lang-btn.active {
  opacity: 1;
}
.lang-sep {
  opacity: 0.35;
}
.header.is-dark .lang-sep {
  color: var(--paper);
}
.mm-lang-switcher {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
/* Scoped past `.mm-nav a`, which would otherwise force these into the 44px
   nav grid column and clip the longer label (e.g. ΕΛΛΗΝΙΚΑ). */
.mm-nav .mm-lang-btn,
.mm-lang-btn {
  font-family: var(--sans-ui);
  font-size: 12px;
  background: none;
  border: none;
  cursor: pointer;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.2s ease;
  display: inline-block;
  padding: 0;
  white-space: nowrap;
}
.mm-nav .mm-lang-btn:hover { padding-left: 0; }

/* =========================================================
   DARK-THEME ADJUSTMENTS
   Override paper-as-light-text where the band background is a
   deep surface (stats / footer / mobile menu / preloader).
   These selectors keep text readable when --paper is dark.
   ========================================================= */
.mobile-menu .kicker.paper {
  color: var(--ink);
}

/* Hero copy sits on a dark video/photo: --paper is now deep-blue, so swap to --ink (cream) */
.hero { color: var(--ink); }
.hero-top { color: rgba(239, 240, 239, 0.7); }
.hero-top .col strong { color: var(--ink); }
.hero-title { color: var(--ink); }
.hero-title em { color: rgba(239, 240, 239, 0.65); }

/* Typewriter span inside hero title.
   pre-wrap (not pre) so the typed line still keeps its spaces but is allowed to
   wrap — with `pre` the last line ran off-screen on narrow phones. */
.hero-type {
  display: inline;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.hero-type.is-typing::after {
  content: "";
  display: inline-block;
  width: 0.06em;
  height: 0.9em;
  background: currentColor;
  margin-left: 0.04em;
  vertical-align: -0.1em;
  animation: hero-caret-blink 0.85s steps(1) infinite;
}
@keyframes hero-caret-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.hero-sub { color: rgba(239, 240, 239, 0.82); }
.hero .btn-ink-ghost,
.hero .btn-ghost {
  color: var(--ink);
  border-color: var(--ink);
}
.hero .btn-ink-ghost:hover,
.hero .btn-ghost:hover {
  background: var(--ink);
  color: var(--surface-deep, var(--paper));
  border-color: var(--ink);
}
.hero .btn-primary:hover {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

/* Header text on light scrolled bar (not over hero): force dark text */
.header.is-scrolled:not(.is-dark),
.header.is-scrolled:not(.is-dark) .nav a,
.header.is-scrolled:not(.is-dark) .nav-link,
.header.is-scrolled:not(.is-dark) .nav-dropdown-toggle,
.header.is-scrolled:not(.is-dark) .lang-btn,
.header.is-scrolled:not(.is-dark) .menu-toggle {
  color: var(--paper);
}
.header.is-scrolled:not(.is-dark) .brand-meta {
  color: rgba(11, 16, 24, 0.65);
  border-left-color: rgba(11, 16, 24, 0.2);
}
.header.is-scrolled:not(.is-dark) .nav-cta {
  border-color: var(--paper);
  color: var(--paper);
}
.header.is-scrolled:not(.is-dark) .nav-cta:hover {
  background: var(--paper);
  color: var(--ink);
}
.header.is-scrolled:not(.is-dark) .lang-sep {
  color: var(--paper);
  opacity: 0.4;
}

/* Header text on dark hero: --paper is now deep-blue, so swap to --ink (cream) */
.header.is-dark,
.header.is-dark .nav a,
.header.is-dark .nav-link,
.header.is-dark .nav-dropdown-toggle,
.header.is-dark .lang-btn,
.header.is-dark .menu-toggle {
  color: var(--ink);
}
.header.is-dark .brand-meta {
  color: rgba(239, 240, 239, 0.65);
  border-left-color: rgba(239, 240, 239, 0.2);
}
.header.is-dark .nav-cta {
  border-color: var(--ink);
  color: var(--ink);
}
.header.is-dark .nav-cta:hover {
  background: var(--ink);
  color: var(--surface-deep, var(--paper));
}
.header.is-menu-open {
  color: var(--ink);
}

.header.is-dark .lang-sep {
  color: var(--ink);
  opacity: 0.5;
}

/* Footer link visibility on deep surface */
.footer a { color: rgba(11,16,24,0.85); }
.footer a:hover { color: #0b1018; opacity: 1; }
.footer h4 { color: rgba(11,16,24,0.55); }

/* Preloader text colors on deep surface */
#preloader .preloader-meta,
#preloader .preloader-foot,
#preloader .preloader-hint,
#preloader .logo-line {
  color: var(--ink);
}

/* ----- Company / About-Us side modal: light theme override -----
   Scope the palette tokens to #company-modal so every rule inside
   (.modal, .modal-head, .modal-content p, inline color: var(--ink),
   .btn-ink, etc.) inherits a light treatment. Other modals untouched. */
#company-modal {
  --paper: #ffffff;
  --paper-2: #f6f6f6;
  --ink: #0b1018;
  --ink-2: #2a3346;
  --rule: rgba(11, 16, 24, 0.18);
  --rule-soft: rgba(11, 16, 24, 0.10);
  --muted: rgba(11, 16, 24, 0.55);
  --muted-2: rgba(11, 16, 24, 0.42);
  color: #0b1018;
}
#company-modal .modal { color: #0b1018; }
#company-modal .modal-content p { color: rgba(11, 16, 24, 0.78); }
#company-modal .modal-hero,
#company-modal .company-modal-hero {
  background: transparent;
  border: 0;
  aspect-ratio: auto;
  margin-bottom: 24px;
}
#company-modal .company-modal-hero img {
  position: static;
  width: 100%;
  height: auto;
  max-height: 280px;
  object-fit: contain;
  object-position: center;
}

/* ----- About / A.01 Company: light theme override ----- */
#about {
  background: #ffffff;
  color: #0b1018;
}
#about .section-head { border-bottom-color: rgba(11,16,24,0.14); }
#about .section-head .right { color: rgba(11,16,24,0.62); }
#about .section-index { color: rgba(11,16,24,0.55); }
#about .section-index .num { color: #0b1018; }
#about .h-section { color: #0b1018; }
#about .body { color: #0b1018; }
#about .about-quote { color: #0b1018; }
#about .about-meta { border-top-color: rgba(11,16,24,0.18); }
#about .about-meta dt { color: rgba(11,16,24,0.55); }
#about .about-meta dd { color: #0b1018; }
#about .about-meta dd a { color: #0b1018; }
#about .btn-ink { background: #0b1018; color: #ffffff; border-color: #0b1018; }
#about .btn-ink:hover { background: transparent; color: #0b1018; }

/* ==========================================================
   Services Pair — Bento layout
   Column A: full-bleed 9:16 video with italic title + bottom snippet/CTAs
   Column B: bento grid of varied tone cards
   ========================================================== */

.services-pair { padding: 0; }
.services-pair-head { padding: 56px 0 24px; background: #ffffff; }
.services-pair-head .section-head .left .section-index,
.services-pair-head .section-head .right { color: rgba(11,16,24,0.6); }
.services-pair-head .h-section { color: #0b1018; }

.service-feature {
  position: relative;
  padding: 24px 0 64px;
  overflow: hidden;
}
.feature-day { background: #ffffff; color: #0b1018; }
.feature-night { background: var(--paper); color: var(--ink); }

/* Subtle hairline at the day→night transition */
.feature-night::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(212,175,89,0.35) 50%, transparent 100%);
}

/* ----- Bento outer grid ----- */
.bento {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  min-height: clamp(720px, 88vh, 980px);
}

/* ============ Column A: video ============ */
.bento-video {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: #0b1018;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px;
  color: #ffffff;
}
.bento-video-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* dual scrim — darkened throughout (real video content needs more contrast for the
   white title/copy than the earlier placeholder footage did), heaviest at the bottom
   for the snippet/CTAs */
.bento-video-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.46) 0%, rgba(0,0,0,0.34) 38%, rgba(0,0,0,0.40) 60%, rgba(0,0,0,0.84) 100%);
  pointer-events: none;
}
.bento-video-tag {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  padding: 6px 12px;
  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.92);
  /* Opaque-ish fill instead of a backdrop blur. This tag animates (fade + slide)
     directly over a playing video during the bento reveal, and a backdrop-filter
     forces the browser to re-sample and re-blur a decoding video frame on every
     animation frame — one of the most expensive things you can ask of it. The
     flat tint is visually near-identical against footage this dark. */
  background: rgba(11,16,24,0.62);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 2px;
  text-transform: uppercase;
}
.feature-night .bento-video-tag {
  color: var(--muted);
  border-color: rgba(212,175,89,0.45);
}

.bento-video-title {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(40px, 5.5vw, 92px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-shadow: 0 4px 36px rgba(0,0,0,0.45);
  align-self: center;
  text-align: center;
  max-width: 14ch;
}
.bento-video-title .bv-t1 { display: block; }
.bento-video-title .bv-t2 {
  display: block;
  font-style: italic;
  color: #ffffff;
}
.feature-night .bento-video-title .bv-t2 { color: #f3d9a2; }

.bento-video-bottom {
  position: relative;
  z-index: 2;
  max-width: 480px;
}
.bento-video-bottom .kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: rgba(255,255,255,0.85);
  opacity: 1;
}
.bento-video-lede {
  font-family: var(--sans-ui);
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.6;
  color: rgba(255,255,255,0.88);
  margin: 0 0 14px;
  max-width: 40ch;
}
.bento-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.bento-cta { display: inline-flex; align-items: center; gap: 10px; }
.bento-cta-arr {
  display: inline-block;
  transition: transform 0.28s var(--ease);
}
.bento-cta:hover .bento-cta-arr { transform: translateX(5px); }

/* CTA tones */
.bento-video .btn-ink {
  background: #ffffff; color: #0b1018; border-color: #ffffff;
}
.bento-video .btn-ink:hover {
  background: transparent; color: #ffffff; border-color: #ffffff;
}
.bento-cta--gold {
  background: var(--muted) !important;
  color: #0b1018 !important;
  border-color: var(--muted) !important;
}
.bento-cta--gold:hover {
  background: transparent !important;
  color: var(--muted) !important;
}
/* Editorial date label (Battle of Salamis block) — a static annotation, not a CTA.
   Replaces the source engine's dimmed ".bento-cta.is-disabled" teaser badge: this block
   is historical context, so the label should read as a caption, not a disabled button. */
.bento-note-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-left: 2px solid var(--muted);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-2);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.14em;
  white-space: nowrap;
}
.btn-ghost-on-photo {
  color: #ffffff;
  border-color: rgba(255,255,255,0.55);
  background: transparent;
}
.btn-ghost-on-photo:hover {
  background: rgba(255,255,255,0.12);
  border-color: #ffffff;
}

/* ============ Column B: bento grid ============ */
.bento-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
}

/* Enriched timeline cell: the run of the day on the left, what is included on the right */
.bento-cell.cell--timeline-plus {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 32px;
  align-items: stretch;
}
.cell--timeline-plus .cell-tl-col,
.cell--timeline-plus .cell-inc-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.cell--timeline-plus .cell-inc-col {
  padding-left: 32px;
  border-left: 1px solid currentColor;
  border-left-color: rgba(255, 255, 255, 0.16);
  height: 100%;
}
.cell--timeline-plus .cell-list { align-content: space-between; flex: 1; }
.cell--timeline-plus .cell-timeline { align-content: space-between; }
.bento-cell {
  position: relative;
  border-radius: 6px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}
.bento-cell.cell--wide { grid-column: span 2; }

.cell-eyebrow {
  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.65;
}
.cell-foot {
  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.55;
}

.cell-italic {
  font-family: var(--sans);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
}

.cell-stat-num {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(52px, 5.5vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  display: block;
}
.cell-stat-suf {
  font-size: 0.55em;
  vertical-align: top;
  margin-left: 0.06em;
  font-weight: 500;
}
.cell-stat-lbl {
  font-family: var(--sans-ui);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
  display: block;
  margin-top: 12px;
}

/* Timeline inside an ink cell */
.cell-timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 18px;
  display: grid;
  gap: 12px;
  position: relative;
  flex: 1;
}
.cell-timeline::before {
  content: "";
  position: absolute;
  left: 4px; top: 8px; bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0.08));
}
.cell-timeline li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(56px, max-content) 1fr;
  gap: 14px;
  align-items: baseline;
}
.cell-timeline .ct-tick {
  position: absolute;
  left: -18px; top: 0.55em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.12);
}
.cell-timeline li:first-child .ct-tick {
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.22);
}
.cell-timeline .ct-time {
  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 600;
}
.cell-timeline .ct-lbl {
  font-family: var(--sans-ui);
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  line-height: 1.4;
}

/* Chips inside a charcoal cell */
.cell-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1;
  align-content: center;
}
.cell-chips li {
  font-family: var(--sans-ui);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 10px 18px;
  border: 1px solid rgba(212,175,89,0.55);
  color: #f3d9a2;
  border-radius: 999px;
  background: rgba(212,175,89,0.08);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.cell-chips li:hover {
  background: rgba(212,175,89,0.18);
  border-color: rgba(212,175,89,0.85);
}

/* Gallery preview cell (replaces the timeline / chips middle cell) */
.cell--gallery {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: #0b1018;
  min-height: 220px;
}
.cell-gallery-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 0.8s var(--ease);
}
.cell--gallery:hover .cell-gallery-img { transform: scale(1.04); }
.cell-gallery-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
.cell--gallery .cell-eyebrow {
  position: absolute;
  top: 22px;
  left: 24px;
  z-index: 2;
  color: rgba(255,255,255,0.85);
  opacity: 1;
  margin: 0;
}
.cell-gallery-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  font-family: var(--sans-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #0b1018;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 999px;
  cursor: pointer;
  /* No backdrop-filter: the fill is already 95% opaque, so the blur was never
     visible — but it still forced a re-blur every frame while the parent cell
     is scaled by the bento reveal. Removing it changes nothing on screen. */
  transition: background 0.25s var(--ease), transform 0.25s var(--ease), color 0.25s var(--ease);
}
.cell-gallery-btn:hover {
  background: #ffffff;
  transform: translate(-50%, calc(-50% - 2px));
}
.cell-gallery-btn svg { flex-shrink: 0; }
.cell-gallery-btn--gold {
  background: var(--muted);
  color: #0b1018;
  border-color: rgba(212,175,89,0.6);
}
.cell-gallery-btn--gold:hover {
  background: #e6c576;
  color: #0b1018;
}

/* Generic list inside a cell */
.cell-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  flex: 1;
  align-content: center;
}
.cell-list li {
  position: relative;
  font-family: var(--sans-ui);
  font-size: 13px;
  line-height: 1.45;
  padding-left: 22px;
  opacity: 0.85;
}
.cell-list li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 0;
  font-size: 12px;
  opacity: 0.6;
}

/* ----- Tone palette ----- */
.cell--cream { background: #ebe4d2; color: #0b1018; }
.cell--sea   { background: #0e3a52; color: #eff0ef; }
.cell--ink   { background: #0b1018; color: #eff0ef; }
.cell--sage  { background: #97a89a; color: #0b1018; }
.cell--paper { background: #f6f6f4; color: #0b1018; border: 1px solid rgba(11,16,24,0.06); }

.cell--deep    { background: #f2ead6; color: #0b1018; }
.cell--gold    { background: var(--muted); color: #0b1018; }
.cell--charcoal{ background: #131a2a; color: #eff0ef; border: 1px solid rgba(212,175,89,0.18); }
.cell--amber   { background: #6e4e1f; color: #f0d896; }
.cell--ink-2   { background: #1d2535; color: #eff0ef; }

/* Ensure light-tone cells get the right ticks/lines */
.cell--cream .cell-list li::before,
.cell--sage  .cell-list li::before,
.cell--paper .cell-list li::before,
.cell--gold  .cell-list li::before,
.cell--deep  .cell-list li::before { color: #0b1018; }

/* ----- Responsive: mobile stacks video first, then bento grid ----- */
@media (max-width: 960px) {
  .bento {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 12px;
  }
  .bento-video {
    aspect-ratio: 9 / 16;
    max-height: 86vh;
    padding: 28px;
    order: 1;
  }
  .bento-grid {
    order: 2;
    grid-template-rows: auto auto;
  }
  .service-feature { padding: 32px 0 56px; }
  .services-pair-head { padding: 72px 0 28px; }
}
/* ----- Tablet only (601–960px): the video keeps its portrait aspect ratio (so it's
   narrower than the full row), but instead of leaving that space blank, the timeline
   card fills it beside the video — timeline stacked above "included" inside one card,
   same stacking the ≤600px mobile rule below already uses. Gallery spans full width. ----- */
@media (min-width: 601px) and (max-width: 960px) {
  .bento {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .bento-video { grid-column: 1; grid-row: 1; }
  .bento-grid { display: contents; }
  .bento-cell.cell--timeline-plus {
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .cell--timeline-plus .cell-inc-col {
    padding-left: 0;
    padding-top: 20px;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }
  .bento-cell.cell--gallery {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}
@media (max-width: 600px) {
  .bento-grid {
    grid-template-columns: 1fr;
  }
  .bento-cell.cell--wide { grid-column: span 1; }
  .bento-video { padding: 22px; }
  .bento-video-title { font-size: clamp(32px, 10vw, 56px); }
  .cell-stat-num { font-size: clamp(48px, 14vw, 72px); }
  .cell-timeline li { grid-template-columns: minmax(56px, max-content) 1fr; }
  .bento-cell.cell--timeline-plus { grid-template-columns: 1fr; gap: 22px; }
  .cell--timeline-plus .cell-inc-col {
    padding-left: 0;
    padding-top: 20px;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }
  .bento-actions { width: 100%; }
  .bento-actions .btn { flex: 1 1 auto; justify-content: center; }
}


/* ==========================================================================
   12 Gods link + collection section (A.05)
   Dark band between contact and footer.
   ========================================================================== */

.gods-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: opacity .25s var(--ease);
}
.gods-link:hover { opacity: .68; }

.gods-intro {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 64px;
  align-items: center;
}
.gods-copy .body + .body { margin-top: 18px; }
.gods-copy .btn { margin-top: 32px; }

.gods-mark {
  position: relative;
  display: block;
  aspect-ratio: 1600 / 948;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.gods-mark:hover { transform: translateY(-4px); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45); }
.gods-mark img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gods-siblings { margin-top: 88px; }
.gods-siblings-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding-bottom: 16px;
  margin-bottom: 32px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.18);
}
.gods-note {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

/* ----- Experience cards: full-bleed photo, blurred/darkened lower half ----- */
.gods-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.gods-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 3 / 4.15;
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
  background: #0d1218;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.gods-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45); }

.gods-card-media { position: absolute; inset: 0; z-index: 0; }

.gods-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Placeholder art until the real photography lands */
.gods-card-img--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 80% at 50% 15%, rgba(255, 255, 255, 0.09), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 12px),
    linear-gradient(160deg, #16202b 0%, #0b1119 100%);
}
.gods-card-img--ph img {
  width: 54%;
  max-width: 180px;
  opacity: 0.5;
  transform: translateY(-14%);
}

/* Frosted lower half — the blur fades in rather than cutting hard */
.gods-card-blur {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 62%;
  backdrop-filter: blur(18px) saturate(115%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 100%);
  pointer-events: none;
}
.gods-card-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(6, 10, 15, 0.94) 0%,
    rgba(6, 10, 15, 0.86) 30%,
    rgba(6, 10, 15, 0.45) 52%,
    rgba(6, 10, 15, 0.10) 70%,
    transparent 88%
  );
  pointer-events: none;
}

.gods-card-num {
  position: absolute;
  top: 20px;
  left: 22px;
  z-index: 2;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.7);
}

.gods-card-body {
  position: relative;
  z-index: 2;
  padding: 26px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gods-card-title {
  font-family: var(--sans);
  font-size: 26px;
  line-height: 1.15;
  color: #fff;
}
.gods-card-desc {
  font-family: var(--sans-ui);
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

.gods-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.gods-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--sans-ui);
  font-size: 12px;
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.gods-stars { letter-spacing: 1px; color: #fff; font-size: 11px; }

.gods-card-btn {
  margin-top: 12px;
  display: block;
  text-align: center;
  padding: 15px 18px;
  border-radius: 999px;
  background: #fff;
  color: #0b1018;
  font-family: var(--sans-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.gods-card-btn:hover { background: rgba(255, 255, 255, 0.86); }
.gods-card-btn.is-disabled {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.62);
  cursor: default;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.08em;
}

@media (max-width: 1024px) {
  .gods-intro { grid-template-columns: 1fr; gap: 40px; }
  .gods-mark { order: -1; }
  .gods-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
}
@media (max-width: 700px) {
  .gods-grid { grid-template-columns: 1fr; }
  .gods-card { aspect-ratio: 3 / 3.6; }
  .gods-siblings { margin-top: 56px; }
  .gods-siblings-head { flex-direction: column; gap: 8px; }
}

/* Highlight line folded into the video overlay */
.bento-video-note {
  font-family: var(--sans);
  font-style: italic;
  font-size: 16px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 30px;
  max-width: 44ch;
}

/* ============================================================
   BATTLE TIMELINE (A.04) — illustrated campaign timeline.
   Replaces the cloned engine's second bento block. Editorial
   content: a horizontal, snap-scrolling rail of dated events,
   each with its own image. Driven entirely by the
   `battleTimeline` translation key — cards are generated in a
   loop, so adding an event needs no CSS change.
   ============================================================ */

.battle-timeline {
  position: relative;
  background: var(--paper-2);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  padding: 120px 0 130px;
  overflow: hidden;
}

/* ---- header ------------------------------------------------ */

.bt-head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
  gap: 56px;
  align-items: start;
}

.bt-title { margin: 18px 0 0; }
.bt-title em { display: block; font-style: italic; color: var(--ink-2); }

.bt-lede {
  margin: 26px 0 0;
  max-width: 62ch;
  color: var(--ink-2);
  line-height: 1.75;
}

.bt-quote {
  margin: 22px 0 0;
  max-width: 56ch;
  font-family: var(--sans);
  font-style: italic;
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink);
  padding-left: 18px;
  border-left: 2px solid var(--muted);
}

.bt-head .bento-note-badge { margin-top: 30px; }

.bt-head-aside {
  padding-top: 8px;
  border-top: 1px solid var(--rule);
}

.bt-essentials {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}
.bt-essentials li {
  position: relative;
  padding: 0 0 0 24px;
  margin-bottom: 16px;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.6;
}
.bt-essentials li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 10px;
  height: 1px;
  background: var(--muted);
}

/* ---- rail heading ------------------------------------------ */

.bt-rail-head { margin-top: 76px; }
.bt-rail-head .shell {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
.bt-rail-hint {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.9;
  white-space: nowrap;
}

/* ---- the rail ---------------------------------------------- */

.bt-rail-wrap {
  margin-top: 44px;
  /* Full-bleed scroller whose first card still lines up with .shell */
  padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2));
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--muted) transparent;
}
.bt-rail-wrap::-webkit-scrollbar { height: 3px; }
.bt-rail-wrap::-webkit-scrollbar-track { background: var(--rule-soft); }
.bt-rail-wrap::-webkit-scrollbar-thumb { background: var(--muted); }

.bt-rail {
  list-style: none;
  margin: 0;
  padding: 0 max(var(--gutter), calc((100vw - var(--maxw)) / 2)) 26px 0;
  display: flex;
  gap: 28px;
  align-items: start;
}

/* ---- one event card ---------------------------------------- */

.bt-card {
  position: relative;
  flex: 0 0 300px;
  width: 300px;
  scroll-snap-align: start;
  padding-top: 30px;
}

/* the spine: a hairline running behind every node */
.bt-card::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  right: -28px;      /* bridges the flex gap to the next card */
  height: 1px;
  background: var(--rule);
}
.bt-card:last-child::before { right: 0; }

.bt-node {
  position: absolute;
  top: 0;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid var(--muted);
  background: var(--paper-2);
}
.bt-node::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0;
  transition: opacity 0.3s var(--ease, ease);
}
.bt-card:hover .bt-node::after { opacity: 1; }

.bt-card-media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--paper-3);
  border: 1px solid var(--rule-soft);
}
.bt-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s var(--ease, ease);
}
.bt-card:hover .bt-card-img { transform: scale(1.04); }

.bt-card-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(12, 17, 25, 0.55) 0%,
    rgba(12, 17, 25, 0.08) 38%,
    rgba(12, 17, 25, 0.70) 100%
  );
  pointer-events: none;
}

.bt-card-num {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink);
  opacity: 0.6;
}

.bt-card-date {
  position: absolute;
  left: 0;
  bottom: 16px;
  padding: 7px 13px;
  background: var(--paper);
  border-left: 2px solid var(--muted);
  color: var(--ink-2);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.bt-card-zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 40px minimum touch/click target. It sits inside a drag surface, so it needs
     to be comfortably hittable without the pointer creeping into a drag. */
  width: 40px;
  height: 40px;
  z-index: 3;
  padding: 0;
  cursor: pointer;
  background: rgba(12, 17, 25, 0.55);
  border: 1px solid rgba(240, 233, 221, 0.25);
  color: var(--ink);
  opacity: 0;
  transition: opacity 0.3s var(--ease, ease), background 0.3s var(--ease, ease);
}
.bt-card:hover .bt-card-zoom,
.bt-card-zoom:focus-visible { opacity: 1; }
/* Cursor must contradict the rail's grab cursor: this is a click, not a drag. */
.bt-card-zoom { cursor: pointer; }
.bt-card-zoom:hover { background: var(--muted); color: var(--paper); }

.bt-card-title {
  margin: 20px 0 0;
  font-family: var(--sans);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
}

.bt-card-desc {
  margin: 11px 0 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-3);
}

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

@media (max-width: 1024px) {
  .bt-head {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 760px) {
  .battle-timeline { padding: 88px 0 96px; }
  .bt-rail-head { margin-top: 54px; }
  .bt-rail-head .shell {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .bt-rail-hint { white-space: normal; }
  .bt-quote { font-size: 17px; }
  .bt-card { flex: 0 0 248px; width: 248px; }
  .bt-card::before { right: -28px; }
  .bt-card-title { font-size: 19px; }
  /* touch devices never hover — keep the zoom affordance visible */
  .bt-card-zoom { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .bt-card-img,
  .bt-card-zoom,
  .bt-node::after { transition: none; }
  .bt-card:hover .bt-card-img { transform: none; }
}

/* ---- rail: click-and-drag (mouse/pen) --------------------------
   Touch devices pan natively and never get these states.
   `.is-dragging` is toggled by initBattleRailDrag() in app.js.        */
@media (hover: hover) and (pointer: fine) {
  .bt-rail-wrap { cursor: grab; }
  .bt-rail-wrap.is-dragging { cursor: grabbing; }
  /* While dragging, kill text selection and the hover animations —
     otherwise the pointer paints a selection across every caption and
     the cards zoom in and out under the cursor. */
  .bt-rail-wrap.is-dragging,
  .bt-rail-wrap.is-dragging * {
    user-select: none;
    -webkit-user-select: none;
  }
  .bt-rail-wrap.is-dragging .bt-card-img { transform: none; }
  /* Hidden only once a real drag is under way — .is-dragging is not applied
     until the pointer crosses the threshold, so a plain click never hides it. */
  .bt-rail-wrap.is-dragging .bt-card-zoom { opacity: 0; }
  /* Snap fights a free drag: it yanks the rail to the nearest card on
     release. Proximity snapping is fine for a wheel or a flick, so it is
     only disabled for the duration of the drag. */
  .bt-rail-wrap.is-dragging { scroll-snap-type: none; }
}
/* Native ghost-drag off, so pressing on a photo starts a scroll, not a
   drag-and-drop of the image itself. */
.bt-card-img,
.bt-card-media { -webkit-user-drag: none; user-drag: none; }