:root {
    --ink: #242721;
    --dark: #171816;
    --olive: #666b4d;
    --sage: #9ca388;
    --clay: #bb7b57;
    --sand: #eee7dd;
    --cream: #f8f5ef;
    --white: #fff;
    --border: rgba(36, 39, 33, .14);
    --serif: Georgia, 'Times New Roman', serif;
    --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html { scroll-behavior: smooth; overflow-x: hidden; }
body { color: var(--ink); background: var(--white); font-family: var(--sans); font-size: 1rem; line-height: 1.75; overflow-x: hidden; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.12; letter-spacing: -.025em; }
h1 { font-size: clamp(3rem, 7vw, 6.5rem); }
h2 { font-size: clamp(2.25rem, 4vw, 4rem); }
h3 { font-size: 1.75rem; }
a { color: var(--olive); }
a:hover { color: var(--clay); }
.container-xl { max-width: 1240px; }
.section-space { padding: clamp(5rem, 9vw, 8.5rem) 0; }
.bg-soft { background: var(--cream); }
.skip-link { position: fixed; top: .5rem; left: .5rem; z-index: 2000; background: #fff; color: #111; padding: .75rem 1rem; }
.eyebrow { color: var(--clay); font-size: .76rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.lead { color: #555b51; font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.75; }

.site-header { background: rgba(23, 24, 22, .96); backdrop-filter: blur(14px); box-shadow: 0 1px rgba(255, 255, 255, .06); }
.navbar { min-height: 92px; padding: .5rem 0; }
.navbar-brand img { display: block; width: 170px; height: auto; }
.navbar-nav { gap: .2rem; }
.navbar .nav-link { color: rgba(255,255,255,.76); font-size: .91rem; padding: .7rem .75rem !important; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: #e1ad89; }
.navbar-toggler { border: 0; box-shadow: none !important; }

.btn { border-radius: 999px; font-size: .9rem; font-weight: 700; letter-spacing: .015em; padding: .8rem 1.45rem; }
.btn-lg { padding: 1rem 1.75rem; }
.btn-sm { padding: .65rem 1.1rem; }
.btn-brand { color: #fff; background: var(--clay); border-color: var(--clay); }
.btn-brand:hover, .btn-brand:focus { color: #fff; background: #a86549; border-color: #a86549; transform: translateY(-1px); }
.text-link { display: inline-flex; gap: .6rem; align-items: center; color: var(--ink); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--clay); padding-bottom: .15rem; }
.text-link:hover { color: var(--clay); }

.hero-home { position: relative; isolation: isolate; color: #fff; background: var(--dark); min-height: calc(100vh - 92px); overflow: hidden; }
.hero-home::before { content: ''; position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(17,18,15,.93) 0%, rgba(17,18,15,.7) 48%, rgba(17,18,15,.16) 100%), url('../img/natasja.webp') center 35% / cover no-repeat; transform: scale(1.01); }
.hero-home::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, rgba(23,24,22,.5), transparent 45%); }
.min-vh-hero { min-height: calc(100vh - 92px); }
.hero-home h1 { max-width: 900px; margin: .25rem 0 1.75rem; }
.hero-home h1 em { color: #e3b291; font-weight: 400; }
.hero-home .lead { max-width: 700px; color: rgba(255,255,255,.78); }
.hero-scroll { position: absolute; right: 2.5rem; bottom: 2.5rem; color: rgba(255,255,255,.68); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; writing-mode: vertical-rl; }
.hero-scroll span { display: inline-block; width: 1px; height: 55px; background: rgba(255,255,255,.5); margin-bottom: 1rem; }

.image-frame { position: relative; }
.image-frame::before { content: ''; position: absolute; width: 56%; height: 68%; left: -22px; bottom: -22px; background: var(--sand); z-index: -1; }
.image-frame img, .content-image { display: block; width: 100%; height: auto; object-fit: cover; border-radius: 2px; }
.image-frame-large img, .content-image { aspect-ratio: 4 / 3; }
.portrait img { aspect-ratio: 4 / 5; object-fit: cover; }
.intro-section p:not(.eyebrow) { color: #5c6158; }

.video-section { color: #fff; background: var(--dark); }
.video-section h2 { color: #fff; }
.video-section p:not(.eyebrow) { color: rgba(255,255,255,.68); }
.video-frame { position: relative; aspect-ratio: 100 / 88.24; background: #090a09; box-shadow: 0 30px 70px rgba(0,0,0,.35); overflow: hidden; }
.video-frame::before { content: ''; position: absolute; inset: -12px auto auto -12px; width: 72px; height: 72px; border-top: 1px solid var(--clay); border-left: 1px solid var(--clay); pointer-events: none; z-index: 1; }
.video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.video-placeholder { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; color: #fff; background: #252821; border: 0; cursor: pointer; overflow: hidden; }
.video-placeholder::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(17,18,15,.62), rgba(17,18,15,.08) 70%); transition: background .2s ease; }
.video-placeholder:hover::after, .video-placeholder:focus-visible::after { background: linear-gradient(0deg, rgba(17,18,15,.7), rgba(17,18,15,.16) 70%); }
.video-placeholder img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .45s ease; }
.video-placeholder:hover img { transform: scale(1.025); }
.video-play { position: absolute; z-index: 2; left: 50%; top: 50%; display: grid; place-items: center; width: 78px; height: 78px; color: #fff; background: var(--clay); border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 12px 35px rgba(0,0,0,.3); transition: transform .2s ease, background .2s ease; }
.video-play i { margin-left: 4px; }
.video-placeholder:hover .video-play, .video-placeholder:focus-visible .video-play { background: #a86549; transform: translate(-50%, -50%) scale(1.08); }
.video-label { position: absolute; z-index: 2; left: 1.5rem; bottom: 1.25rem; font-size: .78rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.video-fallback { position: absolute; z-index: 3; inset: auto 1rem 1rem; margin: 0; }
.video-fallback a { color: #fff; }

.service-card { position: relative; display: flex; flex-direction: column; background: #fff; transition: transform .25s ease, box-shadow .25s ease; overflow: hidden; }
.service-card:hover { transform: translateY(-7px); box-shadow: 0 24px 55px rgba(36,39,33,.12); }
.service-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.service-card-body { display: flex; flex: 1; flex-direction: column; padding: 2rem; }
.service-number { display: block; color: var(--clay); font-size: .7rem; font-weight: 800; letter-spacing: .16em; margin-bottom: 1rem; }
.service-card p { color: #656a60; }
.service-card-body .text-link { align-self: flex-start; margin-top: auto; }

.quote-card { margin: 0; padding: 2.4rem; background: var(--cream); border-top: 3px solid var(--sage); }
.quote-card.featured { color: #fff; background: var(--olive); border-color: var(--clay); }
.quote-card blockquote { font-family: var(--serif); font-size: 1.32rem; line-height: 1.65; }
.quote-card figcaption { display: flex; flex-direction: column; margin-top: 2rem; font-size: .85rem; }
.quote-card figcaption span { opacity: .68; }
.review-score { color: var(--olive); font-weight: 700; }
.review-score i { color: var(--clay); }

.page-hero { color: #fff; background-color: var(--dark); background-position: center; background-repeat: no-repeat; background-size: cover; padding: clamp(6rem, 11vw, 10rem) 0; position: relative; isolation: isolate; overflow: hidden; }
.page-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(18, 20, 17, .94) 0%, rgba(18, 20, 17, .78) 48%, rgba(18, 20, 17, .38) 100%); }
.page-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(18, 20, 17, .35), transparent 55%); }
.hatha-hero { background-image: url('../img/header-hatha.webp'); background-position: center 58%; }
.pregnancy-hero { background-image: url('../img/header-pregnancy.webp'); background-position: center 56%; }
.breath-hero { background-image: url('../img/header-breath.webp'); background-position: center 42%; }
.about-hero { background-image: url('../img/header-about.webp'); background-position: center 53%; }
.contact-hero { background-image: url('../img/header-contact.webp'); background-position: center 48%; }
.page-hero h1 { font-size: clamp(3.8rem, 8vw, 7rem); }
.page-hero .lead { color: rgba(255,255,255,.72); max-width: 800px; }
.fact-card { padding: 2rem; border: 1px solid rgba(255,255,255,.2); }
.fact-card span, .fact-card small { display: block; color: rgba(255,255,255,.65); }
.fact-card strong { display: block; color: #e5b38f; font-family: var(--serif); font-size: 2rem; font-weight: 400; margin: .5rem 0; }
.check-list { display: grid; gap: .7rem; margin-top: 2rem; }
.check-list span { display: flex; align-items: center; gap: .75rem; font-weight: 600; }
.check-list i { color: var(--clay); }
.action-card { padding: clamp(2rem, 5vw, 3.5rem); background: #fff; box-shadow: 0 20px 60px rgba(36,39,33,.1); text-align: center; }
.action-card > i { color: var(--clay); font-size: 2.5rem; margin-bottom: 1.5rem; }
.gallery-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: opacity .2s; }
.gallery-grid a:hover img { opacity: .82; }
.notice { display: flex; gap: 1.25rem; align-items: flex-start; padding: 1.5rem; background: var(--cream); margin-top: 2rem; }
.notice i { color: var(--clay); font-size: 1.5rem; margin-top: .25rem; }
.notice p { margin: 0; }
.process-step { padding: 2rem; border-left: 1px solid var(--border); height: 100%; }
.process-step span { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: 50%; color: #fff; background: var(--clay); font-weight: 800; margin-bottom: 1.5rem; }

.form-label { font-weight: 700; }
.form-control, .form-select { min-height: 54px; border-color: #cbc9c1; border-radius: 0; padding: .85rem 1rem; }
textarea.form-control { min-height: 170px; }
.form-control:focus, .form-select:focus { border-color: var(--olive); box-shadow: 0 0 0 .2rem rgba(102,107,77,.14); }
.optional { color: #7b7e75; font-size: .78rem; font-weight: 400; }
.form-privacy { color: #6e716a; font-size: .84rem; }
.honeypot { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.contact-card { color: #fff; background: var(--olive); padding: clamp(2rem, 5vw, 3rem); }
.contact-list { list-style: none; padding: 0; margin: 2rem 0; display: grid; gap: 1.25rem; }
.contact-list li { display: flex; gap: 1rem; align-items: flex-start; }
.contact-list i { color: #e8b893; margin-top: .35rem; }
.contact-list a { color: #fff; }

.reviews-hero { background-image: url('../img/header-contact.webp'); background-position: center 52%; }
.roster-hero { background-position: center 44%; }
.roster-embed { min-height: 30rem; padding: clamp(1rem, 3vw, 2rem); background: var(--cream); border-top: 3px solid var(--sage); }
.roster-embed #sportbit-rooster { min-height: 26rem; }
.review-search-wrap { position: relative; }
.review-search-wrap i { position: absolute; left: 1rem; top: 50%; color: var(--clay); transform: translateY(-50%); }
.review-search-wrap .form-control { padding-left: 2.8rem; }
.btn-filter { color: var(--ink); background: var(--cream); border: 1px solid var(--border); }
.btn-filter span { color: #777b71; margin-left: .35rem; }
.btn-filter:hover, .btn-filter.active { color: #fff; background: var(--olive); border-color: var(--olive); }
.btn-filter:hover span, .btn-filter.active span { color: rgba(255,255,255,.7); }
.all-review-card { display: flex; flex-direction: column; padding: 2rem; background: var(--cream); border-top: 3px solid var(--sage); }
.all-review-card p { color: #50544c; }
.all-review-card footer { display: flex; flex-direction: column; gap: .45rem; margin-top: auto; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.all-review-card footer strong { display: block; line-height: 1.25; }
.all-review-card footer span { display: block; color: #7a7e75; font-size: .82rem; line-height: 1.5; }
.review-card-rating { color: var(--clay); letter-spacing: .08em; margin-bottom: 1.25rem; }
.review-quote-icon { color: var(--clay); font-size: 1.4rem; margin-bottom: 1.25rem; }
.review-empty i { color: var(--clay); font-size: 2.5rem; margin-bottom: 1rem; }

.legal-page h1 { margin-bottom: 2rem; }
.legal-page h2 { font-size: 2rem; margin-top: 3rem; }
.empty-state { display: grid; place-items: center; min-height: 70vh; padding: 5rem 0; }
.error-code { color: var(--sand); font-family: var(--serif); font-size: clamp(7rem, 20vw, 15rem); line-height: .8; }

.cta-band { background: var(--clay); }
.cta-band h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
.site-footer { color: #fff; background: var(--dark); }
.footer-logo { width: 170px; height: auto; }
.footer-heading { color: #fff; font-family: var(--sans); font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.site-footer a { color: rgba(255,255,255,.72); text-decoration: none; }
.site-footer a:hover { color: #e5b38f; }
.footer-links li + li { margin-top: .45rem; }
.instagram-link { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; font-size: 1.25rem; }
.footer-divider { border-color: rgba(255,255,255,.15); margin: 3rem 0 1.5rem; }
.surlinio-credit { margin-left: auto; }

.movements-hero h1 { font-size: clamp(2.2rem, 6.5vw, 6rem); overflow-wrap: anywhere; }
.meditation-section { scroll-margin-top: 110px; }

@media (max-width: 1199.98px) {
    .navbar { min-height: 78px; }
    .navbar-brand img { width: 145px; }
    .navbar-collapse { padding: 1.25rem 0 1rem; border-top: 1px solid rgba(255,255,255,.1); margin-top: .5rem; }
    .navbar-nav { align-items: stretch !important; }
    .navbar .nav-link { padding: .75rem 0 !important; }
    .navbar .btn { margin-top: .75rem; width: 100%; }
}

@media (max-width: 991.98px) {
    .hero-home, .min-vh-hero { min-height: calc(100svh - 78px); }
    .hero-home::before { background-position: 63% center; }
    .hero-home::after { background: rgba(17,18,15,.45); }
    .hero-scroll { display: none; }
    .service-card-body { padding: 1.6rem; }
    .surlinio-credit { margin-left: 0; }
}

@media (max-width: 575.98px) {
    body { font-size: .96rem; }
    .section-space { padding: 4.5rem 0; }
    .hero-home::before {
        background: linear-gradient(180deg, rgba(17,18,15,.9) 0%, rgba(17,18,15,.7) 35%, rgba(17,18,15,.28) 64%, rgba(17,18,15,.08) 100%), url('../img/natasja.webp') 58% center / cover no-repeat;
    }
    .hero-home::after { background: linear-gradient(90deg, rgba(17,18,15,.24), transparent 75%); }
    .hero-home h1 { font-size: clamp(2.8rem, 14vw, 4.15rem); }
    .hero-copy { padding-top: 4rem; padding-bottom: 4rem; }
    .page-hero { padding: 5.5rem 0; }
    .page-hero::before { background: linear-gradient(90deg, rgba(18, 20, 17, .92), rgba(18, 20, 17, .62)); }
    .page-hero h1 { font-size: 3.6rem; }
    .movements-hero h1 { font-size: clamp(2rem, 8.5vw, 3.6rem); }
    .image-frame::before { left: -10px; bottom: -10px; }
    .quote-card { padding: 1.8rem; }
    .process-step { border-left: 0; border-top: 1px solid var(--border); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
