:root {
  /* Coolors: a szabad felület csak ezt az öt színt használja. */
  --deep: #0d1b2a;
  --raised: #1b263b;
  --struct: #415a77;
  --muted: #778da9;
  --light: #e0e1dd;
  --blue: var(--struct);
  --navy: var(--deep);
  --btn: var(--struct);
  --lime: var(--light);
  --white: var(--light);
  --paper: var(--light);
  --mist: var(--light);
  --line: var(--muted);
  --body: var(--struct);
  --ink: var(--deep);
  --max: 1200px;
  --wide: 1280px;
  --header: 84px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --header-bar: calc(var(--header) + var(--safe-top));
  --radius: 8px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --sans: "Poppins", "Segoe UI", sans-serif;
  --display: "Newsreader", "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, serif;
}

/* Editorial címsor. Csak 500 és 600; a felület, a gomb és a törzs Poppins marad. */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("/assets/fonts/newsreader-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("/assets/fonts/newsreader-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

html { scroll-behavior: auto; scroll-padding-top: var(--header-bar); }

body {
  margin: 0;
  padding-top: var(--header-bar);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  text-rendering: optimizeLegibility;
}
body.is-home { padding-top: 0; }

body.menu-open,
body.modal-open { overflow: hidden; }

img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { font-size: 16px; }
button, a, input, textarea, select { touch-action: manipulation; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3, p, li, figcaption, .display, .lede, .btn, .plate-body h3, .job-btn b, button, a {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
  -webkit-hyphens: none;
}
.btn, .header-cta, .dock .btn, .btn-search {
  white-space: nowrap;
  hyphens: none;
}

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: 12px;
  top: -40px;
  background: var(--light);
  color: var(--deep);
  border: 1px solid var(--struct);
  padding: 8px 12px;
  z-index: 100;
}
.skip:focus { top: calc(var(--header-bar) + 8px); }

.wrap {
  width: min(var(--max), calc(100% - 48px));
  margin-inline: auto;
}

.section { padding: 120px 0; }
.section-sm { padding: 88px 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--body);
}
.eyebrow i {
  width: 28px;
  height: 2px;
  background: var(--struct);
  display: block;
}
.eyebrow.light { color: var(--muted); }
.eyebrow.light i { background: var(--light); }

.display,
.h1,
.h2,
.h3,
.plate-body h3,
.cat-copy h3,
.prose h2,
.modal-visual h2,
.loc-copy h2,
.quote-block blockquote,
.quote-pair blockquote,
.strengths h3,
.gate strong,
.year {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-synthesis: none;
  hyphens: none;
}
.display {
  font-size: clamp(40px, 5vw, 76px);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 0.98;
}
.h1 {
  font-size: clamp(40px, 4.4vw, 64px);
  font-weight: 500;
  letter-spacing: -0.016em;
  line-height: 1.02;
}
.h2 {
  font-size: clamp(34px, 3.5vw, 52px);
  font-weight: 500;
  letter-spacing: -0.016em;
  line-height: 1.04;
}
.h3 {
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.014em;
  line-height: 1.16;
}
.btn,
.btn-text,
.pick-btn,
.pick-menu,
.adv h3,
.footer h2,
.direct h3,
.drawer a,
.metric strong,
.hero-facts,
.hero-facts b {
  font-family: var(--sans);
}
.lede { font-size: 18px; line-height: 1.65; color: var(--struct); max-width: 62ch; }
.measure { max-width: 62ch; }

/* Ajánlatlap: tömör vezérlő. Hoverre megemelkedik, a fénycsík átsuhan rajta. */
.btn {
  --btn-glint: linear-gradient(
    102deg,
    transparent 0%,
    rgba(119, 141, 169, 0.28) 24%,
    #778da9 46%,
    rgba(65, 90, 119, 0.55) 64%,
    transparent 84%
  );
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background-clip: padding-box;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transform: translateY(0);
  box-shadow: inset 0 1px 0 rgba(224, 225, 221, 0.28);
  filter: drop-shadow(0 1px 0 rgba(13, 27, 42, 0.14));
  transition: transform 200ms var(--ease), background-color 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease), box-shadow 200ms var(--ease), filter 200ms var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  width: 62%;
  background: var(--btn-glint);
  transform: translate3d(-130%, 0, 0);
  opacity: 0;
  pointer-events: none;
}
.btn .arr {
  display: inline-block;
  transition: transform 200ms var(--ease);
}
.btn:hover .arr,
.btn:focus-visible .arr { transform: translateX(4px); }
.btn:hover,
.btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(224, 225, 221, 0.4);
  filter: drop-shadow(0 8px 10px rgba(13, 27, 42, 0.2));
}
.btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 0 rgba(224, 225, 221, 0.16);
  filter: drop-shadow(0 1px 0 rgba(13, 27, 42, 0.12));
}
.btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.btn-lime,
.btn-cta,
.search .btn-search {
  background: var(--deep);
  color: var(--light);
  border-color: var(--deep);
  font-weight: 600;
}
.btn-lime:hover,
.btn-lime:focus-visible,
.btn-cta:hover,
.btn-cta:focus-visible,
.search .btn-search:hover,
.search .btn-search:focus-visible {
  background: var(--raised);
  color: var(--light);
  border-color: var(--raised);
  box-shadow: none;
}
.btn-lime:focus-visible,
.btn-cta:focus-visible { outline-color: var(--light); }
.site-header .btn,
.drawer .btn-lime,
.titleblock .btn-lime,
.hero-actions .btn-lime {
  background: var(--light);
  color: var(--deep);
  border-color: var(--light);
}
.site-header .btn:hover,
.site-header .btn:focus-visible,
.drawer .btn-lime:hover,
.drawer .btn-lime:focus-visible,
.titleblock .btn-lime:hover,
.titleblock .btn-lime:focus-visible,
.hero-actions .btn-lime:hover,
.hero-actions .btn-lime:focus-visible {
  background: #fff;
  color: var(--deep);
  border-color: #fff;
}
.form .btn,
.findus .btn,
.loc-copy .btn {
  align-self: flex-start;
  min-width: 180px;
}
.btn-navy,
.btn-line,
.btn-line-light {
  --btn-glint: linear-gradient(
    102deg,
    transparent 0%,
    rgba(119, 141, 169, 0.35) 28%,
    rgba(224, 225, 221, 0.92) 46%,
    rgba(119, 141, 169, 0.55) 62%,
    transparent 84%
  );
  background: var(--struct);
  color: var(--light);
  border-color: var(--struct);
}
.btn-navy:hover,
.btn-navy:focus-visible,
.btn-line:hover,
.btn-line:focus-visible,
.btn-line-light:hover,
.btn-line-light:focus-visible {
  background: var(--raised);
  color: var(--light);
  border-color: var(--raised);
}
.btn-line:focus-visible,
.btn-navy:focus-visible,
.btn-line-light:focus-visible { outline-color: var(--light); }
.btn-full { width: 100%; }
.btn:disabled,
.btn:disabled:hover,
.btn:disabled:focus-visible,
.btn:disabled:active {
  transform: none;
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  filter: none;
}
.btn:disabled::before,
.btn:disabled:hover::before { animation: none; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .btn:hover::before {
    animation: btn-sheen 200ms linear both;
  }
}
@keyframes btn-sheen {
  0% { transform: translate3d(-130%, 0, 0); opacity: 0; }
  16% { opacity: 1; }
  84% { opacity: 1; }
  100% { transform: translate3d(210%, 0, 0); opacity: 0; }
}

