@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:ital,wght@0,600;0,800;1,600&display=swap');

:root {
    --kinetics-bg: #FCFBF9;
    --kinetics-surface: #FFFFFF;
    --kinetics-ink-main: #1C1B20;
    --kinetics-ink-muted: #5A5863;
    --kinetics-highlight: #D84A22; 
    --kinetics-highlight-hover: #AB3514;
    --kinetics-border-line: #E5E3DF;
    --kinetics-flow-grad: linear-gradient(135deg, #D84A22, #E87A5D);
    
    --font-heading-set: 'Playfair Display', serif;
    --font-reading-set: 'Inter', sans-serif;
    
    --space-vert: 16dvh; /* spacious */
    --edge-curve: 999px; /* pill */
    --bound-width: 1320px;
}

/* Reset & Basics */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: var(--font-reading-set);
    background-color: var(--kinetics-bg);
    color: var(--kinetics-ink-main);
    line-height: 1.6;
    overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* Typography */
h1, h2, h3, h4 {
    font-family: var(--font-heading-set);
    font-weight: 800;
    line-height: 1.1;
    color: var(--kinetics-ink-main);
    text-transform: none; /* normal case */
}

/* Layout Wrappers */
.bound-area {
    max-width: var(--bound-width);
    margin: 0 auto;
    padding: 0 5%;
}

/* Header (Light Split Preset B) */
.top-nav-realm {
    background-color: var(--kinetics-surface);
    border-bottom: 1px solid var(--kinetics-border-line);
    position: sticky;
    top: 0;
    z-index: 100;
    transition: background 0.3s ease;
}
.top-nav-realm:focus-within {
    border-bottom-color: var(--kinetics-highlight);
}
.nav-flex-zone {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}
.brand-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-heading-set);
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--kinetics-highlight);
}
.brand-identity svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
}
.site-options-list {
    display: flex;
    gap: 2rem;
    list-style: none;
}
.site-options-list a {
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.2s;
}
.site-options-list a:hover {
    color: var(--kinetics-highlight);
}
.mobile-trigger-box { display: none; }
.mobile-toggle-lbl { display: none; cursor: pointer; }
.mobile-toggle-lbl span {
    display: block; width: 24px; height: 2px;
    background: var(--kinetics-ink-main); margin: 5px 0;
}

/* Buttons */
.action-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--kinetics-highlight);
    color: #FFF;
    padding: 16px 36px;
    border-radius: var(--edge-curve);
    font-weight: 600;
    font-family: var(--font-reading-set);
    border: none;
    cursor: pointer;
    transition: background 0.3s;
}
.action-pill:hover {
    background: var(--kinetics-highlight-hover);
}

/* Announcement Bar */
.notify-strip-top {
    background: var(--kinetics-flow-grad);
    color: #FFF;
    text-align: center;
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 500;
}
.notify-strip-top a {
    text-decoration: underline;
    margin-left: 8px;
}

/* Hero Split (Index) */
.intro-split-area {
    display: flex;
    min-height: 85vh;
    background: var(--kinetics-surface);
}
.intro-text-side {
    width: 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8% 5%;
}
.intro-text-side h1 {
    font-size: 3.8rem;
    margin-bottom: 24px;
}
.intro-text-side p {
    font-size: 1.25rem;
    color: var(--kinetics-ink-muted);
    margin-bottom: 32px;
    max-width: 90%;
}
.intro-visual-side {
    width: 45%;
    background-size: cover;
    background-position: center;
    border-bottom-left-radius: var(--edge-curve);
}

/* Magazine Spread Content */
.spread-visual-break {
    width: 100%;
    height: 45vh;
    background-size: cover;
    background-position: center;
    border-radius: var(--edge-curve);
    margin-top: 40px;
}
.spread-columns-area {
    padding: var(--space-vert) 0;
}
.magazine-cols {
    display: flex;
    gap: 3rem;
}
.mag-col-item {
    flex: 1;
    border-top: 3px solid var(--kinetics-highlight);
    padding-top: 24px;
}
.mag-col-item h3 {
    font-size: 1.4rem;
    margin-bottom: 16px;
}

