:root {
    --nav-h: 272px;
@media (max-width: 1300px) {
    :root {
        --orb-size: clamp(48px, 8.5vw, 104px);
        --orb-r:    clamp(136px, 22.5vw, 218px);
    }
}

    --cool:        #78b950;
    --cool-light:  #9dd475;
    --cool-glow:   rgba(120, 185, 80, 0.25);
    --cool-dim:    rgba(120, 185, 80, 0.08);
    --cool-border: rgba(120, 185, 80, 0.22);
    
    --bg:          #ffffff;
    --bg-mid:      #f1f5f9;
    --bg-card:     #ffffff;
    --text:        #58585a;
    --text-dim:    #6d6d6f;
    --text-muted:  #858587;
    --max:         1180px;
    --orb-size:    clamp(50px, 9vw, 124px);   /* desktop orbs scaled up (26 Aug 2026) */
    --orb-r:       clamp(152px, 24vw, 272px);   /* more room between orbs (26 Aug 2026) */
}

html { scroll-padding-top: calc(var(--nav-h) + 16px); }   /* tighter anchor landings — section content higher in view (26 Aug 2026) */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Lora', sans-serif;
    font-weight: 300;
    line-height: 1.85;
    overflow-x: clip;
    -webkit-tap-highlight-color: transparent;
    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}

a, button, input, textarea, .orbit-satellite, .session-card, .video-placeholder {
    touch-action: manipulation;
}

/* Subtle grain — removed 12 Aug 2026: fixed full-viewport layer caused intermittent blank-page paint glitches on macOS scroll */
body::before { content: none; }

h1, h2, h3, h4 {
    font-family: 'Lora', serif;
    font-weight: 400;
    line-height: 1.08;
    color: #0f172a;
}

.container {
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 48px);
}

.divider {
    width: 72px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cool), transparent);
    margin: 2.8rem 0;
}
.divider.centered { margin: 2.8rem auto; }

/* Buttons */
.btn-primary {
    display: inline-block;
    padding: 1.25rem 2.4rem;
    font-family: 'Lora', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: white;
    background: linear-gradient(135deg, var(--cool), #508734);
    text-decoration: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 4px 25px var(--cool-glow);
    
}
.btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: translateX(-150%);
    transition: transform 0.6s;
}
@media (hover: hover) {
    .btn-primary:hover::after { transform: translateX(300%); }
    .btn-primary:hover {
        transform: translateY(-5px) scale(1.03);
        box-shadow: 0 8px 40px var(--cool-glow);
    }
}

.btn-outline {
    display: inline-block;
    padding: 1.25rem 2.4rem;
    font-family: 'Lora', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: var(--cool);
    background: transparent;
    border: 1.5px solid var(--cool-border);
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    
}
@media (hover: hover) {
    .btn-outline:hover {
        border-color: var(--cool);
        color: var(--cool);
        background: rgba(120,185,80,0.06);
        box-shadow: 0 0 30px var(--cool-glow);
        transform: translateY(-4px);
    }
}

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 20px 48px;
    height: var(--nav-h);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    background: #FFFFFF;
    border-bottom: 1px solid rgba(120,185,80,0.12);
    transition: transform 0.9s ease, height 0.8s ease, padding 0.8s ease, box-shadow 0.8s ease, background 0.4s ease;
}
.navbar.scrolled {
    padding: 12px 48px;
    height: calc(var(--nav-h) - 20px);
    background: #FFFFFF;
    box-shadow: 0 6px 25px rgba(0,0,0,0.07);
}

.navbar.nav-hidden {
    transform: translateY(-100%);
}

.nav-brand {
    flex-shrink: 0;
    font-family: 'Lora', serif;
    font-size: 1.75rem;
    font-weight: 400;
    letter-spacing: 1.8px;
    background: linear-gradient(90deg, var(--cool), var(--cool-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
}

.nav-logo {
    height: 208px;
    width: auto;
    display: block;
}

.nav-links {
    flex-shrink: 0;
    display: flex;
    gap: 48px;
    align-items: center;
}
.nav-links a {
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 2.8px;
    text-transform: uppercase;
    color: var(--text-dim);
    text-decoration: none;
    transition: all 0.3s ease;
}
.nav-links a:hover { color: var(--cool); }

.nav-links .nav-cta {
    color: white;
    padding: 1rem 1.8rem;
    font-size: 0.78rem;
    letter-spacing: 3px;
}
.nav-links .nav-cta:hover { color: white; }

/* Burger */
.burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 12px;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
}
.burger span {
    display: block;
    width: 26px;
    height: 1.5px;
    background: var(--cool);
    transition: all 0.3s ease;
}
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    inset: 0;
    background: rgba(248,250,252,0.98);
    z-index: 999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}
.mobile-menu a:first-child {
    margin-top: 90px;
}
.mobile-menu.open {
    display: flex;
    visibility: visible;
    opacity: 1;
}
.mobile-menu a {
    font-size: 1.4rem;
    text-transform: uppercase;
    color: var(--cool);
    text-decoration: none;
    font-family: 'Lora', serif;
    padding: 0.5rem 1rem;
}

/* Hero */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    padding-top: var(--nav-h);
    background: #EFFCE8;   /* very pale mint hero ground (Jana, 25 Aug 2026) */
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 75% 25%, rgba(120,185,80,0.12) 0%, transparent 55%),
        radial-gradient(circle at 25% 75%, rgba(139,200,104,0.09) 0%, transparent 65%);
}

.hero-inner {
    position: relative;
    z-index: 2;
    max-width: min(1440px, 96vw);
    margin: 0 auto;
    padding: clamp(40px, 5vw, 80px) clamp(20px, 3vw, 40px) clamp(28px, 3.5vw, 48px);
    display: grid;
    grid-template-columns: var(--ht-cols, 1fr 1fr);
    gap: 48px;
    align-items: center;
}

.hero-label {
    font-size: 0.85rem;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--cool);
    margin-bottom: 1.4rem;
    display: inline-flex;
    align-items: center;
    gap: 14px;
}
.hero-label::before {
    content: '';
    width: 36px;
    height: 1px;
    background: var(--cool);
}

.hero h1 {
    font-size: clamp(2.8rem, 6vw, 4.6rem);
    line-height: 1.05;
    margin-bottom: 1.8rem;
}
.hero h1 em {
    font-style: italic;
    color: var(--cool);
}
.hero h1 .hero-thy { color: var(--cool); }
.hero-text {
    font-size: 1.18rem;
    color: var(--text-dim);
    max-width: 600px;
    margin-bottom: 3rem;
}

/* Plain editable text under the hero paragraph (no box styling) */
.hero-note {
    max-width: 600px;
    margin: -1.2rem 0 2.5rem;
    color: var(--cool);
}

/* Orbit */
.hero-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.hero-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.orbit-heading-group {
    position: absolute;
    top: calc(clamp(40px, 5vw, 80px) + 42px);   /* level with the headline */
    left: calc(75% - 12px);                        /* centre of the right column, nudged left with the ring */
    transform: translateX(-50%);
    width: max-content;
    text-align: center;
    z-index: 3;
}
.orbit-eyebrow {
    font-family: 'Lora', serif;
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    font-weight: 400;
    font-style: italic;
    color: #0f172a;
    letter-spacing: 0.5px;
    line-height: 1.1;
    margin-bottom: 0.5rem;
}
.orbit-hint {
    font-family: 'Lora', sans-serif;
    font-size: 0.76rem;
    font-weight: 400;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--cool);
    opacity: 0.8;
    margin-bottom: 1.4rem;
}
.orbit-heading-line {
    width: 36px;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, var(--cool), transparent);
    margin: 0 auto;
}

