@charset "UTF-8";.wp-admin #poststuff .component h2, .wp-admin #poststuff .component h3, .wp-admin #poststuff .component h4{padding:0}.wp-admin #poststuff .component p{margin:0}.theme-browser .theme .theme-name{height:unset}body > #page > #header[role=banner]{display:none}.acfe-flexible-layout-thumbnail{background-size:contain}.wp-menu-name .update-plugins{display:none !important}:root{--width:80rem;--margin:6.25rem;--padding:1rem}@media (max-width:1000px){:root{--margin:1rem}}@media (max-width:600px){:root{--margin:1rem}}*{box-sizing:border-box;margin:0}html{font-size:16px;scroll-behavior:smooth}body{overflow-x:hidden}body.prevent-scroll{overflow:hidden}.component a{text-decoration:none}.underline{text-decoration:underline}.mw{max-width:var(--width);width:100%;margin-left:auto;margin-right:auto}.mw-200{max-width:12.5rem}@media (min-width:calc(1000px + 1px)){.mw-200-d{max-width:12.5rem}}.mw-210{max-width:13.125rem}@media (min-width:calc(1000px + 1px)){.mw-210-d{max-width:13.125rem}}.mw-220{max-width:13.75rem}@media (min-width:calc(1000px + 1px)){.mw-220-d{max-width:13.75rem}}.mw-230{max-width:14.375rem}@media (min-width:calc(1000px + 1px)){.mw-230-d{max-width:14.375rem}}.mw-240{max-width:15rem}@media (min-width:calc(1000px + 1px)){.mw-240-d{max-width:15rem}}.mw-250{max-width:15.625rem}@media (min-width:calc(1000px + 1px)){.mw-250-d{max-width:15.625rem}}.mw-260{max-width:16.25rem}@media (min-width:calc(1000px + 1px)){.mw-260-d{max-width:16.25rem}}.mw-270{max-width:16.875rem}@media (min-width:calc(1000px + 1px)){.mw-270-d{max-width:16.875rem}}.mw-280{max-width:17.5rem}@media (min-width:calc(1000px + 1px)){.mw-280-d{max-width:17.5rem}}.mw-290{max-width:18.125rem}@media (min-width:calc(1000px + 1px)){.mw-290-d{max-width:18.125rem}}.mw-300{max-width:18.75rem}@media (min-width:calc(1000px + 1px)){.mw-300-d{max-width:18.75rem}}.mw-310{max-width:19.375rem}@media (min-width:calc(1000px + 1px)){.mw-310-d{max-width:19.375rem}}.mw-320{max-width:20rem}@media (min-width:calc(1000px + 1px)){.mw-320-d{max-width:20rem}}.mw-330{max-width:20.625rem}@media (min-width:calc(1000px + 1px)){.mw-330-d{max-width:20.625rem}}.mw-340{max-width:21.25rem}@media (min-width:calc(1000px + 1px)){.mw-340-d{max-width:21.25rem}}.mw-350{max-width:21.875rem}@media (min-width:calc(1000px + 1px)){.mw-350-d{max-width:21.875rem}}.mw-360{max-width:22.5rem}@media (min-width:calc(1000px + 1px)){.mw-360-d{max-width:22.5rem}}.mw-370{max-width:23.125rem}@media (min-width:calc(1000px + 1px)){.mw-370-d{max-width:23.125rem}}.mw-380{max-width:23.75rem}@media (min-width:calc(1000px + 1px)){.mw-380-d{max-width:23.75rem}}.mw-390{max-width:24.375rem}@media (min-width:calc(1000px + 1px)){.mw-390-d{max-width:24.375rem}}.mw-400{max-width:25rem}@media (min-width:calc(1000px + 1px)){.mw-400-d{max-width:25rem}}.mw-410{max-width:25.625rem}@media (min-width:calc(1000px + 1px)){.mw-410-d{max-width:25.625rem}}.mw-420{max-width:26.25rem}@media (min-width:calc(1000px + 1px)){.mw-420-d{max-width:26.25rem}}.mw-430{max-width:26.875rem}@media (min-width:calc(1000px + 1px)){.mw-430-d{max-width:26.875rem}}.mw-440{max-width:27.5rem}@media (min-width:calc(1000px + 1px)){.mw-440-d{max-width:27.5rem}}.mw-450{max-width:28.125rem}@media (min-width:calc(1000px + 1px)){.mw-450-d{max-width:28.125rem}}.mw-460{max-width:28.75rem}@media (min-width:calc(1000px + 1px)){.mw-460-d{max-width:28.75rem}}.mw-470{max-width:29.375rem}@media (min-width:calc(1000px + 1px)){.mw-470-d{max-width:29.375rem}}.mw-480{max-width:30rem}@media (min-width:calc(1000px + 1px)){.mw-480-d{max-width:30rem}}.mw-490{max-width:30.625rem}@media (min-width:calc(1000px + 1px)){.mw-490-d{max-width:30.625rem}}.mw-500{max-width:31.25rem}@media (min-width:calc(1000px + 1px)){.mw-500-d{max-width:31.25rem}}.mw-510{max-width:31.875rem}@media (min-width:calc(1000px + 1px)){.mw-510-d{max-width:31.875rem}}.mw-520{max-width:32.5rem}@media (min-width:calc(1000px + 1px)){.mw-520-d{max-width:32.5rem}}.mw-530{max-width:33.125rem}@media (min-width:calc(1000px + 1px)){.mw-530-d{max-width:33.125rem}}.mw-540{max-width:33.75rem}@media (min-width:calc(1000px + 1px)){.mw-540-d{max-width:33.75rem}}.mw-550{max-width:34.375rem}@media (min-width:calc(1000px + 1px)){.mw-550-d{max-width:34.375rem}}.mw-560{max-width:35rem}@media (min-width:calc(1000px + 1px)){.mw-560-d{max-width:35rem}}.mw-570{max-width:35.625rem}@media (min-width:calc(1000px + 1px)){.mw-570-d{max-width:35.625rem}}.mw-580{max-width:36.25rem}@media (min-width:calc(1000px + 1px)){.mw-580-d{max-width:36.25rem}}.mw-590{max-width:36.875rem}@media (min-width:calc(1000px + 1px)){.mw-590-d{max-width:36.875rem}}.mw-600{max-width:37.5rem}@media (min-width:calc(1000px + 1px)){.mw-600-d{max-width:37.5rem}}.mw-610{max-width:38.125rem}@media (min-width:calc(1000px + 1px)){.mw-610-d{max-width:38.125rem}}.mw-620{max-width:38.75rem}@media (min-width:calc(1000px + 1px)){.mw-620-d{max-width:38.75rem}}.mw-630{max-width:39.375rem}@media (min-width:calc(1000px + 1px)){.mw-630-d{max-width:39.375rem}}.mw-640{max-width:40rem}@media (min-width:calc(1000px + 1px)){.mw-640-d{max-width:40rem}}.mw-650{max-width:40.625rem}@media (min-width:calc(1000px + 1px)){.mw-650-d{max-width:40.625rem}}.mw-660{max-width:41.25rem}@media (min-width:calc(1000px + 1px)){.mw-660-d{max-width:41.25rem}}.mw-670{max-width:41.875rem}@media (min-width:calc(1000px + 1px)){.mw-670-d{max-width:41.875rem}}.mw-680{max-width:42.5rem}@media (min-width:calc(1000px + 1px)){.mw-680-d{max-width:42.5rem}}.mw-690{max-width:43.125rem}@media (min-width:calc(1000px + 1px)){.mw-690-d{max-width:43.125rem}}.mw-700{max-width:43.75rem}@media (min-width:calc(1000px + 1px)){.mw-700-d{max-width:43.75rem}}.mw-710{max-width:44.375rem}@media (min-width:calc(1000px + 1px)){.mw-710-d{max-width:44.375rem}}.mw-720{max-width:45rem}@media (min-width:calc(1000px + 1px)){.mw-720-d{max-width:45rem}}.mw-730{max-width:45.625rem}@media (min-width:calc(1000px + 1px)){.mw-730-d{max-width:45.625rem}}.mw-740{max-width:46.25rem}@media (min-width:calc(1000px + 1px)){.mw-740-d{max-width:46.25rem}}.mw-750{max-width:46.875rem}@media (min-width:calc(1000px + 1px)){.mw-750-d{max-width:46.875rem}}.mw-760{max-width:47.5rem}@media (min-width:calc(1000px + 1px)){.mw-760-d{max-width:47.5rem}}.mw-770{max-width:48.125rem}@media (min-width:calc(1000px + 1px)){.mw-770-d{max-width:48.125rem}}.mw-780{max-width:48.75rem}@media (min-width:calc(1000px + 1px)){.mw-780-d{max-width:48.75rem}}.mw-790{max-width:49.375rem}@media (min-width:calc(1000px + 1px)){.mw-790-d{max-width:49.375rem}}.mw-800{max-width:50rem}@media (min-width:calc(1000px + 1px)){.mw-800-d{max-width:50rem}}.mw-810{max-width:50.625rem}@media (min-width:calc(1000px + 1px)){.mw-810-d{max-width:50.625rem}}.mw-820{max-width:51.25rem}@media (min-width:calc(1000px + 1px)){.mw-820-d{max-width:51.25rem}}.mw-830{max-width:51.875rem}@media (min-width:calc(1000px + 1px)){.mw-830-d{max-width:51.875rem}}.mw-840{max-width:52.5rem}@media (min-width:calc(1000px + 1px)){.mw-840-d{max-width:52.5rem}}.mw-850{max-width:53.125rem}@media (min-width:calc(1000px + 1px)){.mw-850-d{max-width:53.125rem}}.mw-860{max-width:53.75rem}@media (min-width:calc(1000px + 1px)){.mw-860-d{max-width:53.75rem}}.mw-870{max-width:54.375rem}@media (min-width:calc(1000px + 1px)){.mw-870-d{max-width:54.375rem}}.mw-880{max-width:55rem}@media (min-width:calc(1000px + 1px)){.mw-880-d{max-width:55rem}}.mw-890{max-width:55.625rem}@media (min-width:calc(1000px + 1px)){.mw-890-d{max-width:55.625rem}}.mw-900{max-width:56.25rem}@media (min-width:calc(1000px + 1px)){.mw-900-d{max-width:56.25rem}}.mw-910{max-width:56.875rem}@media (min-width:calc(1000px + 1px)){.mw-910-d{max-width:56.875rem}}.mw-920{max-width:57.5rem}@media (min-width:calc(1000px + 1px)){.mw-920-d{max-width:57.5rem}}.mw-930{max-width:58.125rem}@media (min-width:calc(1000px + 1px)){.mw-930-d{max-width:58.125rem}}.mw-940{max-width:58.75rem}@media (min-width:calc(1000px + 1px)){.mw-940-d{max-width:58.75rem}}.mw-950{max-width:59.375rem}@media (min-width:calc(1000px + 1px)){.mw-950-d{max-width:59.375rem}}.mw-960{max-width:60rem}@media (min-width:calc(1000px + 1px)){.mw-960-d{max-width:60rem}}.mw-970{max-width:60.625rem}@media (min-width:calc(1000px + 1px)){.mw-970-d{max-width:60.625rem}}.mw-980{max-width:61.25rem}@media (min-width:calc(1000px + 1px)){.mw-980-d{max-width:61.25rem}}.mw-990{max-width:61.875rem}@media (min-width:calc(1000px + 1px)){.mw-990-d{max-width:61.875rem}}.mw-1000{max-width:62.5rem}@media (min-width:calc(1000px + 1px)){.mw-1000-d{max-width:62.5rem}}.mw-1010{max-width:63.125rem}@media (min-width:calc(1000px + 1px)){.mw-1010-d{max-width:63.125rem}}.mw-1020{max-width:63.75rem}@media (min-width:calc(1000px + 1px)){.mw-1020-d{max-width:63.75rem}}.mw-1030{max-width:64.375rem}@media (min-width:calc(1000px + 1px)){.mw-1030-d{max-width:64.375rem}}.mw-1040{max-width:65rem}@media (min-width:calc(1000px + 1px)){.mw-1040-d{max-width:65rem}}.mw-1050{max-width:65.625rem}@media (min-width:calc(1000px + 1px)){.mw-1050-d{max-width:65.625rem}}.pad{padding-left:var(--padding) !important;padding-right:var(--padding) !important}@media (max-width:1000px){.pad{padding-left:var(--padding) !important;padding-right:var(--padding) !important}}@media (max-width:600px){.pad{padding-left:var(--padding) !important;padding-right:var(--padding) !important}}.fw{width:100%}.center{text-align:center}button{cursor:pointer}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.noscroll{-ms-overflow-style:none;scrollbar-width:none}.noscroll::-webkit-scrollbar{display:none}@media (max-width:1000px){.desktop{display:none !important}}@media (min-width:calc(1000px + 1px)){.mobile{display:none !important}}.fw{width:100%}.flex{display:flex;justify-content:center;align-items:center}.flex-c{display:flex;justify-content:center;align-items:center;flex-direction:column}.auto{margin-left:auto;margin-right:auto}.align-start{align-items:flex-start}.align-end{align-items:flex-end}.align-stretch{align-items:stretch}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.justify-evenly{justify-content:space-evenly}.upper{text-transform:uppercase}.component{position:relative}.component:empty{display:none}.component-error code{padding:0.1875rem 0.3125rem 0.125rem;background:rgba(0, 0, 0, 0.07);margin-top:0.5rem;font-weight:400 !important}/* ============================================================================ Uniflow — global tokens, base, shared utilities (ported from the approved static prototype). Compiled by bettrlite AFTER plugin reset.scss/style.scss, BEFORE component scss files and theme style.scss. ========================================================================== */:root{--navy:#262A44;--navy-deep:#1E2238;--steel:#246792;--teal:#0EB09D;--green:#009640;--lime:#A3CB6C;--white:#FFFFFF;--off:#F4F5F7;--gradient:linear-gradient(90deg, #246792 0%, #0EB09D 50%, #009640 100%);--cols:12;--gutter:1rem;--margin:2rem;--t-display:clamp(2.6rem, 7.2vw, 6.5rem);--t-h2:clamp(2rem, 4.4vw, 3.75rem);--t-h3:clamp(1.25rem, 2vw, 1.75rem);--t-lead:clamp(1.08rem, 1.35vw, 1.3rem);--t-body:1.0625rem;--t-small:0.8125rem;--ease-osmo:cubic-bezier(0.625, 0.05, 0, 1);--header-h:96px;--section-pad-y:clamp(4rem, 8vw, 8rem)}@media (max-width:700px){:root{--cols:4;--margin:1.25rem;--header-h:72px;/* client feedback:slightly smaller type on phones. Form inputs stay 16px (1rem) — below that iOS zooms on focus. */ --t-display:clamp(2.25rem, 8.5vw, 3.4rem);--t-h2:1.75rem;--t-h3:1.15rem;--t-lead:1rem;--t-body:1rem}}*, *::before, *::after{box-sizing:border-box}html, body, h1, h2, h3, p, figure, blockquote, dl, dd, ul, ol{margin:0}ul, ol{padding:0;list-style:none}img, picture, video{display:block;max-width:100%;height:auto}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}input, textarea, select{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--teal);outline-offset:3px}html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px);-webkit-text-size-adjust:100%;/* native scrollbar fully hidden — the fixed gradient pill (.scroll-indicator, JS-driven) replaces it (wine-collectors pattern) */ scrollbar-width:none}html.has-lenis{scroll-behavior:auto}::-webkit-scrollbar{display:none;width:0}.scroll-indicator{position:fixed;top:0;right:5px;width:6px;height:44px;border-radius:999px;background:linear-gradient(180deg, var(--steel), var(--teal), var(--green));z-index:1500;pointer-events:none;opacity:0;transition:opacity 0.2s ease;will-change:transform, opacity}.scroll-indicator.is-visible{opacity:1}body{background:var(--off);color:var(--navy);/* macOS/iOS render light-on-dark text noticeably heavier without this — most of the site is white Geologica on navy (house style, same as wc) */ -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:"Geologica", system-ui, sans-serif;font-weight:400;font-size:var(--t-body);line-height:1.65;overflow-x:hidden;min-height:100svh}main{display:block;overflow-x:clip}h1, h2, h3{font-family:"Geologica", system-ui, sans-serif;font-weight:700;line-height:1.12;letter-spacing:-0.01em}/* Pre-paint hide (class set by the inline head script when motion will play). GSAP's inline styles override these the moment app.js takes over;app.js removes the class when PLAY is false, and the head script's 3s fallback removes it if app.js never executes. */
.pre-anim .hero__title,
.pre-anim .hero__subline,
.pre-anim .hero__lead,
.pre-anim .hero__cta,
.pre-anim .hero__price,
.pre-anim .paldies__content h1,
.pre-anim .section h2[data-split-lines]{visibility:hidden;opacity:0}/* Loader:full-viewport navy curtain, visible from first paint (html class set by the inline head script), logo beat, then slides up. Quick mode (repeat visits in the session) skips the beat — it acts as the ENTER phase of a page transition instead. */
.uf-loader{position:fixed;inset:0;z-index:10001;background:var(--navy);display:none;align-items:center;justify-content:center;will-change:transform}html.uf-loading .uf-loader{display:flex}.uf-loader__logo{width:min(220px, 55vw);height:auto;opacity:0}/* Transition curtain:slides up from the bottom on internal-link clicks, covers, then the next page's loader (quick mode) reveals. */
.uf-curtain{position:fixed;inset:0;z-index:10001;background:var(--navy);transform:translateY(100%);display:none;pointer-events:none;will-change:transform}.grid{display:grid;grid-template-columns:repeat(var(--cols), 1fr);column-gap:var(--gutter);margin-inline:var(--margin);position:relative}.eyebrow{display:inline-block;font-weight:600;text-transform:uppercase;letter-spacing:0.12em;font-size:var(--t-small);color:var(--teal);margin-bottom:0.9em;grid-column:1/-1}.section--light .eyebrow{color:var(--steel)}.text-gradient{background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent}/* On navy sections the steel-blue gradient start sinks into the background (same issue the hero DRAMA had) — start from teal and end in lime instead */
.section--dark .text-gradient{background:linear-gradient(90deg, var(--teal) 0%, var(--lime) 100%);-webkit-background-clip:text;background-clip:text}.text-lime{color:var(--lime)}.gradient-band{height:6px;background:var(--gradient);width:100%}.skip-link{position:fixed;top:-100px;left:1rem;z-index:999;background:var(--navy);color:var(--white);padding:0.75em 1.25em;border-radius:999px;font-weight:600;transition:top 0.2s var(--ease-osmo)}.skip-link:focus-visible{top:1rem}.section{position:relative;padding-block:var(--section-pad-y)}.section--light{background:var(--off);color:var(--navy)}.section--dark{background:var(--navy);color:var(--white)}.section--dark .eyebrow{color:var(--teal)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5em;min-height:44px;padding:0.95em 1.9em;border-radius:999px;font-family:"Geologica", sans-serif;font-weight:600;font-size:var(--t-small);text-transform:uppercase;letter-spacing:0.12em;white-space:nowrap;position:relative;overflow:hidden;isolation:isolate;transition:transform 0.25s var(--ease-osmo), color 0.3s var(--ease-osmo)}.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--gradient);transform:translateX(-101%);transition:transform 0.4s var(--ease-osmo)}.btn:hover::before, .btn:focus-visible::before{transform:translateX(0)}.btn:active{transform:scale(0.98)}.btn:hover{transform:scale(1.02)}.btn--primary{background:transparent;color:var(--white);border:1.5px solid transparent;background-image:linear-gradient(var(--navy), var(--navy)), var(--gradient);background-origin:border-box;background-clip:padding-box, border-box}.btn--primary:hover, .btn--primary:focus-visible{color:var(--navy)}.section--light .btn--primary{background-image:linear-gradient(var(--navy), var(--navy)), var(--gradient)}.price-chip{display:inline-block;background:var(--lime);color:var(--navy-deep);font-weight:600;font-size:var(--t-small);letter-spacing:0.02em;padding:0.65em 1.2em;border-radius:999px;transform:rotate(-4deg);box-shadow:0 8px 24px rgba(0, 0, 0, 0.18)}.dev-grid{position:fixed;inset:0;z-index:9999;pointer-events:none;display:none}.dev-grid.is-active{display:block}.dev-grid__inner{height:100%;margin-inline:var(--margin)}.dev-grid__col{height:100%;background:rgba(14, 176, 157, 0.12);outline:1px dashed rgba(14, 176, 157, 0.35)}.flow-bars{position:absolute;left:0;right:0;display:flex;pointer-events:none;z-index:1}.flow-bar{width:5px;border-radius:999px;flex:0 0 auto}.flow-bars--photo{position:absolute;top:-16px;left:0;right:0;height:46px;display:flex;align-items:flex-start;justify-content:space-evenly;padding-inline:10%;z-index:3}.flow-bars--photo .flow-bar{transform-origin:top center}.flow-bars--cta{bottom:0;height:40%;align-items:flex-end;justify-content:space-between;padding-inline:var(--margin);z-index:1}.flow-bars--cta .flow-bar{transform-origin:bottom center}.section-head{row-gap:0.5rem}.section h2{grid-column:1/span 9;font-size:var(--t-h2)}.section--dark h2{color:var(--white)}.section--light h2{color:var(--navy)}@media (max-width:900px){.section h2{grid-column:1/-1}}img{max-width:100%}@media (max-width:400px){:root{--t-display:clamp(2rem, 8.5vw, 2.8rem)}}.card__icon .fi{font-size:1.35rem;line-height:1;display:flex;align-items:center;justify-content:center}/* ============================================================================ Uniflow — global tokens, base, shared utilities (ported from the approved static prototype). Compiled by bettrlite AFTER plugin reset.scss/style.scss, BEFORE component scss files and theme style.scss. ========================================================================== */:root{--navy:#262A44;--navy-deep:#1E2238;--steel:#246792;--teal:#0EB09D;--green:#009640;--lime:#A3CB6C;--white:#FFFFFF;--off:#F4F5F7;--gradient:linear-gradient(90deg, #246792 0%, #0EB09D 50%, #009640 100%);--cols:12;--gutter:1rem;--margin:2rem;--t-display:clamp(2.6rem, 7.2vw, 6.5rem);--t-h2:clamp(2rem, 4.4vw, 3.75rem);--t-h3:clamp(1.25rem, 2vw, 1.75rem);--t-lead:clamp(1.08rem, 1.35vw, 1.3rem);--t-body:1.0625rem;--t-small:0.8125rem;--ease-osmo:cubic-bezier(0.625, 0.05, 0, 1);--header-h:96px;--section-pad-y:clamp(4rem, 8vw, 8rem)}@media (max-width:700px){:root{--cols:4;--margin:1.25rem;--header-h:72px;/* client feedback:slightly smaller type on phones. Form inputs stay 16px (1rem) — below that iOS zooms on focus. */ --t-display:clamp(2.25rem, 8.5vw, 3.4rem);--t-h2:1.75rem;--t-h3:1.15rem;--t-lead:1rem;--t-body:1rem}}*, *::before, *::after{box-sizing:border-box}html, body, h1, h2, h3, p, figure, blockquote, dl, dd, ul, ol{margin:0}ul, ol{padding:0;list-style:none}img, picture, video{display:block;max-width:100%;height:auto}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}input, textarea, select{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--teal);outline-offset:3px}html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px);-webkit-text-size-adjust:100%;/* native scrollbar fully hidden — the fixed gradient pill (.scroll-indicator, JS-driven) replaces it (wine-collectors pattern) */ scrollbar-width:none}html.has-lenis{scroll-behavior:auto}::-webkit-scrollbar{display:none;width:0}.scroll-indicator{position:fixed;top:0;right:5px;width:6px;height:44px;border-radius:999px;background:linear-gradient(180deg, var(--steel), var(--teal), var(--green));z-index:1500;pointer-events:none;opacity:0;transition:opacity 0.2s ease;will-change:transform, opacity}.scroll-indicator.is-visible{opacity:1}body{background:var(--off);color:var(--navy);/* macOS/iOS render light-on-dark text noticeably heavier without this — most of the site is white Geologica on navy (house style, same as wc) */ -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:"Geologica", system-ui, sans-serif;font-weight:400;font-size:var(--t-body);line-height:1.65;overflow-x:hidden;min-height:100svh}main{display:block;overflow-x:clip}h1, h2, h3{font-family:"Geologica", system-ui, sans-serif;font-weight:700;line-height:1.12;letter-spacing:-0.01em}/* Pre-paint hide (class set by the inline head script when motion will play). GSAP's inline styles override these the moment app.js takes over;app.js removes the class when PLAY is false, and the head script's 3s fallback removes it if app.js never executes. */
.pre-anim .hero__title,
.pre-anim .hero__subline,
.pre-anim .hero__lead,
.pre-anim .hero__cta,
.pre-anim .hero__price,
.pre-anim .paldies__content h1,
.pre-anim .section h2[data-split-lines]{visibility:hidden;opacity:0}/* Loader:full-viewport navy curtain, visible from first paint (html class set by the inline head script), logo beat, then slides up. Quick mode (repeat visits in the session) skips the beat — it acts as the ENTER phase of a page transition instead. */
.uf-loader{position:fixed;inset:0;z-index:10001;background:var(--navy);display:none;align-items:center;justify-content:center;will-change:transform}html.uf-loading .uf-loader{display:flex}.uf-loader__logo{width:min(220px, 55vw);height:auto;opacity:0}/* Transition curtain:slides up from the bottom on internal-link clicks, covers, then the next page's loader (quick mode) reveals. */
.uf-curtain{position:fixed;inset:0;z-index:10001;background:var(--navy);transform:translateY(100%);display:none;pointer-events:none;will-change:transform}.grid{display:grid;grid-template-columns:repeat(var(--cols), 1fr);column-gap:var(--gutter);margin-inline:var(--margin);position:relative}.eyebrow{display:inline-block;font-weight:600;text-transform:uppercase;letter-spacing:0.12em;font-size:var(--t-small);color:var(--teal);margin-bottom:0.9em;grid-column:1/-1}.section--light .eyebrow{color:var(--steel)}.text-gradient{background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent}/* On navy sections the steel-blue gradient start sinks into the background (same issue the hero DRAMA had) — start from teal and end in lime instead */
.section--dark .text-gradient{background:linear-gradient(90deg, var(--teal) 0%, var(--lime) 100%);-webkit-background-clip:text;background-clip:text}.text-lime{color:var(--lime)}.gradient-band{height:6px;background:var(--gradient);width:100%}.skip-link{position:fixed;top:-100px;left:1rem;z-index:999;background:var(--navy);color:var(--white);padding:0.75em 1.25em;border-radius:999px;font-weight:600;transition:top 0.2s var(--ease-osmo)}.skip-link:focus-visible{top:1rem}.section{position:relative;padding-block:var(--section-pad-y)}.section--light{background:var(--off);color:var(--navy)}.section--dark{background:var(--navy);color:var(--white)}.section--dark .eyebrow{color:var(--teal)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5em;min-height:44px;padding:0.95em 1.9em;border-radius:999px;font-family:"Geologica", sans-serif;font-weight:600;font-size:var(--t-small);text-transform:uppercase;letter-spacing:0.12em;white-space:nowrap;position:relative;overflow:hidden;isolation:isolate;transition:transform 0.25s var(--ease-osmo), color 0.3s var(--ease-osmo)}.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--gradient);transform:translateX(-101%);transition:transform 0.4s var(--ease-osmo)}.btn:hover::before, .btn:focus-visible::before{transform:translateX(0)}.btn:active{transform:scale(0.98)}.btn:hover{transform:scale(1.02)}.btn--primary{background:transparent;color:var(--white);border:1.5px solid transparent;background-image:linear-gradient(var(--navy), var(--navy)), var(--gradient);background-origin:border-box;background-clip:padding-box, border-box}.btn--primary:hover, .btn--primary:focus-visible{color:var(--navy)}.section--light .btn--primary{background-image:linear-gradient(var(--navy), var(--navy)), var(--gradient)}.price-chip{display:inline-block;background:var(--lime);color:var(--navy-deep);font-weight:600;font-size:var(--t-small);letter-spacing:0.02em;padding:0.65em 1.2em;border-radius:999px;transform:rotate(-4deg);box-shadow:0 8px 24px rgba(0, 0, 0, 0.18)}.dev-grid{position:fixed;inset:0;z-index:9999;pointer-events:none;display:none}.dev-grid.is-active{display:block}.dev-grid__inner{height:100%;margin-inline:var(--margin)}.dev-grid__col{height:100%;background:rgba(14, 176, 157, 0.12);outline:1px dashed rgba(14, 176, 157, 0.35)}.flow-bars{position:absolute;left:0;right:0;display:flex;pointer-events:none;z-index:1}.flow-bar{width:5px;border-radius:999px;flex:0 0 auto}.flow-bars--photo{position:absolute;top:-16px;left:0;right:0;height:46px;display:flex;align-items:flex-start;justify-content:space-evenly;padding-inline:10%;z-index:3}.flow-bars--photo .flow-bar{transform-origin:top center}.flow-bars--cta{bottom:0;height:40%;align-items:flex-end;justify-content:space-between;padding-inline:var(--margin);z-index:1}.flow-bars--cta .flow-bar{transform-origin:bottom center}.section-head{row-gap:0.5rem}.section h2{grid-column:1/span 9;font-size:var(--t-h2)}.section--dark h2{color:var(--white)}.section--light h2{color:var(--navy)}@media (max-width:900px){.section h2{grid-column:1/-1}}img{max-width:100%}@media (max-width:400px){:root{--t-display:clamp(2rem, 8.5vw, 2.8rem)}}.card__icon .fi{font-size:1.35rem;line-height:1;display:flex;align-items:center;justify-content:center}/* kapec (gallery) and atrasanas are both light sections — their stacked section paddings read as one huge empty band, so both edges are tightened */
.kapec{padding-bottom:clamp(2rem, 4vw, 3rem)}.atrasanas{padding-top:clamp(2rem, 4vw, 3rem)}.atrasanas__grid{margin-top:clamp(2.5rem, 5vw, 4rem);row-gap:1.5rem;align-items:stretch}.atrasanas__info{grid-column:1/span 4;background:var(--navy);color:var(--white);border-radius:2px;padding:clamp(1.75rem, 3vw, 2.5rem);display:flex;flex-direction:column;gap:1rem}.atrasanas__address{font-weight:600;font-size:1.2rem}.atrasanas__note{font-weight:300;color:rgba(255, 255, 255, 0.78);line-height:1.65}.atrasanas__link{margin-top:auto;font-size:var(--t-small);font-weight:600;text-transform:uppercase;letter-spacing:0.12em;color:var(--lime)}.atrasanas__link:hover, .atrasanas__link:focus-visible{color:var(--teal)}.atrasanas__map{grid-column:5/-1;border-radius:2px;overflow:hidden;background:rgba(38, 42, 68, 0.08);/* Leaflet's internal panes/controls use z-index up to ~1000, which beats the fixed header (z-index 100). isolate + z-index 0 traps all of that inside this box's own stacking context. */ position:relative;z-index:0;isolation:isolate}.atrasanas__map iframe{display:block;width:100%;height:100%;min-height:clamp(360px, 48vh, 540px);border:0}@media (max-width:900px){.atrasanas__info{grid-column:1/-1}.atrasanas__map{grid-column:1/-1}}#atrasanas-map{width:100%;height:100%;min-height:clamp(360px, 48vh, 540px);background:#e9ebee}#atrasanas-map .leaflet-tile-pane{filter:saturate(0.55) contrast(0.98)}.map-pin{position:relative}.map-pin svg{display:block;filter:drop-shadow(0 6px 12px rgba(38, 42, 68, 0.35))}#atrasanas-map .leaflet-control-attribution{font-size:10px;background:rgba(255, 255, 255, 0.75)}.buj .grid + .grid{margin-top:clamp(2.5rem, 5vw, 4rem)}.accordion{grid-column:1/-1;border-top:1px solid rgba(38, 42, 68, 0.14)}@media (min-width:701px){.accordion{grid-column:3/span 8}}.accordion__item{border-bottom:1px solid rgba(38, 42, 68, 0.14)}.accordion__trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;text-align:left;padding-block:1.5rem;/* kill the UA button default (~6px inline) so the question aligns flush with the answer text below it */ padding-inline:0;font-size:1.05rem;font-weight:500}.accordion__icon{flex:0 0 auto;width:22px;height:22px;position:relative}.accordion__icon::before, .accordion__icon::after{content:"";position:absolute;background:var(--navy);border-radius:2px;top:50%;left:50%;transform:translate(-50%, -50%)}.accordion__icon::before{width:16px;height:2px}.accordion__icon::after{width:2px;height:16px;transition:transform 0.35s var(--ease-osmo)}.accordion__trigger[aria-expanded=true] .accordion__icon::after{transform:translate(-50%, -50%) rotate(90deg);opacity:0}.accordion__panel{overflow:hidden;height:0}.accordion__panel p{padding-bottom:1.5rem;font-weight:300;color:rgba(38, 42, 68, 0.75);max-width:60ch}.footer{background:var(--navy-deep);color:rgba(255, 255, 255, 0.85);padding-top:clamp(3rem, 6vw, 5rem)}.footer__grid{padding-bottom:clamp(2.5rem, 5vw, 4rem);row-gap:2rem}.footer__logo{grid-column:1/span 4}.footer__logo img{width:140px;height:auto}.footer__meta{grid-column:5/span 4;display:flex;flex-direction:column;gap:0.5rem;font-size:0.95rem}.footer__legal{grid-column:9/-1;display:flex;flex-direction:column;gap:0.5rem;font-size:0.95rem;color:rgba(255, 255, 255, 0.6)}.footer__meta a:hover, .footer__legal a:hover{color:var(--teal)}@media (max-width:700px){.footer__logo{grid-column:1/-1}.footer__meta{grid-column:1/span 2}.footer__legal{grid-column:3/-1}}.site-header{position:fixed;top:0;left:0;right:0;z-index:100;/* 96px = original 84px bar + 0.75rem breathing room top AND bottom, so the solid (scrolled) backdrop keeps symmetric space around logo/nav */ height:var(--header-h);padding-block:0.75rem;display:flex;align-items:center;background:transparent;transition:background-color 0.4s var(--ease-osmo), backdrop-filter 0.4s var(--ease-osmo), box-shadow 0.4s var(--ease-osmo)}.site-header--solid{background-color:rgba(38, 42, 68, 0.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(255, 255, 255, 0.06)}/* Menu open:fully opaque so the bar can't show the page through it, and — critically — NO backdrop-filter:a filtered ancestor becomes the containing block for fixed descendants, which re-anchored .mobile-nav to the 96px header bar and tore the open menu apart on scroll */
.site-header--menu-open{background-color:var(--navy);backdrop-filter:none;-webkit-backdrop-filter:none;/* snap to opaque instantly — the 0.4s bg fade let the page show through the bar while the menu was already sliding in */ transition:none}.site-header__grid{width:100%;align-items:center}.site-header__logo{grid-column:1/span 4;display:inline-flex;align-items:center}.site-header__logo img{width:min(150px, 100%);height:auto}@media (max-width:700px){.site-header__logo{grid-column:1/span 2}.site-header__logo img{width:120px}}/* Centered independently of the logo/right-group widths so the pill sits on the true page axis */
.site-header__nav{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}.site-header__right{grid-column:8/-1;justify-self:end;display:flex;align-items:center;gap:1.25rem}.progress-nav__wrapper{background-color:rgba(255, 255, 255, 0.1);border-radius:50em;padding:0.3rem}.progress-nav__list{border-radius:50em;justify-content:flex-start;align-items:center;display:flex;position:relative;overflow:hidden}.progress-nav__indicator{z-index:2;background-color:#fff;border-radius:50em;width:2.5rem;height:2.5rem;position:absolute;left:-2.5rem;transition:all 1.2s cubic-bezier(0.16, 1, 0.3, 1)}.progress-nav__btn{z-index:3;cursor:pointer;color:var(--white);justify-content:center;align-items:center;height:2.5rem;padding-left:1.1rem;padding-right:1.1rem;display:flex;position:relative;overflow:hidden;font-size:var(--t-small);font-weight:600;text-transform:uppercase;letter-spacing:0.08em;transition:color 0.45s var(--ease-osmo) 0.25s}.progress-nav__btn.is--active{color:var(--navy)}.progress-nav__btn.is--before{z-index:1;width:2.5rem;height:2.5rem;padding-left:0;padding-right:0;position:absolute;/* +3px:with right:100% exactly, the parked indicator's edge lands on the pill's 0% boundary and subpixel rounding leaves a 1px sliver visible */ right:calc(100% + 3px)}.progress-nav__btn.is--after{z-index:1;width:2.5rem;height:2.5rem;padding-left:0;padding-right:0;position:absolute;left:100%}.progress-nav__btn-text{white-space:nowrap;justify-content:center;align-items:center;height:100%;display:flex;transition:transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);transform:translateY(0%) rotate(0.001deg)}.progress-nav__btn-text.is--duplicate{position:absolute;top:100%}.progress-nav__btn:hover .progress-nav__btn-text{transform:translateY(-100%) rotate(0.001deg)}.site-header__lang{color:var(--white);font-size:var(--t-small);font-weight:500;letter-spacing:0.1em;opacity:0.7}.site-header__cta{padding:0.75em 1.5em;white-space:nowrap}.site-header__burger{display:none;/* -2/-1 never collides with the logo's tracks (1/span 4 on desktop cols, 1/span 2 on mobile cols) — 4/-1 overlapped track 4 in the 701-900px band and got auto-placed into a phantom second grid row, inflating the header grid to ~99px and overflowing the bar */ grid-column:-2/-1;justify-self:end;width:40px;height:40px;flex-direction:column;align-items:flex-end;justify-content:center;gap:6px}.site-header__burger span{display:block;width:28px;height:2px;background:var(--white);border-radius:2px;transition:transform 0.3s var(--ease-osmo), opacity 0.3s var(--ease-osmo), width 0.3s var(--ease-osmo)}.site-header__burger[aria-expanded=true] span:nth-child(1){transform:translateY(8px) rotate(45deg)}.site-header__burger[aria-expanded=true] span:nth-child(2){opacity:0}.site-header__burger[aria-expanded=true] span:nth-child(3){transform:translateY(-8px) rotate(-45deg);width:28px}/* 1200px, not 900:below this the centered pill + logo + right group can't coexist without collisions/clipping (the old layout already wrapped and clipped the CTA in the 900-1200 band) */
@media (max-width:1200px){.site-header__nav{display:none}.site-header__cta{display:none}/* lang placeholder shares the burger's cell (explicit same-cell placement is legal and avoids the auto-placement row-wrap trap), shifted left of the 40px burger by a 1rem gap — always the same distance from the icon */ .site-header__right{grid-column:-2/-1;grid-row:1;justify-self:end;margin-right:calc(40px + 1rem)}/* explicit row 1:sharing a cell with .site-header__right is intentional — without this the auto-placer dodges the "occupied" cell into row 2 */ .site-header__burger{display:flex;grid-row:1}}.mobile-nav{position:fixed;inset:0;top:var(--header-h);background:var(--navy);z-index:90;display:flex;flex-direction:column;justify-content:center;gap:2.5rem;padding:2rem var(--margin) 3rem;transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity 0.35s var(--ease-osmo), transform 0.35s var(--ease-osmo)}.mobile-nav.is-open{opacity:1;transform:translateY(0);pointer-events:auto}.mobile-nav ul{display:flex;flex-direction:column;gap:1.5rem}.mobile-nav ul a{color:var(--white);font-size:clamp(1.75rem, 8vw, 2.5rem);font-weight:600;text-transform:uppercase}.mobile-nav .btn{align-self:flex-start;font-size:var(--t-small);font-weight:600;max-width:100%}a.site-header__lang{transition:opacity 0.25s var(--ease-osmo)}a.site-header__lang:hover, a.site-header__lang:focus-visible{opacity:1}/* Non-landing pages (paldies, privacy…):the bar sits on a LIGHT page background, so it stays solid navy from the first paint. */
.site-header--page{background-color:var(--navy)}/* Logged-in users:the WP admin toolbar (32px desktop / 46px mobile) sits above the viewport top — push the fixed header chrome below it. Visitors never have body.admin-bar. */
body.admin-bar .site-header{top:var(--wp-admin--admin-bar--height, 32px)}body.admin-bar .mobile-nav{top:calc(var(--header-h) + var(--wp-admin--admin-bar--height, 46px))}.hero{position:relative;min-height:100svh;background:var(--navy);color:var(--white);overflow:hidden;display:flex;flex-direction:column;padding-top:calc(var(--header-h) + clamp(1rem, 5vw, 3rem));padding-bottom:clamp(2.5rem, 6vw, 4rem)}/* Full-bleed background image stack — one .is-active image visible at a time;the JS rotation (PLAY only) crossfades opacity + Ken Burns-zooms the active image. Under PLAY=false only the first image shows, static. */
.hero__bg{position:absolute;inset:0;z-index:0}.hero__bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1);will-change:transform, opacity}.hero__bg-img.is-active{opacity:1}/* Overlay:layered navy gradients so the text column reads over any of the 3 background photos — vertical wash (darker top/bottom for header + footer-of-hero legibility) + a left-side scrim behind the text column. */
.hero__overlay{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg, rgba(20, 23, 38, 0.7) 0%, rgba(20, 23, 38, 0) 16%), linear-gradient(90deg, rgba(30, 34, 54, 0.9) 0%, rgba(30, 34, 54, 0.64) 38%, rgba(30, 34, 54, 0.18) 66%, rgba(30, 34, 54, 0.1) 100%), linear-gradient(180deg, rgba(38, 42, 68, 0.72) 0%, rgba(38, 42, 68, 0.38) 45%, rgba(38, 42, 68, 0.82) 100%)}@media (max-width:900px){.hero__overlay{background:linear-gradient(180deg, rgba(20, 23, 38, 0.6) 0%, rgba(20, 23, 38, 0) 18%), linear-gradient(180deg, rgba(38, 42, 68, 0.84) 0%, rgba(38, 42, 68, 0.56) 45%, rgba(38, 42, 68, 0.88) 100%)}}.hero__grid{position:relative;z-index:4;flex:1 0 auto;/* center the text block vertically in the hero (the price chip is position:absolute, so it doesn't participate in this centering) */ align-content:center;/* single consistent rhythm between all left-column elements — no per-element margin-top overrides */ row-gap:1.25rem}.hero__title,
.hero__subline,
.hero__lead,
.hero__eyebrow{text-shadow:0 2px 16px rgba(10, 12, 22, 0.35)}.hero__eyebrow{grid-column:1/span 6;color:var(--teal);/* rhythm comes from the grid row-gap alone — kill the global eyebrow offset so every hero left-column gap is identical */ margin-bottom:0}.hero__title{grid-column:2/span 6;font-size:var(--t-display);text-transform:uppercase;font-weight:700;color:var(--white);overflow-wrap:break-word}/* Sub-headline:reads as a lockup with the display title above it (the old small italic read as body copy) — pulled tight to the H1, sized between display and lead */
.hero__subline{grid-column:2/span 6;font-weight:500;font-size:clamp(1.25rem, 2.1vw, 1.9rem);line-height:1.3;letter-spacing:-0.01em;color:var(--white);margin-top:-0.25rem}.hero__lead{grid-column:2/span 6;font-size:var(--t-lead);font-weight:300;color:rgba(255, 255, 255, 0.88);margin-top:0.75rem}.hero__cta{grid-column:2/span 6;display:flex;flex-direction:column;gap:0.9rem;align-items:flex-start;/* clear pause before the CTA — with only the grid row-gap it crowded the lead paragraph */ margin-top:1.25rem}.hero__price{position:absolute;z-index:4;right:var(--margin);bottom:clamp(2.5rem, 6vw, 4rem)}@media (max-width:900px){.hero__title{grid-column:1/-1}.hero__subline, .hero__lead, .hero__cta{grid-column:1/-1}}.kapec > .gradient-band{position:absolute;top:0;left:0;right:0}.kapec__cards{margin-top:clamp(2.5rem, 5vw, 4rem);row-gap:1rem}.card{background:var(--white);color:var(--navy);border-radius:2px;padding:2rem 1.75rem;grid-column:span 3}.card__icon{width:52px;height:52px;border-radius:50%;background:rgba(163, 203, 108, 0.28);display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--green);margin-bottom:1.25rem}.card h3{font-size:1.15rem;font-weight:600;margin-bottom:0.6rem}.card p{font-size:0.95rem;color:rgba(38, 42, 68, 0.75);font-weight:300}@media (max-width:1024px) and (min-width:701px){.card{grid-column:span 6}}@media (max-width:700px){.card{grid-column:1/-1}}.location-strip{margin-top:clamp(3rem, 6vw, 5rem);row-gap:0}.location-strip__gallery{grid-column:1/-1;clip-path:inset(0% 0% 0% 0%)}.location-swiper{position:relative;width:100%;height:clamp(560px, 76vh, 900px);border-radius:2px;overflow:hidden}@media (max-width:700px){.location-swiper{height:auto;aspect-ratio:1/1}}.location-swiper .swiper-slide{height:100%;display:flex;align-items:center}.location-swiper .swiper-slide img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.location-swiper__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:rgba(38, 42, 68, 0.85);background-image:none;color:var(--white);transition:background-image 0.3s var(--ease-osmo), background-color 0.3s var(--ease-osmo), opacity 0.3s var(--ease-osmo), transform 0.25s var(--ease-osmo)}.location-swiper__arrow:hover,
.location-swiper__arrow:focus-visible{background-image:var(--gradient);transform:translateY(-50%) scale(1.06)}.location-swiper__arrow--prev{left:clamp(0.75rem, 2vw, 1.5rem)}.location-swiper__arrow--next{right:clamp(0.75rem, 2vw, 1.5rem)}.location-swiper__arrow svg{width:20px;height:20px;display:block}/* Desktop/trackpad:arrows fade in only on hover or keyboard focus so the gallery reads clean by default. Touch devices:always visible (no hover state to reveal them). */
@media (hover:hover){.location-swiper__arrow{opacity:0}.location-swiper:hover .location-swiper__arrow, .location-swiper__arrow:focus-visible{opacity:1}}@media (hover:none){.location-swiper__arrow{opacity:1}}.location-swiper .swiper-pagination{bottom:16px}.location-swiper .swiper-pagination-bullet{width:8px;height:8px;background:rgba(255, 255, 255, 0.55);opacity:1;transition:background-color 0.25s var(--ease-osmo)}.location-swiper .swiper-pagination-bullet-active{background:var(--lime)}/* The caption card sits below the gallery band rather than overlapping it:a bottom-center pagination + a bottom-corner overlap card can't coexist without one blocking the other, so this keeps both fully usable. */ .kontakti{/* x-clip only:overflow:hidden also clipped the datepicker/phone popovers at the section edge;vertical overflow must stay visible for them. */ overflow-x:clip;overflow-y:visible;padding-bottom:calc(var(--section-pad-y) + 3rem)}.kontakti__grid{row-gap:1.75rem;/* row 1 hugs the headline so the lead sits right under it — without this the form (spanning both rows) stretched row 1 and pushed the lead far down the column */ grid-template-rows:auto 1fr}/* headline + lead share the LEFT column;the form card spans both of their rows on the right */
.kontakti__grid h2{grid-column:1/span 6;grid-row:1}.kontakti__lead{grid-column:1/span 6;grid-row:2;align-self:start;font-size:var(--t-lead);font-weight:300;color:rgba(255, 255, 255, 0.82)}@media (max-width:900px){.kontakti__grid{grid-template-rows:none;row-gap:2.5rem}.kontakti__grid h2, .kontakti__lead{grid-column:1/-1}}.form-card{grid-column:8/-1;grid-row:1/span 2;background:var(--navy-deep);border-radius:2px;padding:clamp(1.75rem, 3vw, 2.75rem);position:relative;z-index:3}@media (max-width:900px){.form-card{grid-column:1/-1;grid-row:auto}}.field{position:relative;margin-bottom:1.35rem}.field input{width:100%;background:transparent;border:1px solid rgba(255, 255, 255, 0.28);border-radius:2px;padding:1.35em 1em 0.55em;color:var(--white);font-size:1rem;transition:border-color 0.3s var(--ease-osmo)}.field input:focus{border-color:var(--teal)}.field label{position:absolute;left:1em;top:1em;font-size:1rem;color:rgba(255, 255, 255, 0.55);pointer-events:none;transform-origin:left top;transition:transform 0.2s var(--ease-osmo), color 0.2s var(--ease-osmo), top 0.2s var(--ease-osmo)}.field input:focus + label,
.field input:not(:placeholder-shown) + label{top:0.55em;transform:scale(0.72);color:var(--teal)}.field--checkbox{display:flex;/* wrap is needed so the error message (flex-basis:100%) gets its own row below — the label itself never wraps because its flex-basis is 0 */ flex-wrap:wrap;align-items:center;gap:0.75rem;margin-top:1.5rem}.field--checkbox input{width:18px;height:18px;flex:0 0 auto;accent-color:var(--teal)}.field--checkbox label,
.field--checkbox input:focus + label,
.field--checkbox input:not(:placeholder-shown) + label{/* full reset of the floating-label pattern — it must never apply here:`:not(:placeholder-shown)` always matches a checkbox, which left this label permanently "floated":scale(0.72) + top offset (tiny, misaligned text) and pointer-events:none (privātuma politika link unclickable) */ position:static;top:auto;left:auto;transform:none;pointer-events:auto;font-size:0.9375rem;font-weight:300;color:rgba(255, 255, 255, 0.8);line-height:1.45;/* basis 0 (not auto):with the row set to wrap for the error message, an auto basis let the whole label wrap below the checkbox on mobile */ flex:1 1 0;min-width:0}.field--checkbox a{text-decoration:underline;color:var(--teal)}.req{color:#FF7A7A;margin-left:0.2em}.field.is-invalid input{border-color:#FF6B6B;border-width:1.5px}.field--checkbox.is-invalid input[type=checkbox]{outline:2px solid #FF6B6B;outline-offset:2px}.field__error{display:none;color:#FF6B6B;font-size:0.8125rem;font-weight:400;margin-top:0.4rem}.field__error:not(:empty){display:block}.field--checkbox .field__error{flex-basis:100%;margin-left:calc(18px + 0.75rem);margin-top:-0.25rem}.field--phone{position:relative}.phone-row{display:flex;gap:0.6rem}.phone-code{display:flex;align-items:center;gap:0.4rem;flex:0 0 auto;border:1px solid rgba(255, 255, 255, 0.28);border-radius:2px;padding:0 0.75em;color:var(--white);transition:border-color 0.3s var(--ease-osmo)}.phone-code:hover, .phone-code:focus-visible{border-color:var(--teal)}.phone-code__flag{font-size:1.15rem;line-height:1}.phone-code__dial{font-size:0.95rem}.phone-code__caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid rgba(255, 255, 255, 0.6);margin-left:0.2rem}.phone-number{position:relative;flex:1 1 auto}.datepicker, .phone-dropdown{position:absolute;top:calc(100% + 8px);left:0;right:auto;width:min(340px, 100%);z-index:20;background:var(--navy-deep);border:1px solid rgba(255, 255, 255, 0.18);border-radius:2px;box-shadow:0 20px 40px rgba(0, 0, 0, 0.35);padding:1rem}.datepicker.is-flipped, .phone-dropdown.is-flipped{top:auto;bottom:calc(100% + 8px)}.datepicker[hidden], .phone-dropdown[hidden]{display:none}.field--date input{cursor:pointer}.datepicker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.75rem}.datepicker__month{font-weight:600;font-size:0.9rem;text-transform:capitalize}.datepicker__nav{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255, 255, 255, 0.2);border-radius:2px;color:var(--white);font-size:1.1rem;transition:border-color 0.3s var(--ease-osmo), color 0.3s var(--ease-osmo)}.datepicker__nav:hover, .datepicker__nav:focus-visible{border-color:var(--teal);color:var(--teal)}.datepicker__weekdays{display:grid;grid-template-columns:repeat(7, 1fr);gap:2px;margin-bottom:0.35rem}.datepicker__weekdays span{text-align:center;font-size:0.7rem;font-weight:600;color:rgba(255, 255, 255, 0.5)}.datepicker__grid{display:grid;grid-template-columns:repeat(7, 1fr);gap:2px}.datepicker__day{height:36px;display:flex;align-items:center;justify-content:center;border-radius:2px;font-size:0.82rem;color:var(--white);transition:background-color 0.2s var(--ease-osmo)}.datepicker__day:hover:not(.is-disabled), .datepicker__day:focus-visible{background:rgba(255, 255, 255, 0.12)}.datepicker__day.is-outside{color:rgba(255, 255, 255, 0.25)}.datepicker__day.is-disabled{color:rgba(255, 255, 255, 0.16);cursor:not-allowed}.datepicker__day.is-today{box-shadow:inset 0 0 0 1px var(--teal)}.datepicker__day.is-selected{background:var(--gradient);color:var(--white);font-weight:600}.phone-dropdown__search-wrap{margin-bottom:0.6rem}.phone-dropdown__search{width:100%;background:transparent;border:1px solid rgba(255, 255, 255, 0.28);border-radius:2px;padding:0.6em 0.8em;color:var(--white);font-size:0.9rem}.phone-dropdown__search:focus{border-color:var(--teal)}.phone-dropdown__list{max-height:240px;overflow-y:auto;list-style:none;padding:0;margin:0.5rem 0 0}.phone-dropdown__option{width:100%;display:flex;align-items:center;gap:0.6rem;padding:0.55em 0.5em;border-radius:2px;font-size:0.85rem;color:var(--white);text-align:left}.phone-dropdown__option:hover, .phone-dropdown__option:focus-visible{background:rgba(255, 255, 255, 0.08)}.phone-dropdown__flag{font-size:1.1rem;line-height:1;flex:0 0 auto}.phone-dropdown__name{flex:1 1 auto}.phone-dropdown__dial{color:rgba(255, 255, 255, 0.55);flex:0 0 auto}@media (max-width:700px){.datepicker, .phone-dropdown{padding:0.85rem}}.form__submit{width:100%;margin-top:0.5rem;background-image:linear-gradient(var(--navy-deep), var(--navy-deep)), var(--gradient)}.form__submit:hover{color:var(--navy)}.field--website{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}.form__submit.is-sending{opacity:0.6;pointer-events:none}.marquee{margin-top:clamp(3rem, 6vw, 5rem);overflow:hidden;border-top:1px solid rgba(255, 255, 255, 0.14);border-bottom:1px solid rgba(255, 255, 255, 0.14);padding-block:1.4rem;display:flex;width:100%}.marquee__track{display:flex;align-items:center;flex:0 0 auto;white-space:nowrap;/* no standing will-change:GSAP promotes the tracks while animating anyway, and a permanent layer hint here caused stale-layer seams at the marquee's bottom edge (duplicated gradient-band strip) in Chrome. */}/* Second (duplicate, aria-hidden) track only needed for the animated loop;keep it out of the static/no-motion render so text doesn't appear twice. */
.marquee [data-marquee-track] ~ [data-marquee-track]{display:none}.marquee.is-looping [data-marquee-track] ~ [data-marquee-track]{display:flex}.marquee__item{font-weight:500;text-transform:uppercase;letter-spacing:0.08em;font-size:clamp(0.9rem, 1.5vw, 1.15rem);padding-inline:0.75rem}.marquee__dot{color:var(--lime);font-size:0.6rem;vertical-align:middle;padding-inline:0.25rem}/* Hero variant:standalone navy strip directly under the hero (base marquee inherits its dark backdrop from the studijas section;this one doesn't). No hairline borders — the kapec section's gradient band directly below is the single separator at this junction. */
.marquee--hero{margin-top:0;background:var(--navy);color:var(--white);border-top:none;border-bottom:none}/* 404 — branded navy page in the paldies style:flow bars along the bottom, oversized gradient-accented code, single CTA home. */
.nf{min-height:100svh;display:flex;align-items:center;overflow:hidden}.nf__grid{width:100%}.nf__content{grid-column:2/span 10;position:relative;z-index:3;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.25rem}.nf__code{font-weight:700;font-size:clamp(6rem, 18vw, 13rem);line-height:1;letter-spacing:-0.02em;color:var(--white)}.nf__heading{font-size:var(--t-h2)}.nf__description{font-size:var(--t-lead);font-weight:300;color:rgba(255, 255, 255, 0.85);max-width:52ch}.nf__content .btn{margin-top:0.5rem}@media (max-width:700px){.nf__content{grid-column:1/-1}}.paldies{min-height:100svh;display:flex;align-items:center;overflow:hidden}.paldies__grid{width:100%}.paldies__content{grid-column:2/span 10;position:relative;z-index:3;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.5rem}.paldies__content h1{font-size:var(--t-h2)}.paldies__lead{font-size:var(--t-lead);font-weight:300;color:rgba(255, 255, 255, 0.85);max-width:52ch}@media (max-width:700px){.paldies__content{grid-column:1/-1}}/* Legal / rich-text article (privacy policy) — light page, navy text. Ported from the prototype's privatuma-politika.html page-local styles. Top padding clears the fixed site header. */
.legal-article{background:var(--off);color:var(--navy);padding:calc(var(--header-h) + clamp(2rem, 5vw, 4rem)) 0 clamp(3rem, 6vw, 5rem)}.legal-article__body{grid-column:3/span 8}@media (max-width:1024px){.legal-article__body{grid-column:1/-1}}.legal-article h1{font-size:clamp(2rem, 4vw, 3.25rem);margin-bottom:0.5rem}.legal-article h2{font-size:1.35rem;margin:2.25rem 0 0.75rem}.legal-article p,
.legal-article li{font-weight:300;line-height:1.7;color:rgba(38, 42, 68, 0.85)}.legal-article p{margin-bottom:1rem}.legal-article ul,
.legal-article ol{list-style:disc;padding-left:1.25rem;margin:0.5rem 0 1rem}.legal-article ol{list-style:decimal}.legal-article li{margin-bottom:0.35rem}.legal-article a{color:var(--steel);text-decoration:underline}.legal-article em{color:rgba(38, 42, 68, 0.6)}.legal-article .wp-block-table{margin:1.5rem 0;overflow-x:auto}.legal-article table{width:100%;min-width:640px;border-collapse:collapse;font-size:0.9rem;line-height:1.5}.legal-article th,
.legal-article td{border:1px solid rgba(38, 42, 68, 0.18);padding:0.65rem 0.8rem;vertical-align:top;text-align:left}.legal-article th{background:var(--navy);color:var(--white);font-weight:600}.legal-article tr:nth-child(even) td{background:rgba(38, 42, 68, 0.04)}.studijas__split{margin-top:clamp(2.5rem, 5vw, 4rem);row-gap:2.5rem;align-items:start}.studijas__list{grid-column:1/-1}.studijas__photos{grid-column:1/-1}@media (min-width:901px){.studijas__list{grid-column:1/span 5;position:sticky;top:calc(var(--header-h) + 2rem)}.studijas__photos{grid-column:6/-1}}.amenity-list__item{padding-block:1.5rem;border-bottom:1px solid rgba(255, 255, 255, 0.12);display:flex;gap:1.25rem;align-items:flex-start}.amenity-list__item:first-child{padding-top:0}.amenity-list__index{color:var(--lime);font-weight:600;font-size:var(--t-small);letter-spacing:0.05em;padding-top:0.2em;flex:0 0 auto}.amenity-list__item h3{font-size:1.15rem;font-weight:600;margin-bottom:0.4rem}.amenity-list__item p{font-size:0.95rem;font-weight:300;color:rgba(255, 255, 255, 0.72)}.photo-stack{display:flex;flex-direction:column;gap:1rem}.photo-stack__row{display:flex;gap:1rem}.photo-stack__row .photo-stack__item{flex:1 1 0}.photo-stack__item{position:relative;border-radius:2px;overflow:hidden;aspect-ratio:4/3;clip-path:inset(0% 0% 0% 0%)}.photo-stack__item--large{aspect-ratio:16/10}.photo-stack__item img{width:100%;height:100%;object-fit:cover}.photo-stack__item{cursor:zoom-in}.lightbox{position:fixed;inset:0;z-index:10000;background:rgba(20, 23, 38, 0.94);display:flex;align-items:center;justify-content:center;padding:clamp(1rem, 4vw, 3rem);opacity:0;pointer-events:none;transition:opacity 0.3s var(--ease-osmo)}.lightbox.is-open{opacity:1;pointer-events:auto}.lightbox img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:2px;box-shadow:0 24px 80px rgba(0, 0, 0, 0.5)}.lightbox__close{position:absolute;top:max(1rem, env(safe-area-inset-top));right:1rem;z-index:2;width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--white);font-size:1.75rem;line-height:1;background:rgba(255, 255, 255, 0.08);border-radius:999px}.lightbox__close:hover{background:rgba(255, 255, 255, 0.18)}/* ============================================================================ Uniflow — theme style.scss (compiled LAST, after globals + all components). Component-wrapper base, barba transition chrome, and the late overrides that must win source-order ties against component rules. ========================================================================== */
/* ---- Component base -------------------------------------------------------- Every builder section renders as <section class="component component-X">. The header/footer components carry fixed/self-backgrounded elements. */
.component{position:relative}.component-header{position:static}.component:empty{display:none}main[data-barba=container]{background:var(--off)}/* ---- Barba transition curtain (parts/transition.php) ---------------------- Same navy wipe as the prototype's masked reloads, driven by barba.js. Always display:block (unlike the prototype's click-created curtain) — it rests off-screen at translateY(100%) and barba tweens yPercent. */
.uf-curtain--barba{display:block;z-index:10000;/* rest position is set by barba.js via gsap yPercent:100 (pure percentages track viewport resizes;the base class's CSS translateY(100%) would get baked into a stale pixel offset on GSAP's first parse) */ transform:none}/* When Lenis is active, disable native CSS smooth-scroll so the browser's smooth behaviour doesn't fight Lenis's per-frame scroll (jitter). */
html.lenis,
html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto}.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}.lenis.lenis-stopped{overflow:hidden}/* ---------- Mobile type reduction (client feedback 2026-08) ---------- Lives in the last-compiled file so it wins the source-order tie against the base component rules. Inputs stay 1rem (16px) — smaller makes iOS Safari zoom in on focus. */
@media (max-width:700px){.hero__subline{font-size:1.15rem}.card h3, .amenity-list__item h3{font-size:1.05rem}.card p, .amenity-list__item p{font-size:0.9rem}.accordion__trigger{font-size:0.95rem}.kontakti__lead{font-size:1rem}}