/* Cake Story esküvői landing, 1. kör. A méreteket az üzemeltető állította be a próbaoldalon, 2560 px-es nézetben:
   tartalom 82rem, kép 54%, 4:3, szöveg 1rem, cím 3.375rem, levegő 4.5rem. A gyökérméret 2560 px fölött nő,
   így 4K-n is ugyanaz az arány, alatta 16 px marad. */
:root{
  --sage:#9CA392;--deep:#6F7767;--ink:#2D2D2D;--ink-2:#5F5F5F;--tint:#F1F2ED;--white:#fff;--line:rgba(45,45,45,.16);
  --w:82rem;--pic:54%;--air:4.5rem;--gap:clamp(2rem,5vw,5rem);--edge:1.25rem;--bar:5rem;--hero-min:36rem;
  --title:3.375rem;
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-write:cubic-bezier(.3,.2,.4,1);
}

*,*::before,*::after{box-sizing:border-box}
html{font-size:max(100%,.625vw);-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-block-start:calc(var(--bar) + 1rem);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{margin:0;font-family:'Albert Sans',system-ui,sans-serif;font-size:1rem;line-height:1.65;color:var(--ink);background:var(--white);overflow-wrap:break-word}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,figure,blockquote{margin:0;padding:0}
ul{list-style:none}
h1,h2,.quote{font-family:'Great Vibes',cursive;font-weight:400;line-height:1.15;text-wrap:balance}
h2{font-size:var(--title);color:var(--deep)}
h3{font-size:1.0625rem;font-weight:600;line-height:1.35}
p{text-wrap:pretty}
a{color:inherit;text-underline-offset:.2em}
::selection{background:var(--deep);color:var(--white)}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
[tabindex="-1"]:focus{outline:none}

.skip{position:fixed;inset-inline-start:var(--edge);top:.5rem;z-index:20;padding:.75rem 1.25rem;background:var(--ink);color:var(--white);transform:translateY(-200%)}
.skip:focus{transform:none}

/* Gomb */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;padding:.5rem 1.5rem;background:var(--ink);color:var(--white);font-size:.95rem;font-weight:600;line-height:1.2;text-align:center;text-decoration:none;transition:transform .15s var(--ease-out),background-color .2s,color .2s}
.btn:active{transform:scale(.96)}
.btn--light{background:var(--white);color:var(--ink)}
.btn--line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
@media (hover:hover){
  .btn:hover{background:#000}
  .btn--light:hover{background:var(--tint)}
  .btn--line:hover{background:var(--ink);color:var(--white)}
}
/* A Calendly saját stílusa keskeny nézetben is 700 px-re vágja az ablakot, telefonon alul üres sáv maradna */
@media (max-width:975px){html .calendly-overlay .calendly-popup{max-height:none!important}}

/* Fejléc: a hero fölött átlátszó, a lap fölött fehér, ekkor jön elő benne a logó és a foglalás */
.bar{position:fixed;inset:0 0 auto;z-index:10;height:var(--bar);display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-inline:var(--edge);color:var(--white);transition:background-color .3s,color .3s,box-shadow .3s}
.bar.solid,html:not(.js) .bar{background:var(--white);color:var(--ink);box-shadow:0 1px 0 var(--line)}
.mark{display:block;flex:none;width:4rem;height:4rem;border-radius:50%;background:var(--white);box-shadow:0 0 0 2px var(--white);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.mark img{width:100%;height:100%}
.bar.solid .mark,html:not(.js) .mark{opacity:1;visibility:visible}
.bar-end{display:flex;align-items:center;gap:1rem;min-width:0}
.lang{display:flex;gap:.125rem;font-size:.95rem;font-weight:500}
.lang a{display:flex;align-items:center;justify-content:center;min-width:2.75rem;min-height:2.75rem;text-decoration:none;transition:background-color .15s}
.lang a[aria-current]{text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1px}
@media (hover:hover){.lang a:hover{background:rgba(127,127,127,.22)}}
.bar-cta{opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s,transform .15s var(--ease-out),background-color .2s}
.bar.solid .bar-cta{opacity:1;visibility:visible}

/* Hero: teljes képernyős fotó. A lap ráúszik, mint egy függöny. */
.hero{position:sticky;top:min(0px,calc(100svh - var(--hero-min)));z-index:0;height:max(100svh,var(--hero-min));overflow:hidden;background:var(--deep);color:var(--white);display:grid;place-items:center;text-align:center}
.hero-pic,.hero-veil{position:absolute;inset:0}
.motion .hero-pic{inset:-1.5%;transition:translate 1.4s var(--ease-out)}
.hero-pic img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 28%}
.hero-veil{background:radial-gradient(ellipse 52% 72% at 50% 58%,rgba(30,32,27,.68),rgba(30,32,27,.5) 55%,rgba(30,32,27,.12)),linear-gradient(180deg,rgba(30,32,27,.62),transparent 20%)}
.hero-copy{position:relative;display:grid;justify-items:center;gap:1.125rem;width:min(100% - 2*var(--edge),46rem);padding-block:var(--bar) 1.5rem}
.hero-logo{width:clamp(5rem,12svh,7.5rem);height:auto;border-radius:50%;background:var(--white);box-shadow:0 0 0 3px var(--white)}
h1{font-size:clamp(3.25rem,min(14vw,13svh),6rem);line-height:1.1;text-shadow:0 1px 18px rgba(20,22,18,.35)}
.hero-copy p{max-width:50ch;font-size:1.0625rem;text-shadow:0 1px 10px rgba(20,22,18,.45)}

/* A lap */
.sheet{position:relative;z-index:1;background:var(--white)}
.sheet:focus{outline:none}
.sec{padding-block:var(--air)}
.tint{background:var(--tint)}
.sage{background:var(--sage)}
.sage h2{color:var(--ink)}
.w,.pair{width:min(100% - 2*var(--edge),var(--w));margin-inline:auto}
.narrow{width:min(100% - 2*var(--edge),46rem)}

.pair{display:grid;grid-template-columns:var(--pic) minmax(0,1fr);column-gap:var(--gap);align-items:center}
.pair.flip{grid-template-columns:minmax(0,1fr) var(--pic)}
.pair.flip .ph{order:2}
.txt{display:grid;gap:.875rem;justify-items:start;min-width:0}
.txt>*{max-width:62ch}
.txt h3:not(:first-child){margin-top:.5rem}
.txt .btn{margin-top:.5rem}
.ph{position:relative;overflow:hidden;aspect-ratio:4/3;background:#e9e8e1}
.ph img{position:absolute;left:0;top:-8%;width:100%;height:116%;max-width:none;object-fit:cover;object-position:var(--pos,50% 50%)}
.quote{width:fit-content;max-width:min(100% - 2*var(--edge),58rem);margin:var(--air) auto 0;font-size:4rem;line-height:1.2;color:var(--deep);text-align:center}

.topics-box{display:grid;gap:1.25rem;margin-top:var(--air)}
.topics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem var(--gap)}
.topics li{display:flex;gap:.625rem;line-height:1.45}
.icon{flex:none;width:1.25rem;height:1.25rem;margin-top:.05rem;color:var(--deep)}

.sage .narrow{display:grid;gap:.875rem;text-align:center;justify-items:center}

.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem var(--gap);margin-top:2rem}
.three li{display:grid;gap:.5rem;align-content:start}
figure{display:grid;gap:.875rem}
figcaption{font-size:.9375rem;color:var(--ink-2)}
figcaption strong{display:block;color:var(--ink);font-weight:600}

