/* The Aranyhegy project page: the project's own look (white, taupe, gold, Albert Sans, square corners),
   framed by the C header and footer. */
.projekt { background: var(--paper); color: var(--ink); font-family: var(--font-project); }
.projekt h1, .projekt h2, .projekt h3 { font-family: var(--font-project); font-weight: 300; letter-spacing: -0.01em; }
.p-rule { display: block; width: 56px; height: 1px; background: var(--line); }

.pbtn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 28px; border: 1px solid transparent; font-family: var(--font-project); 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; }
.pbtn:active { transform: translateY(1px); }
.pbtn--dark { background: var(--ink); color: var(--paper); }
.pbtn--dark:hover { background: #3a3a38; }
.pbtn--line { border-color: var(--ink); color: var(--ink); }
.pbtn--line:hover { background: rgb(43 43 42 / .06); }

/* ---------- hero ---------- */
.p-hero { position: relative; min-height: 820px; display: flex; align-items: flex-end; overflow: hidden; background: var(--taupe); }
.p-hero__img { position: absolute; inset: 0; width: 100%; height: 112%; object-fit: cover; object-position: 50% 18%; will-change: transform; }
.p-hero__inner { position: relative; width: 100%; padding-top: 64px; padding-bottom: 64px; }
.p-hero__panel { width: min(600px, 100%); padding: 48px; background: var(--taupe); display: flex; flex-direction: column; gap: 22px; }
.p-hero__place { font-weight: 500; font-size: 16px; letter-spacing: .02em; }
.p-hero__title { font-size: clamp(38px, 3.9vw, 56px); line-height: 1.06; }
.p-hero__lead { font-size: 18px; line-height: 1.6; }
.p-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 6px; }

