/* =========================================================
   Simon Laura — szempilla stylist & oktató
   Design tokens
   ========================================================= */
:root{
  --porcelain:oklch(97.6% 0.003 250);
  --paper:oklch(99.3% 0.002 250);
  --ink:oklch(22% 0.006 250);
  --mocha:oklch(46% 0.006 250);
  --sand:oklch(87% 0.006 250);
  --blush:#F0D9D4;
  --rose:#C0757D;
  --rose-deep:#96545C;

  /* márkaszín a logóból - ez a szürkék kiegészítője */
  --plum:#613846;
  --plum-deep:#472834;
  --plum-soft:#8A6070;
  --plum-tint:rgba(97,56,70,.08);
  --plum-line:rgba(97,56,70,.22);

  --line:oklch(22% 0.006 250 / .13);
  --line-strong:oklch(22% 0.006 250 / .28);
  --shadow-s:0 2px 10px -6px oklch(22% 0.006 250 / .5);
  --shadow-m:0 22px 44px -30px oklch(22% 0.006 250 / .55);
  --shadow-plum:0 22px 44px -30px rgba(71,40,52,.6);

  --r-s:8px;
  --r-m:14px;
  --r-l:22px;
  --arch:50% 50% 10px 10px / 34% 34% 6px 6px;

  --wrap:1180px;
  --display:"Fraunces",'Georgia','Times New Roman',serif;
  --body:"Jost",'Futura','Century Gothic',system-ui,sans-serif;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}

/* A böngésző [hidden] szabályát bármelyik saját display: felülírja (pl. a
   .btn inline-flex vagy az .opts grid), ezért itt tesszük egyértelművé.
   Enélkül a JS-ből rejtett elemek láthatók maradnának. */
[hidden]{display:none !important}
body{
  margin:0;
  background:var(--porcelain);
  color:var(--ink);
  font-family:var(--body);
  font-weight:300;
  font-size:clamp(15px,.55vw + 13.4px,17px);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
button{font:inherit}
h1,h2,h3,h4,h5{margin:0; font-weight:400; line-height:1.08}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
ul{margin:0; padding:0; list-style:none}

:focus-visible{
  outline:2px solid var(--plum);
  outline-offset:3px;
  border-radius:4px;
}
::selection{background:var(--plum); color:#fff}

/* ---------- type ---------- */
.display{font-family:var(--display); font-optical-sizing:auto}
h1{font-family:var(--display); font-size:clamp(2.6rem,6.4vw,4.9rem); font-weight:400; letter-spacing:-.015em}
h2{font-family:var(--display); font-size:clamp(2rem,4.2vw,3.25rem); font-weight:400; letter-spacing:-.01em}
h3{font-family:var(--display); font-size:clamp(1.25rem,1.7vw,1.6rem); font-weight:500}
h4{font-family:var(--body); font-size:1rem; font-weight:500; letter-spacing:.02em}
em,.it{font-style:italic}
h1 .it,h2 .it,h3 .it{color:var(--plum)}

.eyebrow{
  font-family:var(--body);
  font-size:.688rem;
  font-weight:500;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--plum);
  margin:0 0 1.1rem;
  display:block;
}
.eyebrow--mute{color:var(--mocha); opacity:.75}
.lede{font-size:clamp(1.02rem,1.1vw,1.16rem); color:var(--mocha); max-width:56ch}
.muted{color:var(--mocha)}
.tiny{font-size:.78rem; line-height:1.6; color:var(--mocha)}

/* ---------- layout ---------- */
.wrap{width:min(var(--wrap), 100% - 2.6rem); margin-inline:auto}
.wrap--narrow{width:min(860px, 100% - 2.6rem)}
.section{padding:clamp(58px,7.5vw,112px) 0}
.section--tight{padding:clamp(40px,4.5vw,66px) 0}
.section--paper{background:var(--paper)}
.section--ink{background:var(--ink); color:var(--porcelain)}
.section--ink .eyebrow{color:var(--blush)}
.section--ink .muted,.section--ink .lede,.section--ink .tiny{color:oklch(97.6% 0.003 250 / .72)}
.section--plum{background:var(--plum); color:var(--porcelain)}
.section--plum .eyebrow{color:var(--blush)}
.section--plum .muted,.section--plum .lede,.section--plum .tiny{color:oklch(97.6% 0.003 250 / .74)}
.section--ink .it,.section--plum .it{color:var(--blush)}

.head{max-width:62ch}
.head--center{margin-inline:auto; text-align:center}

/* signature: the lash rule ------------------------------- */
.lashrule{
  height:16px;
  background:repeating-linear-gradient(102deg, currentColor 0 1px, transparent 1px 10px);
  color:var(--plum);
  opacity:.45;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
}
.lashrule--short{width:110px; -webkit-mask-image:none; mask-image:none; opacity:.55}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.92em 1.9em;
  font-size:.75rem; font-weight:500; letter-spacing:.19em; text-transform:uppercase;
  text-decoration:none; border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:transform .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn--solid,.btn--rose{background:var(--plum); color:#fff}
.btn--solid:hover,.btn--rose:hover{background:var(--plum-deep)}
.btn--ink{background:var(--ink); color:var(--porcelain)}
.btn--ink:hover{background:var(--plum)}
.btn--ghost{border-color:var(--plum-line); color:var(--plum)}
.btn--ghost:hover{border-color:var(--plum); background:var(--plum); color:#fff}
.btn--light{border:1px solid oklch(97.6% 0.003 250 / .4); color:var(--porcelain)}
.btn--light:hover{background:var(--porcelain); color:var(--plum)}
.btn--wide{width:100%; justify-content:center}
.arrow{font-size:1.05em; line-height:1}

/* gombsor - mobilon egymás alá, teljes szélességben */
.btnrow{display:flex; flex-wrap:wrap; gap:.8rem}

.textlink{
  font-size:.74rem; letter-spacing:.19em; text-transform:uppercase; font-weight:500;
  text-decoration:none; border-bottom:1px solid var(--line-strong); padding-bottom:.35em;
  transition:border-color .2s ease, color .2s ease;
}
.textlink:hover{color:var(--plum); border-color:var(--plum)}

/* ---------- top bar + nav ---------- */
.topbar{background:var(--plum-deep); color:oklch(97.6% 0.003 250 / .85); font-size:.74rem; letter-spacing:.09em}
.topbar__in{display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; align-items:center; padding:.55rem 0}
.topbar a{text-decoration:none; opacity:.85}
.topbar a:hover{opacity:1; color:var(--blush)}
.topbar__spacer{margin-left:auto}
.topbar__note{color:var(--blush); letter-spacing:.16em; text-transform:uppercase; font-size:.66rem}

.nav{
  position:sticky; top:0; z-index:50;
  background:oklch(97.6% 0.003 250 / .88);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--plum-line);
}
.nav__in{display:flex; align-items:center; gap:1.4rem; padding:.6rem 0}
.brand{text-decoration:none; display:flex; flex-direction:column; margin-right:auto; line-height:1}
.brand__logo{width:clamp(118px,13vw,142px); height:auto}
.brand__sub{
  font-size:.55rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--plum-soft); margin-top:.45em; padding-left:.25em;
}
.nav__links{display:flex; gap:1.75rem; align-items:center}
.nav__links a{
  text-decoration:none; font-size:.76rem; letter-spacing:.15em; text-transform:uppercase; font-weight:400;
  padding-bottom:.25em; border-bottom:1px solid transparent; transition:border-color .2s, color .2s;
}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--plum); border-color:var(--plum)}