/* Desktop only: lift the whole orbit cluster (ring + centre circle + orbs) up a touch (Jana, 25 Aug 2026) */
@media (min-width: 981px) {
    /* relative top = true 1:1 offset (negative margins on a centered grid item
       get re-centred by the grid and lose most of the lift) */
    .hero-panel { position: relative; top: -140px; }
}

.orbit-wrap {
    position: relative;
    width: clamp(158px, 24vw, 250px);
    height: clamp(158px, 24vw, 250px);
    flex-shrink: 0;
    transform: translateX(-12px);
}
.orbit-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1.5px solid var(--cool-border);
    box-shadow: 0 0 0 6px var(--cool-dim), 0 16px 50px rgba(120,185,80,0.12);
    z-index: 1;
}
.orbit-center-text {
    position: absolute;
    inset: 0;
    transform: scale(0.88);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 9%;
    font-family: 'Lora', serif;
    font-size: clamp(1.15rem, 2.5vw, 1.5rem);
    font-weight: 400;
    font-style: italic;
    color: var(--cool);
    text-align: center;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.2s ease, transform 1.3s cubic-bezier(0.23,1,0.32,1);
    line-height: 1.2;
}
.orbit-center-text.show {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* Mist-in effect for centre circle text (one-shot, low-CPU: runs 0.5s on hover then stops) */
@keyframes mistIn {
    0%   { opacity: 0; /* filter removed for scroll stability */  transform: scale(0.94) translateY(3px); }
    100% { opacity: 1;    transform: scale(1) translateY(0); }
}
.orbit-center-text.anim {
    animation: mistIn 1.4s ease-out;
}
@media (prefers-reduced-motion: reduce) {
    .orbit-center-text.anim { animation: none; }
}

.orbit-satellite {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--orb-size);
    height: var(--orb-size);
    margin: calc(var(--orb-size) / -2);
    z-index: 4;
    cursor: pointer;
    animation: orbitMove 36s linear infinite;
    animation-delay: var(--orbit-delay);
}
@keyframes orbitMove {
    from { transform: rotate(0deg) translateX(var(--orb-r)) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(var(--orb-r)) rotate(-360deg); }
}
.orbit-satellite-inner {
    width: 100%; height: 100%;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--cool-border);
    box-shadow: 0 4px 16px rgba(120,185,80,0.12);
    transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (hover: hover) {
    .orbit-satellite:hover .orbit-satellite-inner {
        transform: scale(1.22);
        box-shadow: 0 12px 35px rgba(120,185,80,0.25);
        border-color: var(--cool);
    }
}
.orbit-satellite-label {
    font-family: 'Lora', sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--cool);
    text-align: center;
    pointer-events: none;
    white-space: normal;
    word-break: break-word;
    line-height: 1.25;
    width: 80%;
}

/* Bigger orb labels on desktop only (tablets & phones keep their smaller sizes) */
@media (min-width: 769px) {
    .orbit-satellite-label {
        font-size: 13px;
    }
}

/* Question-mark orb — white like the others */
.orbit-satellite.orb-q .orbit-satellite-inner {
    background: var(--bg-card);  /* white — same as the other orbs */
}
.orbit-satellite.orb-q .orbit-satellite-label {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--cool);
    width: auto;
}

/* Keyboard focus ring for the orbs — same brand-green ring as the site's other
   focus-visible elements (.explore-pill, .area-pill), rounded to the orb's circle. */
.orbit-satellite:focus-visible {
    outline: 2px solid var(--cool);
    outline-offset: 4px;
    border-radius: 50%;
}

/* Centre-circle CTA — mirrors the site's .btn-outline visual language (Lora
   uppercase, 3.5px tracking, green outline, circular, hover lift+glow) scaled
   down to sit inside the centre circle. It appears while the centre circle itself
   is hovered or keyboard-focused (desktop only). It is a SIBLING of
   #orbitCenterText (not a child) so the orb mouseleave handler's textContent=''
   wipe never removes it. Shown via CSS only: no JS, so the orb preview flow is
   untouched. */
.orbit-cta {
    position: absolute;
    left: 50%;
    top: 50%;
    /* geometric centre of the ring; text padded to balance trailing letter-spacing */
    transform: translate(-50%, -50%);
    z-index: 6;
    width: 74%;
    max-width: 210px;
    aspect-ratio: 1/1;
    padding: 0.9rem;
    padding-left: calc(0.9rem + 3.5px); /* optical: letter-spacing adds space after last glyph */
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Lora', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--cool);
    text-align: center;
    text-decoration: none;
    background: transparent;
    border: 1.5px solid var(--cool-border);
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
#orbitCenterText:hover ~ .orbit-cta,
#orbitCenterText:focus ~ .orbit-cta,
.orbit-cta:hover,
.orbit-cta:focus {
    opacity: 1;
    pointer-events: auto;
}
.orbit-cta:focus-visible {
    outline: 2px solid var(--cool);
    outline-offset: 3px;
}
/* Keyboard focus on the centre circle gets the same circular ring as the orbs */
#orbitCenterText:focus-visible {
    outline: 2px solid var(--cool);
    outline-offset: 4px;
    border-radius: 50%;
}
@media (hover: hover) {
    .orbit-cta:hover {
        border-color: var(--cool);
        color: var(--cool);
        background: rgba(120,185,80,0.06);
        box-shadow: 0 0 30px var(--cool-glow);
        /* stay centred — glow/scale instead of lifting off-axis */
        transform: translate(-50%, -50%) scale(1.04);
    }
}
/* Mobile: centre CTA stays visible when idle; hide it while a satellite
   preview (or growth phrase) is showing so Zistiť viac never stacks on top. */