.link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--blue);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.link .arr { transition: transform 0.2s var(--ease); }
.link:hover .arr { transform: translateX(4px); }
.link:hover { border-bottom-color: var(--blue); }

/* Header. A nyitó hero fölött átlátszó, utána és a belső oldalakon tömör mély mező. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  height: var(--header-bar);
  padding-top: var(--safe-top);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  background: var(--deep);
  color: var(--light);
  border-bottom: 0;
  transition: background-color 220ms var(--ease);
}
body.is-home:not(.is-past-hero) .site-header { background: var(--deep); }
.header-logo { flex: none; display: flex; align-items: center; min-height: 44px; }
.header-logo img { height: 42px; width: auto; }
.header-cta {
  background: var(--light);
  color: var(--deep);
  border: 2px solid var(--light);
  font-weight: 600;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}
.header-in {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
@media (min-width: 1100px) {
  .site-header .header-in {
    width: auto;
    max-width: none;
    margin-inline: 0;
    padding-left: 44px;
    padding-right: 44px;
  }
}
.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--light);
}
.logo {
  display: flex;
  align-items: center;
  color: var(--light);
}
.logo img {
  height: 62px;
  width: auto;
  display: block;
}
.nav {
  display: flex;
  align-items: center;
  gap: 26px;
}
.nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--light);
  padding: 8px 0;
}
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 2px;
  background: var(--light);
}
.menu-btn {
  display: none;
  width: 48px;
  height: 48px;
  border: 0;
  background: transparent;
  padding: 0;
}
.menu-btn span,
.menu-btn span::before,
.menu-btn span::after {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--light);
  position: relative;
}
.menu-btn span::before,
.menu-btn span::after {
  content: "";
  position: absolute;
  left: 0;
}
.menu-btn span::before { top: -6px; }
.menu-btn span::after { top: 6px; }

.drawer {
  display: none;
  position: fixed;
  inset: var(--header-bar) var(--safe-right) var(--safe-bottom) var(--safe-left);
  background: var(--navy);
  color: var(--light);
  z-index: 39;
  padding: 28px 24px 32px;
  overflow: auto;
}
body.menu-open .drawer { display: flex; flex-direction: column; }
.drawer a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--muted);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.drawer .btn { margin-top: 28px; align-self: stretch; }

/* Hero */
.hero {
  position: relative;
  min-height: 86vh;
  background: var(--deep);
  display: flex;
  align-items: flex-end;
  padding-top: var(--header-bar);
}
.hero-media { position: absolute; inset: 0; overflow: visible; }
.hero-photo { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.hero-drift { display: block; width: 100%; height: 100%; }
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.marks { position: absolute; inset: 18px; pointer-events: none; }
.hero .marks::after { top: 0; bottom: auto; border-width: 1px 1px 0 0; }
.marks::before,
.marks::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: var(--navy);
  border-style: solid;
}
.marks::before { top: 0; left: 0; border-width: 1px 0 0 1px; }
.marks::after { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
.hero-layout {
  position: relative;
  z-index: 1;
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto 92px;
}
.titleblock {
  max-width: 620px;
  background: var(--navy);
  color: var(--light);
  padding: 36px 36px 32px;
}
.titleblock .display { margin-top: 28px; }
.titleblock .lede { color: var(--light); margin-top: 22px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.hero-meta {
  margin-top: 22px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.search-slot {
  position: relative;
  z-index: 2;
  margin-top: -46px;
}
.search {
  background: var(--light);
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1.1fr 1.3fr 1fr auto auto;
  align-items: stretch;
}
.search .field { padding: 14px 18px 12px; border-right: 1px solid var(--line); }
.search .field > span,
.field > span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--body);
  margin-bottom: 4px;
}
.search input,
.search .pick-btn,
.field input,
.field .pick-btn,
.field textarea {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 4px 0;
  border-radius: 0;
  min-height: 44px;
}
.pick { position: relative; }
.pick-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  font-weight: 500;
  cursor: pointer;
}
.pick-btn span { min-width: 0; }
.pick-btn i {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--struct);
  border-bottom: 1.5px solid var(--struct);
  transform: rotate(45deg) translateY(-2px);
  flex: none;
}
.pick.is-open .pick-btn i { transform: rotate(225deg) translate(-1px, -1px); }
.pick-menu {
  position: absolute;
  z-index: 30;
  left: 0;
  top: calc(100% + 8px);
  min-width: min(100%, 280px);
  width: max(100%, 220px);
  max-width: calc(100vw - 32px);
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--light);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 16px 40px rgba(13, 27, 42, 0.12);
}
.pick-menu li {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
}
.pick-menu li:hover,
.pick-menu li[aria-selected="true"],
.pick-menu li.is-active { background: var(--mist); }
.pick-menu li.is-active { outline: 2px solid var(--blue); outline-offset: -2px; }
.field:has(.pick.is-open),
.search:has(.pick.is-open),
.toolbar:has(.pick.is-open) { position: relative; z-index: 6; }
.pick-sort { min-width: 0; }
.pick-sort .pick-menu { left: auto; right: 0; width: max(100%, 240px); }
.field textarea { min-height: 120px; resize: vertical; border-bottom: 1px solid var(--line); }
input::placeholder,
textarea::placeholder { color: var(--muted); opacity: 1; }
.search .search-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
}
.btn-text {
  background: transparent;
  border: 0;
  min-height: 48px;
  padding: 0 12px;
  color: var(--navy);
  font-weight: 500;
  font-size: 14px;
}
.btn-text[aria-expanded="true"] { color: var(--blue); }

.adv {
  display: none;
  border: 1px solid var(--line);
  border-top: 0;
  background: var(--paper);
  padding: 28px 8px 20px;
}
.adv.is-open { display: block; }
.adv-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px 28px;
  padding: 0 18px;
}
.adv h3 {
  grid-column: 1 / -1;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--body);
  margin-top: 8px;
}
.checks { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.checks label { display: flex; align-items: center; gap: 10px; font-size: 16px; min-height: 44px; }
.checks input { width: 22px; height: 22px; flex: none; }
.adv-actions {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  padding: 8px 18px 0;
  align-items: center;
}

.field-error { color: var(--deep); font-size: 13px; margin-top: 4px; }
.invalid { box-shadow: inset 0 -1px 0 var(--deep); }

/* Metrics */
.metrics { background: var(--navy); color: var(--light); }
.metrics-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding-top: 56px;
}
.metrics-head p:last-child {
  color: var(--muted);
  max-width: 28ch;
  text-align: right;
}
.metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.metrics .metrics-grid { padding: 36px 0 56px; }
.metric { padding: 8px 28px 8px 0; }
.metrics .metric + .metric {
  padding-left: 28px;
  border-left: 1px solid var(--muted);
}
.metric .metric-k {
  display: block;
  margin: 0 0 12px;
  max-width: none;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--body);
}
.metrics .metric .metric-k { color: var(--muted); }
.history .metric { padding: 8px 28px 8px 0; }
.history .metric + .metric { border-left: 1px solid var(--line); padding-left: 28px; }
.metric strong {
  display: block;
  font-size: clamp(34px, 3.4vw, 52px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
}
.metric span { display: block; margin-top: 12px; color: var(--muted); font-size: 14px; max-width: 16ch; }
#szamok .metric-figure { display: inline-block; max-width: 100%; vertical-align: top; }
#szamok .metric strong {
  display: inline-grid;
  font-variant-numeric: tabular-nums;
}
#szamok .metric-num,
#szamok .metric-end {
  display: block;
  grid-area: 1 / 1;
  margin: 0;
  max-width: none;
  color: var(--light);
  font-size: inherit;
}
#szamok .metric-end { visibility: hidden; }
#szamok .metric-rule {
  display: block;
  width: 100%;
  height: 2px;
  margin: 14px 0 0;
  max-width: none;
  background: var(--lime);
  transform-origin: left center;
  transform: scaleX(1);
}
html.has-motion #szamok .metric-rule { transform: scaleX(var(--rule, 0)); }