/* nav dropdown */
.nav__item--sub{position:relative; display:inline-flex}
/* ugyanaz a tipográfia, mint a .nav__links a - különben a gomb a böngésző
   alapértelmezett betűjét örökli és kilóg a menüsorból */
.nav__toggle{
  display:inline-flex; align-items:center; gap:.4rem;
  background:none; border:0; color:inherit; cursor:pointer;
  font-family:var(--body); font-size:.76rem; font-weight:400;
  letter-spacing:.15em; text-transform:uppercase; line-height:inherit;
  padding:0 0 .25em; border-bottom:1px solid transparent;
  transition:border-color .2s, color .2s;
}
.nav__toggle:hover,.nav__toggle.is-active,.nav__item--sub.is-open .nav__toggle{color:var(--plum); border-color:var(--plum)}
.nav__caret{font-size:.66em; line-height:1; margin-top:.1em; transition:transform .2s ease}
.nav__item--sub.is-open .nav__caret{transform:rotate(180deg)}
.nav__sub{
  position:absolute; top:calc(100% + .9rem); left:50%; transform:translate(-50%,-.4rem);
  min-width:15rem; display:flex; flex-direction:column; padding:.5rem;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-m); box-shadow:var(--shadow-m);
  opacity:0; visibility:hidden; transition:opacity .2s ease, transform .2s ease, visibility .2s; z-index:60;
}
.nav__item--sub:hover .nav__sub,
.nav__item--sub:focus-within .nav__sub,
.nav__item--sub.is-open .nav__sub{opacity:1; visibility:visible; transform:translate(-50%,0)}
.nav__sub::before{content:""; position:absolute; inset:-.9rem 0 100%; }
.nav__sub a{
  border:0; padding:.62rem .85rem; border-radius:var(--r-s); white-space:nowrap;
  text-transform:none; letter-spacing:.02em; font-size:.9rem;
}
.nav__sub a:hover,.nav__sub a[aria-current="page"]{background:var(--plum-tint); color:var(--plum)}
.nav .btn{padding:.72em 1.4em}
.nav__cta-short{display:none}

/* hamburger — csak mobilon */
.burger{
  display:none; flex:none; width:44px; height:44px; margin-right:-.5rem;
  align-items:center; justify-content:center;
  background:transparent; border:0; padding:0; cursor:pointer; color:var(--plum);
}
.burger__bars{position:relative; display:block; width:22px; height:2px; border-radius:2px; background:currentColor; transition:background-color .2s ease}
.burger__bars::before,.burger__bars::after{
  content:""; position:absolute; left:0; width:22px; height:2px; border-radius:2px; background:currentColor;
  transition:transform .28s cubic-bezier(.2,.8,.3,1), top .2s ease;
}
.burger__bars::before{top:-7px}
.burger__bars::after{top:7px}
.burger[aria-expanded="true"] .burger__bars{background:transparent}
.burger[aria-expanded="true"] .burger__bars::before{top:0; transform:rotate(45deg)}
.burger[aria-expanded="true"] .burger__bars::after{top:0; transform:rotate(-45deg)}

/* ---------- mobil fiókmenü ---------- */
.drawer{position:fixed; inset:0; z-index:90}
.drawer[hidden]{display:none}
.drawer__scrim{
  position:absolute; inset:0; background:rgba(71,40,52,.42);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  opacity:0; transition:opacity .3s ease;
}
.drawer__panel{
  position:absolute; inset:0 0 0 auto;
  width:min(340px,86vw); height:100%;
  display:flex; flex-direction:column; gap:1.4rem;
  padding:1.1rem 1.5rem calc(1.6rem + env(safe-area-inset-bottom));
  background:var(--paper); border-left:1px solid var(--plum-line);
  box-shadow:-24px 0 60px -40px rgba(71,40,52,.7);
  overflow-y:auto; overscroll-behavior:contain;
  transform:translateX(100%); transition:transform .34s cubic-bezier(.2,.8,.3,1);
}
.drawer.is-open .drawer__scrim{opacity:1}
.drawer.is-open .drawer__panel{transform:translateX(0)}

.drawer__head{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem}
.drawer__head .brand{margin-right:0}
.drawer__close{
  flex:none; width:40px; height:40px; margin:-.25rem -.6rem 0 0;
  display:grid; place-content:center; font-size:1.7rem; line-height:1;
  background:transparent; border:0; color:var(--plum); cursor:pointer;
}

.drawer__links{display:flex; flex-direction:column; border-top:1px solid var(--line)}
.drawer__links a{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.92rem .2rem; border-bottom:1px solid var(--line);
  text-decoration:none; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase;
  transition:color .2s ease, padding-left .2s ease;
}
.drawer__links a:hover,.drawer__links a[aria-current="page"]{color:var(--plum); padding-left:.6rem}
.drawer__arrow{color:var(--plum-soft); font-size:1.1rem; line-height:1}
/* a mobil menüben az almenü mindig nyitva van - nincs értelme második kattintásnak */
.drawer__group{
  display:block; padding:1rem 0 .3rem; border-top:1px solid var(--line);
  font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--plum-soft);
}
.drawer__sub{display:flex; flex-direction:column; padding-left:.9rem; border-left:1px solid var(--line)}
.drawer__sub a{border-bottom:0; padding:.6rem 0}

.drawer__rule{margin-top:auto}
.drawer__meta{display:flex; flex-direction:column; gap:.5rem; font-size:.84rem}
.drawer__meta a{text-decoration:none; color:var(--ink)}
.drawer__meta a:hover{color:var(--plum)}
.drawer__meta .tiny{letter-spacing:.14em; text-transform:uppercase; font-size:.66rem; color:var(--plum-soft)}

body.is-locked{overflow:hidden}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; padding:clamp(48px,6vw,86px) 0 clamp(40px,5vw,70px)}
.hero::before{
  content:""; position:absolute; inset:auto auto -30% -12%;
  width:52vw; height:52vw; border-radius:50%;
  background:radial-gradient(circle at 40% 40%, var(--blush), transparent 66%);
  opacity:.65; pointer-events:none;
}
.hero::after{
  content:""; position:absolute; inset:-8% -14% auto auto;
  width:34vw; height:34vw; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, var(--plum-tint), transparent 62%);
  pointer-events:none;
}
.hero__grid{position:relative; display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(2rem,5vw,4.6rem); align-items:center}
.hero h1 .it{color:var(--plum)}
.hero__lede{margin-top:1.6rem}
.hero__cta{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.2rem}
.hero__facts{display:flex; flex-wrap:wrap; gap:1.6rem 2.6rem; margin-top:2.6rem; padding-top:1.6rem; border-top:1px solid var(--plum-line)}
.fact__n{font-family:var(--display); font-size:1.85rem; display:block; line-height:1; color:var(--plum)}
.fact__l{font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mocha); margin-top:.5em; display:block}