@media (max-width: 768px) {
    .orbit-cta { opacity: 1; pointer-events: auto; }
    .orbit-wrap:has(#orbitCenterText .orb-preview-line) .orbit-cta {
        opacity: 0;
        pointer-events: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .orbit-cta { transition: none; }
    .orbit-cta:hover { transform: translate(-50%, -50%); }
}


/* Soft wave dividers — link sections together (static SVG, zero CPU) */
.about, .sessions, .expect, .video-section, .book, .footer { position: relative; }
.section-wave {
    position: absolute;
    top: -25px; left: 0;
    width: 100%;
    height: 60px;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.footer .wave-mid { background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1440 60%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0,0 C240,24 480,8 720,16 C960,24 1200,7 1440,0 L1440,60 L0,60 Z%27%3Cpath d=%27M0,0 C240,55 480,10 720,32 C960,54 1200,8 1440,0 L1440,90 L0,90 Z%27 fill=%27%23ffffff%27/%3E%3C/svg%3E"); }  /* footer wave = white, rises into grey section above */
.wave-mid   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C240,24 480,8 720,16 C960,24 1200,7 1440,0 L1440,60 L0,60 Z'%3Cpath d='M0,0 C240,55 480,10 720,32 C960,54 1200,8 1440,0 L1440,90 L0,90 Z' fill='%23f1f5f9'/%3E%3C/svg%3E"); }
.wave-card  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C240,24 480,8 720,16 C960,24 1200,7 1440,0 L1440,60 L0,60 Z'%3Cpath d='M0,0 C240,55 480,10 720,32 C960,54 1200,8 1440,0 L1440,90 L0,90 Z' fill='%23ffffff'/%3E%3C/svg%3E"); }
.wave-ghost { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C240,24 480,8 720,16 C960,24 1200,7 1440,0 L1440,60 L0,60 Z'%3Cpath d='M0,0 C240,55 480,10 720,32 C960,54 1200,8 1440,0 L1440,90 L0,90 Z' fill='rgba%28120,185,80,0.08%29'/%3E%3C/svg%3E"); }

@media (max-width: 768px) {
    .section-wave { top: -12px; height: 30px; }
}

/* Sections */
section { padding: clamp(88px, 9vw, 110px) 0; }
.section-label {
    font-size: 0.85rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--cool);
    margin-bottom: 1rem;
}

/* About section: 'Jana' heading — black, same size as orbit 'Your Journey' */
.about .section-label,
.mobile-meet-jana {
    font-family: 'Lora', serif;
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: none;
    color: #000000;
}
.section-title {
    font-size: clamp(2.7rem, 5.2vw, 4.1rem);
    margin-bottom: 1.2rem;
}

/* About */
.about {
    background: var(--bg-mid);
}
.about-grid {
    display: grid;
    grid-template-columns: var(--ht-cols, 1fr 1.35fr);
    gap: 120px;
    align-items: center;
}
.about-photo {
    aspect-ratio: auto;
    background: var(--bg-card);
    border: 1px solid var(--cool-border);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 50px rgba(120,185,80,0.08);
    position: relative;
}
.about-photo-img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
}
.about-cols { display: block; }

/* Hide Meet Jana columns only while the balancer rebuilds (no tall-col flash) */
.about-cols.ht-jana-balancing {
    visibility: hidden;
}
  /* mobile/tablet: stacked, photo first */

/* About: desktop only — TWO columns of text, image at the TOP of the left
   column (photo is first in the column flow). Header + credentials span both.
   (Jana, 25 Aug 2026 — fixed from 3-col layout) */
@media (min-width: 981px) {
    .about-grid { display: block; }
    /* Two text columns, stretching grid — the column BOXES always end on the
       same line. Text-end alignment is tuned per width band (the photo lives
       in col 1, so col 2 needs a different share at narrow widths):
       >=1200: 1.1fr/0.9fr  |  981-1199: 0.90fr/1.10fr */
    .about-cols { display: grid; grid-template-columns: var(--ht-cols, 1fr 1fr)  /* portal Columns; keys stay pinned */; column-gap: 3rem; align-items: stretch; }
    .about-content .about-photo { margin-bottom: 2rem; margin-top: 5px; }  /* top edge level with the "The chance to find them" text line (26 Aug 2026) */
}

.about-content p {
    color: var(--text-dim);
    font-size: 1.12rem;
    line-height: 1.9;
    margin-bottom: 1.8rem;
}
.credentials {
    margin-top: 3.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--cool-border);
    display: grid;
    grid-template-columns: var(--ht-cols, 1fr 1fr);
    gap: 2rem;
}
.credential-item {
    color: var(--text-dim);
}

/* Sessions */
.sessions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    gap: 32px;
    margin-top: 100px;
}
.session-card {
    background: var(--bg-card);
    padding: 58px 48px 32px;
    text-align: center;
    border: 1px solid var(--cool-border);
    border-radius: 12px;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
@media (hover: hover) {
    .session-card:hover {
        transform: translateY(-18px);
        box-shadow: 0 35px 70px rgba(120,185,80,0.14);
        border-color: var(--cool);
    }
}
.session-card > div:first-child {
    margin-left: auto;
    margin-right: auto;
}
.session-card span:first-child {
    font-size: 4.8rem;
    font-weight: 300;
    color: var(--cool);
    opacity: 0.08;
    position: absolute;
    top: 32px;
    right: 40px;
}
.session-card h3 {
    font-size: 1.65rem;
    margin-bottom: 1.2rem;
}
.session-card p {
    color: var(--text-dim);
    line-height: 1.8;
    flex: 1;                 /* absorbs description-height differences — all CTA rows align */
    margin-bottom: 2.2rem;
}
/* CTA wrapper: purely layout — centers button + length text horizontally,
   pins the button to the top and the length line to the bottom. */
.session-card-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.session-card-cta span {
    font-size: 0.95rem;
    color: var(--cool);
    line-height: 1.4;
}

/* Expect */
.expect {
    background: var(--bg-mid);
}
.review-grid {
    columns: 2;
    column-gap: 32px;
    margin-top: 3.4rem;
}
.review-card {
    padding: 42px 40px;
    border: 1px solid var(--cool-border);
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(120,185,80,0.08);
    display: flex;
    flex-direction: column;
    break-inside: avoid;
    margin-bottom: 32px;
}
.review-card blockquote {
    margin: 0;
    font-size: 1.15rem;
    font-style: italic;
    line-height: 1.65;
    color: var(--text);
    flex: 1;
}
.review-card cite {
    margin-top: 2.2rem;
    display: block;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.82rem;
    color: var(--cool);
}
.review-card.empty { display: none; }

/* Video */
.video-placeholder {
    margin: 80px auto 0;
    aspect-ratio: 16 / 9;
    max-width: 920px;
    background: var(--bg-card);
    border: 1px solid var(--cool-border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.8rem;
    cursor: pointer;
    transition: all 0.4s ease;
    box-shadow: 0 20px 50px rgba(0,0,0,0.06);
}
@media (hover: hover) {
    .video-placeholder:hover {
        box-shadow: 0 30px 70px rgba(120,185,80,0.18);
    }
}
.play-btn {
    width: 98px;
    height: 98px;
    border: 3px solid var(--cool);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

/* Book */
.book-grid {
    display: grid;
    grid-template-columns: var(--ht-cols, 1fr 1fr);
    gap: 120px;
    align-items: start;
}
.contact-form {
    padding: 62px 56px;
    border: 1px solid var(--cool-border);
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: 0 25px 60px rgba(120,185,80,0.1);
}
input, textarea, select {
    width: 100%;
    padding: 1.1rem 1.4rem;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    color: var(--text);
    margin-bottom: 1.2rem;
    border-radius: 6px;
    font-family: inherit;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--cool);
    box-shadow: 0 0 0 3px rgba(120,185,80,0.1);
}

/* Footer */
.footer {
    padding: 44px 0 0;
    background: #FFFFFF;   /* same white as nav — separates from grey Explore More section */
}

/* Act 1 — brand + nav, top-aligned three columns (Jana footer mockup 8 Sep 2026) */
.footer-main {
    /* Three peer columns on one floor: brand | Delve Into | Contact */
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) max-content max-content;
    align-items: end; /* always share the bottom floor */
    column-gap: 4.5rem;
    justify-content: space-between;
    padding-bottom: 3rem;
    border-bottom: 1px solid var(--cool-border);
}

.footer-brand {
    max-width: 30rem;
    margin-left: clamp(-28px, -3.5vw, -12px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* grow logo upward; blurb sits on the floor */
}

/* contents: both navs become grid children of .footer-main so all 3 floors match */
.footer-navs {
    display: contents;
}

.footer-main .footer-nav,
.footer-main .footer-nav:nth-of-type(1),
.footer-main .footer-nav:nth-of-type(2) {
    margin-left: 0;
    min-width: 0;
}

.footer-brand .footer-logo img {
    height: 100px;
    width: auto;
    display: block;
}

.footer-nav {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.55rem; /* space between header + each link row */
}

.footer-brand .community-blurb {
    max-width: 52ch;
    margin-top: 0.85rem;
    font-size: 1.18rem; /* closer visual weight to footer link text */
    line-height: 1.8;
    color: var(--text);
}

.footer-brand .footer-logo {
    font-size: 1.4rem;
    font-family: 'Lora', serif;
    font-weight: 500;
    background: linear-gradient(90deg, var(--cool), var(--cool-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-brand .footer-logo img {
    height: 100px;
    width: auto;
    display: block;
}

/* Bigger footer logo on desktop only; mobile (<=768px) keeps 100px */
@media (min-width: 769px) {
    .footer-brand .footer-logo img {
        height: 128px; /* grow upward into free space above (brand is flex-end) */
    }
}

.footer-desc {
    margin-top: 1.2rem;
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.8;
    max-width: 38ch;
}

.footer-nav h4 {
    font-family: 'Lora', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text);
    margin: 0 0 0.35rem; /* + gap = bit more air under header */
    line-height: 1.2;
    min-height: 1.2em;
}

.footer-nav a {
    display: flex;
    align-items: center;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.88rem;
    line-height: 1.35;
    min-height: 2.1rem; /* same row height in both columns */
    padding: 0.15rem 0;
    transition: color 0.25s ease;
}
/* Keep email on one line so Contact rows stay level with Delve Into */
.footer-nav a[href^="mailto"] {
    white-space: nowrap;
}

.footer-nav a:hover {
    color: var(--cool);
}

/* Act 2 — community band, framed by green rules */
.footer-community {
    padding: 0 0 2.2rem;
}

.community-rule {
    height: 1px;
    background: var(--cool-border);
}

.community-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
    padding-bottom: 2.8rem;
}

.community-brand .footer-logo img {
    height: 76px;
    width: auto;
    display: block;
}

.community-blurb {
    margin: 1.15rem 0 0;
    max-width: 52ch;
    font-size: 1.18rem;
    line-height: 1.8;
    color: var(--text);
}

@media (max-width: 760px) {
    .community-row {
        grid-template-columns: 1fr;
        gap: 2.2rem;
    }
}

.community-title {
    font-family: 'Lora', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--text);
    margin: 0 0 1.2rem;
}

.community-links {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
}

.community-link {
    display: block;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.88rem;
    padding: 0.3rem 0;
    transition: color 0.25s ease;
}

.community-link:hover {
    color: var(--cool);
}

/* Act 3 — epilogue */
.footer-bottom {
    border-top: none; /* rule already on .footer-main */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    padding-top: 1.25rem;
    padding-bottom: 1.5rem;
}
.footer-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.55rem;
    font-family: 'Lora', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}
.footer-legal a {
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    transition: color 0.25s ease, border-color 0.25s ease;
}
.footer-legal a:hover {
    color: var(--cool);
    border-bottom-color: var(--cool);
}
.footer-legal-sep {
    color: var(--cool-border);
    user-select: none;
}
.footer-bottom > span {
    font-size: 0.8rem;
    letter-spacing: 1px;
    color: var(--text-dim);
    margin-left: auto;
}
@media (max-width: 768px) {
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.85rem;
    }
}