/* Featured + cards */
.sec-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 44px;
}
.sec-head .h2 { margin-top: 20px; max-width: 16ch; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.plate {
  border: 1px solid var(--line);
  background: var(--light);
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: border-color 0.2s var(--ease);
}
.plate:hover { border-color: var(--navy); }
.plate-fig { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--mist); }
.plate-fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s var(--ease);
}
.plate:hover img { transform: scale(1.03); }
.status {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--light);
  color: var(--navy);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 8px;
}
.plate-body { padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.plate-kicker { font-size: 13px; color: var(--body); }
.plate-body h3 { font-size: 24px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.15; }
.plate-row {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}
.price { font-weight: 500; }
.more { color: var(--blue); display: inline-flex; gap: 6px; align-items: center; }
.more .arr { transition: transform 0.2s var(--ease); }
.plate:hover .more .arr { transform: translateX(4px); }

/* Categories */
.cat-head { margin-bottom: 32px; }
.cat-head .h2 { margin-top: 20px; max-width: 16ch; }
.cat-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  grid-template-rows: 280px 280px;
  gap: 12px;
}
.cat { position: relative; overflow: hidden; color: var(--light); display: block; background: var(--navy); }
.cat-office { grid-row: 1 / span 2; }
.cat img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.cat:hover img { transform: scale(1.03); }
.cat-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 27, 42, 0.05) 20%, rgba(13, 27, 42, 0.72) 100%);
}
.cat-copy { position: absolute; left: 24px; right: 24px; bottom: 22px; }
.cat-copy h3 { font-size: 36px; font-weight: 500; letter-spacing: -0.016em; line-height: 1.05; }
.cat-copy p { margin-top: 6px; max-width: 34ch; color: var(--light); font-size: 15px; }
.cat-copy .more { color: var(--lime); margin-top: 12px; }

/* Story */
.story { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; }
.story img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.story .h2 { margin: 20px 0 22px; }
.story-note {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--body);
}

/* Values */
.values { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.value-row { display: grid; grid-template-columns: repeat(5, 1fr); }
.value { padding: 36px 22px 36px 0; }
.value + .value { padding-left: 22px; border-left: 1px solid var(--line); }
.value b {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  font-size: 14px;
  text-transform: uppercase;
}
.value b::before { content: ""; width: 6px; height: 6px; background: var(--struct); }
.value p { margin-top: 10px; color: var(--struct); font-size: 14px; }

/* Paths */
.paths-section { padding: 72px 0 88px; }
.paths-intro { max-width: 40rem; margin-bottom: 28px; }
.paths-intro .h2 { margin-top: 18px; }
.paths-intro .lede { margin-top: 12px; }
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.path {
  min-height: 280px;
  padding: 36px 36px 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  border: 1px solid var(--line);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.path strong {
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.path-copy { max-width: 36ch; font-size: 16px; line-height: 1.55; }
.path-go {
  margin-top: auto;
  padding-top: 28px;
  font-style: normal;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.path-go .arr { transition: transform 0.2s var(--ease); }
.path:hover .path-go .arr { transform: translateX(4px); }
.path-b { order: 1; background: var(--navy); color: var(--light); border-color: var(--navy); }
.path-b .eyebrow { color: var(--muted); }
.path-b .path-copy { color: var(--light); }
.path-b .path-go { color: var(--lime); }
.path-b:hover { background: var(--raised); }
.path-a { order: 2; background: var(--paper); color: var(--navy); }
.path-a .path-copy { color: var(--struct); }
.path-a .path-go { color: var(--blue); }
.path-a:hover { background: var(--light); border-color: var(--navy); }

/* Footer */
.footer { background: var(--navy); color: var(--light); padding: 56px 0 28px; font-size: 14px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 0.8fr 1fr; gap: 32px; }
.footer .logo { margin-bottom: 16px; }
.footer p { max-width: 36ch; color: var(--muted); }
.footer h2 { color: var(--light); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; margin-bottom: 14px; }
.footer a { display: flex; align-items: center; min-height: 44px; padding: 4px 0; color: var(--light); }
.footer a:hover { color: var(--light); }
.footer-base {
  margin-top: 36px;
  padding-top: 16px;
  border-top: 1px solid var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--muted);
  font-size: 12px;
}

/* Category */
.cat-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 460px; background: var(--paper); }
.cat-hero-copy { padding: 72px 48px; display: flex; flex-direction: column; justify-content: flex-end; }
.cat-hero-copy .h1 { margin: 20px 0 18px; }
.cat-hero-media { position: relative; min-height: 320px; }
.cat-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}
.sort-line { display: flex; align-items: center; gap: 12px; color: var(--body); min-width: 0; }
.sort-line .pick-sort { min-width: 220px; }
.sort-line .pick-btn {
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--struct);
  border-radius: var(--radius);
  background: var(--light);
  color: var(--deep);
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 20px; }
.chip {
  border: 1px solid var(--line);
  background: var(--light);
  min-height: 44px;
  padding: 6px 12px;
  font-size: 13px;
}
.empty { padding: 48px 0 72px; }

/* Detail */
.crumb { font-size: 13px; color: var(--body); margin-bottom: 12px; }
.crumb a { display: inline-flex; align-items: center; min-height: 44px; }
.crumb a:hover { color: var(--blue); }
.p-intro { padding-top: 48px; }
.p-intro .h1 { margin: 18px 0 18px; max-width: 18ch; }

.gallery {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1.5fr 0.75fr;
  gap: 10px;
  min-height: 460px;
}
.gallery button {
  border: 0;
  padding: 0;
  background: var(--mist);
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: 180px;
}
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.gallery-side { display: grid; gap: 10px; }
.gallery-main { min-height: 460px; }
.photo-btn { margin-top: 12px; }

.facts {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.fact { padding: 22px 24px 22px 0; }
.fact + .fact { padding-left: 24px; border-left: 1px solid var(--line); }
.fact b { display: block; font-size: clamp(26px, 2.4vw, 34px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.fact small { display: block; color: var(--body); font-size: 13px; margin-top: 6px; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; margin-top: 48px; }
.prose h2 { margin: 44px 0 16px; font-size: 32px; font-weight: 500; letter-spacing: -0.016em; line-height: 1.12; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--struct); font-size: 17px; max-width: 66ch; }
.inquiry {
  position: sticky;
  top: calc(var(--header-bar) + 20px);
  border: 1px solid var(--line);
  padding: 24px;
  background: var(--light);
}
.inquiry .eyebrow { margin-bottom: 10px; }
.inquiry .sum { font-size: 28px; font-weight: 500; letter-spacing: -0.03em; margin: 8px 0 4px; }
.inquiry .sub { color: var(--body); margin-bottom: 18px; }
.inquiry .btn { width: 100%; margin-bottom: 10px; }

.matrix, .costs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  margin-top: 8px;
}
.matrix div, .costs div { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); }
.matrix dt, .costs dt { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--body); }
.matrix dd, .costs dd { margin: 4px 0 0; font-size: 16px; font-weight: 500; }

.strengths { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 32px; margin-top: 8px; }
.strengths h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.strengths p { font-size: 14px; margin-top: 4px; }

