:root {
    --cream:    #F0EADE;
    --cream-2:  #E7DED0;
    --charcoal: #1A1813;
    --ink:      #33261A;

    --muted:    #5C5243;
    --brass:    #A07C3F;
    --brass-d:  #876732;
    --line:     rgba(26,24,19,0.16);
    --line-lt:  rgba(240,234,222,0.28);
    --over:     rgba(18,16,12,0.55);
    --over-d:   rgba(18,16,12,0.72);

    --maxw: 1240px;
    --pad:  clamp(4.5rem, 9vw, 9rem);

    --pad-sec: clamp(3.125rem, 4.5vw, 4rem);
    --gutter: clamp(1.25rem, 4vw, 3rem);
    --ease: cubic-bezier(0.33, 0, 0.1, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    background: var(--cream);
    color: var(--ink);
    font-family: 'Jost', system-ui, sans-serif;
    font-weight: 300;
    font-size: clamp(1rem, 1.05vw, 1.1rem);
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1,h2,h3,h4 { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; line-height: 1.1; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--brass); color: #fff; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.center { text-align: center; }

.eyebrow { font-family: 'Jost', sans-serif; font-weight: 500; font-size: 0.78rem;
    letter-spacing: 0.32em; text-transform: uppercase; color: var(--brass); }
.eyebrow__hi { color: var(--ink); font-weight: 700; }

.s-title { font-size: clamp(2.1rem, 4.6vw, 3.7rem); font-weight: 500; margin-top: 1rem; letter-spacing: 0.01em; }
.s-sub { color: var(--muted); max-width: 54ch; margin: 1.2rem auto 0; font-size: 1.08rem; }
.rule { width: 54px; height: 1px; background: var(--brass); margin: 1.6rem auto 0; }

.btn { display: inline-flex; align-items: center; gap: 0.6rem; font-family: 'Jost', sans-serif; font-weight: 400;
    font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 1rem 2rem;
    border: 1px solid currentColor; cursor: pointer; background: transparent; transition: .3s var(--ease); }
.btn--brass { background: var(--brass); color: #fff; border-color: var(--brass); }
.btn--brass:hover { background: var(--brass-d); border-color: var(--brass-d); }
.btn--ghost { color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--cream); }
.btn--light { color: #fff; }
.btn--light:hover { background: #fff; color: var(--ink); }

.btn--brass-o { color: #fff; border-color: var(--brass); border-width: 2px;

    background: rgba(160,124,63,0.78); }
.btn--brass-o:hover { background: var(--brass); border-color: var(--brass); color: #fff; }
.btn--icon-only { padding: 0.8rem 1rem; font-size: 1.1rem; line-height: 1; }

.hdr { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; transition: background .4s var(--ease), border-color .4s; border-bottom: 1px solid transparent; }
.hdr__in { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); height: 82px;
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 1.4rem; letter-spacing: 0.16em; color: #fff; transition: color .4s; }
.brand__line { display: block; width: 58px; height: 1.25px; background: var(--brass); margin: 6px auto 0; }
.nav { display: flex; align-items: center; gap: 2.1rem; }
.nav a { font-family: 'Jost', sans-serif; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.96); transition: color .3s; position: relative; }

.nav a::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 100%; height: 2px; background: var(--brass);
    clip-path: inset(0 100% 0 0); transition: clip-path .3s var(--ease); }
.nav a:hover::after { clip-path: inset(0 0 0 0); }
.nav a:hover { color: #fff; }

.nav__cta { border: 1px solid rgba(255,255,255,0.6); padding: 0.55rem 1.15rem; font-weight: 400;
    transition: background .3s, border-color .3s, color .3s; }
.nav__cta::after { content: none; }
.nav__cta:hover { background: var(--brass); border-color: var(--brass); color: #fff; }

.hdr.solid .nav a.nav__cta { border-color: var(--brass); color: var(--brass); }
.hdr.solid .nav a.nav__cta:hover { background: var(--brass); color: #fff; }
.burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.burger span { width: 26px; height: 2px; background: #fff; transition: .3s; }

.hdr.solid { background: var(--cream); border-bottom-color: var(--line); }
.hdr.solid .brand { color: var(--ink); }
.hdr.solid .nav a { color: #5A4E3D; }
.hdr.solid .nav a:hover { color: var(--ink); }
.hdr.solid .burger span { background: var(--ink); }

.hero { position: relative; height: 100vh; min-height: 620px; display: grid; place-items: center; text-align: center; overflow: hidden; }
.hero__bg { position: absolute; inset: 0;
    background-size: cover; background-position: center; background-attachment: fixed; z-index: 0; }
.hero__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,16,12,0.55), rgba(18,16,12,0.35) 40%, rgba(18,16,12,0.7)); }
.hero__c { position: relative; z-index: 2; color: #fff; padding: 0 var(--gutter);

    max-width: 100%; }
.hero__eyebrow { font-family: 'Jost', sans-serif; font-weight: 500; font-size: 0.82rem; letter-spacing: 0.42em; text-transform: uppercase; color: rgba(255,255,255,0.86); }
.hero__title { font-family: 'Playfair Display', serif; font-weight: 600; font-size: clamp(2.6rem, 9vw, 8rem); letter-spacing: 0.06em; margin: 1.2rem 0; line-height: 1; }
.hero__line { width: clamp(70px, 20.8vw, 220px); height: 1.5px; background: var(--brass); margin: 0 auto 1.5rem; }
.hero__sub { font-size: 1.1rem; letter-spacing: 0.05em; color: rgba(255,255,255,0.9); max-width: 46ch; margin: 0 auto 2rem; }

.hero__btns { display: flex; flex-direction: column; align-items: center;
    gap: 0.8rem; margin-top: clamp(2.6rem, 5vh, 3.6rem); }
.hero__cue { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 2; color: rgba(255,255,255,0.7); font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; }
.hero__cue span { display: block; width: 1px; height: 34px; background: rgba(255,255,255,0.5); margin: 0.6rem auto 0; }

.section { padding-top: var(--pad); padding-bottom: var(--pad); scroll-margin-top: 55px; }

#szolgaltatasok, #munkak, #rolunk {
    padding-top: var(--pad-sec); padding-bottom: var(--pad-sec); }
.section--cream2 { background: var(--cream-2); }
.section__head { max-width: 720px; margin: 0 auto clamp(3rem, 6vw, 5rem); }

.band { position: relative; height: clamp(300px, 46vh, 480px); display: grid; place-items: center; text-align: center; overflow: hidden; }
.band__bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-attachment: fixed; z-index: 0; }
.band__bg::after { content: ''; position: absolute; inset: 0; background: var(--over-d); }
.band__bg--xeno { background-position: center 22%; }

.band__bg--hangya { background-position: center 55%; }

.band__bg--alkotok { background-position: center 10%; }
.band__c { position: relative; z-index: 2; color: #fff; padding: 0 var(--gutter); }

.band__bg.roll { inset: auto 0 auto 0; top: -25%; height: 150%; background-attachment: scroll; will-change: transform; }
.band--people { height: clamp(400px, 58vh, 580px); }
.band--people .band__bg::after { background: linear-gradient(180deg, rgba(18,16,12,0.28), rgba(18,16,12,0.52)); }
.band__eyebrow { font-family: 'Jost', sans-serif; font-weight: 500; font-size: 0.8rem; letter-spacing: 0.34em; text-transform: uppercase; color: rgba(255,255,255,0.82); }
.band__title { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 4vw, 3rem); margin-top: 0.8rem; }
.band__note { margin-top: 1rem; color: rgba(255,255,255,0.72); font-size: 0.95rem; }
.band__ph { display: inline-block; margin-top: 1.2rem; border: 1px dashed rgba(255,255,255,0.5); padding: 0.4rem 0.9rem; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.8); }

.svcs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 4rem); }
.svc { text-align: center; }
.svc__no { font-family: 'Playfair Display', serif; font-style: italic; color: var(--brass); font-size: 1.4rem; }
.svc__t { font-size: clamp(1.4rem, 2.2vw, 1.9rem); margin: 0.8rem 0 1rem; }
.svc__d { color: var(--muted); }
.svc + .svc { position: relative; }
.svc + .svc::before { content: ''; position: absolute; left: calc(clamp(2rem,4vw,4rem) / -2); top: 10%; height: 80%; width: 1px; background: var(--line); }