.collage{position:relative; padding-bottom:2.2rem}
.collage__main{
  width:min(300px,100%); margin-inline:auto;
  border-radius:var(--arch); overflow:hidden;
  border:1px solid var(--plum-line); background:var(--blush);
  box-shadow:var(--shadow-plum);
}
.collage__main img{width:100%; aspect-ratio:41/50; object-fit:cover}
.collage__tile{
  position:absolute; width:118px; aspect-ratio:1; overflow:hidden;
  border-radius:var(--r-m); border:4px solid var(--paper); box-shadow:var(--shadow-m);
}
.collage__tile img{width:100%; height:100%; object-fit:cover}
.collage__tile--a{left:0; top:14%}
.collage__tile--b{right:0; bottom:6%}
.collage__badge{
  position:absolute; right:4%; top:2%;
  width:96px; height:96px; border-radius:50%;
  background:var(--plum); color:#fff;
  display:grid; place-content:center; text-align:center;
  font-size:.5rem; letter-spacing:.18em; text-transform:uppercase; line-height:1.5;
}
.collage__badge b{display:block; font-family:var(--display); font-size:1.25rem; letter-spacing:.02em; font-weight:500}

/* ---------- marquee ---------- */
.marquee{
  border-top:1px solid var(--plum-line); border-bottom:1px solid var(--plum-line);
  background:var(--plum-tint); overflow:hidden; padding:.9rem 0;
}
.marquee__track{display:flex; width:max-content; animation:slide 34s linear infinite}
.marquee__track span{
  font-family:var(--display); font-style:italic; font-size:1.15rem;
  padding:0 1.6rem; color:var(--plum); white-space:nowrap;
}
.marquee__track span::after{content:"✦"; margin-left:3.2rem; font-style:normal; color:var(--plum-soft); font-size:.6em; vertical-align:middle}
@keyframes slide{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ---------- cards / grids ---------- */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem}

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-l);
  padding:clamp(1.5rem,2.3vw,2.1rem);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card--hover:hover{transform:translateY(-4px); box-shadow:var(--shadow-plum); border-color:var(--plum-line)}
.card__mark{
  font-family:var(--display); font-size:.9rem; letter-spacing:.1em; color:var(--plum);
  display:block; margin-bottom:1.1rem;
}
.card h3{margin-bottom:.7rem}

/* about */
.about{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4.4rem); align-items:start}
.portrait{border-radius:var(--arch); overflow:hidden; border:1px solid var(--plum-line); box-shadow:var(--shadow-plum); background:var(--blush)}
.portrait img{width:100%; aspect-ratio:41/50; object-fit:cover}
.about__sig{margin-top:2rem}
.about__sig img{width:min(230px,62%); height:auto}

/* service category tabs
   JS nélkül minden panel egymás alatt látszik, a fülsor rejtve marad -
   a .is-tabbed osztályt a script.js teszi rá, ha át tudja venni a váltást. */
.svc-tabs__nav{display:none; flex-wrap:wrap; gap:.6rem; margin-bottom:2rem}
.svc-tabs.is-tabbed .svc-tabs__nav{display:flex}
.svc-tab{
  display:inline-flex; align-items:center; padding:.68rem 1.4rem; border-radius:999px;
  background:transparent; font-family:inherit;
  border:1px solid var(--plum-line); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--plum); cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.svc-tab:hover{border-color:var(--plum); background:var(--plum-tint)}
.svc-tab[aria-selected="true"]{background:var(--plum); color:#fff; border-color:var(--plum)}
.svc-tab:focus-visible{outline:2px solid var(--plum); outline-offset:2px}
.svc-tabs.is-tabbed .svc-panel{display:none}
.svc-tabs.is-tabbed .svc-panel.is-active{display:block}
.svc-panel__title{
  font-family:var(--display); font-size:1.35rem; margin-bottom:1.2rem;
}
.svc-tabs.is-tabbed .svc-panel__title{display:none}

/* category policy note (expandable) */
.svc-note{
  background:var(--blush); border-radius:var(--r-m); padding:.95rem 1.1rem;
  font-size:.8rem; line-height:1.55; color:var(--ink); margin-bottom:1.4rem;
}
.svc-note summary{display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem .7rem; cursor:pointer; list-style:none}
.svc-note summary::-webkit-details-marker{display:none}
.svc-note__ic{font-size:1rem; color:var(--plum)}
.svc-note__more{margin-left:auto; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--plum)}
.svc-note__more::after{content:"+"; margin-left:.4em; display:inline-block; transition:transform .25s ease}
.svc-note[open] .svc-note__more::after{transform:rotate(45deg)}
.svc-note p{margin:.7rem 0 0; color:var(--mocha)}

/* price list */
.pricelist{
  border-top:1px solid var(--line-strong); display:grid;
  grid-template-columns:1fr 1fr; column-gap:3rem;
}
.price{
  display:grid; grid-template-columns:1fr auto auto; gap:.4rem 1.2rem; align-items:baseline; align-content:start;
  padding:1.5rem 0; border-bottom:1px solid var(--line-strong);
}
.price:nth-child(odd){padding-right:3rem; border-right:1px solid var(--line-strong)}
.price:nth-child(even){padding-left:3rem}
.price__tag{grid-column:1/-1; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--plum); margin-bottom:-.2rem}
.price__name{font-family:var(--display); font-weight:500; font-size:1.08rem}
.price__desc{
  grid-column:1/-1; font-size:.82rem; color:var(--mocha); margin-top:.1rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.price__dur{font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mocha)}
.price__sum{font-family:var(--display); font-size:1.02rem; min-width:6ch; text-align:right; color:var(--plum)}
.price__more{
  grid-column:1/-1; justify-self:start; margin-top:.5rem; padding:0; background:none; border:0;
  font-family:inherit; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--plum); cursor:pointer; border-bottom:1px solid var(--plum-line);
}
.price__more:hover{border-color:var(--plum)}

/* courses */
.courselist{border-top:1px solid var(--line)}
.course{
  display:grid; grid-template-columns:84px 1fr auto; grid-template-areas:"thumb body cta";
  gap:1.6rem; align-items:center; padding:1.5rem 0; border-bottom:1px solid var(--line);
}
.course--noimg{grid-template-columns:1fr auto; grid-template-areas:"body cta"}
.course__thumb{grid-area:thumb; width:84px; aspect-ratio:1; object-fit:cover; border-radius:var(--r-m); border:1px solid var(--plum-line)}
.course__body{grid-area:body}
.course__tag{font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--plum); display:block; margin-bottom:.5rem}
.course__body h3{margin-bottom:.4rem}
.course__body p{font-size:.9rem; color:var(--mocha); margin:0; max-width:44ch}
.course__facts{
  display:flex; flex-wrap:wrap; gap:.35rem .9rem; margin-top:.7rem;
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mocha);
}
.course__cta{grid-area:cta; display:flex; flex-direction:column; align-items:flex-end; gap:.85rem}
.course__price{font-family:var(--display); font-size:1.28rem; white-space:nowrap; color:var(--plum); text-align:right}
.course__price s{display:block; font-family:var(--body); font-size:.82rem; color:var(--mocha)}
.course__btns{display:flex; flex-wrap:wrap; gap:.5rem; justify-content:flex-end}