/* A kollekció sávja: a görgetéssel együtt oldalra úszik */
.coll h2{text-align:center}
.strip{margin-top:2.5rem;overflow-x:auto;scrollbar-width:none;--h:min(52svh,40rem)}
.strip::-webkit-scrollbar{display:none}
.strip-row{display:flex;gap:1rem;width:max-content;padding-inline:var(--edge)}
.strip img{height:var(--h);width:auto;max-width:none;background:#e9e8e1}
.coll-txt{margin-top:2.5rem;display:grid;gap:2rem}
.lead{max-width:62ch;margin-inline:auto;text-align:center}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem var(--gap)}
.two>div{display:grid;gap:.5rem;align-content:start}

/* GYIK */
.faq{margin-top:1.5rem;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;gap:1rem;align-items:center;min-height:3.5rem;padding-block:.75rem;font-weight:600;line-height:1.35;cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:.5625rem;height:.5625rem;margin-inline-end:.25rem;border-right:1.5px solid var(--deep);border-bottom:1.5px solid var(--deep);transform:translateY(-25%) rotate(45deg);transition:transform .2s var(--ease-out)}
.faq details[open]>summary::after{transform:translateY(25%) rotate(225deg)}
.faq details p{padding-bottom:1.25rem;max-width:68ch}
.narrow>h2{text-align:center}

.final-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:.5rem}

/* Lábléc */
.foot{position:relative;z-index:1;padding-block:3rem 1.5rem;background:var(--white)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem var(--gap)}
.foot-brand{display:flex;gap:1.25rem;align-items:center}
.foot-brand img{flex:none;width:5.5rem;height:5.5rem}
.foot h2{margin-bottom:.25rem;font-family:inherit;font-size:1rem;font-weight:600;line-height:1.3;color:var(--ink)}
.foot a{display:inline-flex;align-items:center;min-height:2.75rem}
.foot-legal{grid-column:1/-1;padding-top:1.25rem;border-top:1px solid var(--line);color:var(--ink-2);font-size:.9375rem;text-align:center}