/* Masonry Features */
.habit-masonry-zone {
    padding: var(--space-vert) 0;
    background: var(--kinetics-surface);
}
.habit-masonry-zone h2 {
    text-align: center;
    font-size: 2.8rem;
    margin-bottom: 60px;
}
.masonry-layout {
    column-count: 2;
    column-gap: 2rem;
}
.masonry-brick {
    break-inside: avoid;
    background: var(--kinetics-bg);
    border: 1px solid var(--kinetics-border-line);
    border-radius: 40px; /* modified pill for blocks */
    padding: 32px;
    margin-bottom: 2rem;
}
.masonry-brick img {
    border-radius: 20px;
    margin-bottom: 20px;
}
.masonry-brick svg {
    width: 32px; height: 32px;
    fill: var(--kinetics-highlight);
    margin-bottom: 16px;
}
.masonry-brick h3 { margin-bottom: 12px; font-size: 1.3rem;}

/* How it works (Horizontal Track) */
.method-track-zone {
    padding: var(--space-vert) 0;
}
.method-track-zone h2 {
    text-align: center;
    font-size: 2.8rem;
    margin-bottom: 80px;
}
.track-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
}
.track-flex::before {
    content: '';
    position: absolute;
    top: 30px;
    left: 10%;
    right: 10%;
    border-top: 2px dashed var(--kinetics-border-line);
    z-index: 1;
}
.track-node {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 2;
    padding: 0 20px;
}
.node-circle {
    width: 60px; height: 60px;
    background: var(--kinetics-surface);
    border: 2px solid var(--kinetics-highlight);
    border-radius: 50%;
    margin: 0 auto 24px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: var(--kinetics-highlight);
    font-size: 1.5rem;
}
.track-node.active .node-circle {
    background: var(--kinetics-highlight);
    color: #FFF;
}
.track-node h3 { margin-bottom: 12px; }

/* CTA Strip */
.final-join-area {
    padding: var(--space-vert) 0;
    background: var(--kinetics-surface);
    border-top: 2px solid var(--kinetics-border-line);
    text-align: center;
}
.final-join-area h2 {
    font-size: 3rem;
    margin-bottom: 32px;
}

/* Expert Page Layout */
.expert-bio-split {
    display: flex;
    align-items: stretch;
    min-height: 80vh;
}
.bio-visual {
    width: 50%;
    background-size: cover;
    background-position: top center;
    border-bottom-right-radius: var(--edge-curve);
}
.bio-data {
    width: 50%;
    padding: 10% 8%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.bio-data h1 { font-size: 3.5rem; margin-bottom: 20px; }
.bio-data p { margin-bottom: 20px; color: var(--kinetics-ink-muted); font-size: 1.1rem; }

.stats-row-zone {
    display: flex;
    padding: 8vh 5%;
    gap: 2rem;
    background: var(--kinetics-bg);
}
.stat-brick {
    flex: 1;
    text-align: center;
    padding: 30px;
    border: 1px solid var(--kinetics-border-line);
    border-radius: 40px;
}
.stat-brick span {
    display: block;
    font-size: 3.5rem;
    font-family: var(--font-heading-set);
    color: var(--kinetics-highlight);
    line-height: 1;
    margin-bottom: 10px;
}

.open-approaches {
    padding: var(--space-vert) 0;
    max-width: 900px;
    margin: 0 auto;
}
.approach-item {
    border-bottom: 1px solid var(--kinetics-border-line);
    padding: 32px 0;
}
.approach-item h3 {
    font-size: 1.5rem;
    margin-bottom: 16px;
    color: var(--kinetics-highlight);
}

/* Reserve layout */
.booking-split-zone {
    padding: calc(var(--space-vert) * 0.7) 0;
    display: flex;
    gap: 4rem;
}
.booking-info-deck {
    width: 45%;
}
.info-deck-card {
    background: var(--kinetics-surface);
    border: 1px solid var(--kinetics-border-line);
    border-radius: 40px;
    padding: 32px;
    margin-bottom: 2rem;
}
.info-deck-card h3 { margin-bottom: 16px; }
.info-deck-card ul {
    list-style: none;
    margin-top: 16px;
}
.info-deck-card ul li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 12px;
    color: var(--kinetics-ink-muted);
}
.info-deck-card ul li::before {
    content: '';
    position: absolute;
    left: 0; top: 8px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--kinetics-highlight);
}
.booking-form-deck {
    width: 55%;
    background: var(--kinetics-surface);
    padding: 48px;
    border-radius: 40px;
    border: 1px solid var(--kinetics-border-line);
}
.data-input-row {
    margin-bottom: 24px;
}
.data-input-row label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
}
.data-input-row input {
    width: 100%;
    padding: 16px;
    border-radius: var(--edge-curve);
    border: 1px solid var(--kinetics-border-line);
    font-family: var(--font-reading-set);
    background: var(--kinetics-bg);
}
.data-input-row input:focus {
    outline: none;
    border-color: var(--kinetics-highlight);
}
.policy-check-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 32px;
    font-size: 0.9rem;
}