/* gallery */
.gallery{display:grid; grid-template-columns:repeat(6,1fr); gap:.7rem}
.gallery img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--r-m); filter:saturate(.95)}
.gallery figure{margin:0; overflow:hidden; border-radius:var(--r-m); background:var(--plum)}
.gallery img{transition:transform .5s ease, opacity .4s ease}
.gallery figure:hover img{transform:scale(1.06); opacity:.86}
.gallery__link{display:block; position:relative; border-radius:var(--r-m); cursor:zoom-in}
.gallery__zoom{
  position:absolute; inset:auto .55rem .55rem auto;
  width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--plum);
  opacity:0; transform:scale(.85); transition:opacity .25s ease, transform .25s ease;
}
/* nagyító ikon tiszta CSS-ből */
.gallery__zoom::before{
  content:""; position:absolute; left:8px; top:8px; width:9px; height:9px;
  border:1.5px solid currentColor; border-radius:50%;
}
.gallery__zoom::after{
  content:""; position:absolute; right:8px; bottom:8px; width:6px; height:1.5px;
  background:currentColor; transform:rotate(45deg); transform-origin:right center;
}
.gallery__link:hover .gallery__zoom,.gallery__link:focus-visible .gallery__zoom{opacity:1; transform:scale(1)}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(.8rem,3vw,2.4rem);
  background:rgba(30,17,22,.92);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transition:opacity .28s ease;
}
.lightbox[hidden]{display:none}
.lightbox.is-open{opacity:1}
.lightbox__stage{
  position:relative; margin:0; display:flex; align-items:center; justify-content:center;
  max-width:100%; max-height:100%; pointer-events:none;
}
.lightbox__img{
  max-width:min(1100px,100%); max-height:calc(100vh - 8.5rem);
  width:auto; height:auto; object-fit:contain;
  border-radius:var(--r-m); box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
  background:var(--plum-deep);
  opacity:0; transform:scale(.98); transition:opacity .3s ease, transform .3s ease;
  pointer-events:auto; /* a képre kattintás ne zárja be a nézegetőt */
}
.lightbox.is-ready .lightbox__img{opacity:1; transform:scale(1)}

.lightbox__btn{
  position:absolute; z-index:2; display:grid; place-content:center;
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.24);
  color:#fff; line-height:1; padding:0;
  transition:background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.lightbox__btn[hidden]{display:none}
.lightbox__btn:hover{background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.5)}
.lightbox__btn:disabled{opacity:.3; cursor:default}
.lightbox__btn:disabled:hover{background:rgba(255,255,255,.1); transform:none}
.lightbox__close{top:clamp(.8rem,3vw,1.6rem); right:clamp(.8rem,3vw,1.6rem); font-size:1.5rem}
.lightbox__nav{top:50%; margin-top:-23px; font-size:1.9rem}
.lightbox__nav span{margin-top:-.18em}
.lightbox__nav--prev{left:clamp(.5rem,2.5vw,1.6rem)}
.lightbox__nav--next{right:clamp(.5rem,2.5vw,1.6rem)}
.lightbox__nav:hover{transform:scale(1.06)}
.lightbox__count{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:clamp(.9rem,3vw,1.7rem);
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
}

/* modal — közös részletező ablak (szolgáltatás, képzés, megrendelés) */
.modal{
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  padding:clamp(.8rem,3vw,2.4rem);
}
.modal[hidden]{display:none}
.modal__scrim{
  position:absolute; inset:0; background:rgba(30,17,22,.62);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  opacity:0; transition:opacity .28s ease;
}
.modal.is-open .modal__scrim{opacity:1}
.modal__panel{
  position:relative; z-index:1; width:min(640px,100%); max-height:calc(100vh - 3rem);
  display:flex; flex-direction:column; background:var(--porcelain);
  border-radius:var(--r-l); box-shadow:var(--shadow-plum);
  opacity:0; transform:translateY(14px) scale(.99); transition:opacity .28s ease, transform .28s ease;
}
.modal.is-open .modal__panel{opacity:1; transform:none}
.modal__head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1.2rem;
  padding:1.7rem clamp(1.3rem,4vw,2.2rem) 1.1rem; border-bottom:1px solid var(--line);
}
.modal__title{font-family:var(--display); font-size:clamp(1.25rem,3.4vw,1.6rem); line-height:1.25; margin:0}
.modal__close{
  flex:none; width:2.3rem; height:2.3rem; border-radius:50%; display:grid; place-content:center;
  background:var(--paper); border:1px solid var(--line); color:var(--mocha);
  font-size:1.35rem; line-height:1; cursor:pointer; transition:border-color .2s, color .2s;
}
.modal__close>span{margin-bottom:4px}
.modal__close:hover{border-color:var(--plum); color:var(--plum)}
.modal__body{padding:1.5rem clamp(1.3rem,4vw,2.2rem) 1.9rem; overflow-y:auto}
.modal__body > *:first-child{margin-top:0}
.modal__body p{color:var(--mocha); font-size:.94rem; margin:0 0 1rem}
.modal-src{display:none}

/* meta sor a modal fejében (időtartam · ár) */
.modal__meta{
  display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; align-items:baseline;
  margin-bottom:1.4rem; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mocha);
}
.modal__meta b{font-family:var(--display); font-size:1.15rem; letter-spacing:.02em; text-transform:none; color:var(--plum)}

/* pipás felsorolás a modalokban és a képzésoldalakon */
.ticks{list-style:none; display:grid; gap:.6rem; margin:0 0 1.4rem; padding:0}
.ticks li{display:flex; gap:.7rem; font-size:.92rem; line-height:1.5}
.ticks li::before{content:"✦"; color:var(--plum); flex:none; line-height:1.5}
.ticks--tight li{font-size:.86rem}
.subhead{
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--plum);
  margin:0 0 .8rem; display:block;
}

/* képzés napi bontása */
.timeline{list-style:none; margin:0 0 1.4rem; padding:0; border-left:1px solid var(--plum-line)}
.timeline li{position:relative; padding:0 0 1.3rem 1.5rem}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{
  content:""; position:absolute; left:-4.5px; top:.45em; width:8px; height:8px;
  border-radius:50%; background:var(--plum);
}
.timeline b{display:block; font-family:var(--display); font-size:1rem; margin-bottom:.2rem}
.timeline span{font-size:.88rem; color:var(--mocha); line-height:1.55}

