/* Kapcsolódás Coaching – arculat a lookbook szerint
   Színek: zsályazöld #879B88, púderrózsaszín #BD8F91, meleg bézs #DCCDB9, taupe #8B7868, törtfehér #F7F4ED
   Olvashatósághoz a lookbook sötét taupe szöveget javasol: #4A3F38 (a taupe sötétített árnyalata, kontraszt 9,3:1) */
:root{
  --offwhite:#F7F4ED;
  --tint:#EFE8DC;          /* a bézs világos árnyalata hátterekhez */
  --beige:#DCCDB9;
  --sage:#879B88;
  --rose:#BD8F91;
  --taupe:#8B7868;
  --text:#4A3F38;          /* törzsszöveg */
  --text-soft:#5C4D43;     /* másodlagos szöveg, kontraszt 7,4:1 */
  --btn-text:#2E2621;      /* szöveg a zsályazöld gombon, kontraszt 5:1 */
  --serif:"Lora",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(20px,5vw,56px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--offwhite);color:var(--text);font-family:var(--sans);font-size:1.125rem;line-height:1.7}
img,svg{max-width:100%;display:block}
a{color:var(--text);text-decoration-line:underline;text-decoration-color:var(--rose);text-decoration-thickness:2px;text-underline-offset:.22em}
a:hover{text-decoration-color:var(--text)}
:focus-visible{outline:3px solid var(--text);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--text);color:#fff;padding:10px 16px;z-index:10}
.skip:focus{left:8px}
.wrap{width:min(100% - 2*var(--gutter),1080px);margin-inline:auto}

/* fejléc: vízszintes logó */
header.site{padding-block:18px;border-bottom:1px solid var(--beige)}
header.site .wrap{display:flex;flex-wrap:wrap;gap:14px 36px;align-items:center;justify-content:space-between}
.logo{display:block;line-height:0}
.logo img{height:54px;width:auto}
nav ul{display:flex;flex-wrap:wrap;gap:6px 28px;list-style:none;margin:0;padding:0}
nav a{text-decoration:none;font-weight:500;font-size:1.0625rem;padding:6px 0;border-bottom:2px solid transparent}
nav a:hover{border-bottom-color:var(--rose)}
nav a[aria-current="page"]{border-bottom-color:var(--sage)}

/* tipográfiai hierarchia a lookbook szerint */
h1{font-family:var(--serif);font-weight:500;font-size:clamp(1.75rem,4.2vw,2.25rem);line-height:1.25;margin:0;max-width:24ch}
h2{font-family:var(--sans);font-weight:500;font-size:clamp(1.35rem,2.6vw,1.5rem);line-height:1.3;margin:0 0 .8em}
h3{font-family:var(--sans);font-weight:500;font-size:1.25rem;line-height:1.3;margin:0 0 .35em}
p{margin:0 0 1.1em;max-width:62ch}
.lead{font-size:1.1875rem;color:var(--text-soft);max-width:52ch}

.hero{padding-block:clamp(48px,8vw,104px)}
.hero-split .wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:32px 64px;align-items:center}
.hero .lead{margin-top:1.2rem}
.hero .actions{margin-top:1.8rem}
.hero-mark{width:min(100%,320px);justify-self:center}
.hero-mark img{width:100%;height:auto}

.btn{display:inline-block;background:var(--sage);color:var(--btn-text);text-decoration:none;padding:13px 26px;border-radius:28px;font-weight:600;font-size:1rem;line-height:1.35;text-align:center;border:2px solid var(--sage)}
.btn:hover{background:var(--beige);border-color:var(--sage);color:var(--btn-text)}
.btn.quiet{background:transparent;border-color:var(--taupe)}
.btn.quiet:hover{background:var(--tint);border-color:var(--text)}
.actions{display:flex;flex-wrap:wrap;gap:14px}

section.block{padding-block:clamp(44px,7vw,88px)}
section.tint{background:var(--tint)}

/* szolgáltatások: sorok, nem kártyák */
.tracks{margin:0;padding:0;list-style:none;border-top:1px solid var(--beige)}
.tracks li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:8px 48px;padding-block:28px;border-bottom:1px solid var(--beige)}
.tracks h3{margin:0}
.tracks p{margin:0 0 .6em}
.tracks a.more{font-weight:600}

.steps{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:30px;max-width:720px}
.steps li{counter-increment:s;padding-left:62px;position:relative}
.steps li::before{content:counter(s);position:absolute;left:0;top:-4px;width:42px;height:42px;border-radius:50%;border:2px solid var(--rose);display:grid;place-items:center;font-family:var(--serif);font-size:1.15rem;color:var(--text)}
.steps h3{margin-bottom:.2em}
.steps p{margin:0}

.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:24px 64px}
.note{border-left:3px solid var(--rose);padding:2px 0 2px 20px;color:var(--text-soft);max-width:62ch}
.note p{margin:0}
.credo{margin:1.6em 0;padding:0 0 0 22px;border-left:3px solid var(--sage);max-width:44ch}
.credo p{font-family:var(--serif);font-weight:500;font-size:1.375rem;line-height:1.45;margin:0;color:var(--text)}
.checks{list-style:none;margin:0 0 1.2em;padding:0;max-width:62ch}
.checks li{padding:10px 0 10px 34px;position:relative;border-bottom:1px solid var(--beige)}
.checks li::before{content:"";position:absolute;left:4px;top:19px;width:14px;height:8px;border-left:2px solid var(--sage);border-bottom:2px solid var(--sage);transform:rotate(-45deg)}

.bookgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-top:2rem}
.book{background:#fff;border:1px solid var(--beige);border-radius:14px;padding:28px}
.book h3{margin-bottom:.3em}
.book .meta{color:var(--text-soft);margin-bottom:1em}

footer.site{border-top:1px solid var(--beige);padding-block:40px 56px;color:var(--text-soft);font-size:1rem}
footer.site .wrap{display:flex;flex-wrap:wrap;gap:24px 48px;justify-content:space-between}
footer.site p{margin:0 0 .4em}
footer.site .tagline{font-family:var(--serif);font-weight:500;color:var(--text);max-width:34ch}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site a{color:var(--text-soft)}

.legal h2{font-size:1.35rem;margin-top:2em}
.legal ul{max-width:62ch}
mark.todo{background:#FFE9A8;color:#4A3500;padding:0 .25em;border-radius:3px}

@media (max-width:820px){
  .hero-split .wrap{grid-template-columns:1fr}
  .hero-mark{display:none}
  .tracks li,.two{grid-template-columns:1fr}
  body{font-size:1.0625rem}
  .logo img{height:46px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* árak, portré */
.price{font-weight:600;color:var(--text)}
.portrait{margin:1.2rem 0 0;max-width:340px}
.portrait img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:18px;background:var(--tint)}
@media (max-width:820px){.portrait{max-width:280px}}

/* folyamat + fotó */
.process{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px 56px;align-items:center}
.scene{margin:0}
.scene img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:18px}
.portrait img{object-position:50% 20%}
@media (max-width:820px){.process{grid-template-columns:1fr}}