/* ---------- facts strip ---------- */
.p-facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding-top: 72px; padding-bottom: 72px; }
.p-facts div { padding: 0 24px; border-left: 1px solid var(--taupe); display: flex; flex-direction: column; gap: 10px; }
.p-facts div:first-child { padding-left: 0; border-left: 0; }
.p-facts b { font-weight: 300; font-size: 48px; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.p-facts span { font-weight: 500; font-size: 15px; line-height: 1.4; color: var(--muted); }

/* ---------- the 3D plot ---------- */
.telek { position: relative; background: radial-gradient(120% 95% at 62% 42%, #3B3632 0%, #292624 52%, #1C1A18 100%); }
.telek__pin { position: relative; height: calc(100dvh - 76px); min-height: 620px; overflow: hidden; }
.telek__stage { position: absolute; inset: 0; }
.telek__stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(90% 80% at 60% 45%, transparent 55%, rgb(12 10 9 / .42) 100%); }
.telek__canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
/* a page zoomed in the lightbox must zoom back out over the model too (css/site.css, .is-zoomed) */
.is-zoomed .telek__canvas { touch-action: manipulation; }
.telek__labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.telek__label { position: absolute; left: 0; top: 0; padding: 5px 10px; background: var(--paper); color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap; box-shadow: 0 4px 14px rgb(64 53 45 / .16); opacity: 0; will-change: transform; }
.telek__label--house { padding: 6px 12px; font-size: 14px; }
.telek__label--level { padding: 4px 10px; background: var(--ink); color: var(--paper); border: 1px solid rgb(252 252 251 / .24); box-shadow: none; font-weight: 500; }
.telek__label--sold { padding: 6px 12px; background: var(--ink); color: var(--paper); border: 1px solid rgb(252 252 251 / .3); box-shadow: none; font-size: 14px; }
.telek__label--north { padding: 0; background: none; box-shadow: none; font-size: 15px; color: var(--espresso); }
.telek__fallback { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 32px; }
.telek--static .telek__canvas, .telek--static .telek__labels { display: none; }
.telek--static .telek__fallback { display: block; }
.telek__captions { position: absolute; z-index: 2; left: var(--gutter); top: 50%; transform: translateY(-50%); width: min(420px, calc(100% - 2 * var(--gutter))); pointer-events: none; }
.telek__cap { position: absolute; left: 0; top: 0; transform: translateY(-50%); width: 100%; padding: 36px 36px 34px; background: var(--paper); box-shadow: 0 18px 50px rgb(64 53 45 / .12); display: flex; flex-direction: column; gap: 14px; opacity: 0; visibility: hidden; transition: opacity .45s var(--ease-out), visibility .45s; }
.telek__cap.is-active { opacity: 1; visibility: visible; }
.telek__step { font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--muted); font-variant-numeric: tabular-nums; }
.telek__cap h2 { font-size: 34px; line-height: 1.12; }
.telek__cap p { font-size: 17px; line-height: 1.6; }
.telek__cap .price { font-weight: 600; font-size: 20px; }
.telek__note { position: absolute; z-index: 2; right: var(--gutter); bottom: 22px; max-width: 380px; padding: 6px 10px; background: #1F1D1B; font-size: 13px; line-height: 1.45; color: #D5CDC1; text-align: right; }
.telek__progress { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 2px; background: rgb(252 252 251 / .12); }
.telek__progress i { display: block; height: 100%; background: var(--gold); transform-origin: 0 50%; transform: scaleX(0); }
/* without the scroll story (no WebGL, no JS or reduced motion) every caption shows, in order */
.telek--list .telek__pin { height: auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding: 72px var(--gutter); }
.telek--list .telek__stage { position: relative; min-height: 520px; }
.telek--list .telek__captions { position: static; transform: none; width: auto; display: grid; gap: 16px; align-content: center; }
.telek--list .telek__cap { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; }
.telek--list .telek__note { position: static; grid-column: 1 / -1; max-width: none; text-align: left; }
.telek--list .telek__progress, .telek--list .telek__step, .telek--static .telek__stage::after { display: none; }

/* ---------- floor plans: tabs with one flat plan (default), an exploded stack on wide screens ---------- */
.szintek { background: var(--paper); }
.szintek__pin { min-height: calc(100dvh - 76px); display: grid; grid-template-columns: minmax(300px, 4fr) minmax(0, 7fr); gap: 48px; align-items: center; padding-top: 72px; padding-bottom: 72px; }
.szintek__text { display: flex; flex-direction: column; gap: 20px; }
.szintek__text h2 { font-size: 44px; line-height: 1.1; }
.szintek__text > p { font-size: 18px; line-height: 1.6; max-width: 40ch; }
.szintek__list { margin-top: 8px; display: grid; }
.szint { display: grid; gap: 4px; padding: 16px 12px 16px 18px; border: 0; border-left: 2px solid var(--taupe); background: none; color: inherit; font: inherit; text-align: left; transition: border-color .35s, background-color .35s; }
.szint b { font-weight: 500; font-size: 22px; line-height: 1.25; }
.szint span { font-size: 16px; line-height: 1.45; color: var(--muted); }
.szint:hover { background: rgb(207 200 190 / .2); }
.szint[aria-selected="true"] { border-color: var(--ink); }
.szintek__hint { font-size: 15px; color: var(--muted); }
.szintek__stage { position: relative; display: grid; place-items: center; }
.szintek__stack { width: 100%; display: grid; justify-items: center; }
.sheet { position: relative; margin: 0; width: min(600px, 100%); padding: 16px; background: #FFFFFF; border: 1px solid #E3DED6; box-shadow: 0 24px 50px rgb(64 53 45 / .12); }
.sheet:not(.is-shown) { display: none; }
.sheet__open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.sheet img { width: 100%; height: auto; }
.sheet figcaption { position: absolute; left: 16px; top: 16px; padding: 4px 10px; background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 600; line-height: 1.4; }
.szintek--story .szintek__stage { display: block; height: min(76dvh, 720px); perspective: 2200px; perspective-origin: 50% 42%; }
.szintek--story .szintek__stack { display: block; position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(56deg) rotateZ(-34deg); }
.szintek--story .sheet { --z: 0px; display: block; position: absolute; left: -235px; top: -235px; width: 470px; padding: 14px; transform: translateZ(var(--z)); box-shadow: 0 30px 60px rgb(64 53 45 / .18); outline: 2px solid transparent; transition: opacity .35s var(--ease-out), outline-color .35s; }
.szintek--story .sheet.is-dim { opacity: .24; }
.szintek--story .sheet.is-on { outline-color: var(--line); }
.szintek--story .sheet figcaption { display: none; }
.szintek__progress, .szintek__meta { display: none; }

/* ---------- gallery pan ---------- */
.galeria { background: var(--ink); color: var(--paper); overflow: hidden; }
.galeria__pin { min-height: calc(100dvh - 76px); display: flex; flex-direction: column; justify-content: center; gap: 32px; padding: 56px 0; }
.galeria__head { width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.galeria__head h2 { font-size: 44px; line-height: 1.1; }
.galeria__count { font-size: 15px; font-weight: 500; letter-spacing: .04em; color: #CFC8BE; font-variant-numeric: tabular-nums; }
.galeria__track { display: flex; align-items: flex-start; gap: 20px; padding: 0 var(--gutter); width: max-content; will-change: transform; }
.g-item { margin: 0; flex: none; display: flex; flex-direction: column; gap: 12px; }
.g-open { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; }
.g-item img { height: min(58dvh, 560px); width: auto; aspect-ratio: var(--ar, 3 / 2); object-fit: cover; }
.g-item figcaption { width: 0; min-width: 100%; font-size: 15px; line-height: 1.45; color: #E4DFD8; }

/* ---------- the houses ---------- */
.p-houses { padding-top: 120px; padding-bottom: 120px; display: flex; flex-direction: column; gap: 48px; }
.p-houses > h2 { font-size: 44px; line-height: 1.1; }
.p-houses__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; }
.house { display: flex; flex-direction: column; gap: 26px; }
.house__img { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--taupe); }
.house__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.house:hover .house__img img { transform: scale(1.03); }
.house__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.house__head h3 { font-weight: 400; font-size: 30px; line-height: 1.15; }
.house__status { padding: 6px 14px; background: var(--taupe); font-weight: 600; font-size: 14px; line-height: 1.4; }
.house dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 22px 16px; }
.house dl div { display: flex; flex-direction: column; gap: 4px; }
.house dt { font-weight: 500; font-size: 14px; line-height: 1.4; color: var(--muted); }
.house dd { margin: 0; font-size: 20px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.house dd.price { font-weight: 600; }
.house.is-picked .house__img { outline: 2px solid var(--line); outline-offset: 6px; }
.house__status--sold { background: var(--ink); color: var(--paper); }
.house__other { padding: 20px 22px; border-left: 2px solid var(--ink); background: rgb(207 200 190 / .28); display: grid; gap: 10px; font-size: 16px; line-height: 1.6; }
.house__other-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-weight: 600; }

/* ---------- phone: call and viewing request stay in reach ---------- */
.p-sticky { display: none; }

/* ---------- location: the view as a full-width band ---------- */
.p-place { padding-bottom: 0; }
.p-place__text { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: end; padding-bottom: 40px; }
.p-place__text h2 { font-size: 44px; line-height: 1.1; }
.p-place__lead { font-size: 22px; line-height: 1.45; }
.p-place__view { position: relative; margin: 0; height: clamp(300px, 40vw, 600px); overflow: hidden; background: #9FB6CC; }
.p-place__view img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; object-position: 50% 80%; will-change: transform; }
.p-place__view figcaption { position: absolute; left: var(--gutter); bottom: 20px; padding: 6px 12px; background: var(--paper); color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1.4; }

/* ---------- contact (C) ---------- */
.p-contact { background: var(--sand); color: var(--espresso); font-family: var(--font-body); }
.p-contact__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; padding-top: 112px; padding-bottom: 112px; }
.p-contact__who { display: flex; flex-direction: column; gap: 20px; }
.p-contact__who h2 { font-family: var(--font-display); font-weight: 300; font-size: 44px; line-height: 1.1; letter-spacing: 0; }
.p-contact__card { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 22px; align-items: center; margin-top: 12px; padding-top: 28px; border-top: 1px solid rgb(64 53 45 / .16); }
.p-contact__card img { width: 128px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 10%; border-radius: var(--radius); }
.form { background: var(--ivory); border-radius: var(--radius); padding: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; align-content: start; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label, .field legend { font-weight: 600; font-size: 15px; }
.field__help { font-size: 14px; color: var(--mocha); }
.field input, .field textarea { font: inherit; font-size: 16px; color: var(--espresso); background: #FFFFFF; border: 1px solid #A39686; border-radius: var(--radius); padding: 12px 14px; min-height: 52px; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--espresso); }
.choices { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.choices legend { margin-bottom: 8px; }
.choice { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; background: #FFFFFF; border: 1px solid #A39686; border-radius: var(--radius); font-weight: 500; }
.choice input { width: 18px; height: 18px; accent-color: var(--espresso); }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.consent input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--espresso); }
.form__done { grid-column: 1 / -1; display: none; flex-direction: column; gap: 8px; }
.form.is-done > :not(.form__done) { display: none; }
.form.is-done .form__done { display: flex; }
.form__done h3 { font-family: var(--font-display); font-weight: 300; font-size: 34px; }
.field__error { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-top: -10px; color: var(--error); font-size: 15px; font-weight: 500; }
.field__error::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--error); color: #FFFFFF; font-size: 13px; font-weight: 700; }
[aria-invalid="true"] { border-color: var(--error) !important; }

@media (max-width: 1080px) {
  /* the floor plan story on narrow screens: the tabs in one row from the garage level up, the active level's
     figures under them, the bar right under the header while the plans are held, the stage sized by the script */
  .szintek--story { overflow-x: clip; }
  .szintek--story .szintek__text { gap: 0; }
  .szintek--story .szintek__text > h2 + p { margin-top: 16px; }
  .szintek--story .szintek__progress { display: block; height: 3px; margin: 24px calc(-1 * var(--gutter)) 0; background: rgb(64 53 45 / .1); }
  .szintek--story .szintek__progress i { display: block; height: 100%; background: var(--gold); transform-origin: 0 50%; transform: scaleX(0); }
  .szintek--story .szintek__list { margin-top: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .szintek--story .szint { position: relative; min-height: 48px; padding: 12px 4px 10px; border-left: 0; border-bottom: 2px solid var(--taupe); text-align: center; justify-items: center; align-content: center; }
  .szintek--story .szint b { font-size: 17px; }
  .szintek--story .szint { color: var(--muted); }
  .szintek--story .szint[aria-selected="true"] { color: var(--ink); border-color: var(--ink); }
  .szintek--story .szint span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .szintek--story .szint[data-level="garazs"] { order: 1; }
  .szintek--story .szint[data-level="foldszint"] { order: 2; }
  .szintek--story .szint[data-level="emelet"] { order: 3; }
  .szintek--story .szintek__meta { display: block; min-height: 2.9em; margin-top: 10px; font-size: 15px; line-height: 1.45; color: var(--muted); text-align: center; }
  .szintek--story .szintek__hint { margin-top: 2px; font-size: 14px; text-align: center; }
  .szintek--story .szintek__stage { height: var(--szintek-stage-h, 360px); perspective: 1200px; }
  .szintek--story .sheet { left: calc(var(--szintek-w, 250px) / -2); top: calc(var(--szintek-w, 250px) / -2); width: var(--szintek-w, 250px); padding: 8px; box-shadow: 0 18px 36px rgb(64 53 45 / .18); }
  .p-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
  .p-facts div:nth-child(4) { padding-left: 0; border-left: 0; }
  .szintek__pin { grid-template-columns: 1fr; min-height: 0; }
  .p-houses__grid, .p-place__text, .p-contact__grid { grid-template-columns: 1fr; }
  .p-place__text { gap: 16px; }
}
@media (max-width: 760px) {
  .p-hero { min-height: 0; flex-direction: column; align-items: stretch; }
  .p-hero__img { position: relative; height: 300px; }
  .p-hero__inner { padding: 0; }
  .p-hero__panel { width: 100%; padding: 28px 20px 32px; gap: 14px; }
  .p-hero__title { font-size: 34px; }
  .p-hero__lead { font-size: 17px; }
  .p-hero__ctas .pbtn { width: 100%; }
  .p-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 40px; padding-bottom: 40px; gap: 24px 16px; }
  .p-facts div { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--taupe); }
  .p-facts div:last-child { grid-column: 1 / -1; }
  .p-facts b { font-size: 32px; }
  .telek__pin { height: calc(100dvh - 64px); min-height: 560px; }
  /* on a phone the bar runs right under the header, where it shows that the page is held while the story plays (the bottom edge is behind the call bar) */
  .telek__progress { top: 0; bottom: auto; height: 3px; background: rgb(252 252 251 / .16); }
  .p-sticky { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; position: fixed; z-index: 25; left: 0; right: 0; bottom: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--taupe); }
  .p-sticky .pbtn { min-height: 52px; padding: 0 22px; }
  .projekt .site-footer { padding-bottom: 116px; }
  .telek__captions { left: 16px; right: 16px; top: auto; bottom: 88px; transform: none; width: auto; height: 0; }
  .telek__cap { top: auto; bottom: 0; transform: none; padding: 20px 20px 18px; gap: 8px; }
  .telek__cap h2 { font-size: 24px; }
  .telek__cap p { font-size: 15px; }
  .telek__cap .price { font-size: 17px; }
  .telek__note { left: 16px; right: 16px; top: 14px; bottom: auto; max-width: none; text-align: left; font-size: 12px; }
  .telek--list .telek__pin { grid-template-columns: 1fr; padding: 48px 16px; }
  .telek--list .telek__stage { min-height: 340px; }
  .szintek__pin { padding-top: 56px; padding-bottom: 56px; gap: 28px; }
  .szintek__text h2, .galeria__head h2, .p-houses > h2, .p-place__text h2, .p-contact__who h2 { font-size: 32px; }
  .szint b { font-size: 19px; }
  .sheet { padding: 10px; }
  .sheet figcaption { left: 10px; top: 10px; font-size: 13px; }
  .galeria__pin { min-height: 0; padding: 56px 0; gap: 24px; }
  .galeria__count { display: none; }
  .galeria__track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; padding: 0 16px 8px; }
  .g-item { scroll-snap-align: start; }
  .g-item img { height: 260px; }
  .p-houses { padding-top: 64px; padding-bottom: 64px; }
  .house__head h3 { font-size: 26px; }
  .house dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .house dd { font-size: 18px; }
  .house .pbtn { width: 100%; }
  .p-place__lead { font-size: 19px; }
  .p-place__view { height: 300px; }
  .p-place__view img { object-position: 50% 78%; }
  .p-place__view figcaption { left: 16px; bottom: 14px; font-size: 13px; }
  .p-contact__grid { padding-top: 56px; padding-bottom: 56px; gap: 32px; }
  .p-contact__card { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; }
  .p-contact__card a { display: inline-flex; align-items: center; min-height: 44px; }
  .p-contact__card br { display: none; }
  .p-contact__card p { display: flex; flex-direction: column; }
  .p-contact__card img { width: 96px; }
  .form { grid-template-columns: 1fr; padding: 24px 20px; }
  .reach { padding: 24px 20px; }
  .choices { grid-template-columns: 1fr; }
}