/* =========================================================
   The Inward Lab: inner pages (service, work, workshops, about, contact, faq, privacy),
   coaching submenu, language switch, credit.
   ========================================================= */

/* ---------- coaching submenu + language switch ---------- */
.nav-sub { position: relative; display: inline-flex; align-items: center; }
.nav-sub-t { gap: 6px; display: inline-flex; align-items: center; min-height: 44px; font: inherit; font-size: var(--t-small); font-weight: 500; color: inherit; background: none; border: 0; cursor: pointer; }
.nav-sub-t .dn { width: 12px; height: 12px; transition: transform var(--dur-ui) var(--ease-ui); }
.sub { list-style: none; }
@media (min-width: 941px) {
  .sub { position: absolute; top: calc(100% - 4px); left: -18px; min-width: 300px; padding: 10px; border-radius: 16px;
         background: var(--paper); color: var(--ink); box-shadow: 0 24px 60px -28px rgba(32,39,31,.45);
         opacity: 0; visibility: hidden; translate: 0 6px; transition: opacity var(--dur-ui) var(--ease-ui), translate var(--dur-ui) var(--ease-ui), visibility 0s var(--dur-ui); }
  .nav-sub:hover .sub, .nav-sub:focus-within .sub, .nav-sub.open .sub { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
  .nav-sub:hover .dn, .nav-sub:focus-within .dn, .nav-sub.open .dn { transform: rotate(180deg); }
  .sub a { display: flex !important; min-height: 44px; padding: 0 14px; border-radius: 10px; color: var(--ink); }
  .sub a::after { display: none; }
  .sub a:hover, .sub a[aria-current] { background: var(--paper-2); }
  .lang { display: inline-flex; gap: 2px; padding-left: 8px; border-left: 1px solid currentColor; border-left-color: color-mix(in srgb, currentColor 30%, transparent); }
}
.lang a { font-family: var(--sans); font-size: var(--t-small) !important; font-weight: 500; letter-spacing: .04em; min-width: 44px; min-height: 44px; justify-content: center; opacity: .72; }
.lang a[aria-current] { opacity: 1; }
.lang a:has(.flag) { opacity: .9; }
.lang a[aria-current]:has(.flag) { opacity: 1; }
/* round flags (18/10): 22 px disc, hairline ring; the current language is full colour, the others muted until hover */
.lang .flag { width: 22px; height: 22px; border-radius: 50%; display: block; box-shadow: 0 0 0 1px rgba(239,235,224,.35); }
.lang a .flag { filter: saturate(.85); transition: filter var(--dur-ui) var(--ease-ui), transform var(--dur-ui) var(--ease-ui); }
.lang a:hover .flag, .lang a:focus-visible .flag, .lang a[aria-current] .flag { filter: none; }
.lang a:hover .flag { transform: scale(1.08); }
.lang a[aria-current] .flag { box-shadow: 0 0 0 2px var(--glow, #c9cdb1); }
.lang a::after { display: none; }
@media (max-width: 940px) {
  .nav-sub { flex-direction: column; align-items: flex-end; }
  .nav-sub-t .dn { display: none; }
  .sub { display: flex; flex-direction: column; align-items: flex-end; margin: 0 0 6px; padding-right: 12px; border-right: 1px solid var(--line); }
  /* same type as every other panel entry (17/10); the rule on the right is the only hierarchy cue.
     Long labels wrap inside the panel, right-aligned, instead of running past its left edge. */
  .sub li { max-width: 100%; }
  .sub a { font-size: 18px !important; font-family: var(--sans) !important; font-weight: 500 !important; color: inherit; min-height: 44px !important;
           white-space: normal !important; text-align: right; line-height: 1.3; padding: 8px 0; }
  .nav-sub-t { pointer-events: none; }   /* in the panel the group name is a label; its pages are listed under it */
  .lang { display: flex; gap: 6px; margin-top: var(--s2); }
}

/* ---------- inner page first screen: one act at a time ---------- */
.page-hero { padding: 150px 0 var(--s6); position: relative; }
.page-hero-sm { padding-bottom: var(--s5); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: var(--mono); font-size: var(--t-label); letter-spacing: .06em; color: var(--on-night-soft); }
.crumbs a { color: var(--on-night-soft); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.crumbs a:hover { color: var(--on-night); }
.crumbs [aria-current] { color: var(--on-night); display: inline-flex; align-items: center; }
.page-hero .eyebrow { margin-top: var(--s5); }
.page-hero .display { font-size: clamp(40px, 6vw, 80px); margin-top: var(--s3); max-width: 18ch; color: var(--on-night); }
.answer { margin-top: var(--s5); max-width: 760px; background: var(--night-2); border-radius: 20px; padding: var(--s4) var(--s4) var(--s4) calc(var(--s4) + 4px); position: relative; overflow: hidden; }
.answer::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--glow); }
.ans-lbl { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; color: var(--glow); }
.answer p { margin-top: 10px; font-size: var(--t-lead); line-height: 1.55; color: var(--on-night); }
.ph-meta { margin-top: var(--s5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
.updated { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .06em; color: var(--on-night-soft); }
.nf .lead { margin-top: var(--s3); }

.anim-ready .page-hero .crumbs  { animation: h-rise 900ms var(--wx-out) both; }
.anim-ready .page-hero .ph-eye  { animation: h-from-left 1000ms var(--wx-out) both; animation-delay: calc(250ms * var(--wx-k)); }
.anim-ready .page-hero .ph-h1   { animation: h-mask-in 1400ms var(--wx-out) both; animation-delay: calc(450ms * var(--wx-k)); }
.anim-ready .page-hero .answer  { animation: h-build 1500ms var(--wx-out) both; animation-delay: calc(950ms * var(--wx-k)); }
.anim-ready .page-hero .ph-btn  { animation: h-arrive 1300ms var(--wx-out) both; animation-delay: calc(1400ms * var(--wx-k)); }
.anim-ready .page-hero .updated { animation: h-rise 1000ms var(--wx-out) both; animation-delay: calc(1650ms * var(--wx-k)); }
@keyframes h-mask-in { from { opacity: 0; translate: 0 28px; } }
@keyframes h-build   { from { clip-path: inset(0 100% 0 0 round 20px); } to { clip-path: inset(0 0 0 0 round 20px); } }

/* ---------- two-column head + list ---------- */
.sp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: start; }
.sp-grid .section-head .h2 { margin-top: var(--s3); }
.sp-grid .section-head .lead { margin-top: var(--s3); }
.sig-list { list-style: none; display: grid; gap: var(--s2); }
.sig-list li { background: var(--paper); border-radius: 16px; padding: var(--s3) var(--s4); }
.sig-list h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(21px, 1.9vw, 26px); line-height: 1.2; }
.sig-list p { margin-top: 6px; color: var(--ink-soft); }
.chg-list { list-style: none; border-top: 1px solid var(--line); }
.chg-list li { display: flex; gap: var(--s3); align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: clamp(20px, 1.8vw, 24px); line-height: 1.3; }
.tick { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); translate: 0 -2px; }
.ways-page .way p + p { margin-top: var(--s2); }
.ways-page .way p { flex: none; }
.ways-page .way .tlink { margin-top: auto; }
.ways-page li { scroll-margin-top: 100px; }

/* ---------- author ---------- */
.author-sec { padding-top: 0; }
.author { display: flex; align-items: center; gap: var(--s3); background: var(--paper); border-radius: 20px; padding: var(--s3); max-width: 560px; margin: 0 auto; }
.author img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; flex: none; }
.author-name { font-family: var(--serif); font-size: var(--t-h3); line-height: 1.1; margin-top: 4px; }
.author-name a { text-decoration-thickness: 1px; text-underline-offset: .18em; }
.author-role { color: var(--ink-soft); font-size: var(--t-small); margin-top: 2px; }