@media (max-width: 760px) {
    .footer-main {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
        justify-content: initial;
        align-items: start;
    }
    .footer-brand {
        grid-column: 1 / -1;
        margin-left: 0;
        max-width: none;
    }
    .footer-navs {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
        align-items: start;
    }
    .footer-main .footer-nav,
    .footer-main .footer-nav:nth-of-type(1),
    .footer-main .footer-nav:nth-of-type(2) {
        margin-left: 0;
        min-width: 0;
    }
}

@media (max-width: 480px) {
    .footer-main {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
        justify-content: initial;
        align-items: start;
    }
    .footer-brand {
        grid-column: auto;
        margin-left: 0;
        max-width: none;
    }
    .footer-navs {
        display: grid;
        grid-column: auto;
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.fade-in {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1.1s cubic-bezier(0.23, 1, 0.32, 1);
}
.fade-in.visible {
    opacity: 1;
    /* none (not translateY(0)): a 0-transform still creates a containing block
       and mis-anchors native <select> dropdowns after scroll (booking form). */
    transform: none;
}

/* RESPONSIVE */
@media (max-width: 980px) {
    .hero-inner, .about-grid, .book-grid { 
        grid-template-columns: 1fr; 
        gap: 60px; 
    }
    .hero-panel { margin-top: 0; }
    .orbit-wrap { transform: none; }
    .orbit-wrap { margin-top: 100px; }  /* orb position tuned */
    .orbit-heading-group {
        position: static;
        transform: none;
        left: auto;
        top: auto;
        width: auto;
        margin: 0 auto 1.5rem;
    }
}

@media (max-width: 768px) {
    .navbar { padding: 20px 20px; }
    .navbar { position: relative; z-index: 1000; }
    .nav-logo { height: 110px; }
    .navbar.scrolled { padding: 16px 20px; }
    .navbar.scrolled { height: calc(var(--nav-h) - 8px); }
    .nav-links { display: none; }
    .burger { display: flex; }
    .container { padding: 0 20px; }
    .hero { padding-top: 0 !important; align-items: flex-start; }
    html { scroll-padding-top: 0; }

    .hero-inner {
        grid-template-columns: 1fr;
        gap: 24px;
        padding-top: 12px;
        padding-bottom: 60px;
    }
    .hero h1 { font-size: clamp(2.4rem, 9vw, 3.4rem); }
    .hero-text { font-size: 1rem; }
    .hero-actions {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .hero-actions .btn-primary,
    .hero-actions .btn-outline {
        width: 100%;
        text-align: center;
        padding: 1.1rem 1.5rem;
    }

    .btn-primary, .btn-outline {
        letter-spacing: 2px;
    }

    input, textarea {
        font-size: 16px;
    }

    :root {
        --nav-h: 150px;
        --orb-size: 78px;
        --orb-r: 152px;
    }
    .orbit-wrap {
        width: 164px;
        height: 164px;
    }

    section:not(.hero), .about, .sessions, .expect, .video-section, .book {
        padding-top: 72px !important;
        padding-bottom: 72px !important;
    }

    .about-grid, .book-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
    .about-photo {
        aspect-ratio: auto !important;
        min-height: 220px;
    }
    .credentials {
        grid-template-columns: 1fr !important;
    }

    .sessions-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        margin-top: 48px !important;
    }
    .session-card {
        padding: 36px 28px 18px !important;
    }
    .session-card-cta { height: auto !important; margin-top: 0; gap: 14px; }

    .review-grid {
        columns: 1 !important;
        margin-top: 2.6rem !important;
    }
    .review-card {
        padding: 30px 26px !important;
        margin-bottom: 20px !important;
    }

    .video-placeholder { margin-top: 40px !important; }

    .contact-form {
        padding: 32px 24px !important;
    }

    .section-title { font-size: clamp(2rem, 8vw, 2.8rem) !important; }
}

@media (max-width: 480px) {
    .nav-brand { font-size: 1.4rem; }
    .nav-logo { height: 110px; }
    .navbar { padding: 16px 16px; }
    .navbar.scrolled { padding: 12px 16px; }
    .navbar.scrolled { height: calc(var(--nav-h) - 8px); }
    :root {
        --nav-h: 142px;
        --orb-size: 70px;
        --orb-r: 130px;
    }
    .orbit-wrap {
        width: 136px;
        height: 136px;
    }
    .orbit-satellite-label {
        font-size: 7.5px;
        letter-spacing: 0.3px;
    }

    .section-title { font-size: clamp(1.85rem, 8vw, 2.4rem) !important; }
    .hero h1 { font-size: clamp(2.2rem, 9vw, 2.8rem); }
    .hero-text { font-size: 0.95rem; }

    .hero-actions .btn-primary,
    .hero-actions .btn-outline {
        padding: 1rem 1.2rem;
        font-size: 0.7rem;
        letter-spacing: 1.5px;
    }

    .play-btn {
        width: 72px;
        height: 72px;
    }
    .play-btn svg { width: 24px; height: 28px; }

    .review-card blockquote {
        font-size: 1.1rem !important;
    }

    .session-card {
        padding: 32px 24px 16px !important;
    }
    .session-card-cta { height: auto !important; margin-top: 0; gap: 12px; }


    .contact-form {
        padding: 28px 20px !important;
    }

    .footer {
        padding: 60px 0 48px;
    }
    .footer > .container > div {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 1rem !important;
    }
}

/* Nav centre tagline - bilingual, subtle */
.nav-tagline {
    flex: 1 1 auto;
    margin: 0 80px 0 0;
    align-self: flex-start;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 3px;
    font-family: 'Lora', sans-serif;
    font-size: 0.68rem;
    line-height: 1.35;
    letter-spacing: 0.3px;
}
.nav-tagline-en {
    font-weight: 600;
    color: var(--cool);
}
.nav-tagline-sk {
    font-weight: 600;
    color: var(--cool);
}
@media (min-width: 1201px) {
    .nav-tagline { font-size: 0.9rem; margin: 0 40px 0 -135px; max-width: calc(100% - 170px); }
    .nav-tagline-en { margin-left: -20px; font-size: 0.78rem; }
    .nav-tagline-sk { margin-left: -20px; font-size: 0.78rem; }
}

/* Homepage nav: availability tagline sits at the foot of the logo (its own
   row under the logo+links) instead of inline between logo and links. */
.navbar-home {
    height: auto;
    min-height: var(--nav-h);
}
.navbar-home.scrolled { height: calc(var(--nav-h) - 20px); }
.navbar-home .nav-links { margin-left: auto; }
.navbar-home .nav-tagline {
    order: 5;
    flex: 0 0 100%;
    margin: -8px 0 0 170px;  /* tucked up under the logo */
    align-self: auto;
}
.navbar-home ~ .hero { padding-top: calc(var(--nav-h) + 60px); }

/* Mobile: navbar-home nav is in normal flow (position:relative) so hero needs
   no top clearance; tablet 769-1200px: tagline row hidden, nav compact —
   restore tight layout (regression fix for today's desktop nav change). */
@media (max-width: 768px) {
    .navbar-home ~ .hero { padding-top: 0; }
}
@media (min-width: 769px) and (max-width: 1200px) {
    .navbar-home ~ .hero { padding-top: var(--nav-h); }
}
@media (min-width: 1201px) {
    .navbar-home .nav-tagline { font-size: 0.75rem; margin: -8px 0 0 170px; }
    .navbar-home .nav-tagline-en,
    .navbar-home .nav-tagline-sk { margin-left: 0; }
}
/* SK tagline on desktop: align left (user request 2026-08-20) */
@media (min-width: 1201px) {
    html.ht-lang-sk .navbar-home .nav-tagline {
        margin: 0 0 0 60px;
    }
}


/* Hide tagline where it would crowd the logo + links (laptops <=1366 and mobile) */
@media (max-width: 1200px) {
    .nav-tagline { display: none; }
}

/* Bilingual gap text under the mobile nav - style matches lines A/B on heal-thy-relationships.com */
.hero-tagline {
    display: none;
}
@media (max-width: 768px) {
    .hero-tagline {
        display: block;
        grid-column: 1 / -1;
        grid-row: 1;
        text-align: center;
        font-size: 0.62rem;
        color: #6aab43;
        font-weight: 700;
        line-height: 1.5;
        letter-spacing: 0.3px;
        margin-bottom: 8px;
    }
    .hero-tagline div + div {
        margin-top: 4px;
    }
}

/* '?' orb — wheel of misfortunes around the centre circle (desktop hover only) */
.orbit-center-text.growth-active {
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%) scale(1);
    font-style: italic;
    pointer-events: none;
}
.g-wheel {
    position: relative;
    width: 100%;
    height: 100%;
}
.g-item {
    position: absolute;
    font-size: clamp(8px, 1.5vw, 10.5px);
    line-height: 1.15;
    color: var(--cool);
    white-space: normal;
    max-width: 96%;
    overflow-wrap: break-word;
    opacity: 0.92;
}
.g-curve {
    top: 0; left: 0;
    width: 100%;
    height: 26px;
}
.g-curve text {
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 10.5px;
    fill: var(--cool);
    letter-spacing: 0.04em;
}
.g-tl { top: 14%; left: 5%;  transform: rotate(-9deg); }
.g-tr { top: 14%; right: 5%; transform: rotate(9deg); }
.g-ml { top: 42%; left: 2%;  transform: rotate(-15deg); }  /* tilted upward */
.g-mr { top: 42%; right: 2%; transform: rotate(13deg); }   /* going downhill */
.g-bl { bottom: 17%; left: 5%;  transform: rotate(-9deg); }
.g-br { bottom: 14%; right: 3%; transform: rotate(10deg); }
.g-centre {
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text);
    text-align: center;
    white-space: normal;
    max-width: 96%;
    line-height: 1.35;
    font-size: clamp(7px, 1.45vw, 9.5px);
}
.g-broken {
    bottom: 6%; right: 13%;
    transform: rotate(-2deg);
    letter-spacing: 0.02em;
}
.g-broken span { display: inline-block; margin: 0 2px; }
.g-broken .g-n { position: relative; margin: 0 2px; }
.g-broken .g-s {
    position: absolute;
    top: 100%; left: 0;
    font-size: 0.62em;
    letter-spacing: 0;
    margin: 0;
}
.g-bottom {
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    letter-spacing: 0.03em;
}
@media (prefers-reduced-motion: reduce) {
    .orbit-center-text.growth-active { transition: none; }
}