#technologia { padding-top: clamp(3rem, 5.5vw, 4.5rem); padding-bottom: clamp(3rem, 5.5vw, 4.5rem); }
#technologia .section__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
#technologia .s-title { font-size: clamp(1.8rem, 3.4vw, 2.8rem); }
.techs { --node: 46px; display: grid; grid-template-columns: repeat(5, 1fr);
    gap: clamp(1.6rem, 3vw, 2.8rem); position: relative; }

.tech { text-align: center; position: relative; }
.tech:not(:last-child)::after { content: ''; position: absolute; top: calc(var(--node) / 2);
    left: 50%; width: calc(100% + clamp(1.6rem, 3vw, 2.8rem)); height: 1px; background: var(--line); }

.tech:first-child::before { content: ''; position: absolute; top: calc(var(--node) / 2);
    left: 0; width: 50%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--line)); }

.tech__no { position: relative; z-index: 1;
    width: var(--node); height: var(--node); margin: 0 auto; border: 1px solid var(--brass);
    border-radius: 50%; background: var(--cream); color: var(--brass);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.1rem; line-height: 1;

    padding-right: 0.18em; padding-bottom: 0.12em;
    transition: background .3s var(--ease), color .3s var(--ease); }

.tech:nth-child(5) .tech__no { padding-right: 0.32em; }
.tech:hover .tech__no { background: var(--brass); color: var(--cream); }