/* ---------- related + closing band (dark) ---------- */
.cta-band .rel { display: flex; flex-direction: column; align-items: center; gap: var(--s3); text-align: center; }
.cta-band .eyebrow::after { content: ""; width: 28px; height: 1px; background: currentColor; }
.rel-list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; }
.rel-list a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 100px; background: var(--night-2); color: var(--on-night); text-decoration: none; font-size: var(--t-small); transition: background-color var(--dur-ui) var(--ease-ui); }
.rel-list a:hover { background: #525646; }
.rel-list .arr { width: 14px; height: 14px; color: var(--glow); }
.band { margin-top: var(--s6); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--s3); }
.band .lead { max-width: 46ch; }

/* ---------- about page ---------- */
.creds-page { margin-top: 0; }
.creds-page li { flex-direction: column; align-items: flex-start; gap: 4px; }
.creds-page .cv { text-align: left; font-family: var(--serif); font-size: clamp(20px, 1.8vw, 24px); font-weight: 400; }
.creds-page a.ct { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; min-height: 32px; display: inline-flex; align-items: center; }
.about-more { margin-top: var(--s3); }

/* ---------- contact page ---------- */
.next-list { margin-top: var(--s4); padding-left: 1.2em; color: var(--on-night-soft); display: grid; gap: 10px; }
.next-list li::marker { color: var(--glow); font-family: var(--mono); }
.privacy a { color: var(--on-night); text-underline-offset: .2em; }

