/* fonts: written by design/fonts/build_fonts.py, never edited by hand */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url(/fonts/files/newsreader.7c2eba6df7.woff2) format('woff2');
  unicode-range: U+0020-007E, U+00A0-00FF, U+0150-0151, U+0170-0171, U+2009-200B, U+2010-2011, U+2018-201E, U+2022, U+2026, U+202F, U+2060, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url(/fonts/files/newsreader-italic.1095a0a301.woff2) format('woff2');
  unicode-range: U+0020-007E, U+00A0-00FF, U+0150-0151, U+0170-0171, U+2009-200B, U+2010-2011, U+2018-201E, U+2022, U+2026, U+202F, U+2060, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/files/commissioner.ae637f58c8.woff2) format('woff2');
  unicode-range: U+0020-007E, U+00A0-00FF, U+0150-0151, U+0170-0171, U+2009-200B, U+2010-2011, U+2018-201E, U+2022, U+2026, U+202F, U+2060, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/fonts/files/albert-sans.a4b19e9260.woff2) format('woff2');
  unicode-range: U+0020-007E, U+00A0-00FF, U+0150-0151, U+0170-0171, U+2009-200B, U+2010-2011, U+2018-201E, U+2022, U+2026, U+202F, U+2060, U+20AC, U+2122, U+2212;
}
/* fonts: end */

/* Next Key Estate preview: the C identity (espresso, sand, ivory, champagne gold; Newsreader + Commissioner)
   and the project look (white, taupe, gold, Albert Sans, square corners) for project pages.
   Shared by both pages: tokens, header, buttons, footer, the preview strip and the lightbox. */