.tech__t { font-size: clamp(1.2rem, 1.6vw, 1.45rem); margin: 1rem 0 0.6rem; min-height: 2.2em; }

.tech__k { list-style: none; color: var(--muted); font-size: 1rem; line-height: 1.55; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.6rem, 1.2vw, 1rem); }

.cell { position: relative; overflow: hidden; cursor: pointer; aspect-ratio: 3 / 4; background: var(--cream-2);
    border-radius: 3px; }
.cell img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease), filter .5s; }
.cell:hover img { transform: scale(1.06); }

.cell[data-project="xenomorph"] img,
.cell[data-project="predator"] img,
.cell[data-project="facehugger"] img { object-position: center 22%; }
.cell[data-project="hr-giger-tron"] img { object-position: center 8%; }
.cell[data-project="pincerhal"] img { object-position: center 10%; }
.cell[data-project="vizilo"] img { transform: scaleX(-1); }
.cell[data-project="xenomorph"] img,
.cell[data-project="facehugger"] img { transform: scale(1.08); }

.cell[data-project="xenomorph"]:hover img,
.cell[data-project="facehugger"]:hover img { transform: scale(1.145); }
.cell[data-project="vizilo"]:hover img { transform: scaleX(-1) scale(1.06); }

.cell--landscape { aspect-ratio: 4 / 3; }

.cell__ov { position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: flex-start; justify-content: flex-end; text-align: left;
    padding: 1.2rem; color: #fff;

    background: linear-gradient(180deg, transparent 32%, rgba(18,16,12,0.82));
    transition: background .4s var(--ease); }
.cell:hover .cell__ov { background: linear-gradient(180deg, rgba(18,16,12,0.14) 15%, rgba(18,16,12,0.92)); }

.cell__t { font-family: 'Playfair Display', serif; font-size: clamp(1.2rem, 1.9vw, 1.6rem); line-height: 1.18; }

.cell__cat { font-family: 'Jost', sans-serif; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.82); margin-bottom: 0.2rem; }

.cell__line { width: 28px; height: 1px; background: var(--brass); margin: 0.5rem 0 0; }
.cell.is-hidden { display: none; }
.work-more { text-align: center; margin-top: clamp(2rem, 4vw, 3rem); }

.about { max-width: 760px; margin: 0 auto; text-align: center; }

.about p { margin: 1.15rem auto 0; max-width: 58ch; color: var(--muted); text-wrap: balance; }
.about p:first-of-type { margin-top: 0; color: var(--ink); font-size: 1.08rem; }

.about .about__hit { color: var(--ink); font-weight: 500; }

.about p.about__close { margin-top: clamp(2.4rem, 5vw, 3.4rem); color: var(--ink); }
.about .about__big { font-family: 'Playfair Display', serif; font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2.4rem); letter-spacing: 0.06em; color: var(--ink); margin-top: 1.5rem; }
.info__note { display: block; color: var(--muted); font-size: 0.85rem; margin-top: 0.15rem; }