/* ---------- faq page ---------- */
.faq-page { max-width: 880px; }
.faq-all { margin-top: var(--s3); }

/* ---------- privacy ---------- */
.legal-body { max-width: 760px; }
.legal-body h2 { margin-top: var(--s5); }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p { margin-top: var(--s2); color: var(--ink-soft); }

/* ---------- Expertease credit: on the dark footer, loop only once visible ---------- */
.footer .expertease-credit { margin-bottom: 0; }
.expertease-credit:not(.ec-on) *, .expertease-credit:not(.ec-on) { animation-play-state: paused !important; }

@media (max-width: 940px) {
  .sp-grid { grid-template-columns: 1fr; gap: var(--s5); }
  .page-hero { padding-top: 120px; }
}
/* mobile: the action comes before the long answer, so it is in the first frame (K12) */
@media (max-width: 734px) {
  .page-hero .container { display: flex; flex-direction: column; }
  .page-hero .ph-meta { order: 4; margin-top: var(--s4); }
  .page-hero .answer { order: 5; }
}
@media (max-width: 734px) {
  .answer { padding: var(--s3) var(--s3) var(--s3) calc(var(--s3) + 4px); }
  .sig-list li { padding: var(--s3); }
  .author { padding: var(--s2) var(--s3); }
}
@media (prefers-reduced-motion: reduce) {
  .anim-ready .page-hero * { animation: none !important; }
}

/* home: workshops line under the four areas */
.areas-more { margin-top: var(--s4); display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--ink-soft); font-size: var(--t-small); }

/* Greek words run ~25 % longer: the hero title steps down one notch so it keeps to three lines */
html[lang="el"] .hero .display { font-size: clamp(40px, 6.1vw, 80px); }
html[lang="el"] .page-hero .display, html[lang="es"] .page-hero .display { font-size: clamp(36px, 5.2vw, 72px); }