:root {
  --espresso: #40352D;
  --espresso-2: #4A3E35;
  --espresso-deep: #2F2721;
  --ivory: #FCFAF6;
  --sand: #F1E8D9;
  --mocha: #6B5D50;
  --gold: #C5A46D;
  --paper: #FCFCFB;
  --taupe: #CFC8BE;
  --taupe-soft: #E7E2DA;
  --ink: #2B2B2A;
  --muted: #6E665C;
  --line: #B8975A;
  --error: #A1372B;
  --font-display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Commissioner', 'Segoe UI', system-ui, sans-serif;
  --font-project: 'Albert Sans', 'Segoe UI', system-ui, sans-serif;
  --gutter: clamp(20px, 4.45vw, 64px);
  --radius: 6px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--espresso);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, a, [role="tab"], label[for] { cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { margin: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 1440px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.nowrap { white-space: nowrap; }

/* ---------- curtain: covers the page until its entrance is ready and between the pages. On every page load the
   logo assembles itself on it (the head script sets .js-intro): the key drops out of its collar and its bow
   rises, the letters come out from behind the shaft, the name is set letter by letter. While the page is still
   loading the sequence runs back and forth; openCurtain() in js/site.js lets it end on the finished logo.
   Every layer has the same duration (PASS in js/site.js) so the passes stay in step, and only transform and
   opacity move, which the browser animates off the main thread while the 3D scene is being built. ---------- */
.logo-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.curtain { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--espresso); color: var(--gold); transform: translateY(-101%); }
.js-hide .curtain { transform: none; }
.curtain__logo { position: relative; width: min(66vw, 400px); aspect-ratio: var(--nk-ar); }
.cl, .cl-clip { position: absolute; inset: 0; width: 100%; height: 100%; }
.cl { fill: currentColor; overflow: visible; }
.cl-clip--shaft { clip-path: inset(var(--nk-collar) 0 0 0); }
.cl-clip--bow { clip-path: inset(0 0 calc(100% - var(--nk-collar)) 0); }
.cl-clip--n { clip-path: inset(0 calc(100% - var(--nk-n)) 0 0); }
.cl-clip--k { clip-path: inset(0 0 0 var(--nk-k)); }
.js-intro .cl { animation: 1.6s linear infinite alternate both; will-change: transform, opacity; }
.js-intro .cl--shaft { animation-name: nk-shaft; }
.js-intro .cl--bow { animation-name: nk-bow; }
.js-intro .cl--n { animation-name: nk-n; }
.js-intro .cl--k { animation-name: nk-k; }
.js-intro .cl--w { animation-name: nk-w; animation-delay: calc(var(--i) * 26ms); }
@keyframes nk-shaft { 0% { transform: translateY(-52%); animation-timing-function: cubic-bezier(.65, 0, .35, 1); } 44%, 100% { transform: none; } }
@keyframes nk-bow { 0%, 8% { transform: translateY(32%); animation-timing-function: cubic-bezier(.65, 0, .35, 1); } 52%, 100% { transform: none; } }
@keyframes nk-n { 0%, 24% { transform: translateX(14.5%); animation-timing-function: cubic-bezier(.16, 1, .3, 1); } 74%, 100% { transform: none; } }
@keyframes nk-k { 0%, 29% { transform: translateX(-20.5%); animation-timing-function: cubic-bezier(.16, 1, .3, 1); } 79%, 100% { transform: none; } }
@keyframes nk-w { 0%, 42% { transform: translateY(2.4%); opacity: 0; animation-timing-function: cubic-bezier(.16, 1, .3, 1); } 70%, 100% { transform: none; opacity: 1; } }

/* ---------- legal pages (Impresszum, Adatkezelési tájékoztató) ---------- */
.jogi main { background: var(--ivory); }
.legal { max-width: 860px; padding-top: 96px; padding-bottom: 120px; display: flex; flex-direction: column; gap: 40px; }
.legal h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(38px, 5vw, 64px); line-height: 1.05; color: var(--espresso); }
.legal h2 { font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.2; color: var(--espresso); margin-bottom: 14px; }
.legal section { display: flex; flex-direction: column; gap: 12px; padding-top: 28px; border-top: 1px solid rgb(64 53 45 / .14); }
.legal p, .legal li { font-size: 17px; line-height: 1.65; color: var(--espresso); max-width: 68ch; }
.legal ul { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.legal a { color: var(--espresso); text-underline-offset: 3px; }
.legal__data { margin: 0; display: grid; gap: 8px; }
.legal__data div { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: 16px; }
.legal__data dt { color: var(--mocha); }
.legal__data dd { margin: 0; color: var(--espresso); overflow-wrap: anywhere; }
.legal__date { color: var(--mocha); }
@media (max-width: 640px) {
  .legal { padding-top: 56px; padding-bottom: 72px; gap: 28px; }
  .legal__data div { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- header (C) ---------- */
.site-header { position: sticky; top: 0; z-index: 30; background: var(--espresso); color: var(--sand); font-family: var(--font-body); transition: box-shadow .3s var(--ease-out); }
.site-header.is-scrolled { box-shadow: 0 10px 30px rgb(40 32 27 / .28); }
.site-header__row { position: relative; min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 14px; color: var(--gold); text-decoration: none; }
.brand svg { display: block; fill: currentColor; }
.brand__mark { height: 56px; width: auto; }
.brand__word { height: 12px; width: auto; }
.brand__lockup { width: 200px; height: auto; }
.nav { display: flex; align-items: center; gap: 8px 34px; font-weight: 500; font-size: 15px; }
.nav > a { color: var(--sand); text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; transition: border-color .25s, color .25s; }
.nav > a:hover, .nav > a[aria-current="page"] { color: var(--ivory); border-color: var(--gold); }
.nav__extra { display: none; }
.header-tools { display: flex; align-items: center; gap: 26px; font-size: 15px; }
.header-tools .tel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--gold); font-weight: 600; text-decoration: none; }
.lang { display: flex; gap: 14px; font-weight: 500; }
.lang a { text-decoration: none; color: var(--sand); }
.lang a[aria-current="true"] { color: var(--gold); text-decoration: underline; text-underline-offset: 4px; }
.menu-btn { display: none; width: 48px; height: 48px; border: 0; background: transparent; color: var(--sand); align-items: center; justify-content: center; }
.menu-btn .i-close { display: none; }
.site-header.is-open .menu-btn .i-open { display: none; }
.site-header.is-open .menu-btn .i-close { display: block; }

/* ---------- buttons and links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 30px; border: 1px solid transparent; border-radius: var(--radius); font-family: var(--font-body); font-weight: 600; font-size: 16px; line-height: 1.2; white-space: nowrap; text-decoration: none; transition: transform .2s var(--ease-out), background-color .25s, color .25s, border-color .25s; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn--gold { background: var(--gold); color: var(--espresso); }
.btn--gold:hover { background: #D2B47F; }
.btn--dark { background: var(--espresso); color: var(--ivory); }
.btn--dark:hover { background: var(--espresso-2); }
.btn--ghost-light { border-color: var(--sand); color: var(--ivory); }
.btn--ghost-light:hover { background: rgb(241 232 217 / .1); }
.btn--ghost-dark { border-color: var(--espresso); color: var(--espresso); }
.btn--ghost-dark:hover { background: rgb(64 53 45 / .06); }
.btn svg { flex: none; }
.link-arrow { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; }
.link-arrow svg { transition: transform .3s var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- reach: call and e-mail, where a form will stand once its backend exists ---------- */
.reach { display: grid; gap: 14px; align-content: center; padding: 40px; background: var(--ivory); border-radius: var(--radius); font-family: var(--font-body); }
.reach .btn { width: 100%; min-height: 64px; font-size: 18px; }

/* ---------- footer (C) ---------- */
.site-footer { background: var(--espresso); color: var(--sand); padding: 88px 0 40px; font-family: var(--font-body); }
.site-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
.site-footer h2 { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--ivory); margin-bottom: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; }
.site-footer a { text-decoration: none; color: var(--sand); }
.site-footer a:hover { color: var(--gold); }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-footer__motto { margin-top: 22px; font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--gold); }
.site-footer__base { margin-top: 64px; padding-top: 24px; border-top: 1px solid rgb(241 232 217 / .18); display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }

