@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}/* ============================================================================ BETTRWEB — theme globals (design tokens, grid, base styles, primitives). Single source of truth:design-system.md (repo root). Compiled by bettrlite:reset → plugin style → THIS (twice:compiled + raw for mixins/@extend) → components → theme style.scss. ========================================================================== */ /* LEGACY COMPAT:hero / not_found / post_content still reference these two. Remove together with those components' rebuild. */
/* ---- Self-hosted fonts:PP Neue Montreal (design-system §2.1) -------------- The design uses exactly two styles:Medium 500 (~everything) and Book 400 (footer contact values). Book registers at 400 (the slot the design references);Regular is parked at 450 so the two 400-embedded files never collide. */
@font-face{font-family:"PP Neue Montreal";font-style:normal;font-weight:100;font-display:swap;src:url("/wp-content/themes/dev/fonts/PPNeueMontreal-Thin.woff2") format("woff2")}@font-face{font-family:"PP Neue Montreal";font-style:italic;font-weight:100;font-display:swap;src:url("/wp-content/themes/dev/fonts/PPNeueMontreal-ThinItalic.woff2") format("woff2")}@font-face{font-family:"PP Neue Montreal";font-style:normal;font-weight:300;font-display:swap;src:url("/wp-content/themes/dev/fonts/PPNeueMontreal-Light.woff2") format("woff2")}@font-face{font-family:"PP Neue Montreal";font-style:normal;font-weight:400;font-display:swap;src:url("/wp-content/themes/dev/fonts/PPNeueMontreal-Book.woff2") format("woff2")}@font-face{font-family:"PP Neue Montreal";font-style:normal;font-weight:450;font-display:swap;src:url("/wp-content/themes/dev/fonts/PPNeueMontreal-Regular.woff2") format("woff2")}@font-face{font-family:"PP Neue Montreal";font-style:italic;font-weight:450;font-display:swap;src:url("/wp-content/themes/dev/fonts/PPNeueMontreal-Italic.woff2") format("woff2")}@font-face{font-family:"PP Neue Montreal";font-style:normal;font-weight:500;font-display:swap;src:url("/wp-content/themes/dev/fonts/PPNeueMontreal-Medium.woff2") format("woff2")}@font-face{font-family:"PP Neue Montreal";font-style:normal;font-weight:700;font-display:swap;src:url("/wp-content/themes/dev/fonts/PPNeueMontreal-Bold.woff2") format("woff2")}@font-face{font-family:"PP Neue Montreal";font-style:italic;font-weight:700;font-display:swap;src:url("/wp-content/themes/dev/fonts/PPNeueMontreal-BoldItalic.woff2") format("woff2")}:root{--width:90rem;--padding:2rem;--color-black:#141414;--color-white:#ffffff;--color-grey:#515151;--color-orange:#ff3b14;/* LEGACY COMPAT remaps (hero / not_found / post_content still reference the old Wine Collectors names;remapped onto the BETTRWEB palette so nothing renders off-brand while those components await their rebuild). */ --green:var(--color-black);--verde:var(--color-white);--gold:var(--color-orange);--red:var(--color-orange);--mint:var(--color-white);--font-h:"PP Neue Montreal", system-ui, sans-serif;--font-b:"PP Neue Montreal", system-ui, sans-serif;--grid-columns:12;--grid-gutter:1rem;--grid-margin:2rem;--cols:var(--grid-columns);--gutter:var(--grid-gutter);--margin:var(--grid-margin);--header-h:90px;--text-h1:clamp(40px, 2.1vw + 32px, 80px);--text-h2:clamp(30px, 0.94vw + 30px, 48px);--text-h3:clamp(20px, 0.2vw + 20px, 24px);--text-lg:clamp(18px, 0.1vw + 18px, 20px);--text-nav:18px;--text-body:clamp(16px, 0.1vw + 16px, 18px);--text-sm:16px;--text-xs:14px;--track-1:-0.01em;--track-2:-0.02em;--space-1:1rem;--space-2:2rem;--space-3:3rem;--space-4:4rem;--space-6:6rem;--section-pad:var(--space-6);--ease-osmo:cubic-bezier(0.625, 0.05, 0, 1);--t-display:var(--text-h1);--t-h2:var(--text-h2);--t-h3:var(--text-h3);--t-lead:var(--text-body);--t-body:var(--text-body);--t-small:var(--text-xs)}@media (min-width:1440px){:root{--grid-margin:3rem}}@media (max-width:767px){:root{--grid-columns:4;--padding:1.25rem}}html{font-size:16px;scroll-behavior:auto;/* clip (not hidden):hidden creates a scroll container that breaks position:sticky descendants;clip doesn't. */ overflow-x:hidden;overflow-x:clip}body{font-family:var(--font-b);font-weight:500;font-size:var(--text-body);line-height:1.5;letter-spacing:var(--track-1);color:var(--color-white);background:var(--color-black);overflow-x:hidden;overflow-x:clip;position:relative;width:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}main[data-barba=container]{position:relative;z-index:1}/* Headings — sentence case (no auto-uppercase;.u-caps is the only caps utility, reserved for card meta / legal lines). All Medium 500. */
h1, h2, h3, h4, h5, h6{font-family:var(--font-h);font-weight:500;font-style:normal;margin:0}h1{font-size:var(--text-h1);line-height:1;letter-spacing:var(--track-2)}h2{font-size:var(--text-h2);line-height:1.2;letter-spacing:var(--track-1)}h3{font-size:var(--text-h3);line-height:1.2;letter-spacing:var(--track-1)}p{margin:0}p + p{margin-top:9px}a{color:inherit}em, i, .italic{font-style:italic}::selection{background:var(--color-orange);color:var(--color-white)}.t-h1, .t-display{font-size:var(--text-h1);font-weight:500;line-height:1;letter-spacing:var(--track-2)}.t-h2{font-size:var(--text-h2);font-weight:500;line-height:1.2;letter-spacing:var(--track-1)}.t-h3{font-size:var(--text-h3);font-weight:500;line-height:1.2;letter-spacing:var(--track-1)}.t-lg, .t-lead{font-size:var(--text-lg);font-weight:500;line-height:1.2;letter-spacing:var(--track-1)}.t-body{font-size:var(--text-body);font-weight:500;line-height:1.5;letter-spacing:var(--track-1)}.t-sm{font-size:var(--text-sm);font-weight:500;line-height:1.5;letter-spacing:var(--track-1)}.t-xs, .t-small, .t-meta{font-size:var(--text-xs);font-weight:500;line-height:1;letter-spacing:var(--track-1)}.u-caps{text-transform:uppercase}/* ---- Grid (design-system §3 — non-negotiable) -------------------------------- 12 columns (4 on mobile), 1rem gutters, fluid side margins. Components place content with grid-column — no arbitrary flexbox positioning. */
.grid{display:grid;grid-template-columns:repeat(var(--grid-columns), minmax(0, 1fr));column-gap:var(--grid-gutter);padding-inline:var(--grid-margin);position:relative}.grid-overlay{position:fixed;inset:0;z-index:9998;pointer-events:none;display:none;grid-template-columns:repeat(var(--grid-columns), minmax(0, 1fr));column-gap:var(--grid-gutter);padding-inline:var(--grid-margin)}.grid-overlay span{background:rgba(255, 59, 20, 0.06);outline:1px solid rgba(255, 59, 20, 0.18);height:100%}body.show-grid .grid-overlay{display:grid}/* ---- Pill button (design-system §5.1, Figma 129:13403) ----------------------- Reusable:.btn-pill anywhere (header CTA, section CTAs). Dark-surface default (white);.btn-pill--dark derived for white surfaces (no on-white button exists in Figma — flagged for design review). Hover:white → orange (border+text+arrow via currentColor), gap 4→8px. */
.btn-pill,
.wc-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:6px 11px 6px 15px;border:1px solid currentColor;border-radius:100px;background:transparent;color:var(--color-white);font-family:var(--font-b);font-weight:500;font-size:var(--text-sm);line-height:1.5;letter-spacing:var(--track-2);white-space:nowrap;text-decoration:none;cursor:pointer;transition:color 0.3s var(--ease-osmo), gap 0.3s var(--ease-osmo)}@media (hover:hover) and (pointer:fine){.btn-pill:hover, .wc-btn:hover{color:var(--color-orange);gap:8px}}.btn-pill--dark{color:var(--color-black)}/* 24px icon box;the real Figma arrow vector (12.36×19.14 up-arrow) rotated 90° reads as the right-pointing 24px arrow. fill/stroke = currentColor so the hover recolor needs no second file. */
.btn-pill__icon{width:24px;height:24px;flex:none;display:flex;align-items:center;justify-content:center}.btn-pill__icon svg{display:block;width:12.4px;height:19.2px;transform:rotate(90deg)}/* ---- Inline text link (design-system §5.3) ------------------------------------ "Uzzināt vairāk" / "Apskatīt visus" pattern:white, no underline;hover = orange + underline. 20px inside list rows (.link--lg), 18px elsewhere. */
.link{font-weight:500;font-size:var(--text-nav);line-height:1.5;letter-spacing:var(--track-1);color:inherit;text-decoration:none;transition:color 0.25s var(--ease-osmo)}.link--lg{font-size:var(--text-lg);line-height:1.2}@media (hover:hover) and (pointer:fine){.link:hover{color:var(--color-orange);text-decoration:underline;text-underline-position:from-font}}/* Section-top underlined link (Figma "Apskatīt visus" / "Atsauksmes" / "Vairāk par mums":18px, white, underlined by default;hover → orange). `a.link-u` is needed to out-rank the plugin's `.component a{text-decoration:none}` (equal specificity, later source order). */
a.link-u,
.link-u{font-weight:500;font-size:var(--text-nav);line-height:1.5;letter-spacing:var(--track-1);color:inherit;text-decoration:underline;text-underline-position:from-font;transition:color 0.25s var(--ease-osmo)}@media (hover:hover) and (pointer:fine){a.link-u:hover{color:var(--color-orange)}}.hairline{border:0;height:1px;background:var(--color-grey)}.rotating-badge{position:absolute;width:110px;height:110px;z-index:5}.rotating-badge__ring{width:100%;height:100%;will-change:transform}@media (max-width:699px){.rotating-badge{display:none}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}a:focus-visible,
button:focus-visible{outline:2px solid var(--color-orange);outline-offset:3px}.wc-anchor{position:absolute;top:0;left:0;width:1px;height:1px}/* ============================================================================ BETTRWEB — theme globals (design tokens, grid, base styles, primitives). Single source of truth:design-system.md (repo root). Compiled by bettrlite:reset → plugin style → THIS (twice:compiled + raw for mixins/@extend) → components → theme style.scss. ========================================================================== */ /* LEGACY COMPAT:hero / not_found / post_content still reference these two. Remove together with those components' rebuild. */
/* ---- Self-hosted fonts:PP Neue Montreal (design-system §2.1) -------------- The design uses exactly two styles:Medium 500 (~everything) and Book 400 (footer contact values). Book registers at 400 (the slot the design references);Regular is parked at 450 so the two 400-embedded files never collide. */
@font-face{font-family:"PP Neue Montreal";font-style:normal;font-weight:100;font-display:swap;src:url("/wp-content/themes/dev/fonts/PPNeueMontreal-Thin.woff2") format("woff2")}@font-face{font-family:"PP Neue Montreal";font-style:italic;font-weight:100;font-display:swap;src:url("/wp-content/themes/dev/fonts/PPNeueMontreal-ThinItalic.woff2") format("woff2")}@font-face{font-family:"PP Neue Montreal";font-style:normal;font-weight:300;font-display:swap;src:url("/wp-content/themes/dev/fonts/PPNeueMontreal-Light.woff2") format("woff2")}@font-face{font-family:"PP Neue Montreal";font-style:normal;font-weight:400;font-display:swap;src:url("/wp-content/themes/dev/fonts/PPNeueMontreal-Book.woff2") format("woff2")}@font-face{font-family:"PP Neue Montreal";font-style:normal;font-weight:450;font-display:swap;src:url("/wp-content/themes/dev/fonts/PPNeueMontreal-Regular.woff2") format("woff2")}@font-face{font-family:"PP Neue Montreal";font-style:italic;font-weight:450;font-display:swap;src:url("/wp-content/themes/dev/fonts/PPNeueMontreal-Italic.woff2") format("woff2")}@font-face{font-family:"PP Neue Montreal";font-style:normal;font-weight:500;font-display:swap;src:url("/wp-content/themes/dev/fonts/PPNeueMontreal-Medium.woff2") format("woff2")}@font-face{font-family:"PP Neue Montreal";font-style:normal;font-weight:700;font-display:swap;src:url("/wp-content/themes/dev/fonts/PPNeueMontreal-Bold.woff2") format("woff2")}@font-face{font-family:"PP Neue Montreal";font-style:italic;font-weight:700;font-display:swap;src:url("/wp-content/themes/dev/fonts/PPNeueMontreal-BoldItalic.woff2") format("woff2")}:root{--width:90rem;--padding:2rem;--color-black:#141414;--color-white:#ffffff;--color-grey:#515151;--color-orange:#ff3b14;/* LEGACY COMPAT remaps (hero / not_found / post_content still reference the old Wine Collectors names;remapped onto the BETTRWEB palette so nothing renders off-brand while those components await their rebuild). */ --green:var(--color-black);--verde:var(--color-white);--gold:var(--color-orange);--red:var(--color-orange);--mint:var(--color-white);--font-h:"PP Neue Montreal", system-ui, sans-serif;--font-b:"PP Neue Montreal", system-ui, sans-serif;--grid-columns:12;--grid-gutter:1rem;--grid-margin:2rem;--cols:var(--grid-columns);--gutter:var(--grid-gutter);--margin:var(--grid-margin);--header-h:90px;--text-h1:clamp(40px, 2.1vw + 32px, 80px);--text-h2:clamp(30px, 0.94vw + 30px, 48px);--text-h3:clamp(20px, 0.2vw + 20px, 24px);--text-lg:clamp(18px, 0.1vw + 18px, 20px);--text-nav:18px;--text-body:clamp(16px, 0.1vw + 16px, 18px);--text-sm:16px;--text-xs:14px;--track-1:-0.01em;--track-2:-0.02em;--space-1:1rem;--space-2:2rem;--space-3:3rem;--space-4:4rem;--space-6:6rem;--section-pad:var(--space-6);--ease-osmo:cubic-bezier(0.625, 0.05, 0, 1);--t-display:var(--text-h1);--t-h2:var(--text-h2);--t-h3:var(--text-h3);--t-lead:var(--text-body);--t-body:var(--text-body);--t-small:var(--text-xs)}@media (min-width:1440px){:root{--grid-margin:3rem}}@media (max-width:767px){:root{--grid-columns:4;--padding:1.25rem}}html{font-size:16px;scroll-behavior:auto;/* clip (not hidden):hidden creates a scroll container that breaks position:sticky descendants;clip doesn't. */ overflow-x:hidden;overflow-x:clip}body{font-family:var(--font-b);font-weight:500;font-size:var(--text-body);line-height:1.5;letter-spacing:var(--track-1);color:var(--color-white);background:var(--color-black);overflow-x:hidden;overflow-x:clip;position:relative;width:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}main[data-barba=container]{position:relative;z-index:1}/* Headings — sentence case (no auto-uppercase;.u-caps is the only caps utility, reserved for card meta / legal lines). All Medium 500. */
h1, h2, h3, h4, h5, h6{font-family:var(--font-h);font-weight:500;font-style:normal;margin:0}h1{font-size:var(--text-h1);line-height:1;letter-spacing:var(--track-2)}h2{font-size:var(--text-h2);line-height:1.2;letter-spacing:var(--track-1)}h3{font-size:var(--text-h3);line-height:1.2;letter-spacing:var(--track-1)}p{margin:0}p + p{margin-top:9px}a{color:inherit}em, i, .italic{font-style:italic}::selection{background:var(--color-orange);color:var(--color-white)}.t-h1, .t-display{font-size:var(--text-h1);font-weight:500;line-height:1;letter-spacing:var(--track-2)}.t-h2{font-size:var(--text-h2);font-weight:500;line-height:1.2;letter-spacing:var(--track-1)}.t-h3{font-size:var(--text-h3);font-weight:500;line-height:1.2;letter-spacing:var(--track-1)}.t-lg, .t-lead{font-size:var(--text-lg);font-weight:500;line-height:1.2;letter-spacing:var(--track-1)}.t-body{font-size:var(--text-body);font-weight:500;line-height:1.5;letter-spacing:var(--track-1)}.t-sm{font-size:var(--text-sm);font-weight:500;line-height:1.5;letter-spacing:var(--track-1)}.t-xs, .t-small, .t-meta{font-size:var(--text-xs);font-weight:500;line-height:1;letter-spacing:var(--track-1)}.u-caps{text-transform:uppercase}/* ---- Grid (design-system §3 — non-negotiable) -------------------------------- 12 columns (4 on mobile), 1rem gutters, fluid side margins. Components place content with grid-column — no arbitrary flexbox positioning. */
.grid{display:grid;grid-template-columns:repeat(var(--grid-columns), minmax(0, 1fr));column-gap:var(--grid-gutter);padding-inline:var(--grid-margin);position:relative}.grid-overlay{position:fixed;inset:0;z-index:9998;pointer-events:none;display:none;grid-template-columns:repeat(var(--grid-columns), minmax(0, 1fr));column-gap:var(--grid-gutter);padding-inline:var(--grid-margin)}.grid-overlay span{background:rgba(255, 59, 20, 0.06);outline:1px solid rgba(255, 59, 20, 0.18);height:100%}body.show-grid .grid-overlay{display:grid}/* ---- Pill button (design-system §5.1, Figma 129:13403) ----------------------- Reusable:.btn-pill anywhere (header CTA, section CTAs). Dark-surface default (white);.btn-pill--dark derived for white surfaces (no on-white button exists in Figma — flagged for design review). Hover:white → orange (border+text+arrow via currentColor), gap 4→8px. */
.btn-pill,
.wc-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:6px 11px 6px 15px;border:1px solid currentColor;border-radius:100px;background:transparent;color:var(--color-white);font-family:var(--font-b);font-weight:500;font-size:var(--text-sm);line-height:1.5;letter-spacing:var(--track-2);white-space:nowrap;text-decoration:none;cursor:pointer;transition:color 0.3s var(--ease-osmo), gap 0.3s var(--ease-osmo)}@media (hover:hover) and (pointer:fine){.btn-pill:hover, .wc-btn:hover{color:var(--color-orange);gap:8px}}.btn-pill--dark{color:var(--color-black)}/* 24px icon box;the real Figma arrow vector (12.36×19.14 up-arrow) rotated 90° reads as the right-pointing 24px arrow. fill/stroke = currentColor so the hover recolor needs no second file. */
.btn-pill__icon{width:24px;height:24px;flex:none;display:flex;align-items:center;justify-content:center}.btn-pill__icon svg{display:block;width:12.4px;height:19.2px;transform:rotate(90deg)}/* ---- Inline text link (design-system §5.3) ------------------------------------ "Uzzināt vairāk" / "Apskatīt visus" pattern:white, no underline;hover = orange + underline. 20px inside list rows (.link--lg), 18px elsewhere. */
.link{font-weight:500;font-size:var(--text-nav);line-height:1.5;letter-spacing:var(--track-1);color:inherit;text-decoration:none;transition:color 0.25s var(--ease-osmo)}.link--lg{font-size:var(--text-lg);line-height:1.2}@media (hover:hover) and (pointer:fine){.link:hover{color:var(--color-orange);text-decoration:underline;text-underline-position:from-font}}/* Section-top underlined link (Figma "Apskatīt visus" / "Atsauksmes" / "Vairāk par mums":18px, white, underlined by default;hover → orange). `a.link-u` is needed to out-rank the plugin's `.component a{text-decoration:none}` (equal specificity, later source order). */
a.link-u,
.link-u{font-weight:500;font-size:var(--text-nav);line-height:1.5;letter-spacing:var(--track-1);color:inherit;text-decoration:underline;text-underline-position:from-font;transition:color 0.25s var(--ease-osmo)}@media (hover:hover) and (pointer:fine){a.link-u:hover{color:var(--color-orange)}}.hairline{border:0;height:1px;background:var(--color-grey)}.rotating-badge{position:absolute;width:110px;height:110px;z-index:5}.rotating-badge__ring{width:100%;height:100%;will-change:transform}@media (max-width:699px){.rotating-badge{display:none}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}a:focus-visible,
button:focus-visible{outline:2px solid var(--color-orange);outline-offset:3px}.wc-anchor{position:absolute;top:0;left:0;width:1px;height:1px}/* About teaser (Figma 129:12903) — heading 1/3 + credit, portrait 5/3 (~square, bottom-cropped), body 9/4 with 9px paragraph rhythm. About uses the −2% H2 tracking in Figma;standardized to −1% per §8.4 ruling. */
.component-about{padding-top:var(--space-3);padding-bottom:var(--section-pad)}.component-about .about__left{grid-column:1/span 3;display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-3)}.component-about .about__credit{font-size:var(--text-body);line-height:1.5}.component-about .about__portrait{grid-column:5/span 3;aspect-ratio:800/802;overflow:hidden;background:#1d1d1d}.component-about .about__portrait img{width:100%;height:100%;object-fit:cover;/* Source photo is taller (2:3) than the Figma fill's own crop — a plain `bottom` crop beheads the portrait;25% keeps the face with a little headroom, arms still anchoring the bottom. */ object-position:50% 25%;display:block}.component-about .about__right{grid-column:9/span 4;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;gap:var(--space-3)}.component-about .about__body{font-size:var(--text-body);line-height:1.5}@media (max-width:1023px){.component-about .about__left{grid-column:1/-1;gap:var(--space-2)}.component-about .about__portrait{grid-column:1/span 6;margin-top:var(--space-3)}.component-about .about__right{grid-column:7/-1;margin-top:var(--space-3)}}@media (max-width:767px){.component-about .about__left, .component-about .about__portrait, .component-about .about__right{grid-column:1/-1}.component-about .about__portrait{margin-top:var(--space-2)}.component-about .about__right{margin-top:var(--space-2);align-items:flex-start}}/* Clients logo band (Figma 129:11702) — heading row, then hairline-separated rows of 120×48 monochrome logo cells with 48px-tall vertical dividers. */
.component-clients{padding-top:var(--space-3);padding-bottom:var(--section-pad)}.component-clients .clients__grid{row-gap:var(--space-4)}.component-clients .clients__heading{grid-column:1/span 3;grid-row:1;align-self:center}.component-clients .clients__lede{grid-column:7/span 3;grid-row:1;align-self:center;font-weight:400;font-size:var(--text-body);line-height:1.5}.component-clients .clients__link{grid-column:12/span 1;grid-row:1;justify-self:end;align-self:center;white-space:nowrap}.component-clients .clients__band{grid-column:1/-1;grid-row:2;display:flex;flex-direction:column}.component-clients .clients__row{display:flex;align-items:center;gap:24px;padding-block:var(--space-3);border-top:1px solid var(--color-grey)}.component-clients .clients__row:last-child{border-bottom:1px solid var(--color-grey)}.component-clients .clients__cell{flex:none;width:120px;height:48px;display:flex;align-items:center;justify-content:center}.component-clients .clients__cell img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}.component-clients .clients__sep{flex:1 0 0;min-width:1px;align-self:stretch;position:relative}.component-clients .clients__sep::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:1px;height:48px;background:var(--color-grey)}@media (max-width:767px){.component-clients{}.component-clients .clients__grid{row-gap:var(--space-2)}.component-clients .clients__heading{grid-column:1/-1}.component-clients .clients__lede{grid-column:1/span 3;grid-row:2}.component-clients .clients__link{grid-column:4/span 1;grid-row:2}.component-clients .clients__band{grid-row:3}.component-clients .clients__row{display:grid;grid-template-columns:repeat(3, 1fr);gap:var(--space-2) var(--space-1);padding-block:var(--space-2)}.component-clients .clients__sep{display:none}.component-clients .clients__cell{width:100%;height:40px}.component-clients .clients__cell img{max-width:104px}}/* ============================================================================ BETTRWEB footer — Figma 104:11140 + design-system §3/§4. Full-width 1px top rule, 48px padding, 12-col grid:row 1 — logo col 1 · contact col 6–8 · services col 9–11 row 2 — legal band:© col 1 · company col 6 · reg nr col 9 · privacy col 12 Labels white @50%;contact values in Book 400 with 1px white underline. ========================================================================== */
footer{position:relative;z-index:0}.component-footer{background:var(--color-black);color:var(--color-white);border-top:1px solid var(--color-grey);padding-block:var(--space-3)}/* NOTE:bettrlite's selector-token substitution only fires on a bare ".component-footer{" rule — use .component-footer for any compound selector. */
.footer__grid{row-gap:var(--space-3);grid-template-rows:auto auto;align-items:start}.footer__logo{grid-column:1/4;grid-row:1;display:inline-flex;line-height:0;width:fit-content}.footer__logo img{display:block;width:194px;height:auto}.footer__label{font-weight:500;font-size:var(--text-sm);line-height:1;letter-spacing:var(--track-1);opacity:0.5;margin:0 0 12px}.footer__contact{grid-column:6/9;grid-row:1}.footer__contact-list{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}.footer__contact-list li{display:flex;align-items:baseline;gap:24px}.footer__key{min-width:70px;font-weight:500;font-size:var(--text-sm);line-height:1.5;letter-spacing:var(--track-1)}.footer__value{font-weight:400;font-size:var(--text-sm);line-height:1.5;letter-spacing:var(--track-1);color:var(--color-white);text-decoration:none}.footer__value--link{border-bottom:1px solid var(--color-white);padding-bottom:2px;transition:color 0.25s var(--ease-osmo), border-color 0.25s var(--ease-osmo)}@media (hover:hover) and (pointer:fine){.footer__value--link:hover{color:var(--color-orange);border-bottom-color:var(--color-orange)}a.footer__value:not(.footer__value--link):hover{color:var(--color-orange)}}.footer__services{grid-column:9/12;grid-row:1}.footer__services-cols{display:flex;gap:var(--space-3)}.footer__services-list{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}.footer__services-list li{font-weight:500;font-size:var(--text-sm);line-height:1.5;letter-spacing:var(--track-1);white-space:nowrap}.footer__service-link{color:var(--color-white);text-decoration:none;transition:color 0.25s var(--ease-osmo)}@media (hover:hover) and (pointer:fine){.footer__service-link:hover{color:var(--color-orange);text-decoration:underline;text-underline-position:from-font}}.footer__legal{grid-row:2;font-weight:500;font-size:var(--text-xs);line-height:1;letter-spacing:var(--track-1);margin:0;white-space:nowrap}.footer__legal a{color:var(--color-white);text-decoration:none;transition:color 0.25s var(--ease-osmo)}@media (hover:hover) and (pointer:fine){.footer__legal a:hover{color:var(--color-orange);text-decoration:underline;text-underline-position:from-font}}.footer__legal--copy{grid-column:1/3}.footer__legal--company{grid-column:6/8}.footer__legal--reg{grid-column:9/11}.footer__legal--privacy{grid-column:12/13;justify-self:end}/* ---- Tablet / mobile (derived — no Figma mobile design;FLAGGED for design review). Stack:logo, contact, services, legal lines. ---------------- */
@media (max-width:1023px){.footer__contact{grid-column:1/7}.footer__services{grid-column:7/13}.footer__logo{grid-column:1/-1;grid-row:1}.footer__contact, .footer__services{grid-row:2}.footer__grid{grid-template-rows:auto auto auto}.footer__legal{grid-row:3}.footer__legal--copy{grid-column:1/4}.footer__legal--company{grid-column:4/7}.footer__legal--reg{grid-column:7/10}.footer__legal--privacy{grid-column:10/13}}@media (max-width:767px){.footer__grid{grid-template-rows:none;row-gap:var(--space-2)}.footer__logo, .footer__contact, .footer__services, .footer__legal{grid-column:1/-1;grid-row:auto;justify-self:start}.footer__services-cols{flex-direction:column;gap:8px}.footer__services-list li{white-space:normal}.footer__legal--copy{margin-top:var(--space-1)}}/* ============================================================================ BETTRWEB header — design-system §5.7 + Figma 129:11663 (homepage spec). Grid-placed:logo col 1, nav from col 6 (42px gaps), pill CTA col 12. Variants (modifier on the section, set by the `style` ACF select):- .header--transparent (default):over the homepage hero (the hero owns the legibility gradient, not the header). Turns solid dark on scroll. - .header--dark:always #141414. - .header--white:always #fff, black content + black logo. .is-page-solid (functions.php, non-front pages) forces the solid state. ========================================================================== */
.component-header{position:fixed;top:0;left:0;right:0;z-index:1000;color:var(--color-white);background:transparent;border-bottom:1px solid transparent;transition:background-color 0.35s var(--ease-osmo), color 0.35s var(--ease-osmo), border-color 0.35s var(--ease-osmo), transform 0.35s var(--ease-osmo);will-change:transform;/* scrolled / forced solid state (transparent variant only — dark and white variants are already solid) */}.component-header.is-solid{background:var(--color-black);border-bottom-color:rgba(255, 255, 255, 0.08)}.component-header.is-hidden{transform:translateY(-100%)}.header--dark{background:var(--color-black)}.header--white{background:var(--color-white);color:var(--color-black)}.header--white.is-solid{background:var(--color-white);border-bottom-color:rgba(20, 20, 20, 0.1)}/* ---- Bar:12-col grid row, 32px block padding (§4:header 32px top/bottom, side margins from the grid) ------------------------------------------------ */
.header__bar{align-items:center;padding-block:32px}.header__logo{grid-column:1/4;grid-row:1;display:flex;align-items:center;line-height:0}.header__logo-img{display:block;width:200px;height:auto}.header__logo-img--black{display:none}.header--white .header__logo-img--white{display:none}.header--white .header__logo-img--black{display:block}.header__nav{grid-column:6/12;grid-row:1;justify-self:start;display:flex;align-items:center;gap:42px}/* Menu item (§5.2, Figma 129:13414):18px / 500 / lh 1 / −1%, sentence case. Hover/active:1px underline (currentColor) sweeping in from the left + 10px orange dot 6px right of the label. The dot is absolutely positioned (deviation from Figma's in-flow dot) so neighbouring items never shift. */
.header__link{position:relative;display:inline-flex;align-items:center;padding:6px 0;font-weight:500;font-size:var(--text-nav);line-height:1;letter-spacing:var(--track-1);color:currentColor;text-decoration:none}.header__link::after{content:"";position:absolute;left:calc(100% + 6px);top:50%;width:10px;height:10px;border-radius:50%;background:var(--color-orange);transform:translateY(-50%) scale(0.4);opacity:0;transition:opacity 0.25s var(--ease-osmo), transform 0.25s var(--ease-osmo)}.header__link-label{position:relative;display:inline-block}.header__link-label::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left center;transition:transform 0.3s var(--ease-osmo)}@media (hover:hover) and (pointer:fine){.header__link:hover::after{opacity:1;transform:translateY(-50%) scale(1)}.header__link:hover .header__link-label::after{transform:scaleX(1)}}.header__link.is-active::after{opacity:1;transform:translateY(-50%) scale(1)}.header__link.is-active .header__link-label::after{transform:scaleX(1)}.header__end{grid-column:11/13;grid-row:1;justify-self:end;display:flex;align-items:center;gap:24px}.header__lang{position:relative}.header__lang-trigger{display:flex;align-items:center;gap:0.35em;background:none;border:0;padding:0.25em 0;font-family:var(--font-b);font-weight:500;font-size:var(--text-sm);letter-spacing:var(--track-1);color:currentColor;opacity:0.6;cursor:pointer;transition:opacity 0.25s var(--ease-osmo)}.header__lang-trigger::after{content:"";width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid currentColor;transition:transform 0.3s var(--ease-osmo)}@media (hover:hover) and (pointer:fine){.header__lang-trigger:hover{opacity:1}}.header__lang.open .header__lang-trigger{opacity:1}.header__lang.open .header__lang-trigger::after{transform:rotate(180deg)}.header__lang-panel{position:absolute;top:calc(100% + 0.75rem);left:50%;transform:translateX(-50%) translateY(-6px);min-width:4rem;width:max-content;background:var(--color-black);border:1px solid var(--color-grey);padding:0.5rem;display:flex;flex-direction:column;gap:0.15rem;opacity:0;visibility:hidden;transition:opacity 0.25s var(--ease-osmo), transform 0.25s var(--ease-osmo), visibility 0s linear 0.25s}.header__lang-panel a{display:block;text-align:center;padding:0.4em 0.75em;font-weight:500;font-size:var(--text-sm);letter-spacing:var(--track-1);color:var(--color-white);text-decoration:none;transition:color 0.2s var(--ease-osmo)}.header__lang-panel a[aria-current=true]{text-decoration:underline;text-underline-offset:3px}.header__lang-panel a[aria-disabled=true]{opacity:0.45;cursor:default}@media (hover:hover) and (pointer:fine){.header__lang-panel a:not([aria-disabled=true]):hover{color:var(--color-orange)}}.header__lang.open .header__lang-panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);transition:opacity 0.25s var(--ease-osmo), transform 0.25s var(--ease-osmo), visibility 0s}.header__cta{flex-shrink:0}.header__burger{display:none;grid-column:-2/-1;grid-row:1;justify-self:end;align-items:center;justify-content:center;flex-direction:column;gap:6px;width:44px;height:44px;background:none;border:0;cursor:pointer}.header__burger span{display:block;width:24px;height:1.5px;background:currentColor;transition:transform 0.3s var(--ease-osmo)}body.nav-open .header__burger span:nth-child(1){transform:translateY(3.75px) rotate(45deg)}body.nav-open .header__burger span:nth-child(2){transform:translateY(-3.75px) rotate(-45deg)}/* ---- Mobile fullscreen overlay (derived — no Figma mobile design;FLAGGED for design review). #141414, large sentence-case items, same underline + orange-dot active language, pill CTA + language row at the bottom. -------- */
.header__overlay{position:fixed;inset:0;z-index:999;background:var(--color-black);color:var(--color-white);display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--header-h) + var(--space-2)) var(--grid-margin) var(--space-2);transform:translateY(-100%);visibility:hidden;transition:transform 0.5s var(--ease-osmo), visibility 0s linear 0.5s}body.nav-open .header__overlay{transform:translateY(0);visibility:visible;transition:transform 0.5s var(--ease-osmo), visibility 0s}.header__overlay-list{display:flex;flex-direction:column;gap:0.75rem;margin:0;padding:0;list-style:none}.header__overlay-list .header__link{font-size:var(--text-h2);letter-spacing:var(--track-1);padding:2px 0}.header__overlay-list .header__link::after{width:8px;height:8px;left:calc(100% + 8px)}.header__overlay-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-1);border-top:1px solid var(--color-grey);padding-top:var(--space-1)}.header__overlay-lang{display:flex;align-items:center;gap:1rem}.header__overlay-lang a{font-weight:500;font-size:var(--text-sm);letter-spacing:var(--track-1);color:var(--color-white);opacity:0.6;text-decoration:none;padding:0.4em 0}.header__overlay-lang a.is-current{opacity:1;text-decoration:underline;text-underline-offset:3px}.header__overlay-lang a[aria-disabled=true]{opacity:0.45}@media (max-width:1023px){.header__nav{display:none}.header__end{display:none}.header__burger{display:flex}.header__bar{padding-block:24px}.header__logo{grid-column:1/3}.header__logo-img{width:160px}}@media (max-width:767px){.header__logo{grid-column:1/4}.header__burger{grid-column:4/5}.header__bar{padding-block:20px}}/* Logged-in WP admin bar (fixed, 32px desktop / 46px tablet) — offset both fixed layers. Scoped ≥600px:below that WP makes the bar absolute. */
@media (min-width:600px){body.admin-bar .component-header{top:var(--wp-admin--admin-bar--height, 32px)}body.admin-bar .header__overlay{top:var(--wp-admin--admin-bar--height, 32px)}}/* BETTRWEB hero (Figma 97:9646) — full-bleed photo slider, dark gradient at the top for the transparent header (§1), bottom-anchored grid content. */
.component-hero{position:relative;height:100svh;min-height:700px;overflow:hidden;background:var(--color-black)}.component-hero .hero__media{position:absolute;inset:0;z-index:0}.component-hero .hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--ease-osmo)}.component-hero .hero__slide.is-active{opacity:1}.component-hero .hero__slide img{width:100%;height:100%;object-fit:cover;display:block}.component-hero .hero__gradient{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 50%)}.component-hero .hero__grid{position:relative;z-index:2;height:100%;align-content:end;padding-bottom:var(--space-3);row-gap:var(--space-1)}.component-hero .hero__label{grid-column:1/span 2;align-self:end;font-size:var(--text-nav);line-height:1;letter-spacing:var(--track-1);white-space:nowrap}.component-hero .hero__title{grid-column:6/span 5;align-self:end}.component-hero .hero__indicator{grid-column:12/span 1;align-self:end;justify-self:end;display:flex;gap:4px;align-items:center;padding:0}.component-hero .hero__dash{width:15px;height:2px;padding:3px 0;background:none;border:0;cursor:pointer;background-clip:content-box;background-color:var(--color-grey);transition:background-color 0.4s var(--ease-osmo)}.component-hero .hero__dash.is-active{background-color:var(--color-white)}@media (max-width:767px){.component-hero{min-height:560px}.component-hero .hero__grid{grid-template-rows:auto auto;row-gap:var(--space-2)}.component-hero .hero__title{grid-row:1;grid-column:1/-1}.component-hero .hero__label{grid-row:2;grid-column:1/span 2}.component-hero .hero__indicator{grid-row:2;grid-column:3/span 2}}/* BETTRWEB 404 — on-brand replacement for the generic .inner/.flex-c/font-h2 boilerplate. Green section, verde type, grid- aligned, generous ~100svh composition;display headline with a gold-italic emphasis word (unbracket() [kvadrātiekavas] convention, same as hero/footer);wc-btn CTA home;brand glyph as a large, quiet background accent (echoes the footer's standalone glyph). Also the SECOND section (after the footer) to carry the cursor-draw effect — see index.js initWCDraw, generalized (pre-v1.9.0:initWCFooterDraw, footer-only) via the [data-wc-draw] attribute. v1.9.1 FIX (client:"line disappears almost immediately" on 404, footer's was fine):ROOT CAUSE was that [data-wc-draw] (and therefore bindWCDraw's mouseenter/mousemove/mouseleave listeners + getBoundingClientRect() calls) was bound to .wc-404__inner — the grid CONTENT box, which only spans its own text height (~528px measured at 1440x900) — while the section around it is ~100svh (~900px), vertically centered via flex `align-items:center`. That left a ~186px dead-zone above AND below the content box where the pointer is still visually "inside the green section" but has technically left the bound element — any natural hand-drawn squiggle that dipped past the text block's own top/bottom edge fired a REAL mouseleave (confirmed via elementFromPoint hit-testing during a live drawn path:the cursor repeatedly resolved to the parent <section>, not .wc-404__inner, well before leaving the visible green area), which immediately fades + clears the trail per bindWCDraw's `leave()` — that is exactly "disappears almost immediately". FIX:[data-wc-draw] now lives on .wc-404__section, a NEW wrapper that fills the full ~100svh box — the same pattern the footer already uses (bindWCDraw(footer) binds the ENTIRE 100svh <footer>, so it has no such dead zone). `selector` (the component root) now only owns background/color;.wc-404__section owns the sizing + flex-centering + position:relative that the draw effect and the glyph both anchor to. */
.component-not_found{background:var(--green);color:var(--verde);overflow:hidden}.wc-404__section{position:relative;min-height:100svh;display:flex;align-items:center;width:100%;padding-block:8rem}/* Cursor-draw svg (index.js initWCDraw, generalized pre-v1.9.0 from the footer-only initWCFooterDraw) — appended as the LAST child of whichever [data-wc-draw] root it binds to (here:.wc-404__section, the FULL-HEIGHT wrapper as of v1.9.1 — the theme-owned equivalent of the footer's <footer> binding target, since footer.php's <footer> tag itself isn't ours to attribute). Reuses the EXACT SAME .footer-draw-svg class from footer/style.scss (position:absolute/inset:0/pointer-events:none/ z-index:0/polyline styling all already defined there, class-scoped not footer-scoped) — no new rule needed here. SAME stacking pattern as the footer (see that file's .footer-draw-svg comment for the full stacking- context writeup):.wc-404__section (position:relative) is the positioned ancestor, the svg sits at its class-level z-index:0, and .wc-404__inner gets z-index:1 so it wins the stacking-order comparison despite the svg being appended after it in DOM order (remember the `selector`-token gotcha — .component-not_found is used explicitly for any component-scoped rule here rather than the bare `selector` keyword, which only substitutes when it's the WHOLE selector of a rule). */
.wc-404__inner{position:relative;z-index:1;width:100%;row-gap:1.5rem}.wc-404__heading{grid-column:1/11;grid-row:1;color:var(--verde);margin:0}.wc-404__heading .em{color:var(--gold);font-style:italic}.wc-404__description{grid-column:1/7;grid-row:2;color:rgba(236, 234, 226, 0.85);margin:0}.wc-404__cta{grid-column:1/4;grid-row:3;margin-top:1.5rem;width:fit-content}@media (max-width:699px){.wc-404__section{padding-block:6rem}.wc-404__heading{grid-column:1/5;font-size:clamp(2.5rem, 11vw, 3.5rem)}.wc-404__description{grid-column:1/5}.wc-404__cta{grid-column:1/5;width:100%}}/* Portfolio grid (Figma 97:9662, §5.6). NOTE the 32px column gap — the intentional §8.7 exception to the 16px gutter (pairs sit 2 gutters apart);48px vertical rhythm between card rows. */
.component-portfolio{padding-bottom:var(--section-pad);/* Hover (§5.6 Variant2):reveal the underlined "Apskatīt" + subtle image scale. Hidden without hover support (touch) — the whole card is a link. */}.component-portfolio .portfolio__grid{column-gap:32px;row-gap:var(--space-3)}.component-portfolio .portfolio__heading{grid-column:1/span 6;align-self:center}.component-portfolio .portfolio__all{grid-column:12/span 1;justify-self:end;align-self:center;white-space:nowrap}.component-portfolio .portfolio__card{grid-column:span 6;display:flex;flex-direction:column;gap:var(--space-1);text-decoration:none;color:inherit}.component-portfolio .portfolio__card--feature{grid-column:1/-1}.component-portfolio .portfolio__image{display:block;aspect-ratio:2000/1333;overflow:hidden;background:#1d1d1d}.component-portfolio .portfolio__image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.8s var(--ease-osmo)}.component-portfolio .portfolio__caption{display:flex;align-items:center;justify-content:space-between;gap:var(--space-1);font-size:var(--text-sm);line-height:1.1;letter-spacing:-0.01em}.component-portfolio .portfolio__caption-end{display:flex;align-items:center;gap:var(--space-1)}.component-portfolio .portfolio__category{opacity:0.2}.component-portfolio .portfolio__view{display:none;text-decoration:underline;text-underline-position:from-font;opacity:0;transform:translateX(4px);transition:opacity 0.3s var(--ease-osmo), transform 0.3s var(--ease-osmo)}@media (hover:hover) and (pointer:fine){.component-portfolio .portfolio__view{display:inline}.component-portfolio .portfolio__card:hover .portfolio__view{opacity:1;transform:translateX(0)}.component-portfolio .portfolio__card:hover .portfolio__image img{transform:scale(1.03)}}@media (max-width:767px){.component-portfolio .portfolio__grid{column-gap:var(--grid-gutter);row-gap:var(--space-2)}.component-portfolio .portfolio__heading{grid-column:1/span 3}.component-portfolio .portfolio__all{grid-column:4/span 1}.component-portfolio .portfolio__card, .component-portfolio .portfolio__card--feature{grid-column:1/-1}.component-portfolio .portfolio__caption{flex-wrap:wrap;row-gap:4px}}/* BETTRWEB post_content — long-form legal/editorial pages (privacy policy). v1.11.2g:cleared the fixed header (content started underneath it), brand typography for h1/h2/lists, bordered table, and NO entrance animations — the section ignores the sitewide fade-in (CSS below) and the split-line reveal (excluded in root index.js isSplittable):a 22KB legal doc has no business animating line by line. */
.component-post_content{padding:calc(var(--header-h) + 5rem) 0 6.25rem;background:var(--verde);color:var(--green)}@media (max-width:699px){.component-post_content{padding:calc(var(--header-h) + 2.5rem) 0 4rem}}/* neutralize the builder's fade-in on this component — content is visible immediately whether or not the observer ever adds .visible */
.component-post_content.fade-in{opacity:1;transform:none}.component-post_content > .inner{max-width:50rem}.component-post_content .content h1{font-family:var(--font-h);font-weight:400;font-size:clamp(2.4rem, 4vw, 3.5rem);line-height:1.1;margin:0 0 2.5rem;color:var(--green)}.component-post_content .content h2{font-family:var(--font-h);font-weight:400;font-size:clamp(1.4rem, 2vw, 1.75rem);line-height:1.25;margin:3rem 0 1rem;color:var(--green)}.component-post_content .content p{margin:0 0 1rem;line-height:1.65}.component-post_content .content ul{margin:0 0 1.5rem;padding-left:1.35rem}.component-post_content .content ul li{margin-bottom:0.55rem;line-height:1.6}.component-post_content .content ul li::marker{color:var(--gold)}.component-post_content .content ul ul{margin:0.55rem 0 0.35rem}.component-post_content .content strong, .component-post_content .content b{font-weight:500;font-family:var(--font-b)}.component-post_content .content a{color:var(--green);text-decoration:underline;text-underline-offset:2px}.component-post_content .content a:hover{color:var(--gold)}.component-post_content .content table{width:100%;border-collapse:collapse;margin:1.5rem 0 2rem;font-size:0.95rem}.component-post_content .content table th, .component-post_content .content table td{border:1px solid rgba(38, 45, 0, 0.22);padding:0.7rem 0.9rem;text-align:left;vertical-align:top;line-height:1.5}.component-post_content .content table th{font-family:var(--font-b);font-weight:500;background:rgba(38, 45, 0, 0.05)}/* Services list (Figma 104:10341, §5.4) — 96px section padding, 64px heading → list gap, rows on shared #515151 hairlines. */
.component-services{padding-block:var(--section-pad);/* Row = its own 12-col grid;tracks match the parent because it spans the full content width (same gutters, no extra padding). */ /* Hover language (§5.3 + §5.5 ruling):link goes orange + underline, title echoes the orange — one accent moment per view. */}.component-services .services__grid{row-gap:var(--space-4)}.component-services .services__heading{grid-column:1/span 3;grid-row:1}.component-services .services__lede{grid-column:6/span 6;grid-row:1;font-size:var(--text-body);line-height:1.5}.component-services .services__list{grid-column:1/-1;grid-row:2;display:flex;flex-direction:column}.component-services .services__row{display:grid;grid-template-columns:repeat(var(--grid-columns), minmax(0, 1fr));column-gap:var(--grid-gutter);align-items:center;padding-block:var(--space-3);border-top:1px solid var(--color-grey);text-decoration:none;color:inherit}.component-services .services__row:last-child{border-bottom:1px solid var(--color-grey)}.component-services .services__title{grid-column:1/span 6;align-self:start;transition:color 0.25s var(--ease-osmo)}.component-services .services__index{grid-column:7/span 1;font-size:var(--text-lg);line-height:1.2;letter-spacing:var(--track-1)}.component-services .services__link{grid-column:12/span 1;justify-self:end;white-space:nowrap;transition:color 0.25s var(--ease-osmo)}@media (hover:hover) and (pointer:fine){.component-services .services__row:hover .services__link{color:var(--color-orange);text-decoration:underline;text-underline-position:from-font}.component-services .services__row:hover .services__title{color:var(--color-orange)}}@media (max-width:767px){.component-services .services__heading{grid-column:1/-1}.component-services .services__lede{grid-column:1/-1;grid-row:auto}.component-services .services__grid{row-gap:var(--space-2)}.component-services .services__list{grid-row:auto;margin-top:var(--space-2)}.component-services .services__row{padding-block:var(--space-2);row-gap:12px}.component-services .services__title{grid-column:1/span 3}.component-services .services__index{grid-column:4/span 1;justify-self:end}.component-services .services__link{grid-column:1/-1;grid-row:2;justify-self:start;font-size:var(--text-nav)}}/* ============================================================================ BETTRWEB — theme style.scss (compiled LAST, after all components). Page-transition chrome + component base. ========================================================================== */
/* ---- Component base --------------------------------------------------------- Every builder section renders as <section class="component component-X">. Sections own their backgrounds;the barba container itself is opaque so nothing shows through gaps during transitions. */
.component:not(.component-header){/* header is position:fixed (its own scss compiles BEFORE this file — equal specificity would let this rule win, hence the:not) */ position:relative}main[data-barba=container]{background:var(--color-black);/* Empty-main artifact fix:with no components the fixed header used to overlap the footer at the very top of the page. A sane minimum keeps skeleton pages readable until their content is built. */ min-height:calc(100svh - 322px)}.component:empty{display:none}.component-portfolio_single{padding-top:calc(var(--header-h) + var(--space-4));padding-bottom:var(--section-pad)}.component-portfolio_single .portfolio-single__grid{row-gap:var(--space-2)}.component-portfolio_single .portfolio-single__title{grid-column:1/span 6}.component-portfolio_single .portfolio-single__meta{grid-column:9/-1;justify-self:end;align-self:center;opacity:0.5}.component-portfolio_single .portfolio-single__cover{grid-column:1/-1;aspect-ratio:2000/1333;overflow:hidden;background:#1d1d1d}.component-portfolio_single .portfolio-single__cover img{width:100%;height:100%;object-fit:cover;display:block}.component-portfolio_single .portfolio-single__lede{grid-column:1/span 6}.component-portfolio_single .portfolio-single__link-wrap{grid-column:9/-1;justify-self:end}@media (max-width:767px){.component-portfolio_single .portfolio-single__title, .component-portfolio_single .portfolio-single__meta, .component-portfolio_single .portfolio-single__lede, .component-portfolio_single .portfolio-single__link-wrap{grid-column:1/-1;justify-self:start}}/* 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}.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:auto !important}/* ---- Barba page transition chrome (theme part:parts/transition.php) --------- Single full-viewport curtain wipe (barba.js tweens yPercent between 0 — resting at its CSS top:-100% — and 100/200 to cover/reveal). Brand black;the motion reads through content vanishing, not through a color clash. */
.transition{z-index:10000;pointer-events:none;position:fixed;top:0;left:0;width:100%;height:100vh}.transition__curtain{background-color:var(--color-black);width:100%;height:100%;position:relative;top:-100%}