/* testimonials — editorial spread */
.section--bloom{position:relative; overflow:hidden}
.section--bloom::before{
  content:""; position:absolute; inset:-20% -8% auto auto;
  width:44vw; height:44vw; border-radius:50%;
  background:radial-gradient(circle at 60% 40%, var(--blush), transparent 68%);
  opacity:.55; pointer-events:none;
}
.section--bloom > .wrap{position:relative}

.testimonials{display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(2.6rem,5vw,5rem); align-items:start}

.testimonial-feature{margin:0}
.testimonial-feature__mark{
  display:block; font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(3.4rem,7vw,5.5rem); line-height:.5; color:var(--plum); opacity:.3;
  margin-bottom:.5rem;
}
.testimonial-feature p{
  font-family:var(--display); font-style:italic; font-size:clamp(1.5rem,2.6vw,2rem);
  line-height:1.34; letter-spacing:-.005em;
}
.testimonial-feature cite{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem; margin-top:1.8rem; font-style:normal;
}
.testimonial-feature__name{font-family:var(--display); font-size:1.05rem; color:var(--plum)}
.testimonial-feature__role{font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mocha)}

.testimonial-list{counter-reset:tr 1}
.testimonial-row{
  margin:0; counter-increment:tr;
  display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:start;
  padding:1.7rem 0; border-top:1px solid var(--line);
}
.testimonial-row:last-child{border-bottom:1px solid var(--line)}
.testimonial-row__n{
  font-family:var(--display); font-size:.72rem; letter-spacing:.06em;
  color:var(--plum); opacity:.75; padding-top:.2rem;
}
.testimonial-row__n::before{content:counter(tr,decimal-leading-zero)}
.testimonial-row p{font-family:var(--display); font-style:italic; font-size:1.05rem; line-height:1.58}
.testimonial-row cite{
  display:block; margin-top:.9rem; font-style:normal; font-size:.66rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--mocha);
}

/* CTA band */
.ctaband{position:relative; overflow:hidden}
.ctaband::before{
  content:""; position:absolute; inset:auto -6% -40% auto;
  width:46vw; height:46vw; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.09), transparent 66%);
  pointer-events:none;
}
.ctaband__in{position:relative; display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,4.4rem); align-items:center}
.ctaband__logo{width:min(340px,100%); height:auto; opacity:.95}
.ctaband__text h2{margin-top:.2rem}
.ctaband__text .it{color:var(--blush)}
.ctaband__text .lede{margin-top:1.3rem}
.ctaband__cta{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem}

/* form fields */
.field{display:block; margin-bottom:1rem}
.field span{display:block; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mocha); margin-bottom:.5rem}
.field input,.field textarea,.field select{
  width:100%; padding:.85em 1em; font:inherit; font-size:.94rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--line-strong); border-radius:var(--r-s);
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--plum); box-shadow:0 0 0 3px rgba(97,56,70,.16)}
.check{display:flex; gap:.7rem; align-items:flex-start; font-size:.8rem; color:var(--mocha); margin-bottom:1rem}
.check input{margin-top:.3em; accent-color:var(--plum)}

/* footer */
.footer{
  position:relative; overflow:hidden;
  background:var(--porcelain); color:var(--mocha);
  padding:clamp(48px,6vw,78px) 0 2rem; border-top:3px solid var(--plum);
}
/* halvány kézjegy vízjel a jobb alsó sarokban */
.footer::after{
  content:""; position:absolute; right:-3%; bottom:-6%;
  width:min(460px,52%); aspect-ratio:773/288;
  background:var(--plum);
  -webkit-mask:url("images/logo-mark.png") no-repeat center/contain;
  mask:url("images/logo-mark.png") no-repeat center/contain;
  opacity:.07; pointer-events:none;
}
.footer > .wrap{position:relative; z-index:1}
.footer h5{font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--plum); margin-bottom:1.1rem}
.footer__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.4rem}
.footer a{text-decoration:none; font-size:.88rem; color:var(--ink)}
.footer a:hover{color:var(--plum)}
.footer li{margin-bottom:.5rem}
.footer__brand{display:inline-block; margin:0 0 .2rem}
.footer__brand img{width:min(258px,100%); height:auto}
.footer__bottom{
  margin-top:3rem; padding-top:1.4rem; border-top:1px solid var(--plum-line);
  display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mocha);
}
.footer__bottom span:last-child{margin-left:auto}
.footer__bottom a{font-size:inherit; letter-spacing:inherit; color:var(--mocha)}
.footer__bottom a:hover,.footer__bottom a[aria-current]{color:var(--plum)}

/* =========================================================
   BOOKING
   ========================================================= */
/* A foglalás háromoldalas varázsló: egy oszlop, ragadós alsó léptetősávval.
   Így semmi nem úszik rá az alatta lévő tartalomra, és mobilon is ugyanaz a
   folyamat, mint asztali gépen. */
.booking--wizard{max-width:760px; margin-inline:auto; padding-bottom:1rem}