/* Mobile: tap-friendly orbs + centre preview styled to match the orb labels.
   Viewport-based (max-width), NOT pointer/hover media — pointer-type detection
   was unreliable on some Android browsers (Samsung Internet / Chrome). */
/* Preview text + '→' open button in the centre circle. Desktop and mobile share
   the exact same click-to-preview interaction, so these are global. */
.orb-preview-line {
    font-family: 'Lora', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-style: normal;
    line-height: 1.25;
    color: var(--cool);
}

/* Desktop only: a touch more breathing room between centre-circle preview lines */
@media (min-width: 769px) {
    .orb-preview-line { line-height: 1.6; }
}
@media (max-width: 768px) {
    .orbit-satellite { touch-action: manipulation; }
}
/* Mirrors the orb label's 7px step on small screens */
@media (max-width: 480px) {
    .orb-preview-line { font-size: 9px; }
}

/* Centre preview fade-in — re-enabled on mobile even when the OS reports reduced
   motion (Samsung "Remove animations" -> prefers-reduced-motion would otherwise
   kill the desktop-identical mist-in effect). Placed after the reduce block to win. */
@media (max-width: 768px) {
    .orbit-center-text.anim {
        animation: mistIn 1.4s ease-out;
    }
}

/* Explore More pills - clickable links */
.explore-pills { padding-bottom: 40px; }
.explore-pill { cursor: pointer; }
.explore-pill:hover { transform: translateY(-2px); background: var(--cool) !important; color: #fff !important; border-color: var(--cool) !important; box-shadow: 0 8px 22px rgba(0,0,0,0.14); }
.explore-pill:active { transform: translateY(0px); }
.explore-pill:focus-visible { outline: 2px solid var(--cool); outline-offset: 3px; }
@media (max-width: 768px) { .explore-pills { padding-bottom: 96px; } }

/* Growth '?' orb - cycling phrases (one at a time in the centre circle) */
.orbit-center-text.growth-long {
    font-size: clamp(0.7rem, 1.35vw, 0.9rem);
    line-height: 1.35;
}

/* Desktop only: smaller centre-circle hover text */
@media (min-width: 769px) {
    .orbit-center-text {
        font-size: clamp(1.9rem, 3vw, 2.25rem);
        line-height: 1.45;
    }
    .orbit-center-text.growth-long {
        font-size: clamp(1.2rem, 2.1vw, 1.5rem);
        line-height: 1.55;
    }
}

/* Fade-out for centre-circle hover text - paired with mistIn */
@keyframes mistOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}
.orbit-center-text.fade-out {
    animation: mistOut 0.4s ease-in forwards;
    pointer-events: none;
}