.bleed {
  width: min(var(--max), calc(100% - 48px));
  margin: 72px auto;
}
.bleed img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }

.quote-block { background: var(--paper); padding: 72px 0; }
.quote-block blockquote {
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 500;
  letter-spacing: -0.016em;
  line-height: 1.22;
  max-width: 22em;
}
.quote-block figcaption { margin-top: 18px; color: var(--body); font-size: 14px; }
.quote-nav { display: flex; gap: 8px; margin-top: 22px; }
.quote-nav button {
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  background: var(--light);
  border-radius: var(--radius);
}

.loc { display: grid; grid-template-columns: 1.35fr minmax(260px, 0.8fr); min-height: 460px; border-top: 1px solid var(--line); }
.loc .map-live { min-height: 460px; }
.loc .btn { margin-top: 22px; }
.loc-copy { padding: 48px 40px; min-width: 0; }
.loc-copy h2 { font-size: 36px; font-weight: 500; letter-spacing: -0.016em; line-height: 1.08; }
.loc-copy ul { margin: 18px 0 0; padding: 0; list-style: none; }
.loc-copy li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.loc-note { margin-top: 16px; color: var(--body); font-size: 14px; max-width: 38ch; }
.loc.is-focused .map-live { box-shadow: inset 0 0 0 2px var(--struct); }

.acc { border-top: 1px solid var(--line); }
.acc button.acc-btn {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-weight: 500;
  font-size: 16px;
}
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s var(--ease); }
.acc-btn[aria-expanded="true"] + .acc-panel { grid-template-rows: 1fr; }
.acc-inner { overflow: hidden; }
.acc-inner p { color: var(--struct); padding: 0 0 18px; max-width: 68ch; }
.acc-btn span.pm { color: var(--blue); }

.dock {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--light);
  border-top: 1px solid var(--line);
  z-index: 35;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  align-items: center;
  gap: 12px;
}
.dock b { font-size: 14px; font-weight: 500; }
.dock small { display: block; color: var(--body); }
.dock .btn { margin-left: auto; }

/* About */
.about-hero { padding: 88px 0 40px; }
.about-hero .h1 { max-width: 16em; margin: 20px 0 22px; }
.manifest {
  background: var(--navy);
  color: var(--light);
  padding: 100px 0;
}
.manifest .h1 { max-width: 16em; }
.history {
  display: grid;
  grid-template-columns: auto minmax(0, 40rem);
  justify-content: start;
  gap: 56px;
  align-items: end;
}
.history .metrics-grid { grid-template-columns: 1fr 1fr; }
.year {
  font-size: clamp(72px, 7vw, 112px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 0.85;
  color: var(--navy);
}
.history-photo {
  width: min(var(--max), calc(100% - 48px));
  margin: 36px auto 0;
}
.history-photo img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.philo { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.philo img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
blockquote { margin: 0; }
.quote-pair { display: grid; grid-template-columns: 1fr 1fr; }
.quote-pair figure { padding: 8px 40px 8px 0; min-width: 0; }
.quote-pair figure + figure { padding-left: 40px; border-left: 1px solid var(--line); }
.quote-pair blockquote { font-size: 26px; font-weight: 500; letter-spacing: -0.016em; line-height: 1.25; }

/* Contact + tenant */
.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; }
.form .field { margin-bottom: 18px; }
.form .field input, .form .field textarea {
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
}
.checkline { display: flex; gap: 12px; align-items: center; min-height: 44px; font-size: 16px; color: var(--struct); margin: 8px 0 18px; }
.checkline a { display: inline-flex; align-items: center; min-height: 44px; }
.checkline input { width: 22px; height: 22px; margin: 0; flex: none; }
.direct { padding-top: 36px; }
.direct a { color: var(--blue); display: inline-flex; align-items: center; min-height: 44px; }
.direct .block { padding: 18px 0; border-bottom: 1px solid var(--line); }
.direct h3 { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; color: var(--body); margin-bottom: 6px; }
.success {
  border-top: 2px solid var(--struct);
  padding-top: 16px;
}
.findus {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  min-height: 460px;
  border: 1px solid var(--line);
  background: var(--light);
}
.findus-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 36px 32px;
  min-width: 0;
}
.findus-copy .h2 { font-size: clamp(32px, 3.2vw, 46px); letter-spacing: -0.016em; line-height: 1.04; }
.findus-copy p { color: var(--struct); }
.findus-hours { font-size: 14px; }
.findus .btn { margin-top: 14px; align-self: flex-start; }
.map-live {
  position: relative;
  min-height: 420px;
  height: 100%;
  overflow: hidden;
  background: var(--light);
}

.gmap {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  border: 0;
}
.map-tiles {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(var(--cols), 256px);
  left: calc(50% - var(--pinx));
  top: calc(50% - var(--piny));
}
.map-tiles img { width: 256px; height: 256px; max-width: none; }
.map-pin {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -100%);
}
.map-pin::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0;
  width: 18px;
  height: 18px;
  background: var(--navy);
  border: 3px solid var(--lime);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 2px 6px rgba(13, 27, 42, 0.35);
}
.map-attr {
  position: absolute;
  z-index: 1;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--deep);
  background: rgba(224, 225, 221, 0.92);
  padding: 0 10px;
}

.career-band {
  margin-top: 56px;
  display: grid;
  grid-template-columns: minmax(300px, 420px) 1fr;
  background: var(--navy);
  color: var(--light);
  height: 380px;
}
.career-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 36px 40px;
}
.career-copy p:not(.eyebrow) { color: var(--light); max-width: 32ch; }
.career-band .h2 { margin: 0; font-size: clamp(32px, 3.2vw, 44px); letter-spacing: -0.016em; line-height: 1.04; }
.career-go {
  margin-top: 8px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 8px;
  color: var(--lime);
  font-weight: 500;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.career-go .arr { transition: transform 0.2s var(--ease); }
.career-go:hover .arr { transform: translateX(4px); }
.career-go:hover { border-bottom-color: var(--lime); }
.career-band img { width: 100%; height: 380px; object-fit: cover; object-position: center 40%; }

.gates { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.gate { padding: 36px 32px; display: block; }
.gate + .gate { border-left: 1px solid var(--line); }
.gate:hover { background: var(--paper); }
.gate small { letter-spacing: 0.14em; text-transform: uppercase; font-size: 11px; color: var(--body); }
.gate strong { display: block; margin: 12px 0; font-size: 32px; font-weight: 500; letter-spacing: -0.016em; line-height: 1.1; }
.gate p { color: var(--struct); }
.gate em { display: inline-block; margin-top: 16px; font-style: normal; color: var(--blue); font-weight: 500; }

.job { border-top: 1px solid var(--line); }
.job-btn {
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  padding: 22px 0;
  display: grid;
  grid-template-columns: 1.4fr 0.6fr 0.6fr auto;
  gap: 12px;
  align-items: center;
}
.job-btn b { font-weight: 500; font-size: 18px; }
.job-btn span { color: var(--body); font-size: 14px; }
.job-panel { display: none; padding: 0 0 22px; max-width: 68ch; color: var(--struct); }
.job.is-open .job-panel { display: block; }

.page-hero { padding: 72px 0 12px; }
.page-hero .h1 { margin-top: 18px; max-width: 16ch; }
.page-hero .lede { margin-top: 16px; }

.legal { padding-bottom: 80px; }
.legal p { margin-top: 14px; }

/* Modal */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 27, 42, 0.56);
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, var(--safe-top)) max(16px, var(--safe-right)) max(16px, var(--safe-bottom)) max(16px, var(--safe-left));
}
.modal {
  width: min(1000px, 100%);
  background: var(--light);
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  min-height: 520px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 32px);
  overflow: auto;
  position: relative;
}
.modal-visual { position: relative; background: var(--navy); color: var(--light); min-height: 240px; }
.modal-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.modal-visual div { position: relative; z-index: 1; padding: 32px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.modal-visual h2 { font-size: 36px; font-weight: 500; letter-spacing: -0.016em; line-height: 1.08; max-width: 14ch; }
.modal-form { padding: 32px 32px 28px; }
.modal-x {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 48px;
  height: 48px;
  border: 0;
  background: transparent;
  font-size: 22px;
  z-index: 2;
}
.overlay-full {
  padding: 0;
  align-items: stretch;
  background: var(--deep);
}
.overlay-full .lightbox {
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--deep);
  color: var(--light);
}
.overlay-full .lightbox img {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  object-fit: contain;
  object-position: center;
  background: var(--deep);
}
.lightbox-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; flex: none; }
.lightbox-bar button { background: transparent; color: var(--light); border: 1px solid rgba(224, 225, 221,.3); min-height: 44px; min-width: 44px; border-radius: var(--radius); }