/* a hint names the gesture of the hand in use: a finger taps, a mouse clicks */
@media (hover: none) { .hint-mouse { display: none; } }
@media (hover: hover) { .hint-touch { display: none; } }
/* no double-tap zoom on any control: fast taps on the gallery arrows zoomed the page on phones (pinch zoom stays) */
a, button, [role="tab"], label, summary { touch-action: manipulation; }
/* the lightbox leaves a horizontal swipe to its own paging (js/site.js) and keeps the pinch; a browser that does not
   know pinch-zoom keeps manipulation. Zoomed in, the photo pans every way. */
.lightbox { touch-action: manipulation; touch-action: pan-y pinch-zoom; }
.is-zoomed .lightbox { touch-action: manipulation; }
/* a section that holds the scroll only pans: a pinch or a double tap there zooms the page and breaks the pin
   (js/site.js marks every pinned element .is-held); a page already zoomed, in the lightbox, may zoom back out */
.is-held { touch-action: pan-y; }
.is-zoomed .is-held { touch-action: manipulation; }

/* ---------- lightbox: one dialog per page, opened by any [data-zoom] button ---------- */
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 64px 88px; border: 0; background: rgb(28 24 21 / .96); color: var(--ivory); font-family: var(--font-body); }
.lightbox[open] { display: grid; place-items: center; animation: lb-in .35s var(--ease-out); }
.lightbox::backdrop { background: transparent; }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
.lightbox__fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lightbox__fig img { max-width: min(100%, 1600px); max-height: calc(100dvh - 180px); width: auto; height: auto; object-fit: contain; }
.lightbox[data-kind="szintek"] .lightbox__fig img { width: min(86vw, calc(100dvh - 190px), 980px); max-width: none; background: #FFFFFF; padding: 12px; }
.lightbox__fig figcaption { font-size: 15px; line-height: 1.5; color: var(--sand); text-align: center; }
.lightbox__count { position: absolute; left: 24px; top: 22px; font-size: 14px; color: var(--sand); font-variant-numeric: tabular-nums; }
.lightbox__btn { position: absolute; width: 52px; height: 52px; display: grid; place-items: center; padding: 0; border: 1px solid rgb(241 232 217 / .35); border-radius: var(--radius); background: rgb(28 24 21 / .6); color: var(--ivory); transition: background-color .25s; }
.lightbox__btn:hover { background: rgb(241 232 217 / .14); }
.lightbox__prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__close { right: 20px; top: 14px; }
.lightbox[data-single] .lightbox__prev, .lightbox[data-single] .lightbox__next, .lightbox[data-single] .lightbox__count { display: none; }

@media (max-width: 1080px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
  .header-tools .lang { display: none; }
  .site-header.is-open .nav { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; left: 0; right: 0; top: 100%; padding: 8px var(--gutter) 28px; background: var(--espresso); box-shadow: 0 18px 30px rgb(40 32 27 / .3); }
  .site-header.is-open .nav > a { padding: 14px 0; font-size: 18px; border-bottom: 1px solid rgb(241 232 217 / .14); }
  .site-header.is-open .nav__extra { display: grid; gap: 12px; margin-top: 22px; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .site-header__row { min-height: 64px; flex-wrap: nowrap; }
  .brand { gap: 10px; }
  .brand__mark { height: 46px; }
  .brand__word { height: 9.5px; }
  .header-tools { gap: 8px; }
  .header-tools .tel { width: 44px; justify-content: center; }
  .header-tools .tel span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__base { flex-direction: column; }
  .site-footer ul { gap: 0; }
  .site-footer li { display: flex; align-items: center; min-height: 44px; }
  .site-footer li a { display: flex; align-items: center; min-height: 44px; flex: 1; }
  .site-footer .lang { gap: 4px; }
  .site-footer .lang a { display: grid; place-items: center; min-width: 44px; min-height: 44px; }
  .site-footer__legal { row-gap: 0; }
  .site-footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }
  .lightbox { padding: 64px 12px 84px; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 16px; transform: none; }
  .lightbox__prev { left: calc(50% - 64px); }
  .lightbox__next { right: calc(50% - 64px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}