/* ---------- booking (18/10): /book/ list, contact-page shortcut, confirmation + payment step ---------- */
.btn-ghost { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.btn-ghost:hover { background: var(--accent); color: var(--paper); transform: translateY(-2px); }
.bk-list { list-style: none; margin-top: var(--s5); border-top: 1px solid var(--line); }
.bk-row { display: grid; grid-template-columns: 1fr auto 170px; align-items: center; gap: var(--s4); padding: 28px 8px; border-bottom: 1px solid var(--line); }
.bk-what p { margin-top: 6px; color: var(--ink-soft); max-width: 52ch; }
.bk-meta { display: flex; gap: 14px; align-items: center; font-family: var(--mono); font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.bk-free { color: var(--accent); }
.bk-btn { justify-self: end; width: 100%; }
.bk-row:target { background: var(--paper-2); border-radius: 12px; }
.bk-how { max-width: 46ch; margin-inline: auto; text-align: left; color: var(--ink-soft); }
.bk-how li::marker { color: var(--accent); }
.pick-time { margin-top: var(--s4); color: var(--on-night-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.bk-pay { padding-block: var(--s5); }
.bk-pay-quiet { max-width: 62ch; color: var(--ink-soft); font-size: var(--t-small); line-height: 1.6; }
.bk-pay-quiet .tlink { display: flex; width: fit-content; } .bk-pay-quiet .tlink .bk-price { margin-left: -8px; }
.cal-loading { opacity: .6; pointer-events: none; }
@media (max-width: 734px) {
  .bk-row { grid-template-columns: 1fr auto; gap: 12px 16px; padding: 22px 4px; }
  .bk-what { grid-column: 1 / -1; }
  .bk-btn { width: auto; }
}

/* ---------- hover emphasis (18/10): every actionable part answers the pointer clearly ----------
   lift + soft shadow on buttons and cards, the glow olive as the accent mark (underlines, numbers, dots).
   Pointer devices only; keyboard focus gets the same through :focus-visible where it matters. */
.statement { overflow-x: clip; }   /* the phrase that travels in from the right never widens the page */
.photo-chip { text-decoration: none; transition: transform var(--dur-ui) var(--ease-ui), box-shadow var(--dur-ui) var(--ease-ui); }
.tlink::after { height: 2px; }
@media (hover: hover) {
  .btn { will-change: transform; }
  .btn:hover, .btn:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 28px -14px rgba(32,39,31,.55), 0 0 0 4px rgba(102,105,83,.18); }
  .dark .btn:hover, .dark .btn:focus-visible { box-shadow: 0 16px 32px -14px rgba(0,0,0,.7), 0 0 0 4px rgba(179,182,155,.28); }
  .btn:active { transform: translateY(-1px); box-shadow: none; }
  .btn-light:hover { background: #fff; }
  .tlink:hover { color: var(--accent-hover); }
  .dark .tlink:hover { color: var(--on-night); }
  .photo-chip:hover, .photo-chip:focus-visible { transform: translateY(-4px); box-shadow: 0 14px 30px -12px rgba(0,0,0,.55), 0 0 0 4px rgba(179,182,155,.35); }
  .way { transition: transform .35s var(--ease-ui), box-shadow .35s var(--ease-ui); }
  .way:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -24px rgba(32,39,31,.45); }
  .way:hover .kind { color: var(--taupe-deep); }
  .way-deep:hover .kind { color: var(--taupe-light); }
  .area:hover .n { color: var(--taupe-deep); }
  .step { transition: transform .35s var(--ease-ui); }
  .step:hover { transform: translateY(-6px) !important; }
  .step:hover .sn { color: var(--taupe-light); }
  .bk-row { transition: background-color .3s var(--ease-ui), padding .3s var(--ease-ui); border-radius: 12px; }
  .bk-row:hover { background: var(--paper-2); padding-left: 20px; }
  .faq-q { transition: color .25s var(--ease-ui), padding .25s var(--ease-ui); }
  .faq-q:hover { color: var(--accent); padding-left: 8px; }
  .faq-q:hover .ic { background: var(--accent-tint); }
  .footer-col a, .sub a, .crumbs a { transition: color .2s var(--ease-ui), transform .2s var(--ease-ui); }
  .footer-col a:hover { transform: translateX(4px); color: var(--on-night); }
  .rel-list a { transition: background-color .25s var(--ease-ui), transform .25s var(--ease-ui); }
  .rel-list a:hover { transform: translateX(6px); }
  .contact-mail a:hover { color: var(--taupe-light); }
}

/* ---------- form fields on the lighter dark sections (18/10) ---------- */
.contact .form-panel { box-shadow: 0 30px 60px -40px rgba(0,0,0,.45); }
.contact .field input, .contact .field select, .contact .field textarea { background: rgba(239,235,224,.08); border-color: rgba(239,235,224,.26); }

/* ---------- buttons (18/10, client): no arrow, smaller corner radius ---------- */
.btn { border-radius: 8px; }
.btn .arr { display: none; }