@media (max-width: 1100px) {
  .cards, .adv-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .value-row { grid-template-columns: 1fr 1fr; }
  .value { border-left: 0; padding-left: 0; padding-right: 0; border-top: 1px solid var(--line); }
  .value:nth-child(-n + 2) { border-top: 0; }
  .value:nth-child(odd) { padding-right: 22px; }
  .value:nth-child(even) { padding-left: 22px; border-left: 1px solid var(--line); }
  .split { grid-template-columns: 1fr; }
  .inquiry { position: static; }
  .nav { display: none; }
  .menu-btn { display: grid; place-items: center; }
  .header-cta { display: none; }
  .search { grid-template-columns: 1fr 1fr 1fr; }
  .search > .field { border-bottom: 1px solid var(--line); }
  .search > .field:nth-child(3) { border-right: 0; }
  .search > .search-actions { justify-content: flex-start; padding: 10px 14px 14px; }
  .metrics-grid { grid-template-columns: 1fr 1fr; }
  .metric { border-top: 1px solid var(--muted); border-left: 0; padding: 36px 24px 36px 0; }
  .metric:nth-child(-n + 2) { border-top: 0; }
  .metric:nth-child(odd) { padding-left: 0; }
  .metric:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--muted); }
  .sec-head, .toolbar { flex-wrap: wrap; align-items: flex-start; }
  .modal { grid-template-columns: 1fr; min-height: 0; }
  .modal-visual { min-height: 220px; }
  .facts { grid-template-columns: 1fr; }
  .fact + .fact { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .job-btn { grid-template-columns: 1fr 1fr; }
  .job-btn b { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .wrap { width: min(var(--max), calc(100% - 40px)); }
  .section { padding: 64px 0; }
  .hero { min-height: 0; display: block; }
  .hero-media { position: relative; height: 52vh; height: 52dvh; min-height: 220px; max-height: 68dvh; overflow: hidden; }
  .hero-layout { margin: 0; width: 100%; }
  .titleblock { max-width: none; padding: 28px 20px 32px; }
  .search-slot { margin-top: 0; }
  .search { grid-template-columns: 1fr; }
  .search .field { border-right: 0; border-bottom: 1px solid var(--line); }
  .search .search-actions { flex-direction: column; align-items: stretch; }
  .metrics-grid, .cards, .facts, .matrix, .costs, .strengths, .quote-pair, .contact-grid, .philo, .history, .paths, .gates, .loc, .findus, .career-band, .modal, .cat-hero, .story, .cat-grid, .adv-grid, .footer-grid, .value-row {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .metric, .metric:first-child, .metric:nth-child(even) { border-left: 0; border-top: 1px solid var(--muted); padding: 28px 0; }
  .metric:first-child { border-top: 0; }
  .cat { min-height: 320px; }
  .cat-office { grid-row: auto; }
  .path { min-height: 0; padding: 28px 24px; }
  .path-a { order: 1; }
  .path-b { order: 2; }
  .paths-section { padding: 48px 0 64px; }
  .gallery { grid-template-columns: 1fr; min-height: 0; }
  .gallery-main { min-height: 240px; }
  .gallery-side { grid-template-columns: 1fr 1fr; }
  .fact + .fact { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .job-btn { grid-template-columns: 1fr; }
  .gate + .gate { border-left: 0; border-top: 1px solid var(--line); }
  .map-live, .loc .map-live, .gmap, .loc .gmap { min-height: 280px; height: 300px; }
  .findus .btn, .hero-actions .btn, .loc .btn { align-self: stretch; width: 100%; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .career-band { height: auto; grid-template-columns: 1fr; }
  .career-band img { height: 220px; }
  .career-copy { padding: 28px 20px 32px; }
  .findus-copy, .loc-copy, .cat-hero-copy { padding: 28px 20px; }
  .value { border-left: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
  .value + .value { border-top: 1px solid var(--line); }
  .gate { padding: 28px 20px; }
  .sec-head { flex-direction: column; }
  .dock { flex-wrap: wrap; }
  .dock .btn { padding: 0 16px; font-size: 15px; margin-left: 0; flex: 1 1 140px; white-space: nowrap; }
  .dock > div { min-width: 0; flex: 1 1 120px; }
  .header-logo { display: flex; }
  .header-logo img { height: 34px; }
  .plate-row { flex-wrap: wrap; }
  .search > .search-actions { padding: 8px 0 12px; }
  .footer-base { flex-direction: column; }
  .dock { display: flex; }
  body.is-property { padding-bottom: 76px; }
  .quote-pair figure + figure { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 24px; margin-top: 24px; }
  .modal-visual { min-height: 180px; }
  .overlay { padding: var(--safe-top) 0 var(--safe-bottom); align-items: flex-end; }
  .overlay.overlay-full { align-items: stretch; padding: 0; }
  .modal { min-height: 0; max-height: 100%; overflow: auto; }
}

@media (max-width: 900px) {
  .contact-grid, .philo, .history, .quote-pair, .loc, .findus, .story { grid-template-columns: 1fr; }
  .quote-pair figure + figure { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 24px; margin-top: 24px; }
  .loc .map-live, .findus .map-live, .loc .gmap, .findus .gmap { min-height: 320px; height: 340px; }
  .history-photo img { max-height: 360px; }
}

@media (min-width: 1680px) {
  .loc,
  .findus,
  .career-band,
  .gates,
  .cat-hero {
    width: min(var(--wide), calc(100% - 64px));
    margin-inline: auto;
  }
  .cat-hero { min-height: 0; }
  .loc .map-live,
  .findus .map-live,
  .loc .gmap,
  .findus .gmap { min-height: 420px; height: 420px; }
}

@media (min-width: 768px) and (max-width: 1100px) {
  .cards { grid-template-columns: 1fr 1fr; }
  .cat-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 320px 240px 240px; }
  .cat-office { grid-column: 1 / span 2; grid-row: 1; }
  .story, .contact-grid, .split { gap: 32px; }
  .paths { grid-template-columns: 1fr 1fr; }
  .gates { grid-template-columns: 1fr 1fr; }
}

/* Görgetésre feltáruló jelenetek */
.scroll-cue {
  display: none;
}
.chapters { display: none; }
.story-media { min-width: 0; }
.story-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

html.has-motion main { animation: pageIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes pageIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

html.has-motion .titleblock { position: relative; }
html.has-motion .titleblock > * { position: relative; z-index: 1; }
html.has-motion .titleblock .display {
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
html.has-motion .display-set {
  display: block;
  animation: headlineSet 1.2s cubic-bezier(0.22, 0.55, 0.28, 1) 0.08s both;
}
@keyframes headlineSet {
  from { opacity: 0; transform: translate3d(0, 64px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
html.has-motion .titleblock::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 70% 56% at var(--glow-x) var(--glow-y),
    rgba(224, 225, 221, 0.32) 0%,
    rgba(119, 141, 169, 0.22) 36%,
    transparent 70%
  );
  animation: panelLight 36s ease-in-out infinite;
  animation-delay: -12s;
}
@property --glow-x {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 22%;
}
@property --glow-y {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 18%;
}
@keyframes panelLight {
  0%, 100% { --glow-x: 14%; --glow-y: 10%; }
  50% { --glow-x: 82%; --glow-y: 74%; }
}

/* Egy hurok: nagyon lassú Ken Burns a fotón. A navy tábla fénye ugyanebben a tempóban jár. */
html.has-motion .hero-drift {
  width: 116%;
  height: 116%;
  margin: -5% 0 0 -8%;
  animation: heroDrift 48s ease-in-out infinite;
  animation-delay: -18s;
}
@keyframes heroDrift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-2.6%, -1.5%, 0) scale(1.04); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@media (max-width: 767px) {
  html.has-motion .hero-drift {
    width: 110%;
    height: 110%;
    margin: -4% 0 0 -5%;
    animation-duration: 68s;
  }
}
html.has-motion .search-slot { animation: riseIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both; }
@keyframes riseIn {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}

@media (min-width: 768px) {
  html.has-motion .hero-media img {
    height: 100%;
    max-width: none;
    transform: translate3d(0, calc(var(--p, 0) * -28px), 0);
    transform-origin: center 40%;
  }
  html.has-motion .hero-layout { transform: none; }
  html.has-motion .scroll-cue {
    display: flex;
    align-items: center;
    gap: 12px;
    position: absolute;
    right: 36px;
    bottom: 128px;
    z-index: 2;
    margin: 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--deep);
    color: var(--light);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: calc(1 - var(--p, 0) * 2.4);
  }
  html.has-motion .scroll-cue i {
    width: 1px;
    height: 46px;
    background: var(--lime);
    transform-origin: top;
    animation: cue 1.6s ease-in-out infinite;
  }
  @keyframes cue {
    0% { transform: scaleY(0.2); }
    50% { transform: scaleY(1); }
    100% { transform: scaleY(0.2); }
  }
  html.has-motion .chapters {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: fixed;
    right: 8px;
    top: 50%;
    z-index: 35;
    transform: translateY(-50%);
  }
  html.has-motion .chapters button {
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
  }
  html.has-motion .chapters button::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: rgba(13, 27, 42, 0.45);
    box-shadow: 0 0 0 4px rgba(224, 225, 221, 0.55);
  }
  html.has-motion .chapters button.is-on { background: transparent; }
  html.has-motion .chapters button.is-on::before { background: var(--deep); box-shadow: 0 0 0 4px var(--struct); }
  html.has-motion .chapters button span {
    position: absolute;
    right: 48px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--navy);
    opacity: 0;
    pointer-events: none;
  }
  html.has-motion .chapters button:hover span { opacity: 1; }
}

html.has-motion .rv { transition-delay: calc(var(--i, 0) * 70ms); }
html.has-motion #szamok.rv-rise { transform: translate3d(0, 48px, 0); transition-duration: 0.7s; }
html.has-motion #szamok.rv-rise.is-in { transform: none; }
html.has-motion .rv-rise {
  opacity: 0;
  transform: translate3d(0, 42px, 0);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
html.has-motion .rv-rise.is-in { opacity: 1; transform: none; }
html.has-motion .rv-clip { overflow: hidden; }
html.has-motion .rv-clip img {
  clip-path: inset(16% 12% 16% 12%);
  transform: scale(1.08);
  transition: clip-path 1.15s cubic-bezier(0.16, 1, 0.3, 1), transform 1.3s cubic-bezier(0.16, 1, 0.3, 1);
}
html.has-motion .rv-clip.is-in img { clip-path: inset(0); transform: scale(1); }

html.has-motion .plate.is-in .plate-fig img { animation: cardDrift 12s ease-in-out infinite alternate; }
html.has-motion .plate:hover .plate-fig img { animation-play-state: paused; transform: scale(1.06); }
html.has-motion .gallery-main img { transition: opacity 0.45s ease, clip-path 1s cubic-bezier(0.16, 1, 0.3, 1); }
html.has-motion .map-pin::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--lime);
  transform: translate(-50%, -50%);
  animation: pinPulse 2.4s ease-out infinite;
}
@keyframes cardDrift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to { transform: scale(1.1) translate3d(-2%, -1%, 0); }
}
@keyframes pinPulse {
  0% { opacity: 0.7; transform: translate(-50%, -50%) scale(0.6); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); }
}
html.has-motion .plate .plate-fig::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--navy);
  transform: scaleY(1);
  transform-origin: top;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