.contact { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.info__row { padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.info__row:first-of-type { border-top: 1px solid var(--line); }
.info__k { font-family: 'Jost', sans-serif; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass); }
.info__v { margin-top: 0.25rem; }
.info__v a:hover { color: var(--brass); }

.voice { margin-top: 1.97rem; margin-bottom: 2.2rem; padding: 1.8rem; background: var(--charcoal); color: var(--cream); }
.voice__t { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: #fff; }
.voice__d { color: rgba(240,234,222,0.72); margin: 0.6rem 0 1.3rem; font-size: 0.96rem; }
.voice__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; }
.voice__or { align-self: center; color: rgba(240,234,222,0.6); font-size: 0.85rem; font-style: italic; }

.vbtn { display: inline-flex; flex-direction: column; gap: 0.1rem; border: 1px solid rgba(240,234,222,0.4); padding: 0.7rem 1.15rem;
    transition: background .12s var(--ease), color .12s var(--ease), border-color .3s var(--ease); }
.vbtn b { font-family: 'Jost', sans-serif; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.82rem; }
.vbtn small { color: rgba(240,234,222,0.6); font-size: 0.78rem; transition: color .12s var(--ease); }
.vbtn:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.vbtn:hover small { color: var(--muted); }
.vbtn--pri { background: var(--brass); border-color: var(--brass); color: #fff; }
.vbtn--pri small { color: rgba(255,255,255,0.75); }
.vbtn--pri:hover { background: var(--brass-d); border-color: var(--brass-d); color: #fff; }

.vbtn--pri:hover small { color: rgba(255,255,255,0.75); }

.form-eyebrow { font-family: 'Jost', sans-serif; font-weight: 500; font-size: 0.78rem;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass); margin-bottom: 0.9rem; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 1.3rem;
    background: #FCFAF5; border: 1px solid var(--line); border-top: 3px solid var(--brass);
    box-shadow: 0 16px 44px rgba(26,24,19,0.12); padding: clamp(1.5rem, 3vw, 2.5rem); }
.form .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-family: 'Jost', sans-serif; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.field label i { color: var(--brass); font-style: normal; }
.field input, .field select, .field textarea { background: #fff; border: 1px solid #CFC6B2; border-radius: 3px;
    padding: 0.82rem 0.9rem; font-family: 'Jost', sans-serif; font-weight: 300; font-size: 1rem; color: var(--ink);
    transition: border-color .2s, box-shadow .2s; }
.field input::placeholder, .field textarea::placeholder { color: #A79D8B; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(160,124,63,0.16); }
.field textarea { min-height: 120px; resize: vertical; }
.field select { appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23A07C3F' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.9rem center; padding-right: 2.2rem; }

.biglink { grid-column: 1 / -1; margin-top: -0.35rem; }

.biglink__sum { display: inline-flex; align-items: baseline; gap: 0.45rem; cursor: pointer;
    background: none; border: 0; padding: 0.15rem 0; font-family: 'Jost', sans-serif;
    font-size: 0.86rem; font-weight: 500; color: var(--ink); text-align: left; }
.biglink__sum::before { content: '–'; color: var(--brass); font-weight: 400; }
.biglink__sum[aria-expanded="false"]::before { content: '+'; }
.biglink__sum:hover { color: var(--brass); }
.biglink__sum:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

.biglink--js .biglink__body { display: grid; grid-template-rows: 1fr;
    transition: grid-template-rows .32s var(--ease); }
.biglink--js.is-closed .biglink__body { grid-template-rows: 0fr; }
.biglink--js .biglink__inner { overflow: hidden; }

.biglink .field { margin-top: 0.5rem; gap: 0.3rem; }
.biglink .field label { text-transform: none; letter-spacing: 0; font-weight: 300;
    font-size: 0.86rem; color: var(--muted); }
.biglink .field input { padding: 0.6rem 0.75rem; font-size: 0.92rem; }
.biglink__ext { color: var(--brass); border-bottom: 1px solid rgba(160,124,63,0.35); transition: border-color .2s; }
.biglink__ext:hover { border-bottom-color: var(--brass); }

.biglink .field:has(> #bigLinkMsg:not([hidden])) {
    border-left: 3px solid var(--brass); background: rgba(160,124,63,0.09);
    padding: 0.85rem 1rem; gap: 0.5rem;
}

.biglink .field:has(> #bigLinkMsg:not([hidden])) > label {
    display: none;
}
#bigLinkMsg { margin: 0; padding: 0; border: 0; background: none;
    font-family: 'Jost', sans-serif; font-size: 0.92rem; color: var(--ink); }

.form__msg { grid-column: 1 / -1; margin-top: 0.2rem; padding: 0.85rem 1rem;
    border-left: 3px solid var(--brass); background: rgba(160,124,63,0.09);
    font-family: 'Jost', sans-serif; font-size: 0.92rem; color: var(--ink); }
.field.is-missing input, .field.is-missing select, .field.is-missing textarea {
    border-color: var(--brass); background: rgba(160,124,63,0.05); }

.drop { grid-column: 1 / -1; position: relative; border: 1.5px dashed #C6BCA4; background: #fff;
    padding: 1.1rem 1.2rem; display: flex; align-items: center; gap: 0.9rem; cursor: pointer; transition: .2s; }
.drop:hover { border-color: var(--brass); background: rgba(160,124,63,0.06); }
.drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop__ic { width: 32px; height: 32px; border: 1px solid var(--brass); color: var(--brass); display: grid; place-items: center; flex: none; font-size: 1rem; }

.drop__copy { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.drop__rec { display: block; font-family: 'Jost', sans-serif; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); line-height: 1.3; }
.drop__t { display: block; font-family: 'Jost', sans-serif; font-size: 1.05rem; font-weight: 500; line-height: 1.3; }
.drop__s { display: block; color: var(--muted); font-size: 0.85rem; line-height: 1.4; }
.drop__more { display: none; color: var(--muted); font-size: 0.85rem; }
.drop--vantetel .drop__copy { display: none; }
.drop--vantetel .drop__more { display: block; }

.filelist { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 0.3rem; }
.filelist:empty { display: none; }
.filelist__row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
    font-size: 0.88rem; color: var(--ink); padding: 0.15rem 0; border-bottom: 1px solid var(--line); }
.filelist__row:last-child { border-bottom: none; }
.filelist__name { overflow-wrap: anywhere; }
.filelist__x { appearance: none; border: none; background: none; padding: 0.1rem 0.3rem; flex: none;
    color: var(--brass); font-size: 0.95rem; line-height: 1; cursor: pointer; font-family: inherit; }
.filelist__x:hover { color: var(--brass-d); }

.form__captcha { grid-column: 1 / -1; }
.form__captcha.is-latszik { padding-bottom: 0.75rem; }
.form__sub { grid-column: 1/-1; margin-top: 0.4rem;
    display: grid; grid-template-columns: auto 1fr; align-items: center;
    column-gap: 1.3rem; row-gap: 0.75rem; }

.form__reply { font-family: 'Jost', sans-serif; font-size: 0.88rem;
    color: var(--brass); font-weight: 500; line-height: 1.45; }
.form__reply strong { color: inherit; font-weight: inherit; }
.form__fine { grid-column: 1 / -1; color: var(--muted); font-size: 0.8rem;
    line-height: 1.5; max-width: 62ch; }

@media (max-width: 560px) {
    .form__sub { grid-template-columns: 1fr; }
    .form__sub .btn { width: 100%; text-align: center; }
}

#kapcsolat { padding-top: var(--pad-sec); padding-bottom: var(--pad-sec);
    scroll-margin-top: calc(92px - var(--pad-sec)); }
#kapcsolat .section__head { margin-bottom: clamp(0.5rem, 1.2vh, 1rem); }
#kapcsolat .s-title { font-size: clamp(1.8rem, 3.4vw, 2.8rem); }
#kapcsolat .rule { margin-top: 0.6rem; }
#kapcsolat .contact { gap: clamp(1.4rem, 3.2vw, 3.2rem); align-items: stretch; }
#kapcsolat .contact > .rv { display: flex; flex-direction: column; }
#kapcsolat .form { flex: 1; }

#kapcsolat .info { margin-top: 1.6rem; }
#kapcsolat .info__row { display: grid; grid-template-columns: 104px 1fr;
    align-items: baseline; column-gap: 1.2rem; padding: 0.95rem 0; }
