/* =========================================================
   The Inward Lab: sections. Dark / light rhythm:
   hero (dark) · statement · areas · method (dark) · ways · voice · about · contact (dark) · faq · footer (dark)
   ========================================================= */

.rule { display: block; height: 1px; background: currentColor; opacity: .28; }

/* ---------- hero: copy on the left half, Alex on the right half (full height, edge to edge) ---------- */
.hero { min-height: 100svh; display: flex; align-items: center; padding: 120px 0 80px; overflow: hidden; position: relative; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: center; position: static; }
.hero-copy { position: relative; z-index: 2; }
.hero .display { margin-top: var(--s3); color: var(--on-night); }
.hero-sub { margin-top: var(--s4); max-width: 34ch; }
.hero-cta { margin-top: var(--s5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
.move { display: inline-block; font-style: italic; color: var(--glow); cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.move.grabbing { cursor: grabbing; }

.hero-media { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; }
.hero-photo { position: absolute; inset: 0; overflow: hidden; background: var(--night-2); }
.hero-photo picture, .hero-photo img { display: block; width: 100%; height: 100%; }
.hero-photo img { object-fit: cover; object-position: 52% 30%; }
/* the photo meets the dark page on its left edge (part of the final frame, not an effect) */
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(59,63,49,.6) 0, rgba(59,63,49,0) 120px), linear-gradient(90deg, var(--night) 0%, rgba(59,63,49,.55) 14%, rgba(59,63,49,0) 34%); pointer-events: none; }
.photo-chip { position: absolute; bottom: 40px; left: 50%; translate: -50% 0; white-space: nowrap; z-index: 2; background: var(--on-night); color: var(--night); border-radius: 100px; padding: 10px 18px; font-size: var(--t-small); font-weight: 500; }
.photo-chip .lbl { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-right: 6px; }

/* ---------- hero timeline (18/10): two acts, unhurried ----------
   Act 1 · 0     portrait fades in (no zoom, no travel)
           · 300   "Clarity isn't the goal." slides in left → right (1.4 s)
           · 1 s of stillness (18/10: one second sooner)
           · 2700  "Movement" arrives on its spring (hero.js) · 3000 "is." settles
   Act 2 · 4000  eyebrow slides in; from then on it alone breathes every 6.47 s (hero.js)
           · 4600  the line under the title rises slowly (1.8 s), measured to the title's width
           · 5900  button · 6100 link · 6500 badge
   Mobile: every time × --wx-k (.78). Reduced motion: final frame at once (base.css). */
.hero { --hk: var(--wx-k, 1); }
.h-measure { width: fit-content; max-width: 100%; }
.h-measure .hero-sub { width: 0; min-width: 100%; max-width: none; text-wrap: pretty; }   /* same measure as the title above */
.h-l1 { display: inline-block; }
/* Hero choreography (18/10, calm, in three acts — elements of one act move together):
   Act 1 · 0 ms      portrait, eyebrow and "Clarity isn't the goal." arrive together (1.6 s)
   Act 2 · 1100 ms   "Movement is" travels as one phrase from far left to its place (2.6 s, no bounce)
   Act 3 · 3300 ms   line under the title, both buttons and the badge arrive together (1.4 s)
   Mobile: every time × --wx-k (.78). Reduced motion: final frame at once (base.css). */
.h-l2 { display: block; margin-top: .22em; font-size: 1.625em; line-height: 1; white-space: nowrap; }
/* desktop: as large as the space left of the portrait allows (up to +30 %); --r = line width ÷ font size per language */
.h-l2 { --r: 5.24; }
html[lang="el"] .h-l2 { --r: 6.44; }
html[lang="es"] .h-l2 { --r: 6.74; }
@media (min-width: 941px) {
  .hero-media { width: 44%; }
  .h-l2 { font-size: min(1.625em, calc((56vw + 40px - (max(0px, (100vw - 1240px) / 2) + 32px)) / var(--r))); }
}
@media (max-width: 734px) {
  .h-l2 { font-size: min(1.625em, 15.6vw); }
  html[lang="el"] .h-l2 { font-size: min(1.625em, 12.8vw); }
  html[lang="es"] .h-l2 { font-size: min(1.625em, 12.4vw); }
}
.hero-in :is(.hero-photo, .h-l1, .h-eye) { animation-delay: 0ms; }
.hero-in .hero-photo { animation: h-fade 1600ms cubic-bezier(.4,0,.2,1) both; }
.hero-in .h-l1       { animation: h-wipe 1600ms cubic-bezier(.33,0,.15,1) both; }
.hero-in .h-eye      { animation: h-from-left 1600ms var(--wx-out) both; }
.hero-in .h-eye::before, .hero-in .h-eye::after { transform-origin: right center; animation: h-line 1600ms var(--wx-out) both; }
.hero-in .h-l2       { animation: h-travel 2600ms cubic-bezier(.22,.61,.24,1) both; animation-delay: calc(1100ms * var(--hk)); }
.hero-in :is(.h-sub, .h-btn, .h-link) { animation: h-soft 1400ms var(--wx-out) both; animation-delay: calc(3300ms * var(--hk)); }
.hero-in .h-chip     { animation: h-dock 1400ms var(--wx-out) both; animation-delay: calc(3300ms * var(--hk)); }
/* phone/tablet (stacked hero, portrait below the text): act 1 = all the text and both buttons, so the way to
   get in touch is visible at once (ΜΗ-22/23); act 2 = "Movement is" travels; act 3 = portrait + badge, below the fold */
@media (max-width: 940px) {
  .hero-in :is(.h-sub, .h-btn, .h-link) { animation: h-soft 1400ms var(--wx-out) both; animation-delay: 0ms; }
  .hero-in .h-l2 { animation-delay: 600ms; }
  .hero-in .hero-photo { animation-delay: 1600ms; }
  .hero-in .h-chip { animation-delay: 1600ms; }
}
@keyframes h-travel  { 0% { opacity: 0; translate: -55vw 0; } 35% { opacity: 1; } 100% { opacity: 1; translate: 0 0; } }
.anim-ready .hero:not(.hero-in) :is(.hero-photo, .h-l1, .h-l2, .h-eye, .h-sub, .h-btn, .h-link, .h-chip) { opacity: 0; }
.anim-ready .hero:not(.hero-in) .h-eye::before { transform: scaleX(0); }
@keyframes h-fade      { from { opacity: 0; } }
@keyframes h-wipe      { 0% { opacity: 0; translate: -36px 0; clip-path: inset(-12% 100% -24% -6%); } 25% { opacity: 1; }
                         100% { opacity: 1; translate: 0 0; clip-path: inset(-12% -6% -24% -6%); } }
@keyframes h-soft      { from { opacity: 0; translate: 0 12px; } }
@keyframes h-from-left { from { opacity: 0; translate: -28px 0; } }
@keyframes h-line      { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes h-rise      { from { opacity: 0; translate: 0 18px; } }
@keyframes h-drop      { from { opacity: 0; transform: translate3d(0,-14px,0); } to { opacity: 1; transform: none; } }
/* the header arrives first, one item after another (logo → links → button) */
@media (min-width: 941px) {
  .anim-ready .nav .logo, .anim-ready .nav-links, .anim-ready .nav-cta-desktop { animation: h-drop 1200ms var(--wx-out) both; }
  .anim-ready .nav-links { animation-delay: 120ms; }
  .anim-ready .nav-cta-desktop { animation-delay: 260ms; }
}
@keyframes h-arrive    { from { opacity: 0; translate: 24px 0; } }
@keyframes h-dock      { from { opacity: 0; translate: -50% 16px; } to { translate: -50% 0; } }
@media (max-width: 734px) { .hero-in .h-chip { animation-name: h-dock-m; } }
@keyframes h-dock-m    { from { opacity: 0; translate: -50% 16px; } to { translate: -50% 0; } }

/* ---------- symmetry: centred heads with a rule either side of the label ---------- */
.is-centred { margin-left: auto; margin-right: auto; text-align: center; max-width: 820px; }
.is-centred .eyebrow::after, .statement .eyebrow::after { content: ""; width: 28px; height: 1px; background: currentColor; }
.is-centred .eyebrow { justify-content: center; }

/* ---------- statement ---------- */
.statement .container { text-align: center; }
.statement .big { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 4.6vw, 64px); line-height: 1.1; letter-spacing: -.012em; margin: var(--s4) auto 0; max-width: 22ch; text-wrap: balance; }
.statement .big em { color: var(--accent); }
.statement { overflow-x: clip; }
.statement .big.zip { max-width: none; font-size: clamp(22px, 5.4vw, 92px); line-height: 1.08; text-wrap: nowrap; white-space: nowrap; }
.statement .zl { display: block; position: relative; left: calc(var(--zo, 0) * var(--zk, 1.6em)); }
/* resting place: staggered around the centre, not aligned (left, right, left, right, near centre) */
.statement .zl:nth-child(1) { --zo: .3; }
.statement .zl:nth-child(2) { --zo: .8; }
.statement .zl:nth-child(3) { --zo: -.6; }
.statement .zl:nth-child(4) { --zo: 1; }
.statement .zl:nth-child(5) { --zo: 0; font-size: 1.2em; }
@media (max-width: 734px) { .statement .zl { --zk: .45em; } }
.sfx-zip .zl { will-change: transform, opacity; }
.statement .rule { margin: var(--s6) auto 0; width: 120px; color: var(--accent); opacity: 1; height: 2px; }
.statement-foot { margin-top: var(--s4); display: flex; flex-direction: column; align-items: center; gap: var(--s2); }
.statement-foot .lead { max-width: 52ch; margin: 0 auto; }

/* ---------- areas: typographic rows ---------- */
.area-list { list-style: none; }
.list-rule { margin-top: var(--s6); color: var(--ink); opacity: .16; }
.area { display: grid; grid-template-columns: 64px 1.1fr 1fr 24px; align-items: center; gap: var(--s4); padding: 32px 16px; border-bottom: 1px solid var(--line); text-decoration: none; position: relative; isolation: isolate; }
.area::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper); transform: scaleY(0); transform-origin: bottom; transition: transform .7s var(--ease); }
.area:hover::before, .area:focus-visible::before { transform: scaleY(1); }
.area .n { font-family: var(--mono); font-size: var(--t-label); color: var(--accent); letter-spacing: .1em; }
.area .t { font-family: var(--serif); font-size: var(--t-h3); line-height: 1.15; text-wrap: balance; }
.area .d { color: var(--ink-soft); }
.area .arr { width: 20px; height: 20px; color: var(--accent); transition: transform .35s var(--ease); }
.area:hover .arr, .area:focus-visible .arr { transform: translateX(6px); }