html.has-motion .plate.is-in .plate-fig::after { transform: scaleY(0); }
html.has-motion .cat {
  clip-path: inset(12% 6%);
  transition: clip-path 1.1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
html.has-motion .cat.rv-rise.is-in { clip-path: inset(0); }
html.has-motion .cat img { transition: none; }
html.has-motion .gallery-main img,
html.has-motion .gallery-side img {
  clip-path: inset(8%);
  transition: clip-path 1s cubic-bezier(0.16, 1, 0.3, 1);
}
html.has-motion .gallery.is-in img { clip-path: inset(0); }

html.has-motion .site-header { transition: background-color 220ms var(--ease); }

@media (max-width: 767px) {
  html.has-motion .chapters,
  html.has-motion .scroll-cue { display: none; }
  .quote-pair,
  .philo,
  .history,
  .contact-grid,
  .story,
  .paths,
  .strengths,
  .facts { grid-template-columns: 1fr; }
  .quote-pair figure { width: auto; padding: 0; }
  .quote-pair figure + figure { border-left: 0; padding: 24px 0 0; border-top: 1px solid var(--line); margin-top: 24px; }
  .quote-pair blockquote,
  .quote-block blockquote { max-width: none; font-size: 22px; line-height: 1.28; }
  .year { font-size: 72px; }
  h1, h2, h3, p, li, figcaption, .display, .lede, blockquote { hyphens: none; overflow-wrap: break-word; }
  .about-hero .h1,
  .page-hero .h1,
  .manifest .h1,
  .p-intro .h1 { max-width: none; }
  .checkline { align-items: flex-start; }
}

@media (min-width: 1100px) {
  .hero {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(440px, 560px) minmax(0, 1fr);
    grid-template-rows: var(--header-bar) minmax(0, 1fr);
    align-items: stretch;
    padding-top: 0;
    box-sizing: border-box;
  }
  .hero-media {
    position: relative;
    inset: auto;
    grid-column: 2;
    grid-row: 2;
    min-height: 0;
  }
  .hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--deep) 0%, rgba(13, 27, 42, 0.28) 22%, rgba(13, 27, 42, 0.2) 100%);
    pointer-events: none;
  }
  .hero-layout {
    grid-column: 1;
    grid-row: 1 / -1;
    width: auto;
    margin: 0;
    z-index: 2;
  }
  .titleblock {
    max-width: none;
    min-height: 100%;
    padding: 56px 44px 96px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: var(--deep);
    box-shadow: 24px 0 60px rgba(13, 27, 42, 0.18);
  }
  .titleblock .display { font-size: clamp(54px, 5.1vw, 80px); letter-spacing: -0.02em; line-height: 0.96; }
  .hero .marks::before,
  .hero .marks::after { border-color: var(--light); }
  .scroll-cue { right: 28px; bottom: 36px; }
}
.hero-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--light);
}
.hero-facts b {
  display: block;
  font-size: clamp(22px, 2vw, 32px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}
.hero-facts span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (max-width: 767px) {
  .hero { display: flex; flex-direction: column; min-height: 0; }
  .hero-media { order: -1; width: 100%; }
  .hero-layout { width: 100%; margin: 0; }
  .hero-facts { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .hero-facts b { font-size: 18px; }
  .titleblock { background: var(--deep); }
}

/* A táblagép ugyanazt a rakott nyitót kapja, amíg a fotó oszlop túl keskeny a kártyákhoz. */
@media (max-width: 1099px) {
  .hero { display: flex; flex-direction: column; min-height: 0; }
  html.has-motion .hero { display: flex; min-height: 0; }
  html.has-motion .hero-stage { display: contents; position: static; height: auto; }
  .hero-media {
    position: relative;
    inset: auto;
    order: -1;
    width: 100%;
    height: 52vh;
    height: 52dvh;
    min-height: 220px;
    max-height: 68dvh;
    overflow: hidden;
  }
  .hero-layout { width: 100%; margin: 0; grid-column: auto; }
  .titleblock {
    max-width: none;
    min-height: 0;
    background: var(--deep);
    box-shadow: none;
  }
  .titleblock .display { font-size: clamp(40px, 6.2vw, 64px); letter-spacing: -0.018em; line-height: 1.02; }
  html.has-motion .hero-drift {
    width: 110%;
    height: 110%;
    margin: -4% 0 0 -5%;
    animation-duration: 68s;
  }
  html.has-motion .chapters,
  html.has-motion .scroll-cue { display: none; }
}

/* Portfólióműszer: a varrat a viszonyítási vonal, a helyszínek róla ágaznak le. */
.instrument {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  container-type: size;
}
.hero .marks { z-index: 3; }
.hero .scroll-cue { pointer-events: none; }
html.has-motion .hero .scroll-cue { z-index: 4; }
.hero-media::after { z-index: 1; }
.instrument-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.instrument-svg-y { display: none; }
.instrument-svg path {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.lead-shade { stroke: var(--deep); stroke-width: 5px; }
.lead { stroke: var(--light); stroke-width: 1.5px; }
.leads-places { opacity: clamp(0, calc((0.5 - var(--p, 0)) / 0.22), 1); }
.leads-docks { opacity: clamp(0, calc((var(--p, 0) - 0.4) / 0.28), 1); }
.instrument-key {
  position: absolute;
  top: 20px;
  left: 48px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 10px 6px 8px;
  background: var(--raised);
  color: var(--light);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(13, 27, 42, 0.28);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  opacity: clamp(0, calc(1 - var(--p, 0) * 1.7), 1);
  pointer-events: none;
}
.instrument-key i {
  width: 14px;
  height: 1.5px;
  background: var(--light);
  display: block;
}
.instrument-key b { font-weight: 600; color: var(--light); }
.station {
  --x: var(--xd);
  --y: var(--yd);
  --nx: var(--nxd);
  --ny: var(--nyd);
  --ax: -50%;
  --rx: 0deg;
  --ry: 0deg;
  --tz: 0px;
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 196px;
  min-height: 44px;
  padding: 6px 12px 6px 6px;
  background: var(--raised);
  color: var(--light);
  border: 1px solid var(--light);
  border-radius: 8px;
  box-shadow: 0 0 0 3px rgba(13, 27, 42, 0.38), 0 14px 28px rgba(13, 27, 42, 0.32);
  pointer-events: none;
  opacity: clamp(0, calc((0.52 - var(--p, 0)) / 0.22), 1);
  transform: translate(var(--ax), -50%)
    translate(
      calc((var(--nx) - var(--x)) * var(--p, 0) * 1cqw),
      calc((var(--ny) - var(--y)) * var(--p, 0) * 1cqh)
    );
}
.instrument:not(.is-resolved) .station { pointer-events: auto; }
.station-mark {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  border: 1px solid var(--light);
  border-radius: 6px;
}
.station-mark::before,
.station-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--light);
}
.station-mark::before { width: 12px; height: 1.5px; transform: translate(-50%, -50%); }
.station-mark::after { width: 1.5px; height: 12px; transform: translate(-50%, -50%); }
.station-mark i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  background: var(--light);
  transform: translate(-50%, -50%);
}
.station-copy { display: flex; flex-direction: column; min-width: 0; }
.station-copy strong {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  white-space: nowrap;
}
.station-copy em {
  margin-top: 2px;
  font-style: normal;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--light);
  line-height: 1.2;
  white-space: nowrap;
}
.station:hover,
.station:focus-visible,
.station.is-focus { background: var(--struct); }
.station:hover .station-mark,
.station:focus-visible .station-mark,
.station.is-focus .station-mark { background: var(--light); }
.station:hover .station-mark::before,
.station:hover .station-mark::after,
.station:hover .station-mark i,
.station:focus-visible .station-mark::before,
.station:focus-visible .station-mark::after,
.station:focus-visible .station-mark i,
.station.is-focus .station-mark::before,
.station.is-focus .station-mark::after,
.station.is-focus .station-mark i { background: var(--deep); }
.station:focus-visible,
.port:focus-visible { outline: 2px solid var(--light); outline-offset: 3px; }
.ports { position: static; }
.port {
  --x: var(--xd);
  --y: var(--yd);
  --rx: 0deg;
  --ry: 0deg;
  --tz: 0px;
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  right: auto;
  bottom: auto;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 196px;
  height: auto;
  min-height: 56px;
  padding: 8px 12px 8px 14px;
  background: var(--raised);
  color: var(--light);
  border: 1px solid var(--light);
  border-radius: 8px;
  box-shadow: inset 3px 0 0 var(--light), 0 16px 32px rgba(13, 27, 42, 0.4);
  pointer-events: none;
  opacity: clamp(0, calc((var(--p, 0) - 0.38) / 0.24), 1);
  transform: translate(-50%, -50%) translateY(calc((1 - var(--p, 0)) * 10px));
}
.instrument.is-resolved .port { pointer-events: auto; }
.port-copy strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.port-copy em {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 3px;
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--light);
  line-height: 1;
  white-space: nowrap;
}
.port-copy em b {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--light);
  text-transform: none;
}
.port .arr { color: var(--light); font-size: 16px; line-height: 1; }
.port:hover { background: var(--struct); }
html.has-motion .port .arr { transition: transform 0.2s var(--ease); }
html.has-motion .port:hover .arr { transform: translateX(4px); }
html.has-motion .instrument-svg-x .datum {
  transform-box: fill-box;
  transform-origin: center top;
  animation: seamDraw 0.62s cubic-bezier(0.22, 0.55, 0.28, 1) 0.06s backwards;
}
html.has-motion .instrument-svg-x .leads-places {
  transform-box: fill-box;
  transform-origin: left center;
  animation: leadDraw 1.05s cubic-bezier(0.22, 0.55, 0.28, 1) 0.2s backwards;
}
html.has-motion .instrument-key {
  animation: keyOn 0.7s cubic-bezier(0.22, 0.55, 0.28, 1) 0.2s backwards;
}
html.has-motion .station {
  animation: stationOpenX 0.9s cubic-bezier(0.22, 0.55, 0.28, 1) backwards;
  animation-delay: calc(0.36s + var(--i) * 90ms);
}
@keyframes seamDraw {
  from { opacity: 0; transform: scaleY(0); }
}
@keyframes leadDraw {
  from { opacity: 0; transform: scaleX(0); }
}
@keyframes keyOn {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
}
@keyframes stationOpenX {
  from {
    opacity: 0;
    transform: translate(var(--ax), -50%) translate(calc(var(--x) * -1cqw), 0);
  }
}
@keyframes stationOpenY {
  from {
    opacity: 0;
    transform: translate(var(--ax), -50%) translate(0, calc((100 - var(--y)) * 1cqh));
  }
}
@keyframes stationOpenX3d {
  from {
    opacity: 0;
    transform: translate(var(--ax), -50%) translate(calc(var(--x) * -1cqw), 0) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(var(--tz));
  }
}
@media (min-width: 1100px) {
  html.has-motion .instrument {
    perspective: 1400px;
    perspective-origin: 46% 42%;
    overflow: visible;
  }
  html.has-motion .station {
    --rx: 5deg;
    transform-style: preserve-3d;
    animation-name: stationOpenX3d;
    transform: translate(var(--ax), -50%)
      translate(
        calc((var(--nx) - var(--x)) * var(--p, 0) * 1cqw),
        calc((var(--ny) - var(--y)) * var(--p, 0) * 1cqh)
      )
      rotateX(var(--rx))
      rotateY(var(--ry))
      translateZ(var(--tz));
  }
  html.has-motion .port {
    --rx: 4deg;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%) translateY(calc((1 - var(--p, 0)) * 10px)) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(var(--tz));
  }
}
.hero-stage { display: contents; }
@media (min-width: 1100px) {
  html.has-motion .hero {
    display: block;
    min-height: 200vh;
    min-height: 200dvh;
    padding-top: 0;
  }
  html.has-motion .hero-stage {
    display: grid;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    box-sizing: border-box;
    padding-top: 0;
    background: var(--deep);
    grid-template-columns: minmax(440px, 560px) minmax(0, 1fr);
    grid-template-rows: var(--header-bar) minmax(0, 1fr);
    align-items: stretch;
  }
  html.has-motion .hero-media { min-height: 0; height: auto; }
  html.has-motion .titleblock { min-height: 100%; }
}
@media (max-width: 767px) {
  .instrument-svg-x { display: none; }
  .instrument-svg-y { display: block; }
  .instrument-key { left: auto; right: 10px; top: 10px; }
  .station {
    --x: var(--xm);
    --y: var(--ym);
    --nx: var(--nxm);
    --ny: var(--nym);
    --ax: 0%;
    max-width: 168px;
    gap: 6px;
    padding: 5px 8px 5px 5px;
  }
  .station-mark { width: 22px; height: 22px; border-radius: 6px; }
  .station-mark::before { width: 10px; }
  .station-mark::after { height: 10px; }
  .station-copy strong { font-size: 12px; }
  .station-copy em { font-size: 9px; letter-spacing: 0.08em; }
  .port {
    --x: var(--xm);
    --y: var(--ym);
    width: 116px;
    min-height: 48px;
    gap: 6px;
    padding: 6px 8px 6px 10px;
  }
  .port-copy strong { font-size: 13px; }
  .port-copy em { font-size: 9px; letter-spacing: 0.04em; }
  .port-copy em b { font-size: 13px; }
  html.has-motion .station { animation-name: stationOpenY; }
  html.has-motion .instrument-svg-y .leads-places {
    transform-box: fill-box;
    transform-origin: center top;
    animation: seamDraw 0.6s cubic-bezier(0.22, 0.7, 0.2, 1) backwards;
  }
}
html:not(.has-motion) .station {
  opacity: 1;
  pointer-events: auto;
  transform: translate(var(--ax), -50%);
}
html:not(.has-motion) .leads-places,
html:not(.has-motion) .datum,
html:not(.has-motion) .instrument-key { opacity: 1; }
html:not(.has-motion) .leads-docks { opacity: 0; }
html:not(.has-motion) .ports {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 64px;
  z-index: 5;
  display: flex;
  gap: 8px;
}
html:not(.has-motion) .port {
  position: relative;
  left: auto;
  top: auto;
  right: auto;
  bottom: auto;
  width: auto;
  flex: 1 1 0;
  min-width: 0;
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
@media (max-width: 767px) {
  html:not(.has-motion) .ports { bottom: 8px; }
}

@media (max-width: 1100px) {
  .metrics .metric,
  .metrics .metric + .metric {
    border-left: 0;
    padding: 28px 20px 28px 0;
  }
  .metrics .metric:nth-child(even) {
    border-left: 1px solid var(--muted);
    padding-left: 20px;
  }
  .metrics .metric:nth-child(n + 3) {
    border-top: 1px solid var(--muted);
    padding-top: 28px;
  }
  .metrics-head { padding-top: 40px; }
  .metrics .metrics-grid { padding-bottom: 40px; }
}

@media (max-width: 767px) {
  .metrics-head {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 36px;
  }
  .metrics-head p:last-child { text-align: left; }
  .metrics .metric,
  .metrics .metric + .metric,
  .metrics .metric:nth-child(even) {
    border-left: 0;
    padding: 22px 0;
    border-top: 1px solid var(--muted);
  }
  .metrics .metric:first-child { border-top: 0; }
  .metrics .metric:nth-child(n + 3) { border-top: 1px solid var(--muted); }
  .history .metric,
  .history .metric + .metric { border-left: 0; padding-left: 0; }
  .history .metric + .metric { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 18px; }
  .toolbar { align-items: stretch; }
  .sort-line { width: 100%; }
  .sort-line .pick-sort { min-width: 0; flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Érintőn a :hover ne ragadjon be a koppintás után. */
@media (hover: none) {
  .btn:hover {
    transform: none;
    box-shadow: inset 0 1px 0 rgba(224, 225, 221, 0.28);
    filter: drop-shadow(0 1px 0 rgba(13, 27, 42, 0.14));
  }
  .btn-lime:hover,
  .btn-cta:hover,
  .btn-search:hover {
    background: var(--deep);
    color: var(--light);
    border-color: var(--deep);
  }
  .site-header .btn:hover,
  .drawer .btn-lime:hover,
  .titleblock .btn-lime:hover,
  .hero-actions .btn-lime:hover {
    background: var(--light);
    color: var(--deep);
    border-color: var(--light);
  }
  .btn-navy:hover,
  .btn-line:hover,
  .btn-line-light:hover {
    background: var(--struct);
    border-color: var(--struct);
  }
  .btn:hover .arr,
  .link:hover .arr,
  .plate:hover .more .arr,
  .path:hover .path-go .arr,
  .career-go:hover .arr,
  html.has-motion .port:hover .arr { transform: none; }
  .link:hover,
  .career-go:hover { border-bottom-color: transparent; }
  .plate:hover { border-color: var(--line); }
  .plate:hover img,
  .cat:hover img,
  html.has-motion .plate:hover .plate-fig img { transform: none; }
  .station:hover { background: var(--raised); }
  .station:hover .station-mark { background: transparent; }
  .station:hover .station-mark::before,
  .station:hover .station-mark::after,
  .station:hover .station-mark i { background: var(--light); }
  .port:hover { background: var(--raised); }
  .path-b:hover { background: var(--navy); }
  .path-a:hover { background: var(--paper); border-color: var(--line); }
  .gate:hover,
  .pick-menu li:hover { background: transparent; }
  .footer a:hover { color: inherit; }
  html.has-motion .chapters button:hover span { opacity: 0; }
}