#kapcsolat .info__row:last-child { border-bottom: 0; }
#kapcsolat .info__k { color: var(--brass); font-size: 0.7rem; letter-spacing: 0.22em; }
#kapcsolat .info__v { margin-top: 0; font-size: 1.1rem; font-weight: 400;
    color: var(--ink); line-height: 1.35; }
#kapcsolat .info__note { margin-top: 0.3rem; font-size: 0.82rem; }

@media (max-width: 560px) {
    #kapcsolat .info__row { grid-template-columns: 1fr; row-gap: 0.25rem; }
}

#kapcsolat .voice { display: flex; flex-direction: column; justify-content: flex-start;
    padding: 1.15rem 1.3rem; }
#kapcsolat .voice__d { margin: 0.5rem 0 1rem; }
#kapcsolat .form-eyebrow { margin-bottom: 0.6rem; }
#kapcsolat .form { gap: 0.75rem 1.1rem; padding: clamp(1.1rem, 2.2vw, 1.7rem); }
#kapcsolat .field { gap: 0.3rem; }
#kapcsolat .field input, #kapcsolat .field select, #kapcsolat .field textarea { padding: 0.6rem 0.8rem; }
#kapcsolat .field textarea { min-height: 98px; }
#kapcsolat .drop { padding: 0.9rem 1rem; }
#kapcsolat .form__sub { gap: 0.8rem 1.1rem; margin-top: 0.2rem; }
#kapcsolat .form__captcha + .form__sub { margin-top: calc(0.2rem - 0.75rem); }