/* lépésjelző */
.wizsteps{display:flex; gap:.5rem; list-style:none; margin:0 0 2.4rem; padding:0}
.wizstep{
  flex:1; display:flex; align-items:center; gap:.7rem; min-width:0;
  padding:.7rem .5rem .9rem; border-bottom:2px solid var(--line); color:var(--mocha);
  transition:border-color .25s, color .25s;
}
.wizstep__n{
  font-family:var(--display); font-size:.8rem; flex:none;
  width:1.9rem; height:1.9rem; border-radius:50%; display:grid; place-content:center;
  border:1px solid var(--line-strong); background:var(--paper); color:var(--mocha);
  transition:background-color .25s, border-color .25s, color .25s;
}
.wizstep__t{font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.wizstep.is-done{border-bottom-color:var(--plum-line); color:var(--plum)}
.wizstep.is-done .wizstep__n{border-color:var(--plum-line); background:var(--blush); color:var(--plum)}
.wizstep.is-active{border-bottom-color:var(--plum); color:var(--ink)}
.wizstep.is-active .wizstep__n{background:var(--plum); border-color:var(--plum); color:#fff}

.wizpage > .step__head:first-child{margin-top:0}

/* ragadós léptetősáv */
.bookbar{
  position:sticky; bottom:0; z-index:5; margin-top:2rem;
  display:flex; align-items:center; justify-content:space-between; gap:1.2rem; flex-wrap:wrap;
  background:var(--paper); border:1px solid var(--plum-line); border-radius:var(--r-m);
  padding:.95rem 1.2rem; box-shadow:var(--shadow-plum);
}
.bookbar__sum{min-width:0; flex:1}
.bookbar__sum b{display:block; font-family:var(--display); font-size:1.05rem; font-weight:500}
.bookbar__sum span{display:block; font-size:.76rem; color:var(--mocha); letter-spacing:.04em; margin-top:.15rem}
.bookbar__act{display:flex; gap:.6rem; flex:none}
.bookbar .btn{padding:.75em 1.4em}
.bookbar .btn[disabled]{opacity:.45; pointer-events:none}

/* naptár melletti figyelmeztetés (pl. nem fér bele egy napba) */
.calnote{
  display:flex; gap:.8rem; align-items:flex-start; margin-top:1.2rem;
  background:var(--blush); border:1px solid var(--plum-line); border-radius:var(--r-m);
  padding:.95rem 1.1rem; font-size:.82rem; line-height:1.55;
}
.calnote b{font-weight:500; display:block; margin-bottom:.15rem}

.step{border-top:1px solid var(--line); padding:2.2rem 0}
.step:first-of-type{border-top:none; padding-top:0}
.step__head{display:flex; align-items:baseline; gap:1rem; margin-bottom:1.4rem}
.step__n{
  font-family:var(--display); font-size:.95rem; color:#fff;
  border:1px solid var(--plum); border-radius:50%; width:2.2rem; height:2.2rem;
  display:grid; place-content:center; flex:none; background:var(--plum);
}
.step__t{font-family:var(--display); font-size:1.45rem}
.step__hint{font-size:.75rem; letter-spacing:.06em; color:var(--mocha); margin-left:auto; text-align:right}

/* radio cards */
.opts{display:grid; gap:.7rem}
.opts--2{grid-template-columns:repeat(2,1fr)}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* A rejtett rádiók/checkboxok rács-gyerekek (.opts, .audience, .cal, .slots).
   Abszolút pozícióval az ilyen elem statikus helye a rács tartalmi éle, így a
   címkére kattintva a fókusz a lista/naptár tetejére görgetne. Fixed pozícióval
   az input mindig a nézetben van, ezért nincs mit begörgetni. */
input.vh{position:fixed; top:0; left:0}
.opt{
  display:flex; align-items:center; gap:1rem; cursor:pointer;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-m);
  padding:1rem 1.15rem; transition:border-color .2s, box-shadow .2s, background-color .2s;
}
.opt:hover{border-color:var(--plum-line)}
.opt__dot{
  width:15px; height:15px; border-radius:50%; border:1px solid var(--line-strong); flex:none;
  position:relative; transition:border-color .2s;
}
.opt__body{flex:1}
.opt__name{display:block; font-family:var(--display); font-size:1.1rem}
.opt__meta{display:block; font-size:.76rem; color:var(--mocha); letter-spacing:.04em}
.opt__price{font-family:var(--display); font-size:1.02rem; white-space:nowrap; color:var(--plum)}
.vh:checked + .opt{border-color:var(--plum); background:#fff; box-shadow:0 0 0 3px rgba(97,56,70,.14)}
.vh:checked + .opt .opt__dot{border-color:var(--plum); background:radial-gradient(circle, var(--plum) 0 45%, transparent 46%)}
.vh:focus-visible + .opt{outline:2px solid var(--plum); outline-offset:3px}

/* több szolgáltatás egyszerre: szögletes jelölő, hogy látszódjon a különbség
   a képzések egyválasztós körétől */
.opt__dot--check{border-radius:4px; position:relative}
.vh:checked + .opt .opt__dot--check{background:var(--plum); border-color:var(--plum)}
.vh:checked + .opt .opt__dot--check::after{
  content:""; position:absolute; left:4px; top:1px; width:4px; height:8px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.opthint{color:var(--mocha); margin:0 0 .3rem}

/* stylist */
.stylist{display:flex; align-items:center; gap:1.2rem; background:var(--paper); border:1px solid var(--plum-line); border-radius:var(--r-m); padding:1rem 1.15rem}
.stylist img{width:62px; height:62px; border-radius:50%; object-fit:cover; border:2px solid var(--blush)}
.stylist__tag{font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--plum)}

/* calendar */
.calbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem}
.calbar__m{font-family:var(--display); font-size:1.2rem; letter-spacing:.03em}
.calbar__nav{display:flex; gap:.4rem}
.calbar__nav button,.calbar__nav a,.calbar__nav span{
  width:2.1rem; height:2.1rem; border-radius:50%; background:var(--paper);
  border:1px solid var(--line); color:var(--mocha); cursor:pointer; line-height:1;
  display:grid; place-content:center; font-size:1rem; text-decoration:none;
}
.calbar__nav a:hover,.calbar__nav button:hover{border-color:var(--plum); color:var(--plum)}
.calbar__nav span,.calbar__nav button[disabled]{opacity:.4; cursor:not-allowed}
.calbar__nav button[disabled]:hover{border-color:var(--line); color:var(--mocha)}
.cal{display:grid; grid-template-columns:repeat(7,1fr); gap:.45rem}
.cal__dow{
  text-align:center; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--mocha); padding-bottom:.4rem;
}
.cal__dow--on{color:var(--plum)}
.day{
  aspect-ratio:1; display:grid; place-content:center; border-radius:var(--r-s);
  font-size:.92rem; background:var(--paper); border:1px solid var(--line); cursor:pointer;
  transition:border-color .2s, background-color .2s, color .2s;
}
.day:hover{border-color:var(--plum); color:var(--plum)}
.day--off{background:transparent; border-color:transparent; color:rgba(43,33,29,.26); cursor:not-allowed}
.day--off:hover{border-color:transparent; color:rgba(43,33,29,.26)}
.day--blank{background:transparent; border-color:transparent; cursor:default}
.vh:checked + .day{background:var(--plum); color:#fff; border-color:var(--plum)}
.vh:focus-visible + .day{outline:2px solid var(--plum); outline-offset:2px}
.callegend{display:flex; flex-wrap:wrap; gap:1.2rem; margin-top:1rem; font-size:.72rem; color:var(--mocha)}
.dot{width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:.45rem}
.dot--open{background:var(--plum)}
.dot--closed{background:var(--sand)}
.dot--pair{background:var(--rose)}

/* nap-párok: a kétnapos oktatásoknál egy kattintás két napot jelöl ki.
   A pár első napja a kattintható cella, a második a rákövetkező nap. */
.day--pair{border-color:var(--plum-line); background:var(--blush)}
.day--pair-end{
  border-color:var(--plum-line); background:var(--blush); color:var(--plum);
  cursor:pointer; pointer-events:none;
}
.vh:checked + .day--pair{background:var(--plum); color:#fff; border-color:var(--plum)}
.day--pair-end.is-selected{background:var(--plum); color:#fff; border-color:var(--plum)}

/* fix oktatási idősáv a nap kiválasztása után */
.fixedslot{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1rem;
  background:var(--blush); border-radius:var(--r-m); padding:1.1rem 1.3rem;
}
.fixedslot b{font-family:var(--display); font-size:1.25rem; color:var(--plum)}
.fixedslot span{font-size:.86rem; color:var(--mocha)}

/* vendég / tanuló váltó */
.audience{display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem; margin-bottom:1.6rem}
.audience__opt{
  display:block; text-align:center; cursor:pointer; padding:.95rem 1rem;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-m);
  transition:border-color .2s, background-color .2s, box-shadow .2s;
}
.audience__opt:hover{border-color:var(--plum-line)}
.audience__opt b{display:block; font-family:var(--display); font-size:1.05rem}
.audience__opt span{display:block; font-size:.74rem; color:var(--mocha); margin-top:.2rem}
.vh:checked + .audience__opt{border-color:var(--plum); background:#fff; box-shadow:0 0 0 3px rgba(97,56,70,.14)}
.vh:focus-visible + .audience__opt{outline:2px solid var(--plum); outline-offset:3px}

/* kategória-fejléc a foglaló szolgáltatáslistájában */
.optgroup{
  display:block; margin:1.6rem 0 .7rem; font-size:.64rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--plum);
}
.optgroup:first-child{margin-top:0}
.opt__old{
  display:block; font-size:.78rem; color:var(--mocha);
  text-decoration:line-through; font-family:var(--body);
}

/* slots */
.slots{display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:.5rem}
.slot{
  text-align:center; padding:.75em .2em; border-radius:999px; cursor:pointer;
  background:var(--paper); border:1px solid var(--line); font-size:.86rem; letter-spacing:.04em;
  transition:border-color .2s, background-color .2s, color .2s;
}
.slot:hover{border-color:var(--plum); color:var(--plum)}
.slot--taken{color:rgba(43,33,29,.3); text-decoration:line-through; cursor:not-allowed; background:transparent}
.slot--taken:hover{border-color:var(--line); color:rgba(43,33,29,.3)}
.vh:checked + .slot{background:var(--plum); border-color:var(--plum); color:#fff}
.vh:focus-visible + .slot{outline:2px solid var(--plum); outline-offset:2px}

/* summary */
.summary{background:var(--paper); border:1px solid var(--plum-line); border-radius:var(--r-l); overflow:hidden; box-shadow:var(--shadow-plum)}
.summary--inline{box-shadow:none}
.summary__top{background:var(--plum); color:#fff; padding:1.3rem 1.5rem}
.summary__top .eyebrow{color:var(--blush); margin-bottom:.4rem}
.summary__top strong{font-family:var(--display); font-size:1.32rem; font-weight:400}
.summary__body{padding:1.5rem}
.srow{display:flex; justify-content:space-between; gap:1rem; padding:.62rem 0; border-bottom:1px solid var(--line); font-size:.88rem}
.srow:last-of-type{border-bottom:none}
.srow dt{color:var(--mocha); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; margin:0}
.srow dd{margin:0; text-align:right; font-family:var(--display); font-size:1.02rem}
.summary__total{display:flex; justify-content:space-between; align-items:baseline; padding:1rem 0 .2rem; border-top:1px solid var(--line-strong); margin-top:.6rem}
.summary__total b{font-family:var(--display); font-size:1.5rem; font-weight:400; color:var(--plum)}

.note{
  display:flex; gap:.8rem; align-items:flex-start;
  background:var(--blush); border-radius:var(--r-m); padding:.95rem 1.1rem;
  font-size:.8rem; line-height:1.55; color:var(--ink); margin:1.2rem 0;
}
.note b{font-weight:500}
.note__ic{font-size:1rem; line-height:1.3; color:var(--plum)}

/* rules card */
.rules li{display:flex; gap:.85rem; padding:.72rem 0; border-bottom:1px solid var(--line); font-size:.88rem; align-items:flex-start}
.rules li:last-child{border-bottom:none}
.rules b{font-weight:500; display:block; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--plum); margin-bottom:.15rem}
.rules__ic{color:var(--plum); flex:none; margin-top:.1rem}

/* status flow */
.flow{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; counter-reset:f}
.flow--4{grid-template-columns:repeat(4,1fr)}
.flow__item{position:relative; padding-top:2.6rem}
.flow__item::before{
  counter-increment:f; content:counter(f,decimal-leading-zero);
  position:absolute; top:0; left:0;
  font-family:var(--display); font-size:.85rem; letter-spacing:.14em; color:var(--plum);
}
.flow__item::after{
  content:""; position:absolute; top:1.55rem; left:0; right:0; height:1px; background:var(--line-strong);
}
.flow h4{margin-bottom:.4rem}

/* mock e-mail */
.mail{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; box-shadow:var(--shadow-m); max-width:520px}
.mail__bar{display:flex; gap:.4rem; padding:.7rem .9rem; background:var(--sand)}
.mail__bar i{width:9px; height:9px; border-radius:50%; background:rgba(43,33,29,.28); display:block}
.mail__body{padding:1.4rem}
.mail__meta{font-size:.72rem; color:var(--mocha); border-bottom:1px solid var(--line); padding-bottom:.8rem; margin-bottom:1rem; letter-spacing:.04em}
.mail__body h4{font-family:var(--display); font-size:1.2rem; margin-bottom:.8rem}
.mail__actions{display:flex; gap:.6rem; margin-top:1.3rem; flex-wrap:wrap}
.mail__actions .btn{padding:.7em 1.4em; font-size:.68rem}

/* faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; padding:1.15rem 0; font-family:var(--display); font-size:1.14rem;
  list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--plum); font-size:1.2rem; transition:transform .25s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 0 1.2rem; font-size:.92rem; color:var(--mocha); max-width:70ch}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero__grid{grid-template-columns:1fr; gap:3rem}
  .collage{max-width:420px; margin-inline:auto}
  .about{grid-template-columns:1fr}
  .portrait{max-width:320px; margin-inline:auto}
  .ctaband__in{grid-template-columns:1fr; gap:2.4rem}
  .ctaband__logo{width:min(300px,80%)}
  .grid-3{grid-template-columns:1fr 1fr}
  .testimonials{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
  .course{grid-template-columns:84px 1fr; grid-template-areas:"thumb body" "cta cta"; row-gap:1rem}
  .course--noimg{grid-template-columns:1fr; grid-template-areas:"body" "cta"}
  .course__cta{flex-direction:row; align-items:center; justify-content:space-between}
  .course__price{text-align:left}
  .course__price s{display:inline; margin-right:.5rem}
  .nav__links{display:none}
  .burger{display:flex}
  .nav__in{gap:.8rem}
  .flow{grid-template-columns:1fr}
  .flow__item::after{display:none}
  .flow__item{padding-top:2rem}
}
@media (max-width:760px){
  .pricelist{grid-template-columns:1fr}
  .price:nth-child(odd){padding-right:0; border-right:none}
  .price:nth-child(even){padding-left:0}
}
@media (max-width:640px){
  .grid-3,.grid-2{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .footer__grid{grid-template-columns:1fr}
  .footer::after{display:none}

  /* lábléc alja: jogi sor, linksor és copyright külön-külön, középre */
  .footer__bottom{justify-content:center; text-align:center; gap:.9rem 1.2rem}
  .footer__bottom > span{width:100%; margin-left:0}
  .opts--2{grid-template-columns:1fr}
  .audience{grid-template-columns:1fr}
  /* a három rövid adat egy sorban marad, a felirat tördelődik alatta */
  .hero__facts{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
  .fact__n{font-size:1.5rem}
  .fact__l{font-size:.56rem; letter-spacing:.12em}

  /* hero gombok középre */
  .hero__cta{justify-content:center; gap:.7rem}

  .btnrow{flex-direction:column; align-items:stretch}
  .btnrow .btn{width:100%; justify-content:center}

  /* kurzuskártyák: ár külön sorban, gombok teljes szélességben */
  .course__cta{flex-direction:column; align-items:stretch; gap:.9rem}
  .course__btns{flex-direction:column; align-items:stretch; gap:.55rem; justify-content:flex-start}
  .course__btns .btn{width:100%; justify-content:center}

  .course{gap:1.1rem}
  .cal{gap:.3rem}
  .day{font-size:.8rem}
  .step__hint{display:none}

  /* a léptetősáv mobilon két sorba tördel, a gombok teljes szélességben */
  .bookbar{flex-direction:column; align-items:stretch; gap:.9rem}
  .bookbar__act{width:100%}
  .bookbar__act .btn{flex:1; justify-content:center}
  .wizstep__t{display:none}
  .wizstep{justify-content:center}
  .brand__logo{width:118px}
  .brand__sub{letter-spacing:.24em}

  /* a felső sáv egy sorba fér: e-mail helyett csak telefon + nyitvatartás */
  .topbar{font-size:.7rem}
  .topbar__in{flex-wrap:nowrap; gap:1rem; padding:.42rem 0}
  .topbar__mail{display:none}
  .topbar__note{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

  .nav__in{padding:.5rem 0}
  .nav .btn{padding:.7em 1.15em; font-size:.68rem; letter-spacing:.14em}

  /* a nyilak a számláló mellé, hüvelykujjnyi távolságra kerülnek */
  .lightbox__img{max-height:calc(100vh - 10rem)}
  .lightbox__nav{top:auto; bottom:.75rem; margin-top:0; width:42px; height:42px}
  .lightbox__nav--prev{left:calc(50% - 6.4rem)}
  .lightbox__nav--next{right:calc(50% - 6.4rem)}
  .lightbox__count{bottom:1.65rem}
  .gallery__zoom{display:none}
}
@media (max-width:430px){
  .brand__logo{width:104px}
  .brand__sub{font-size:.5rem; letter-spacing:.2em}
  .nav__cta-long{display:none}
  .nav__cta-short{display:inline}
}
@media (max-width:360px){
  .topbar__tel{display:none}
  .topbar__spacer{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}

/* =========================================================
   JOGI OLDALAK (impresszum, ÁSZF, adatkezelés)
   ========================================================= */
.legalnav{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2rem}
.legalnav a{
  display:inline-flex; align-items:center; padding:.5rem 1.1rem; border-radius:999px;
  border:1px solid var(--line-strong); text-decoration:none;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mocha);
  transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}
.legalnav a:hover{border-color:var(--plum); color:var(--plum)}
.legalnav a[aria-current]{background:var(--plum); border-color:var(--plum); color:#fff}

/* Lemondó oldal - a kártya és a .legal lista adja a kinézetet, itt csak a
   szűkebb szélesség és a gombsor térköze kell */
.cancel-box{max-width:56ch}
.cancel-box .btnrow{margin-top:1.8rem}
.cancel-box form{margin:0}

.prose{max-width:74ch}
.prose > *:first-child{margin-top:0}
.prose h2{font-size:clamp(1.28rem,2vw,1.62rem); margin:2.8rem 0 .9rem}
.prose h3{font-size:clamp(1.06rem,1.5vw,1.22rem); margin:2rem 0 .7rem}
.prose h2 + h3{margin-top:1.2rem}
.prose p{margin:0 0 1rem; font-size:.95rem; line-height:1.75; color:var(--mocha)}
.prose p b,.prose li b,.prose strong{color:var(--ink); font-weight:500}
.prose ul,.prose ol{margin:0 0 1.2rem 1.3rem; padding:0}
.prose li{margin-bottom:.55rem; font-size:.95rem; line-height:1.7; color:var(--mocha); list-style:disc}
.prose ol > li{list-style:decimal}
.prose ul ul,.prose ol ul,.prose ol ol{margin:.55rem 0 .2rem 1.2rem}
.prose ul ul li{list-style:circle}
.prose a{color:var(--plum); text-decoration:none; border-bottom:1px solid var(--plum-line); word-break:break-word}
.prose a:hover{border-bottom-color:var(--plum)}
.prose__lead{font-size:1rem; color:var(--ink)}
.prose__box{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-m);
  padding:1.2rem 1.4rem; margin:0 0 1.4rem;
}
.prose__box p:last-child,.prose__box ul:last-child{margin-bottom:0}

.tablewrap{overflow-x:auto; margin:0 0 1.6rem; border:1px solid var(--line); border-radius:var(--r-m)}
.ltable{width:100%; border-collapse:collapse; min-width:520px; font-size:.86rem}
.ltable th,.ltable td{padding:.75rem .95rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); line-height:1.6}
.ltable thead th{
  background:var(--blush); color:var(--plum);
  font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500; white-space:nowrap;
}
.ltable tbody th{font-weight:500; color:var(--ink); font-family:var(--display); font-size:.95rem}
.ltable td{color:var(--mocha)}
.ltable tr:last-child th,.ltable tr:last-child td{border-bottom:none}

/* =========================================================
   IMPRESSZUM
   ========================================================= */
.legal__row{
  display:grid; grid-template-columns:16rem 1fr; gap:.4rem 1.4rem;
  padding:.72rem 0; border-bottom:1px solid var(--line);
}
.legal__row:last-child{border-bottom:none; padding-bottom:0}
.legal dt{
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--mocha); margin:0; align-self:center;
}
.legal dd{margin:0; font-family:var(--display); font-size:1.02rem; font-weight:500; color:var(--ink)}
/* számlaszám, IBAN - hosszú, tördelhető, nem a display fonttal */
.legal dd.legal__num{font-family:var(--body); font-size:.95rem; letter-spacing:.03em; word-break:break-all}
.legal dd a{color:inherit; text-decoration:none; border-bottom:1px solid var(--plum-line)}
.legal dd a:hover{color:var(--plum); border-bottom-color:var(--plum)}

@media (max-width:640px){
  .legal__row{grid-template-columns:1fr}
  .legal dd{font-size:.98rem}
}

/* small fixes */
.stylist__tag{display:block; margin-bottom:.15rem}
.summary__top strong{display:block; margin-top:.15rem}
.mail__body .srow dd{font-size:.95rem}
a.vh:focus{position:static; width:auto; height:auto; clip:auto; display:inline-block; padding:.6rem 1rem; background:var(--plum); color:#fff}

/* Bodoni Moda hairlines are too thin to read at regular weight — use the heavier loaded weight everywhere it's used */
.display,h1,h2,h3,.fact__n,.collage__badge b,.marquee__track span,.card__mark,
.price__name,.price__sum,.step__n,.step__t,.opt__name,.wizstep__n,.bookbar__sum b,
.opt__price,.calbar__m,.summary__top strong,.srow dd,.summary__total b,.flow__item::before,
.mail__body h4,.faq summary,.course__price,.testimonial-feature p,.testimonial-feature__name,
.testimonial-row p,.testimonial-row__n{font-weight:500}