/* ---------- method (dark) ---------- */
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); margin-top: var(--s6); counter-reset: s; }
.step { color: var(--on-night); }
.step .rule { color: var(--glow); opacity: .5; }
.step .sn { display: inline-block; margin-top: var(--s3); font-family: var(--mono); font-size: var(--t-label); color: var(--glow); letter-spacing: .1em; }
.step .h3 { margin-top: var(--s2); font-size: clamp(32px, 3.4vw, 44px); }
.step p { margin-top: var(--s2); color: var(--on-night-soft); }

/* ---------- ways ---------- */
.ways { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin-top: var(--s6); }
.way { height: 100%; background: var(--paper); border-radius: 20px; padding: var(--s5) var(--s4) var(--s4); display: flex; flex-direction: column; gap: var(--s2); transition: transform .4s var(--ease); }
.way:hover { transform: translateY(-4px); }
.way .kind { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.way p { color: var(--ink-soft); flex: 1; }
.way-deep { background: var(--deep); color: var(--on-night); }
.way-deep .kind, .way-deep .tlink { color: var(--glow); }
.way-deep p { color: var(--on-night-soft); }

/* ---------- voice ---------- */
.voice { padding-top: var(--s7); padding-bottom: var(--s7); }
.quote { max-width: 980px; margin: 0 auto; text-align: center; position: relative; }
.qmark { display: block; font-family: var(--serif); font-size: 140px; line-height: .6; color: var(--accent); height: 64px; }
.quote blockquote { font-style: italic; }
.quote figcaption { margin-top: var(--s4); font-family: var(--mono); font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- about ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: center; }
.about-photo { border-radius: 240px 240px 20px 20px; overflow: hidden; background: var(--paper-3); width: 100%; max-width: 440px; justify-self: center; } /* source is 402 px wide: kept near native size */
.about-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.about-body .h2 { margin-top: var(--s3); }
.about-body p { margin-top: var(--s3); color: var(--ink-soft); max-width: 58ch; }
.creds { list-style: none; margin-top: var(--s5); border-top: 1px solid var(--line); }
.creds li { display: flex; justify-content: space-between; gap: var(--s3); padding: 16px 0; border-bottom: 1px solid var(--line); }
.ct { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.cv { font-weight: 500; text-align: right; }

/* ---------- contact (dark) ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: start; }
.contact .h2 { margin-top: var(--s3); }
.contact .lead { margin-top: var(--s3); max-width: 40ch; }
.contact-mail { margin-top: var(--s5); display: flex; flex-direction: column; gap: 6px; }
.contact-mail .ct { color: var(--on-night-soft); }
.contact-mail a { font-family: var(--serif); font-size: var(--t-h3); text-decoration-thickness: 1px; text-underline-offset: .2em; }
.form-panel { background: var(--night-2); border-radius: 24px; padding: var(--s5); display: grid; gap: var(--s3); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: var(--t-small); font-weight: 500; color: var(--on-night); }
.field .opt { color: var(--on-night-soft); font-weight: 400; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(239,235,224,.22); background: rgba(239,235,224,.06); color: var(--on-night); font-size: 16px; transition: border-color var(--dur-ui) var(--ease-ui), background-color var(--dur-ui) var(--ease-ui); }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--glow) 50%), linear-gradient(135deg, var(--glow) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; }
.field select option { color: var(--ink); }
.field textarea { resize: vertical; min-height: 132px; }
.field input::placeholder, .field textarea::placeholder { color: var(--on-night-soft); opacity: .8; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--glow); background-color: rgba(239,235,224,.1); }
.field input:user-invalid { border-color: #E8A48C; }
.form-foot { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.privacy { font-size: var(--t-small); color: var(--on-night-soft); }
#formStatus { display: none; font-size: var(--t-small); padding: 12px 16px; border-radius: 12px; }
#formStatus.status-success { background: rgba(179,182,155,.16); color: var(--on-night); }
#formStatus.status-error { background: rgba(232,164,140,.16); color: #F6D3C6; }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: start; }
.faq-grid .rule { margin-top: var(--s4); width: 96px; color: var(--accent); opacity: 1; height: 2px; }
.faq-list { list-style: none; }
.faq-col .list-rule { margin-top: 0; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: 24px 0; font-family: var(--serif); font-size: clamp(21px, 1.9vw, 26px); line-height: 1.25; min-height: 44px; }
.faq-q .ic { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); transition: transform .35s var(--ease), background-color var(--dur-ui) var(--ease-ui); }
.faq-q .ic svg { width: 14px; height: 14px; color: var(--accent); }
.faq-item.open .ic { transform: rotate(45deg); background: var(--accent-tint); }
.faq-a { display: grid; grid-template-rows: 1fr; }
.faq-item.js .faq-a { grid-template-rows: 0fr; transition: grid-template-rows .65s var(--ease); }
.faq-item.js.open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { padding: 0 48px 24px 0; color: var(--ink-soft); max-width: 62ch; }

/* ---------- footer ---------- */
.footer { padding: var(--s6) 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--s5); padding-bottom: var(--s5); }
.footer .logo-tag { color: var(--on-night-soft); }
.footer-brand .small { margin-top: var(--s2); }
.footer-col h2 { font-family: var(--mono); font-size: var(--t-label); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--glow); }
.footer-col ul { list-style: none; margin-top: var(--s2); }
.footer-col a { font-size: var(--t-small); text-decoration: none; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; color: var(--on-night-soft); }
.footer-col a:hover, .footer-col a[aria-current] { color: var(--on-night); }
.footer-lang { display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 940px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
/* mobile (18/10, compact): brand and Coaching span the width, The Inward Lab and Contact sit side by side;
   links 36 px tall (WCAG 2.5.8 ≥ 24 px; kinito K2 accepts ≥ 24 px with area ≥ 0.6·44²) */
@media (max-width: 520px) {
  .footer { padding-top: var(--s5); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s3); padding-bottom: var(--s4); }
  .footer-brand, .footer-grid > .footer-col:nth-child(2) { grid-column: 1 / -1; }
  .footer-col ul { margin-top: 8px; }
  .footer-col a { min-height: 36px; line-height: 1.3; }
  .footer-col a[href^="mailto"] { overflow-wrap: anywhere; }
}
.small { font-size: var(--t-small); color: var(--on-night-soft); }