/* Jana heading — single shared box now (merged 6 Sep 2026, was two duplicate elements).
   Desktop: default <p> block display, sits above the two-column content.
   Mobile: same box, decorative underline added below it. */
@media (max-width: 768px) {
    /* Long portal heading (not a single word) — keep readable on phone */
    .about .section-label,
    .mobile-meet-jana {
        font-size: clamp(1.35rem, 5.2vw, 1.85rem);
        line-height: 1.35;
        max-width: 100%;
        /* Phone: no mid-word hyphens (e.g. spoloč-ný); honor \n so
           "Náš spoločný čas" can sit on its own line like a section title. */
        overflow-wrap: break-word;
        word-break: normal;
        hyphens: none;
        white-space: pre-line;
    }
    .mobile-meet-jana::after {
        content: '';
        display: block;
        width: 72px;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--cool), transparent);
        margin: 1.25rem 0 1.25rem;
    }
    .about-content .section-title { display: none; }
    .about-content .divider { display: none; }
}


/* ---- Other Areas of Growth — refined pills (2026-08-10) ---- */
.area-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  max-width: 820px;
  margin: 2.8rem auto 0;
  padding-bottom: 40px;
}
.area-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.6rem 1.5rem;
  border: 1.5px solid var(--cool-border);
  border-radius: 100px;
  font-family: 'Lora', serif;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--text-dim);
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.area-pill:hover {
  background: var(--cool);
  border-color: var(--cool);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px var(--cool-glow);
}
.area-pill:active {
  transform: translateY(0);
}
.area-pill:focus-visible {
  outline: 2px solid var(--cool);
  outline-offset: 3px;
}
.area-pill.is-active {
  background: var(--cool);
  border-color: var(--cool);
  color: #fff;
  box-shadow: 0 6px 20px var(--cool-glow);
}
.area-pill--mystery {
  width: 46px;
  height: 46px;
  min-height: 46px;
  padding: 0;
  border-radius: 50%;
  font-size: 1.15rem;
  color: var(--cool);
  background: var(--cool-dim);
}
.area-pill--mystery:hover,
.area-pill--mystery.is-active {
  background: var(--cool);
  color: #fff;
}
@media (max-width: 768px) {
  .area-pills { padding-bottom: 96px; }
  .area-pill { min-height: 42px; padding: 0.5rem 1.2rem; font-size: 0.88rem; }
  .area-pill--mystery { width: 42px; height: 42px; min-height: 42px; }
}


/* ---- Fellow Travelers — friends links (9 Sep 2026) ---- */
.travelers {
  background: var(--bg-mid);
  padding: 96px 0 120px;
}
.travelers-inner {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}
.travelers-intro {
  margin: 1.4rem auto 0;
  max-width: 42rem;
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--text-dim);
}
.friends-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1.4rem;
  margin-top: 2.4rem;
  text-align: left;
}
.friend-card {
  background: var(--bg-card, #fff);
  border: 1px solid var(--cool-border);
  border-radius: 18px;
  padding: 1.35rem 1.45rem 1.25rem;
  box-shadow: 0 10px 28px rgba(120, 185, 80, 0.07);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  /* Equal height within each grid row; Visit link stays at the floor via .friend-blurb flex:1 */
  height: 100%;
  min-height: 100%;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
@media (hover: hover) {
  .friend-card:hover {
    border-color: var(--cool);
    box-shadow: 0 14px 34px rgba(120, 185, 80, 0.14);
    transform: translateY(-2px);
  }
}
.friend-name {
  margin: 0;
  font-family: 'Lora', serif;
  font-size: 1.22rem;
  font-weight: 500;
  color: var(--text);
}
.friend-blurb {
  margin: 0;
  flex: 1;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--text-muted);
}
.friend-link {
  align-self: flex-start;
  margin-top: 0.35rem;
  font-family: 'Lora', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cool);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.friend-link:hover {
  border-bottom-color: var(--cool);
  color: #508734;
}
/* Equal-height rows: grid items stretch by default; cards fill the cell.
   Five friends (both EN + SK) → 3 columns on wide screens (3+2), not 4+1 orphan. */
.friends-grid { align-items: stretch; }
@media (min-width: 900px) {
  .friends-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .travelers { padding: 72px 0 96px; }
  .friends-grid { grid-template-columns: 1fr; gap: 1rem; }
  .friend-card { padding: 1.2rem 1.25rem; }
}




/* Anchor landing: reveal Time Together block instantly when targeted */
#time-together:target { opacity:1; transform:none; }

/* ---- Lenis smooth-scroll support (fluid loose scroll — scroll.js) ---- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* End of Jana section: 'Time Together' button + page break before 'Time & Trust' */
.about-break-wrap {
    margin-top: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
}
.section-break {
    width: min(560px, 85%);
    height: 1px;
    background: var(--cool-border);
}
/* Desktop only: sit the page-break line exactly halfway between the 'Time Together' button and the journey text */
@media (min-width: 769px) {
    .section-break { margin-top: 44px; }
    .about { padding-bottom: 40px; }
    .expect { padding-top: 40px; }
}
@media (max-width: 768px) {
    .about-break-wrap { margin-top: 40px; gap: 24px; }
    .section-break { width: 70%; }
}

/* main site (27 Aug 2026): spin slowed to 90s; orb text = original brand green */
.orbit-satellite { animation-duration: 90s; }
.orbit-satellite-label,
.orbit-satellite.orb-q .orbit-satellite-label { color: var(--cool); }
.orbit-center-text,
.orb-preview-line { color: var(--cool); }

/* 27 Aug 2026: background scroll-lock while mobile menu is open */
html.menu-open, body.menu-open {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
}
.mobile-menu.open {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    justify-content: safe center;
}

/* 31 Aug 2026: orb-hero content starts 12px below nav on mobile (uniform with other subpage heroes) */
@media (max-width: 768px) {
    section.orb-hero { padding-top: 12px !important; }
}

/* Hide empty content boxes so SK/EN gaps don't leave phantom margins.
   Portal edit mode forces empties visible via .ht-edit-mode rules below. */
.about-cols [data-content]:empty,
.sessions [data-content]:empty,
.sessions p[data-content]:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}
.ht-edit-mode .about-cols [data-content]:empty,
.ht-edit-mode .sessions [data-content]:empty {
    display: block !important;
    min-height: 1.2em;
    outline: 1px dashed rgba(200, 145, 60, 0.45);
}

