/* ==========================================================================
   Circle webdesign — home.css
   Csak a főoldalon (front-page) töltődik be. base.css után.
   ========================================================================== */

.section{padding-block:clamp(3.5rem,8vw,7rem);position:relative}
.section.tint{background:var(--tint)}
.section.paper-bg{background:var(--bg-2)}
.section-lead{max-width:var(--content-reading);font-size:var(--step-1);color:var(--text-soft);margin-top:var(--space-4)}
.big-statement{font-family:var(--font-display);font-size:var(--step-4);line-height:1.06;max-width:22ch;letter-spacing:-.01em}
.big-statement em{font-style:italic;color:var(--teal)}
:root[data-theme="dark"] .big-statement em{color:var(--air-bright)}
.mark-hl{background:linear-gradient(180deg,transparent 58%,rgba(117,184,200,.55) 58% 92%,transparent 92%);padding:0 .1em}

/* HERO + ÉRTÉKEK: rögzített kép, felcsúszó papírlap, ráúszó fekete értékszekció */
.reveal-stage{position:relative;background:var(--ink)}
.reveal-photo{position:sticky;top:0;height:100svh;margin-bottom:-100svh;z-index:0;overflow:hidden;background:var(--ink)}
.reveal-photo .photo{width:100%;height:100%}
.reveal-photo .photo picture{display:block;width:100%;height:100%}
.reveal-photo .photo img{width:100%;height:100%;object-fit:cover;object-position:center 32%}
.reveal-photo .ph{align-items:center;justify-content:center;text-align:center}
.hero-copy{position:relative;z-index:2;height:230svh}
.hero-panel{position:relative;height:95svh;background-color:#ffffff;background-image:linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.35)),url("../images/paper-texture.webp");background-size:cover;background-position:center;box-shadow:0 12px 26px -8px rgba(17,14,11,.32),0 2px 3px rgba(17,14,11,.12);display:flex;align-items:center;padding-top:var(--header-h);color:var(--ink)}
.hero-panel-inner{width:min(100% - clamp(3rem,8vw,10rem),106rem);margin-inline:auto;padding-block:clamp(3rem,9vh,7rem)}
.hero-panel .btn-ghost{color:var(--ink);border-color:var(--ink)}
.hero-panel .btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.hero-context{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.16em;font-weight:600;color:var(--teal);margin:0 0 var(--space-4);display:inline-block}
.hero-panel h1{font-family:var(--font-display);font-size:var(--step-5);line-height:.98;letter-spacing:-.01em;margin-bottom:var(--space-4);color:var(--ink);max-width:20ch}
.hero-panel h1 em{font-style:italic;color:var(--ink)}
.hero-sub{font-size:var(--step-1);color:#4a4640;max-width:44rem;margin-bottom:var(--space-5)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
/* (görgetés-jelző eltávolítva) */

/* Kép-helykitöltők */
.photo{position:relative;width:100%;height:100%}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--motion-slow)}
.photo.loaded img{opacity:1;position:relative}
.photo .ph{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:.4rem;padding:1.1rem 1.2rem;background:var(--paper-noise),repeating-linear-gradient(135deg,transparent 0 22px,rgba(117,184,200,.14) 22px 23px),linear-gradient(160deg,#eaedec,#dfe3e2);color:var(--teal)}
.photo.loaded .ph{display:none}
.photo .ph .tag{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.14em;font-weight:700}
.photo .ph .desc{font-size:var(--step--1);color:#4a4640;max-width:28rem}
.photo .ph .frame{position:absolute;inset:12px;border:1.5px dashed rgba(39,60,44,.4);border-radius:4px;pointer-events:none}

/* Értékek — színes papírcetli-kártyák sticky-stack */
.values-section{position:relative;z-index:2;background:var(--ink);color:var(--paper);padding-block:clamp(4rem,10vw,8rem);min-height:100svh}
.svc-intro-block{margin-top:0;padding-top:0;border-top:0}
.svc-intro-eyebrow{display:inline-block;font-size:var(--step--1);text-transform:uppercase;letter-spacing:.16em;font-weight:700;color:var(--teal);margin-bottom:var(--space-3)}
:root[data-theme="dark"] .svc-intro-eyebrow{color:var(--air-bright)}
.svc-intro-lead{margin-top:var(--space-4);max-width:52rem;font-size:var(--step-1);color:var(--text-soft)}
.svc-intro-block .big-statement em{color:var(--orange);white-space:nowrap}
.values-section .eyebrow{color:var(--air)}
.values-section .big-statement{color:var(--paper)}
.values-section .big-statement em{color:var(--air)}
.notes-stack{max-width:46rem;margin:var(--space-6) auto 0;display:flex;flex-direction:column;gap:clamp(8rem,30vh,18rem)}
.paper-note{position:sticky;top:clamp(5.5rem,14vh,8.5rem);--rot:-1.6deg;transform:rotate(var(--rot));background-color:#ffffff;background-image:linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,.4)),url("../images/paper-texture.webp");background-size:cover;background-position:center;color:var(--ink);padding:clamp(1.75rem,4vw,2.75rem);border-radius:3px;box-shadow:var(--shadow-paper)}
.paper-note:nth-child(2){--rot:1.5deg;top:calc(clamp(5.5rem,14vh,8.5rem) + 1.4rem)}
.paper-note:nth-child(3){--rot:-.8deg;top:calc(clamp(5.5rem,14vh,8.5rem) + 2.8rem)}
.note-ic{inline-size:76px;block-size:76px;margin-bottom:var(--space-4);display:block}
.note-ic img{width:100%;height:100%;object-fit:contain}
.paper-note h3{font-family:var(--font-display);font-size:var(--step-3);color:var(--ink);line-height:1.04;margin-bottom:var(--space-3)}
.paper-note p{font-family:var(--font-body);font-size:clamp(1.05rem,1rem + .3vw,1.2rem);color:#2c2823;line-height:1.6}

/* Szolgáltatás-szekciók (folyamat) */
.journey{position:relative}
.svc{position:relative;padding-block:clamp(4.5rem,10vw,8rem);overflow:hidden}
.svc-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,5vw,4rem);align-items:stretch}
.svc.sky{background:var(--air);color:var(--ink)}
.svc.green{background:var(--teal);color:var(--paper)}
.svc.dark{background:var(--ink);color:var(--paper)}
.svc .svc-kicker{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.16em;font-weight:700;display:inline-flex;align-items:center;gap:.6rem;margin-bottom:var(--space-3)}
.svc.sky .svc-kicker{color:var(--ink)}
.svc.green .svc-kicker{color:var(--air-bright)}
.svc.dark .svc-kicker{color:var(--air-bright)}
.svc h2{font-family:var(--font-display);font-size:var(--step-4);line-height:1.02;margin-bottom:var(--space-3)}
.svc .svc-lead{font-size:var(--step-1);max-width:32rem;margin-bottom:var(--space-4)}
.svc.sky .svc-lead{color:var(--ink)}
.svc.green .svc-lead{color:rgba(241,243,242,.9)}
.svc.dark .svc-lead{color:rgba(241,243,242,.9)}
.svc-what{list-style:none;margin:0 0 var(--space-5);padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.svc-what li{font-size:var(--step--1);font-weight:600;padding:.35rem .85rem;border-radius:var(--radius-pill);border:1.5px solid currentColor}
.svc.green .svc-what li,.svc.dark .svc-what li{color:var(--paper)}
.svc-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
/* Egy kép/munka a szolgáltatás-szöveg mellett, a szöveg magasságához igazítva */
.svc-feature{position:relative;display:block;height:100%;min-height:15rem;border-radius:var(--radius-medium);overflow:hidden;background:var(--tint);box-shadow:var(--shadow-3);text-decoration:none;color:inherit}
.svc-feature img{width:100%;height:100%;object-fit:cover;display:block}
.svc-feature .ph{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:.4rem;padding:1.1rem 1.2rem;background:var(--paper-noise),repeating-linear-gradient(135deg,transparent 0 22px,rgba(117,184,200,.14) 22px 23px),linear-gradient(160deg,#eaedec,#dfe3e2);color:var(--teal)}
.svc-feature .ph .frame{position:absolute;inset:12px;border:1.5px dashed rgba(39,60,44,.4);border-radius:4px}
.svc-feature .ph .tag{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.14em;font-weight:700}
/* Asztal-hangulat: tárgyfotó a szekció szélén (csak nagy képernyőn) */
.desk-object{position:absolute;pointer-events:none;z-index:3}
.svc.sky .desk-pencil{left:55%;bottom:1.5rem;width:clamp(320px,46vw,620px);transform:translateX(-50%) rotate(-12deg)scaleX(-1);filter:drop-shadow(0 12px 18px rgba(0,0,0,.22))}

/* Rólam (főoldali rövid blokk) */
.about{background:var(--bg)}
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.about-figure{position:relative;margin:0}
.about-photo{aspect-ratio:4/5;border-radius:var(--radius-medium);overflow:hidden;background:var(--border);box-shadow:var(--shadow-3)}
.about-photo img{object-position:center 22%}
.about-note{position:absolute;right:-.75rem;bottom:-1.25rem;z-index:4;max-width:19rem;--rot:2.2deg;transform:rotate(var(--rot));background-color:#ffffff;background-image:linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,.4)),url("../images/paper-texture.webp");background-size:cover;background-position:center;padding:1.2rem 1.35rem 1.3rem;border-radius:2px;color:var(--ink);box-shadow:var(--shadow-paper)}
.about-note .note-k{font-size:var(--step--1);letter-spacing:.12em;text-transform:uppercase;color:var(--teal);font-weight:700;display:block;margin-bottom:.3rem}
.about-note p{font-family:var(--font-display);font-style:italic;font-size:var(--step-1);line-height:1.28}
@keyframes paper-breeze{0%{transform:rotate(var(--rot)) translateY(0)}45%{transform:rotate(calc(var(--rot) - 1deg)) translateY(-4px)}100%{transform:rotate(var(--rot)) translateY(0)}}
.about-note.is-breeze{animation:paper-breeze 1.6s var(--ease-paper)}
.about h2{font-family:var(--font-display);font-size:var(--step-4);margin-bottom:var(--space-3)}
.about .role{color:var(--teal);font-weight:600;margin-bottom:var(--space-4)}
:root[data-theme="dark"] .about .role{color:var(--air-bright)}
.about p + p{margin-top:var(--space-3)}
.about-strength{margin-top:var(--space-4);padding-left:var(--space-4);border-left:3px solid var(--orange);font-family:var(--font-display);font-size:var(--step-1);font-style:italic;line-height:1.3}

/* Kapcsolat */
.contact{background:var(--air);color:var(--ink)}
.contact .eyebrow{color:var(--ink)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:start}
.contact h2{font-family:var(--font-display);font-size:var(--step-4);line-height:1.05;margin-bottom:var(--space-4);color:var(--ink)}
.contact-intro{color:var(--ink);font-size:var(--step-1);max-width:34rem}
.contact-direct{margin-top:var(--space-5)}
.contact-direct a{color:var(--ink);text-underline-offset:.25em}
.form{background:#ffffff;border:1px solid rgba(17,14,11,.12);border-radius:var(--radius-large);padding:clamp(1.5rem,3vw,2.25rem);box-shadow:0 30px 60px -40px rgba(17,14,11,.5)}
.field{margin-bottom:var(--space-4)}
.field label{display:block;font-weight:600;margin-bottom:.15rem;color:var(--ink)}
.field .req{color:var(--orange)}
.field .hint{display:block;font-size:var(--step--1);color:#4a4640;margin-top:0;margin-bottom:.45rem;line-height:1.35}
.field input,.field textarea{width:100%;font-family:var(--font-body);font-size:var(--step-0);padding:.8rem .9rem;border-radius:var(--radius-small);border:2px solid rgba(17,14,11,.25);background:#ffffff;color:var(--ink)}
.field input::placeholder,.field textarea::placeholder{color:#8a8580}
.field input:focus,.field textarea:focus{border-color:var(--orange)}
.field textarea{resize:vertical;min-height:7rem}
.field.has-error input,.field.has-error textarea{border-color:#c62d00}
.field .error-msg{display:none;color:#c62d00;font-size:var(--step--1);margin-top:.4rem}
.field.has-error .error-msg{display:block}
.form-note{font-size:var(--step--1);color:#4a4640;margin-top:var(--space-3)}
.form-note .tbc{color:var(--orange);font-weight:700}
.form-status{margin-top:var(--space-3);color:var(--teal);font-weight:600}

/* Reszponzív */
@media (max-width:1000px){
  .values,.contact-grid,.about-grid,.svc-inner{grid-template-columns:1fr}
  .desk-object,.desk-sheet{display:none}
  .svc-inner{gap:var(--space-6)}
  .svc-feature{height:auto;min-height:0;aspect-ratio:3/2}
  .about-figure{max-width:28rem}
}
@media (max-width:760px){
  .svc-works{grid-template-columns:1fr}
  .corner-cta{right:1rem;bottom:1rem}
  /* Hero: vertikálisan középen (a .hero-panel globális align-items:center + padding-top:header-h) */
  .hero-panel-inner{padding-top:clamp(3rem,9vh,7rem)}
}
@media (prefers-reduced-motion:reduce){
  .about-note,.hero-panel{transform:none!important}
  .paper-note{position:static;transform:none;margin-bottom:var(--space-5)}
  .notes-stack{gap:var(--space-5)}
  .journey .svc{position:static;min-height:0}
}

/* ==========================================================================
   Főoldal — bővítések (hero-közép, szolgáltatás-kártya finomítások, stacking)
   ========================================================================== */

/* Szolgáltatás-szöveg: asztali = teljes, mobil/tablet = rövid. */
.svc-lead--short{display:none}
@media (max-width:1000px){
  .svc-lead--full{display:none}
  .svc-lead--short{display:block}
}

/* Szolgáltatás-szekciók egy kicsit kisebbre tablet és mobil nézetben. */
@media (max-width:1000px){
  .journey .svc{padding-block:clamp(2.5rem,7vw,4.25rem)}
  .journey .svc h2{font-size:var(--step-3)}
  .journey .svc .svc-lead{font-size:var(--step-0)}
  .journey .svc-what li{font-size:calc(var(--step--1) * .95);padding:.3rem .7rem}
}

/* Szolgáltatás-kép: fölötte eyebrow (papírcetli helyett); a hover-nyíl marad. */
.svc-feature-wrap{display:flex;flex-direction:column;height:100%}
.svc-feature-eyebrow{display:block;font-size:var(--step--1);text-transform:uppercase;letter-spacing:.14em;font-weight:700;margin-bottom:.7rem}
.svc.sky .svc-feature-eyebrow{color:var(--ink)}
.svc.green .svc-feature-eyebrow,.svc.dark .svc-feature-eyebrow{color:var(--air-bright)}
.svc-feature-wrap .svc-feature{flex:1}

/* Szolgáltatás-kártyák egymásra lapozódnak (sticky stack) — desktop/tablet. */
.journey{position:relative}
.journey .svc{position:sticky;top:0;min-height:100svh;display:flex;align-items:center}
/* Mobilon NEM lapozódnak (különben a munka-kép + nyíl a kártya alján lemaradna);
   normál görgetés, és a kép-nyíl mindig látszik (érintésnél nincs hover). */
@media (max-width:760px){
  .journey .svc{position:static;min-height:0;display:block}
  .svc-feature .card-arrow{opacity:1;transform:none}
}

/* Kézírásos annotáció mobilon: a CTA gomb FÖLÉ, statikus jegyzetként
   (a lebegő float verziót a base.css mobilon amúgy is elrejti). */
.annot--mobile{display:none}
@media (max-width:760px){
  .annot--mobile{display:block;max-width:100%;margin:.25rem 0 1.1rem;transform:rotate(-2deg)}
}

/* Kézzel rajzolt narancs nyíl PSZEUDO-elemként: ~37°-ban forgatva (hegye balra),
   a bevezető mondat után, ráúszva a szolgáltatás-kártyák tetejére. */
.svc-intro-section{position:relative;z-index:5}
.svc-intro-block{position:relative}
.svc-intro-block::after{
  content:"";position:absolute;right:50px;left:auto;top:100%;
  width:clamp(58px,7vw,88px);height:clamp(94px,11vw,132px);
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 92' fill='none' stroke='%23fa4801' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M30 6 C 23 26, 34 40, 27 60 C 25 68, 27 74, 27 80'/><path d='M16 63 C 21 70, 25 76, 27 81 C 29 76, 34 70, 40 63'/></svg>") no-repeat center / contain;
  transform-origin:top center;transform:rotate(37deg);
  pointer-events:none;z-index:6;
}