/* ---------- responsive ---------- */
@media (max-width: 940px) {
  .hero { padding: 104px 0 0; min-height: auto; display: block; }
  .hero-media { position: relative; width: auto; height: auto; aspect-ratio: 762 / 733; margin: var(--s5) calc(var(--gutter) * -1) 0; }
  .hero-photo::after { background: linear-gradient(180deg, var(--night) 0%, rgba(59,63,49,0) 22%); }
  .hero-grid, .about-grid, .contact-grid, .faq-grid { grid-template-columns: 1fr; gap: var(--s5); }
  .steps { grid-template-columns: 1fr 1fr; row-gap: var(--s5); }
  .ways { grid-template-columns: 1fr; }
  .area { grid-template-columns: 48px 1fr 24px; }
  .area .d { grid-column: 2; }
  .area .arr { grid-column: 3; grid-row: 1; }
}
@media (max-width: 734px) {
  .hero-cta { margin-top: var(--s4); flex-direction: column; gap: var(--s2); }
  /* mobile hero: centred, symmetric column (copy, then Alex full width) */
  .hero-copy { text-align: center; }
  .hero-copy .eyebrow { justify-content: center; }
  .hero-copy .eyebrow::after { content: ""; width: 28px; height: 1px; background: currentColor; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .h-measure { margin-left: auto; margin-right: auto; }
  .hero-media { margin-top: var(--s4); }
  .hero-copy .e2 { display: none; }  /* one line, symmetric rules either side */
  .photo-chip { left: 50%; translate: -50% 0; white-space: nowrap; bottom: 20px; }
  .steps { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .form-panel { padding: var(--s4) var(--s3); }
  .area { padding: 24px 4px; gap: 4px 12px; grid-template-columns: 32px 1fr 24px; }
  .qmark { font-size: 110px; height: 48px; }
  .cv { text-align: right; }
}
@media (prefers-reduced-motion: reduce) {
  .anim-ready .hero:not(.hero-in) .hero-photo { opacity: 1; }
}

/* "Four places where change usually starts." on one line wherever it fits (18/10) */
@media (min-width: 941px) {
  .areas .section-head { max-width: none; }
  #help-h { white-space: nowrap; text-wrap: nowrap; }
  html[lang="el"] #help-h { font-size: min(var(--t-h2), 3.5vw); }
  html[lang="es"] #help-h { font-size: min(var(--t-h2), 3.9vw); }
}