/* SK: hide the empty p-3-2 box on the LIVE SITE only (portal always shows it for editing) */
/* This works because the portal's edit.php includes both the SK hide rule AND the portal's inline script
   which dispatches ht-edit-mode; since ht-edit-mode runs after CSS loads, we use the :not() pseudo to hide
   only on non-edit pages. Actually, easier: just move the hide to a media query or keep it as-is since
   the portal pre-filters boxes shown and the loose text is acceptable. ACTUALLY: just keep the hide,
   the portal's loose text from p-3-2 doesn't show in the toolbar—let's verify that's OK. */
/* COMMENTED OUT for now — checking if portal needs p-3-2 visible
html.ht-lang-sk [data-content="index-about-content-p-3-2"],
html[lang="sk"] [data-content="index-about-content-p-3-2"] {
    display: none;
}
*/

/* Portal editor: always show p-3-2 so Jana can translate it (SK) or edit it (EN) */
.ht-edit-mode [data-content="index-about-content-p-3-2"] {
    display: block !important;
}

/* SK desktop only: tighter nav-link gap keeps the language pill on the row at the right edge
   (Slovak link texts are wider, so the 48px EN gap overflows the 1440px navbar and the pill wraps) */
@media (min-width: 901px) {
    html.ht-lang-sk .navbar-home .nav-links { gap: 24px; }
}


/* ============================================================
   MAGAZINE HERO — text wraps the orb circle and continues
   beneath it (desktop >=1200px). 981-1199 keeps the original
   two-column grid; mobile keeps the original stacked order.
   ============================================================ */
@media (min-width: 981px) and (max-width: 1199px) {
  .hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
  }
  .hero-inner .hero-left { grid-column: 1; grid-row: 1; }
  .hero-inner .hero-orbit-col { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
  .hero-inner .hero-text { grid-column: 1; grid-row: 2; }
  .hero-inner .hero-note { grid-column: 1; grid-row: 3; }
  .hero-inner .hero-actions { grid-column: 1; grid-row: 4; }
}

@media (min-width: 1200px) {
  .hero-inner {
    display: block;
    position: relative;
    max-width: min(1440px, 96vw);
    margin: 0 auto;
    padding: clamp(40px, 5vw, 80px) clamp(20px, 3vw, 40px) clamp(28px, 3.5vw, 48px);
  }

  /* orbit cluster floats right so the text wraps around it */
  .hero-orbit-col {
    float: right;
    width: 710px;
    height: 710px;
    margin: 0 0 3rem 3rem;
    shape-outside: circle(50%);
    position: relative;
  }
  .hero-orbit-col .hero-panel {
    position: static;
    top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 !important;
  }

  /* heading above the float at headline level */
  .hero-inner > .orbit-heading-group {
    position: absolute;
    top: calc(clamp(40px, 5vw, 80px) + 42px);
    left: calc(75% - 12px);
    transform: translateX(-50%);
    width: max-content;
    text-align: center;
    z-index: 3;
  }

  .hero-inner .hero-left {
    width: 50%;
    padding-right: 2rem;
    min-height: 260px;   /* keeps top orbs clear of the heading in both languages */
  }

  .hero-inner .hero-text { max-width: 1280px; }
  .hero-inner .hero-note { max-width: 600px; margin-top: 2rem; clear: both; }
  .hero-inner .hero-actions { max-width: 600px; }
}

/* mobile (<981): original stacking order preserved after the DOM move */
@media (max-width: 980px) {
  .hero-inner { display: grid; grid-template-columns: 1fr; gap: 24px; }
  .hero-inner .hero-left { order: 1; }
  .hero-inner .hero-text { order: 2; }
  .hero-inner .hero-note { order: 3; }
  .hero-inner .hero-actions { order: 4; }
  .hero-inner .orbit-heading-group { order: 5; }
  .hero-inner .hero-orbit-col { order: 6; }
}

/* Trim green space under the homepage hero (MEET JANA) on desktop — global
   section rule adds 110px bottom padding; homepage content is tall so the
   section just needs a modest breathing gap before the sessions wave. */
@media (min-width: 981px) {
    .navbar-home ~ .hero { padding-bottom: 24px; }
}

/* Homepage hero-inner bottom breathing: hero padding already trimmed to 24px
   (above); cut the inner block's own bottom padding on desktop too so the
   MEET JANA button isn't floating over a big pale-mint band. */
@media (min-width: 1200px) {
    .navbar-home ~ .hero .hero-inner { padding-bottom: 16px; }
}

/* ============================================================
   NAV SLICE FIX (6 Sep 2026) — homepage only, desktop >=1201px.
   .navbar-home.scrolled forced height: calc(var(--nav-h) - 20px)
   while the unscrolled bar is height:auto (289.6px content) —
   auto -> fixed px cannot animate, so the bar bottom SNAPPED up
   ~18px the instant .scrolled applied ("slice disappears").
   Fix: let the scrolled bar keep its natural height (auto); it
   shrinks smoothly with the padding transition instead. The
   nav-hidden recession timing/logic is untouched.
   ============================================================ */
@media (min-width: 1201px) {
    .navbar-home.scrolled { height: auto; }
}

/* ============================================================
   "TIME & TRUST" — KIND WORDS CAROUSEL (v6.3, 9 Sep 2026).
   Desktop: single calm card + flanking arrows (unchanged feel).
   Mobile (<=1099): OVERLAY chevrons; quotes line-clamp + Read more
   (no overflow-y trap — page scroll wins). Swipe kept.
   Class contract: .review-grid.rv / .rv-active / .review-carousel-nav
   / .review-arrow[-prev|-next] / .empty / .rv-single / .rv-expanded
   / .rv-more.
   ============================================================ */

.review-grid.rv {
    position: relative;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    columns: auto !important;
    min-height: 0;                 /* JS sets rail */
    margin-top: 3rem !important;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}

.review-grid.rv .review-card.empty { display: none !important; }