.foot { background: var(--charcoal); color: var(--cream); text-align: center; padding: clamp(3rem, 6vw, 5rem) var(--gutter); }
.foot__brand { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 2rem; letter-spacing: 0.16em; color: #fff; }
.foot__sub { font-family: 'Jost', sans-serif; font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(240,234,222,0.6); margin-top: 0.5rem; }
.foot__line { width: 54px; height: 1px; background: var(--brass); margin: 1.6rem auto; }
.foot__contact { color: rgba(240,234,222,0.8); font-size: 0.95rem; line-height: 2; }
.foot__contact a:hover { color: #fff; }
.foot__cr { margin-top: 2rem; font-size: 0.78rem; color: rgba(240,234,222,0.45); letter-spacing: 0.06em; }
.foot__cr a { color: rgba(240,234,222,0.72); }
.foot__cr a:hover { color: #fff; }

.lb { position: fixed; inset: 0; z-index: 1000; display: none; }
.lb.open { display: block; }
.lb__bg { position: absolute; inset: 0; background: rgba(14,12,9,0.95); }
.lb__panel { position: absolute; inset: 0; display: flex; flex-direction: column; padding: clamp(1rem,2.5vw,2rem); }
.lb__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; color: var(--cream); }
.lb__t { font-family: 'Playfair Display', serif; font-size: clamp(1.3rem,2.4vw,2rem); }
.lb__c { font-family: 'Jost', sans-serif; font-size: 0.78rem; letter-spacing: 0.16em; color: rgba(240,234,222,0.6); margin-top: 0.3rem; }
.lb__x { background: none; border: 1px solid rgba(240,234,222,0.4); color: var(--cream); width: 46px; height: 46px; cursor: pointer; font-size: 1.2rem; transition: .25s; }
.lb__x:hover { background: var(--cream); color: var(--ink); }
.lb__stage { flex: 1; display: flex; align-items: center; justify-content: center; gap: 1rem; min-height: 0; }
.lb__coverflow { position: relative; flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }

.lb__slide { position: absolute; max-height: 94%; max-width: 62%; object-fit: contain; box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    transition: transform .15s var(--ease), opacity .12s linear; will-change: transform, opacity; }
.lb__slide.is-c { cursor: default; }

.lb__coverflow.is-huzas .lb__slide { transition: none; }

.lb { overscroll-behavior: contain; }
.lb__slide:not(.is-c) { cursor: pointer; }

.lb__arr { background: none; border: 1px solid rgba(240,234,222,0.4); color: var(--cream); width: 50px; height: 64px; cursor: pointer; font-size: 1.5rem; flex: none; transition: .25s; }
.lb__arr:hover { background: var(--cream); color: var(--ink); }

@media (max-width: 620px), (hover: none) and (pointer: coarse) {
    .lb__arr { display: none; }

    .lb__slide { width: 100%; height: 100%; max-width: none; max-height: none;
        box-shadow: none; }

    .lb__panel { padding: 12px 10px; }
}

.lb__foot { display: flex; justify-content: center; justify-content: safe center;
    gap: 0.5rem; overflow-x: auto; margin-top: 1rem; }
.lb__foot img { height: 54px; opacity: 0.4; cursor: pointer; border: 1px solid transparent; transition: .25s; flex: none; }
.lb__foot img.active, .lb__foot img:hover { opacity: 1; border-color: var(--brass); }

.work-cta { text-align: center; margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); }
.work-cta__t { font-family: 'Playfair Display', serif; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.2; }
.work-cta__s { color: var(--muted); margin: 0.8rem auto 1.7rem; max-width: 48ch; text-wrap: balance; }

.work-cta .btn,
.hero__btns .btn--brass-o { position: relative; }

.work-cta .btn::after,
.hero__btns .btn--brass-o::after { content: ''; position: absolute; left: 2rem; right: 2rem;
    bottom: 0.7rem; height: 2px; background: var(--cream);
    clip-path: inset(0 100% 0 0); transition: clip-path .3s var(--ease); }
.work-cta .btn:hover::after,
.hero__btns .btn--brass-o:hover::after { clip-path: inset(0 0 0 0); }

.mcta { display: none; }

.rv { opacity: 0; transform: translateY(20px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .rv { opacity: 1 !important; transform: none !important; }

    .cell:hover img { transform: none; }
    .cell[data-project="vizilo"]:hover img { transform: scaleX(-1); }
    .cell[data-project="xenomorph"]:hover img,
    .cell[data-project="facehugger"]:hover img { transform: scale(1.08); }

    .hero__bg, .band__bg { background-attachment: scroll; }
}

@media (max-width: 900px) {
    .svcs { grid-template-columns: 1fr; gap: 2.5rem; }
    .svc + .svc::before { display: none; }

    .techs { grid-template-columns: 1fr; gap: 1.9rem; }

    .tech:not(:last-child)::after { top: calc(var(--node) / 2); left: calc(var(--node) / 2);
        width: 1px; height: calc(100% + 1.9rem); }

    .tech:first-child::before { top: -1.6rem; left: calc(var(--node) / 2); width: 1px;
        height: calc(1.6rem + var(--node) / 2);
        background: linear-gradient(180deg, transparent, var(--line)); }
    .tech { text-align: left; padding-left: calc(var(--node) + 1.1rem); min-height: var(--node); }
    .tech__no { position: absolute; left: 0; top: 0; margin: 0; }

    .tech__t { margin: 0.15rem 0 0.4rem; min-height: 0; }

    .tech__k li { display: inline; }
    .tech__k li:not(:last-child)::after { content: ' · '; }
    .grid { grid-template-columns: 1fr 1fr; }
    .contact { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {

    .nav { display: flex; flex-direction: column; align-items: center; gap: 1.4rem;
        position: absolute; top: 82px; left: 0; width: 100%; background: var(--charcoal); padding: 2rem 0;
        opacity: 0; visibility: hidden; pointer-events: none;
        transition: opacity .12s var(--ease), visibility 0s .12s; }
    .nav.open { opacity: 1; visibility: visible; pointer-events: auto;
        transition: opacity .12s var(--ease), visibility 0s; }
    .nav a { color: rgba(255,255,255,0.96); }
    .burger { display: flex; }

    .hdr.menu-open { background: var(--charcoal); border-bottom-color: transparent;
        transition: background .25s var(--ease), border-color .25s; }
    .hdr.menu-open .brand { color: #fff; }
    .hdr.menu-open .nav a { color: rgba(255,255,255,0.96); }
    .hdr.menu-open .burger span { background: #fff; }

    .hdr.menu-open .nav a:hover,
    .hdr.menu-open .nav a:focus,
    .hdr.menu-open .nav a:active { color: #fff; }

    .hdr.menu-open .nav a.nav__cta { border-color: var(--brass); color: #fff; }
    .hdr.menu-open .nav a.nav__cta:hover,
    .hdr.menu-open .nav a.nav__cta:focus,
    .hdr.menu-open .nav a.nav__cta:active {
        background: var(--brass); border-color: var(--brass); color: #fff; }

    .hdr.menu-open,
    .hdr.menu-open .brand,
    .hdr.menu-open .nav a,
    .hdr.menu-open .nav__cta,
    .hdr.menu-open .burger span { transition-duration: .12s; }
}

@media (max-width: 620px) {

    .hero__cue { display: none; }

    .grid { grid-template-columns: 1fr; gap: 4px;
        margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); }

    .cell { border-radius: 0; }
    .cell--landscape { aspect-ratio: 5 / 4; }

    .form { grid-template-columns: 1fr; }

    .hero__bg, .band__bg { background-attachment: scroll; }

    .band { height: clamp(220px, 32vh, 300px); }
    .band--people { height: clamp(300px, 42vh, 420px); }

    .band__bg--xeno { background-position: center 26%; }

    .hero__btns { gap: 0.7rem; }

    .btn--brass-o { background: rgba(160,124,63,0.28); }

    .hero__bg { background-image: url('../assets/predator-hero.jpg'); }
    .hero__bg::after { background: linear-gradient(180deg, rgba(18,16,12,0.25), rgba(18,16,12,0.15) 40%, rgba(18,16,12,0.45)); }

    .hero__c { background: rgba(18,16,12,0.55); padding: 2.2rem 1rem; margin: 0 var(--gutter);
        min-width: 0; max-width: calc(100% - 2 * var(--gutter)); }

    .mcta { display: flex; gap: 0.55rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
        padding: 0.55rem var(--gutter);
        padding-bottom: calc(0.55rem + env(safe-area-inset-bottom, 0px));
        background: rgba(240,234,222,0.97); border-top: 1px solid var(--line);
        transform: translateY(115%); transition: transform .35s var(--ease); }
    .mcta.show { transform: none; }
    .mcta a { flex: 1; text-align: center; font-family: 'Jost', sans-serif; font-weight: 400;
        font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
        padding: 0.85rem 0.4rem; border: 1px solid var(--brass); }
    .mcta__ghost { color: var(--brass); }
    .mcta__btn { background: var(--brass); color: #fff; }

}

@media (max-width: 620px) and (min-height: 760px) {

    .hero__c { margin-top: 10vh; }
}

.fordits { display: none; }

@media (orientation: landscape) and (max-height: 500px) and (hover: none) and (pointer: coarse) {
    .fordits {
        display: grid; place-items: center;
        position: fixed; inset: 0; z-index: 300;
        background: var(--charcoal); color: var(--cream);
        padding: 1.5rem; text-align: center;
    }

    body { overflow: hidden; }
}

.fordits__ph {
    width: 54px; height: auto; color: var(--brass);
    transform-origin: 50% 50%;
    animation: szg-fordul 2.8s var(--ease) infinite;
}
.fordits__t {
    margin: 1.4rem 0 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.5rem; font-weight: 500; letter-spacing: 0.01em;
}
.fordits__s {
    margin: 0.45rem 0 0;
    font-size: 0.85rem; letter-spacing: 0.02em;
    color: rgba(240,234,222,0.72);
}

@keyframes szg-fordul {
    0%, 18%   { transform: rotate(-90deg); }
    42%, 72%  { transform: rotate(0deg); }
    96%, 100% { transform: rotate(-90deg); }
}

@media (prefers-reduced-motion: reduce) {

    .fordits__ph { animation: none; transform: rotate(0deg); }
}

@media (hover: none) and (pointer: coarse) {
    .hero__bg, .band__bg { background-attachment: scroll; }
}

.lb__slide--div {
    height: 94%;
    aspect-ratio: 3 / 4;
    max-width: 62%;
    max-height: 94%;
    width: auto;
    perspective: 2000px;
    background: none;
    box-shadow: none;
}

.lb__flip {

    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform .38s cubic-bezier(.22, .8, .28, 1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}
.lb__slide--div.forditva .lb__flip { transform: rotateY(180deg); }

.lb__lap {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
    background: var(--ink);
}

.lb__lap--elol { background: var(--ink); }
.lb__lap--elol img { width: 100%; height: 100%; display: block; object-fit: contain; }

.lb__lap--hatul {
    transform: rotateY(180deg);
    background-color: #1A1813;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%201600%27%20preserveAspectRatio%3D%27none%27%3E%3Crect%20x%3D%2755%27%20y%3D%2755%27%20width%3D%271090%27%20height%3D%271490%27%20fill%3D%27none%27%20stroke%3D%27%23A07C3F%27%20stroke-width%3D%272%27%2F%3E%3Crect%20x%3D%2769%27%20y%3D%2769%27%20width%3D%271062%27%20height%3D%271462%27%20fill%3D%27none%27%20stroke%3D%27%2368522C%27%20stroke-width%3D%271%27%2F%3E%3Cpath%20d%3D%27M43%2055%20H23%20M55%2043%20V23%20M1157%2055%20H1177%20M1145%2043%20V23%20M43%201545%20H23%20M55%201557%20V1577%20M1157%201545%20H1177%20M1145%201557%20V1577%27%20stroke%3D%27%2368522C%27%20stroke-width%3D%272%27%20fill%3D%27none%27%2F%3E%3C%2Fsvg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.lb__adatlap {
    position: absolute;
    top: 6.6%; bottom: 6.6%;
    left: 8.4%; right: 8.4%;
    overflow-y: auto;
    overscroll-behavior: contain;
    text-align: left;
}

.lb__adatlapBelso {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    transform-origin: top left;
}

.lb__adatlap:focus,
.lb__adatlap:focus-visible { outline: none; }

.lb__adatlap h3 {
    margin: .5rem 0 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 400;
    font-size: clamp(1.45rem, 5.2vw, 2.25rem);
    line-height: 1.1;
    letter-spacing: .01em;
    color: var(--cream);
}
.lb__kiskep {
    margin: 0;
    font-size: .56rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--brass);
    font-weight: 500;
}
.lb__adatvonal { display: block; width: 88px; height: 2px; background: var(--brass); margin: .85rem 0 0; }

.lb__adatcim {
    margin: 1.6rem 0 .55rem;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #C79A55;
}
.lb__adatcim--kis {
    font-family: inherit;
    font-size: .56rem;
    font-weight: 500;
    letter-spacing: .22em;
    margin: 0 0 .25rem;
}

.lb__sztori { margin: 0 0 .8rem; font-size: .86rem; line-height: 1.75; color: #C2B8A6; }
.lb__sztori:last-child { margin-bottom: 0; }

.lb__sztori strong { font-weight: 500; color: var(--cream); }

.lb__stab { margin-top: auto; padding-top: 1.4rem; }

.lb__keszitok { margin: 0; padding: 0; list-style: none; }

.lb__keszito {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: .5rem 0;
    border-top: 1px solid rgba(160, 124, 63, .14);
}

.lb__keszito__szerep {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .6rem;
    letter-spacing: .1em;
    line-height: 1.5;
    text-transform: uppercase;
    color: #8E8474;
    font-weight: 300;
}

.lb__keszito__szerepdb { white-space: nowrap; }

.lb__keszito__szerepsor { display: block; }
.lb__keszito__jobb { flex: 0 0 auto; margin-left: auto; text-align: right; min-width: 0; }
.lb__keszito__nev {
    display: block;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 400;
    font-size: .84rem;
    line-height: 1.3;
    color: #BEB4A3;
}
.lb__keszito__honlap {
    display: block;
    margin-top: .08rem;
    font-size: .7rem;
    line-height: 1.45;
    color: #8E8474;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.lb__keszito__honlap:hover,
.lb__keszito__honlap:focus-visible { color: var(--brass); text-decoration: underline; }

.lb__cim { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
.lb__adat {
    font-family: inherit; font-size: .72rem; letter-spacing: .16em;
    text-transform: uppercase; padding: .58rem 1.05rem; cursor: pointer;
    background: transparent; color: #C79A55;
    border: 1px solid var(--brass); border-radius: 0;
    transition: background .2s, color .2s;
}
.lb__adat:hover { background: var(--brass); color: #17140E; }
.lb__adat[aria-pressed="true"] { background: var(--brass); color: #17140E; }

@media (prefers-reduced-motion: reduce) {

    .lb__flip { transition: none; }
    .lb__slide--div.forditva .lb__flip { transform: none; }
    .lb__lap { transition: opacity .2s linear; }
    .lb__lap--hatul { transform: none; opacity: 0; }
    .lb__slide--div.forditva .lb__lap--elol { opacity: 0; }
    .lb__slide--div.forditva .lb__lap--hatul { opacity: 1; }
}

@media (max-width: 620px), (hover: none) and (pointer: coarse) {
    .lb__slide--div {
        width: 100%;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        aspect-ratio: 3 / 4;
    }

    .lb__adatlap h3 { font-size: 1.35rem; }
    .lb__adatvonal { width: 66px; margin-top: .6rem; }
    .lb__adatcim { margin: 1.1rem 0 .4rem; font-size: .76rem; }
    .lb__adatcim--kis { font-size: .54rem; margin: 0 0 .2rem; }
    .lb__stab { padding-top: 1rem; }

    .lb__keszito { flex-wrap: wrap; gap: 0; padding: .45rem 0; }
    .lb__keszito__szerep { flex: 1 0 100%; }
    .lb__keszito__jobb { width: 100%; margin-left: 0; text-align: left; }
    .lb__keszito__nev { font-size: .8rem; }

    .lb__sztori { font-size: .78rem; line-height: 1.66; }
}