/* ---- Mozgás: csak JS-sel és nem csökkentett mozgásnál (a .motion a fejben kerül fel) ---- */
/* A címek kiíródnak: a toll balról jobbra halad, puha széllel. Ez az oldal saját mozdulata. */
.motion .sc,.motion h1{padding:.22em .3em;margin:-.22em -.3em}
.motion .sc:not(.done){-webkit-mask:linear-gradient(90deg,#000 calc(100% - 3em),transparent) left center/0 100% no-repeat;mask:linear-gradient(90deg,#000 calc(100% - 3em),transparent) left center/0 100% no-repeat;transition:-webkit-mask-size 1.7s var(--ease-write),mask-size 1.7s var(--ease-write)}
.motion .sc.in:not(.done){-webkit-mask-size:calc(100% + 3em) 100%;mask-size:calc(100% + 3em) 100%}
.w>.sc{width:fit-content}
.motion .quote.sc{margin:var(--air) auto 0;padding:.22em .3em}
.narrow>.sc,.coll .sc{width:fit-content;margin-inline:auto}
.motion .pair .sc:not(.done){transition-delay:.2s}

/* A fotó oldalról nyílik ki, közben a kép enyhén visszahúzódik */
.motion .ph{clip-path:inset(0 100% 0 0);transition:clip-path 1.25s var(--ease-out)}
.motion .flip .ph{clip-path:inset(0 0 0 100%)}
.motion .ph.in{clip-path:inset(0 0 0 0)}
.motion .tint .ph:not(.in){clip-path:inset(100% 0 0 0)}
.motion .ph img{scale:1.14;transition:scale 1.7s var(--ease-out)}
.motion .ph.in img{scale:1}

/* A szöveg a cím után, hullámban érkezik */
.motion .stag>:not(.sc){opacity:0;transform:translateY(2.5rem);transition:opacity 1s var(--ease-out),transform 1.3s var(--ease-out);transition-delay:var(--d,0ms)}
.motion .stag.in>:not(.sc){opacity:1;transform:none}
/* Érkezés után a gomb a saját, gyors állapotaira vált vissza */
.motion .stag.in.kesz>.btn{transition:transform .15s var(--ease-out),background-color .2s,color .2s;transition-delay:0ms}
.motion .stag.in.kesz>.btn:active{transform:scale(.96)}

/* Egérre a fotó lassan közelebb jön */
@media (hover:hover) and (pointer:fine){
  .motion .ph.in:hover img{scale:1.05}
}

/* Betöltés: egyszer, a hero a lap első pillanata */
@media (prefers-reduced-motion:no-preference){
  .motion .hero-pic img{animation:settle 3s var(--ease-out) both}
  .motion .hero-logo{animation:arrive 1.2s var(--ease-out) both}
  .motion h1{animation:write 1.9s var(--ease-write) .15s both}
  .motion .hero-copy p{animation:arrive 1.2s var(--ease-out) .75s both}
  .motion .hero-copy .btn{animation:arrive 1.2s var(--ease-out) .9s both}
}
@keyframes settle{from{transform:scale(1.09)}to{transform:scale(1)}}
@keyframes arrive{from{opacity:0;transform:translateY(1.5rem)}to{opacity:1;transform:none}}
@keyframes write{from{-webkit-mask:linear-gradient(90deg,#000 calc(100% - 3em),transparent) left center/0 100% no-repeat;mask:linear-gradient(90deg,#000 calc(100% - 3em),transparent) left center/0 100% no-repeat}to{-webkit-mask:linear-gradient(90deg,#000 calc(100% - 3em),transparent) left center/calc(100% + 3em) 100% no-repeat;mask:linear-gradient(90deg,#000 calc(100% - 3em),transparent) left center/calc(100% + 3em) 100% no-repeat}}

@media (min-width:51.26em){
  .motion .strip.driven{overflow:hidden;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
  .motion .strip.dragging{cursor:grabbing}
  .motion .strip.driven img{-webkit-user-drag:none;pointer-events:none}
  .motion .strip.driven .strip-row{will-change:transform}
}
@media (max-width:51.25em){
  :root{--bar:4.25rem;--air:3.5rem;--title:2.875rem}
  .mark{width:3.25rem;height:3.25rem}
  /* Telefonon a foglalás lent, mindig kéznél, amint a lap a hero fölé ért */
  .bar-cta{position:fixed;inset-inline:var(--edge);bottom:.75rem;min-height:3rem;box-shadow:0 8px 24px -10px rgba(45,45,45,.6)}
  .foot{padding-bottom:5rem}
  .bar.vege .bar-cta{opacity:0;visibility:hidden}
  .pair,.pair.flip{grid-template-columns:minmax(0,1fr);row-gap:1.5rem}
  .pair.flip .ph{order:0}
  .three,.two,.topics,.foot-grid{grid-template-columns:minmax(0,1fr)}
  .quote{font-size:2.25rem}
  .strip{--h:min(58svh,26rem);scroll-snap-type:x mandatory;scroll-padding-inline:var(--edge)}
  .strip img{scroll-snap-align:start}
  .hero-copy p{font-size:1rem;line-height:1.55}
  .final-cta,.final-cta .btn{width:100%}
  .hero-pic img{object-position:30% 40%}
  .hero-veil{background:radial-gradient(ellipse 95% 62% at 50% 58%,rgba(30,32,27,.68),rgba(30,32,27,.5) 60%,rgba(30,32,27,.2)),linear-gradient(180deg,rgba(30,32,27,.62),transparent 16%)}
}
@media (prefers-reduced-motion:reduce){
  .strip{scrollbar-width:thin}
  html{scroll-behavior:auto}
  .hero{position:relative;top:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}