.faq-plain-zone {
    padding: var(--space-vert) 0;
    max-width: 800px;
    margin: 0 auto;
}
.faq-plain-zone h2 { text-align: center; margin-bottom: 40px; font-size: 2.5rem; }
.faq-chunk { margin-bottom: 32px; }
.faq-chunk h4 { margin-bottom: 8px; font-size: 1.2rem; }
.faq-chunk p { color: var(--kinetics-ink-muted); }

/* Text Pages */
.doc-canvas {
    padding: var(--space-vert) 0;
    max-width: 800px;
    margin: 0 auto;
    min-height: 100vh;
}
.doc-canvas h1 { margin-bottom: 40px; font-size: 3rem; }
.doc-canvas h2 { margin: 40px 0 20px; }
.doc-canvas p { margin-bottom: 20px; color: var(--kinetics-ink-muted); }

/* Footer */
.base-footer-realm {
    background: var(--kinetics-ink-main);
    color: #FFF;
    padding: 80px 0 40px;
}
.footer-grid {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 40px;
    margin-bottom: 40px;
}
.footer-col { width: 30%; }
.footer-col .brand-identity { color: #FFF; margin-bottom: 20px; }
.footer-col p { color: #aaa; margin-bottom: 10px; }
.footer-links a {
    display: block; margin-bottom: 12px; color: #ccc;
}
.footer-links a:hover { color: var(--kinetics-highlight); }
.disclaim-bar { text-align: center; color: #888; font-size: 0.85rem; }

/* Cookie Banner */
.snack-notify-float {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--kinetics-surface);
    border-top: 1px solid var(--kinetics-border-line);
    padding: 20px;
    z-index: 9999;
    display: flex;
    justify-content: center;
    gap: 20px;
    align-items: center;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.05); /* minimal shadow allowed for functional popups */
}
.snack-notify-float p { font-size: 0.9rem; margin: 0; max-width: 600px; }
.cookie-act-btn {
    padding: 8px 24px;
    border-radius: var(--edge-curve);
    border: none;
    cursor: pointer;
    font-weight: 600;
}
#accept-cookie { background: var(--kinetics-highlight); color: #FFF; }
#decline-cookie { background: var(--kinetics-border-line); color: var(--kinetics-ink-main); }

/* Responsive Mobile */
@media (max-width: 992px) {
    .intro-split-area { flex-direction: column; }
    .intro-text-side, .intro-visual-side { width: 100%; }
    .intro-visual-side { height: 40vh; border-radius: 0; }
    
    .magazine-cols { flex-direction: column; gap: 2rem; }
    .masonry-layout { column-count: 1; }
    
    .track-flex { flex-direction: column; gap: 40px; }
    .track-flex::before { display: none; }
    .track-node { display: flex; flex-direction: column; align-items: center; }
    
    .expert-bio-split { flex-direction: column; }
    .bio-visual, .bio-data { width: 100%; border-radius: 0; }
    .bio-visual { height: 40vh; }
    .stats-row-zone { flex-wrap: wrap; }
    .stat-brick { min-width: 40%; }
    
    .booking-split-zone { flex-direction: column; }
    .booking-info-deck, .booking-form-deck { width: 100%; }
    
    .footer-grid { flex-direction: column; gap: 40px; }
    .footer-col { width: 100%; }

    /* Mobile Menu CSS Hack */
    .mobile-toggle-lbl { display: block; }
    .site-options-list {
        display: none;
        position: absolute;
        top: 80px; left: 0; right: 0;
        background: var(--kinetics-surface);
        flex-direction: column;
        padding: 20px 5%;
        border-bottom: 1px solid var(--kinetics-border-line);
    }
    .mobile-trigger-box:checked ~ .site-options-list {
        display: flex;
    }
    .snack-notify-float { flex-direction: column; text-align: center; }
}