.review-grid.rv .review-card:not(.rv-active):not(.empty) {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(720px, calc(100% - 28px));
    display: block;
    box-sizing: border-box;
    padding: 48px 52px 44px;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    opacity: 0 !important;
    visibility: hidden;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

.review-grid.rv .review-card.rv-active {
    position: relative;
    z-index: 2;
    display: block;
    width: min(720px, calc(100% - 28px));
    box-sizing: border-box;
    padding: 48px 52px 44px;
    border: 1px solid var(--cool-border);
    border-radius: 18px;
    background: var(--bg-card);
    box-shadow: 0 18px 48px -28px rgba(88, 88, 90, 0.28),
                0 4px 14px -8px rgba(120, 185, 80, 0.12);
    opacity: 1 !important;
    visibility: visible;
    transform: none;
    animation: rvIn 0.4s ease both;
    -webkit-user-select: text;
    user-select: text;
}

@keyframes rvIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

.review-grid.rv .review-card blockquote {
    position: relative;
    margin: 0 auto;
    padding-left: 0;
    max-width: 36rem;
    text-align: center;
    font-family: 'Lora', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.16rem, 1.02rem + 0.55vw, 1.48rem);
    line-height: 1.65;
    color: #45484a;
    text-wrap: pretty;
}
.review-grid.rv .review-card blockquote::before {
    content: '\201C';
    display: block;
    margin: 0 auto 1.05rem;
    font-family: 'Lora', Georgia, serif;
    font-size: 2.2rem;
    font-style: italic;
    line-height: 0.9;
    color: var(--cool);
    opacity: 0.5;
    text-align: center;
}

.review-grid.rv .review-card cite {
    display: block;
    margin: 1.65rem 0 0;
    font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.76rem;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    text-align: center;
    color: var(--cool);
}
.review-grid.rv .review-card cite::before {
    content: '';
    display: block;
    width: 2rem;
    height: 1px;
    margin: 0 auto 0.9rem;
    background: rgba(120, 185, 80, 0.5);
}

.review-grid.rv .review-carousel-nav {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}
.review-grid.rv .review-carousel-nav button {
    font: inherit;
    cursor: pointer;
    touch-action: manipulation;
    pointer-events: auto;
}
.review-grid.rv .review-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(120, 185, 80, 0.45);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: var(--cool);
    font-family: 'Lora', Georgia, serif;
    font-size: 1.55rem;
    font-weight: 400;
    line-height: 1;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.review-grid.rv .review-arrow-prev {
    left: calc(50% - min(360px, calc(50% - 14px)) - 62px);
}
.review-grid.rv .review-arrow-next {
    right: calc(50% - min(360px, calc(50% - 14px)) - 62px);
}
.review-grid.rv .review-arrow:hover {
    background: #fff;
    border-color: rgba(120, 185, 80, 0.9);
    color: #5c9640;
    box-shadow: 0 6px 18px -8px rgba(120, 185, 80, 0.35);
}
.review-grid.rv .review-arrow:focus-visible {
    outline: 2px solid var(--cool);
    outline-offset: 3px;
}

/* —— Mobile / tablet: overlay chevrons + clamp / Read more (no inner scroll) —— */
@media (max-width: 1099px) {
    .review-grid.rv .review-card.rv-active {
        animation-name: rvInSoft;
        animation-duration: 0.28s;
        width: min(720px, calc(100% - 12px));
        height: auto;
        max-height: none;
        overflow: visible;
        /* room so quote text clears the overlay chevrons */
        padding: 40px 48px 36px;
    }
    @keyframes rvInSoft {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
    .review-grid.rv .review-card:not(.rv-active):not(.empty) {
        width: min(720px, calc(100% - 12px));
        padding: 40px 48px 36px;
    }
    /* Clamp long quotes so the page can scroll past the card. */
    .review-grid.rv .review-card.rv-active blockquote:not(.rv-open) {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 6;
        overflow: hidden;
    }
    .review-grid.rv .review-card.rv-active.rv-expanded blockquote,
    .review-grid.rv .review-card.rv-active blockquote.rv-open {
        display: block;
        -webkit-line-clamp: unset;
        overflow: visible;
    }
    .review-grid.rv .rv-more {
        display: inline-block;
        margin: 0.85rem auto 0;
        padding: 0;
        border: 0;
        background: none;
        font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
        font-size: 0.72rem;
        font-weight: 500;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--cool);
        cursor: pointer;
        touch-action: manipulation;
    }
    .review-grid.rv .rv-more:focus-visible {
        outline: 2px solid var(--cool);
        outline-offset: 3px;
    }
    .review-grid.rv .rv-more[hidden] { display: none !important; }
    /* Chevrons sit ON the card edges (not below it). */
    .review-grid.rv .review-arrow {
        width: 42px;
        height: 42px;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 4px 14px -4px rgba(88, 88, 90, 0.22);
        border-color: rgba(120, 185, 80, 0.55);
    }
    .review-grid.rv .review-arrow-prev { left: 6px; }
    .review-grid.rv .review-arrow-next { right: 6px; }
}

/* Desktop: never show the mobile Read more control */
@media (min-width: 1100px) {
    .review-grid.rv .rv-more { display: none !important; }
}

@media (max-width: 480px) {
    .review-grid.rv .review-card.rv-active,
    .review-grid.rv .review-card:not(.rv-active):not(.empty) {
        padding: 32px 44px 28px !important;
        width: min(720px, calc(100% - 8px));
        border-radius: 16px;
    }
    .review-grid.rv .review-card blockquote { font-size: 1.05rem !important; }
    .review-grid.rv .review-arrow {
        width: 40px;
        height: 40px;
        font-size: 1.4rem;
    }
    .review-grid.rv .review-arrow-prev { left: 4px; }
    .review-grid.rv .review-arrow-next { right: 4px; }
}

@media (prefers-reduced-motion: reduce) {
    .review-grid.rv .review-card.rv-active { animation: none !important; }
    .review-arrow { transition: none; }
}


/* ============================================================
   HERO TAGLINE (8 Sep 2026) — centred under nav, own grid row
   above headline/orbs. Small upward nudge only; no layout break.
   ============================================================ */
@media (min-width: 769px) {
  .hero-tagline {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    font-family: 'Lora', sans-serif;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--cool);
    font-weight: 600;
    letter-spacing: 0.35px;
    text-align: center;
    margin: 0 auto 0.5rem;
    padding: 0 1rem;
    transform: translateY(-68px); /* lift toward top of hero / under nav */
  }
  .hero-tagline > div {
    max-width: 44rem;
    margin: 0 auto;
  }
  /* Keep headline/orbs on the row below the tagline */
  .hero-inner .hero-left { grid-row: 2; }
  .hero-inner .orbit-heading-group { grid-row: 2; }
  .hero-inner .hero-orbit-col { grid-row: 2 / span 4; }
  .hero-inner .hero-text { grid-row: 3; }
  .hero-inner .hero-note { grid-row: 4; }
  .hero-inner .hero-actions { grid-row: 5; }
}
@media (min-width: 1201px) {
  .hero-tagline {
    font-size: 0.92rem;
    margin: 0 auto 0.65rem;
    transform: translateY(-84px);
  }
  .hero-tagline > div {
    max-width: 48rem;
  }
}