@charset "UTF-8";body > #page > #header[role=banner]{display:none}: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}/* ============================================================================ Theme globals (design tokens, grid, base styles, primitives). Single source of truth:design-system.md (repo root), §2–§7. Compiled by bettrlite:reset → plugin style → THIS (twice:compiled + raw for mixins/@extend) → components → theme style.scss. ========================================================================== */
/* ---- Breakpoints (design-system §4.4) -------------------------------------- No breakpoint bumps grid-margin/gutter — both are FIXED at every width. */ /* ---- Fonts (design-system §3.1) -------------------------------------------- Mulish 400/700/900, latin + latin-ext, self-hosted. Six declarations (one per weight per subset) so the browser only downloads the subset(s) a page actually needs. font-display:swap;the two 400 files are preloaded from functions.php's font_head(). Never a request to fonts.googleapis.com or fonts.gstatic.com. */
@font-face{font-family:"Mulish";src:url("/wp-content/themes/dev/fonts/mulish-latin-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:"Mulish";src:url("/wp-content/themes/dev/fonts/mulish-latin-ext-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:"Mulish";src:url("/wp-content/themes/dev/fonts/mulish-latin-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:"Mulish";src:url("/wp-content/themes/dev/fonts/mulish-latin-ext-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:"Mulish";src:url("/wp-content/themes/dev/fonts/mulish-latin-900.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:"Mulish";src:url("/wp-content/themes/dev/fonts/mulish-latin-ext-900.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}:root{--width:90rem;--padding:2rem;--color-ink:#222732;--color-white:#ffffff;--color-orange:#ff4605;--color-surface-muted:#e7edf3;--color-surface-warm:#fbf3ee;--color-muted:#6a7282;--color-faint:#99a1b2;--hairline:#e3e3e3;--hairline-on-ink:rgba(255, 255, 255, 0.15);/* Image placeholder background while loading (§2.2). The white/muted case reuses --color-surface-muted (same #e7edf3 value);the ink-surface case had no variable — hero_service and story_band each hard-coded the hex directly. Promoted to a token here (QA sweep) so both components reference one source instead of repeating the literal. */ --color-placeholder-ink:#2b3040;--radius-card:12px;--font:"Mulish", Arial, Helvetica, sans-serif;--grid-columns:12;--grid-gutter:1rem;--grid-margin:2rem;/* Header offset — derived from real padding (see .header__bar), the same mechanism the starter theme used:block padding ×2 + the tallest bar child + the 1px bottom hairline. Consumed by every fixed-header page-top component as its padding-top. */ --header-pad:24px;--header-control-h:48px;--header-h:calc(var(--header-pad) * 2 + var(--header-control-h) + 1px);--text-display:clamp(36px, 2.6vw + 16px, 80px);--text-h2:clamp(26px, 1.2vw + 18px, 40px);--text-h3:clamp(20px, 0.5vw + 18px, 26px);--text-lede:clamp(17px, 0.3vw + 16px, 20px);--text-body:16px;--text-sm:14px;--text-stat:clamp(48px, 3.5vw, 96px);--tracking-display:-0.02em;--underline-offset:0.15em;--measure-legal:45rem;--space-1:8px;--space-2:16px;--space-3:24px;--space-4:32px;--space-6:48px;--space-8:64px;--space-12:96px;--ease-osmo:cubic-bezier(0.625, 0.05, 0, 1);--ease-osmo-out:cubic-bezier(0.65, 0, 0.35, 1)}@media (max-width:1023px){:root{--header-control-h:44px}}@media (max-width:767px){:root{--grid-columns:4;--padding:1.25rem;--header-pad:20px}}html{font-size:16px;scroll-behavior:auto;overflow-x:hidden;overflow-x:clip}body{font-family:var(--font);font-weight:400;font-size:var(--text-body);line-height:1.6;color:var(--color-ink);background:var(--color-white);overflow-x:hidden;overflow-x:clip;position:relative;width:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}main{position:relative;z-index:1;display:block}/* Headings — sentence case (no auto-uppercase anywhere, design-system §3.2). 900/display for H1, 700 for H2-H6;-0.02em tracking on display/H2 only;text-wrap:balance so headlines break on meaning, never a one-word widow. */
h1, h2, h3, h4, h5, h6{font-family:var(--font);font-style:normal;margin:0;text-wrap:balance}h1{font-size:var(--text-display);font-weight:900;line-height:1.05;letter-spacing:var(--tracking-display)}h2{font-size:var(--text-h2);font-weight:700;line-height:1.15;letter-spacing:var(--tracking-display)}h3, h4, h5, h6{font-size:var(--text-h3);font-weight:700;line-height:1.2}p{margin:0}p + p{margin-top:var(--space-2)}a{color:inherit}::selection{background:var(--color-orange);color:var(--color-white)}.t-display{font-size:var(--text-display);font-weight:900;line-height:1.05;letter-spacing:var(--tracking-display);text-wrap:balance}.t-h2{font-size:var(--text-h2);font-weight:700;line-height:1.15;letter-spacing:var(--tracking-display);text-wrap:balance}.t-h3{font-size:var(--text-h3);font-weight:700;line-height:1.2;text-wrap:balance}.t-lede{font-size:var(--text-lede);font-weight:400;line-height:1.5}.t-body{font-size:var(--text-body);font-weight:400;line-height:1.6}.t-sm{font-size:var(--text-sm);font-weight:400;line-height:1.4}.nums{font-variant-numeric:tabular-nums}/* ---- Grid (design-system §4.1 — non-negotiable) -------------------------------- 12 columns (4 on mobile), 1rem gutters, 2rem margins, FIXED at every width. Components place content with grid-column — never free flexbox alignment. */
.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}/* The content well (design-system §4.1, Eduards 2026-09-15):at >=1024px every body section places its content on columns 2 to 11;columns 1 and 12 stay empty. Header and footer are chrome and never use it. Below 1024px the well drops to the full grid. Use `@include well;` on the wrapper, or the class. Include it LAST in its block:it ends in a nested @media, and Sass warns about declarations that follow a nested rule (mixed-decls). */
.well{grid-column:2/span 10}@media (max-width:1023px){.well{grid-column:1/-1}}/* A nested row of equal cards across its parent's width:$n tracks on the same 1rem gutter (design-system §4.1 "rows of equal cards"), so the first card starts on the well's left edge and the last ends on its right edge. Children place themselves with `grid-column:span 1` (span 2 for a wide card). */
.tracks-2{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));column-gap:var(--grid-gutter);position:relative}.tracks-3{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));column-gap:var(--grid-gutter);position:relative}.tracks-4{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));column-gap:var(--grid-gutter);position:relative}.tracks-5{display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));column-gap:var(--grid-gutter);position:relative}/* Nested variant for content already inset by a parent's padding (a full-bleed band that places its own content on the same 12-col rhythm without doubling the side margin). */
.grid--nested{display:grid;grid-template-columns:repeat(var(--grid-columns), minmax(0, 1fr));column-gap:var(--grid-gutter);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, 70, 5, 0.06);outline:1px solid rgba(255, 70, 5, 0.25);height:100%}body.show-grid .grid-overlay{display:grid}/* ---- Surfaces (design-system §6) ----------------------------------------------- Background + color only — children read currentColor/inherit so one card, hairline or icon renders correctly on whichever surface it lands on. */
.surface-white{background:var(--color-white);color:var(--color-ink)}.surface-warm{background:var(--color-surface-warm);color:var(--color-ink)}.surface-muted{background:var(--color-surface-muted);color:var(--color-ink)}.surface-ink{background:var(--color-ink);color:var(--color-white)}.section{padding-block:72px}@media (max-width:767px){.section{padding-block:var(--space-6)}}/* ---- Pills + ghost button (design-system §7.2, §2.3) --------------------------- .pill = the primary CTA (orange fill, white label). .pill--phone modifies it to the outlined secondary form (orange outline + label, transparent fill). Hover on both:a solid fill sweeps up from the bottom (::before, translateY(100%) -> 0, 0.35s osmo), scale never above 1.02, fine-pointer only. */
.pill{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:var(--space-2) var(--space-3);padding:16px 28px;border-radius:999px;border:1.5px solid transparent;background:var(--color-orange);color:var(--color-white);font-family:var(--font);font-weight:700;font-size:var(--text-sm);line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer;overflow:hidden;transition:color 0.35s var(--ease-osmo), transform 0.35s var(--ease-osmo)}.pill::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--color-ink);transform:translateY(100%);transition:transform 0.35s var(--ease-osmo)}.pill span, .pill svg{position:relative}@media (hover:hover) and (pointer:fine){.pill:hover{transform:scale(1.02)}.pill:hover::before{transform:translateY(0)}}/* Secondary:the phone number as text. Outline + orange label at rest;hover sweeps an ORANGE fill up (converging visually on the primary pill's resting state) and flips the label to white for contrast. */
.pill--phone{background:transparent;border-color:var(--color-orange);color:var(--color-orange)}.pill--phone::before{background:var(--color-orange)}@media (hover:hover) and (pointer:fine){.pill--phone:hover{color:var(--color-white)}}/* The sanctioned third, non-accent action (design-system §2.3):ink border, ink text, transparent fill, 12px radius (the card radius) — never a pill, never accent-filled. */
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:16px 28px;border-radius:var(--radius-card);border:1.5px solid var(--color-ink);background:transparent;color:var(--color-ink);font-family:var(--font);font-weight:700;font-size:var(--text-sm);line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer;transition:background-color 0.25s var(--ease-osmo), color 0.25s var(--ease-osmo)}@media (hover:hover) and (pointer:fine){.btn-ghost:hover{background:var(--color-ink);color:var(--color-white)}}a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{outline:2px solid var(--color-orange);outline-offset:2px}/* ---- Form fields:classic boxed inputs with a floating label ----------------- (Eduards, 2026-09-16:the underline-only fields were "ultra minimalist";keep only the label that floats up when the user starts typing.) A 56px white box on a hairline, 8px radius;the label sits inside as the placeholder and floats to the top-left (12px/700) on focus or once the field has a value (:placeholder-shown with a blank placeholder);selects and date inputs always show a value, so their label is always floated. Focus:ink border + a soft ring;error:orange border, the message below. */
.field{position:relative;display:block}.field__label{font-size:var(--text-sm);font-weight:700;line-height:1.4;color:var(--color-ink)}.field .field__label{position:absolute;left:17px;top:18px;z-index:1;margin:0;font-size:var(--text-body);font-weight:400;line-height:1.25;color:var(--color-muted);pointer-events:none;transform-origin:left top;transition:top 0.18s var(--ease-osmo), font-size 0.18s var(--ease-osmo), color 0.18s var(--ease-osmo)}.field:has(.field__control:focus) .field__label,
.field:has(.field__control:not(:placeholder-shown)) .field__label,
.field:has(select.field__control) .field__label,
.field:has(input[type=date].field__control) .field__label{top:9px;font-size:12px;font-weight:700;color:var(--color-ink)}.field__control{appearance:none;display:block;width:100%;min-height:56px;border:1px solid var(--hairline);border-radius:8px;background:var(--color-white);padding:24px 16px 8px;font-family:var(--font);font-weight:400;font-size:var(--text-body);line-height:1.5;color:var(--color-ink);transition:border-color 0.2s var(--ease-osmo), box-shadow 0.2s var(--ease-osmo)}.field__control::placeholder{color:transparent}.field__control:focus{outline:0;border-color:var(--color-ink);box-shadow:0 0 0 3px rgba(34, 39, 50, 0.08)}input[type=date].field__control{color:var(--color-ink)}textarea.field__control{resize:vertical;min-height:128px;padding-top:28px}.field:has(textarea.field__control) .field__label{top:18px}.field:has(textarea.field__control:focus) .field__label,
.field:has(textarea.field__control:not(:placeholder-shown)) .field__label{top:9px}.field--error .field__control{border-color:var(--color-orange);box-shadow:none}.field--error .field__label{color:var(--color-orange)}.field__error{display:block;margin-top:6px;font-size:13px;font-weight:400;line-height:1.3;color:var(--color-orange)}@media (prefers-reduced-motion:reduce){.field .field__label, .field__control{transition:none}}/* ---- Accordion primitive (shared by FAQ, price list, any [data-accordion]) ----- Rows on hairlines, chevron rotates 0.25s;the height tween itself is owned by bw.accordion() (theme index.js), 0.45s osmo, single-open. */
.acc{display:flex;flex-direction:column;width:100%}.acc__item{border-bottom:1px solid currentColor;opacity:1;border-color:var(--hairline)}.acc__item:first-child{border-top:1px solid var(--hairline)}.acc__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);width:100%;padding:var(--space-3) 0;background:none;border:0;color:inherit;font-family:var(--font);text-align:left;cursor:pointer}.acc__title{font-size:var(--text-h3);font-weight:700;line-height:1.2}.acc__icon{flex:none;display:flex;align-items:center;justify-content:center;width:20px;height:20px;transition:transform 0.25s var(--ease-osmo)}.acc__icon svg{display:block;fill:currentColor}.acc__item.is-open .acc__icon--chevron{transform:rotate(180deg)}.acc__item.is-open .acc__icon--plus{transform:rotate(45deg)}.acc__panel{overflow:hidden}.acc__panel[hidden]{display:none}.acc__body{padding-bottom:var(--space-3);padding-left:var(--space-2);max-width:66%;font-size:var(--text-body);line-height:1.6}@media (max-width:767px){.acc__body{max-width:100%}}@media (prefers-reduced-motion:reduce){.acc__icon{transition:none}}/* ---- Card primitive (design-system §7/§13:one card style, no shadows) -------- White surface, 1px hairline border, the one shared 12px radius, 24px padding. Hover lifts 2px and the border darkens toward ink — fine-pointer only, 0.25s osmo (design-system §7.2). */
.card{display:block;background:var(--color-white);color:var(--color-ink);border:1px solid var(--hairline);border-radius:var(--radius-card);padding:var(--space-3);transition:transform 0.25s var(--ease-osmo), border-color 0.25s var(--ease-osmo)}@media (hover:hover) and (pointer:fine){.card:hover{transform:translateY(-2px);border-color:color-mix(in srgb, var(--color-ink) 30%, transparent)}}/* ---- Check primitive (checklists) ---------------------------------------------- 20px orange circle, white check mark, inline-flex so it sits on the same baseline as its label text. Expects one inline SVG child (currentColor). */
.check{display:inline-flex;flex:none;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--color-orange);color:var(--color-white)}.check svg{display:block;width:11px;height:8px}.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}/* ---- Honeypot (spam trap, shared by every form) -------------------------------- Off-canvas (not display:none, which naive scrapers skip), out of tab order, aria-hidden so screen readers never announce it. */
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}/* ---- Legacy primitives kept only for components/contact_page (not part of the new design system's pill/field language;retoken'd so nothing references a removed placeholder variable). --------------------------------------------- */
.btn-pill{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-ink);font-family:var(--font);font-weight:700;font-size:var(--text-sm);line-height:1.5;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{color:var(--color-orange);gap:8px}}.btn-pill--dark{color:var(--color-ink)}.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)}.contact__field{position:relative}.contact__error{position:absolute;left:0;top:calc(100% + 5px);font-size:var(--text-sm);line-height:1;color:var(--color-orange);opacity:0;transform:translateY(-4px);transition:opacity 0.3s var(--ease-osmo), transform 0.3s var(--ease-osmo);pointer-events:none}.contact__field.is-invalid .contact__error{opacity:1;transform:none}@media (prefers-reduced-motion:reduce){.contact__error{transition:none}}.contact__attach{display:flex;flex-direction:column;border-bottom:1px solid currentColor;padding-bottom:7px;transition:border-color 0.3s var(--ease-osmo)}.contact__attach.is-invalid, .contact__attach:focus-within{border-bottom-color:var(--color-orange)}.contact__attach.is-dragover{border-bottom-style:dashed;border-bottom-color:var(--color-orange)}.contact__attach.is-dragover .contact__attach-trigger{color:var(--color-orange)}.contact__attach-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-1);flex-wrap:wrap}.contact__attach-label{font-weight:700;font-size:var(--text-sm);line-height:1.5}.contact__attach-hint{font-size:var(--text-sm);opacity:0.6;white-space:nowrap}.contact__attach .contact__attach-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.contact__attach-trigger{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-weight:700;font-size:var(--text-sm);line-height:1.5;color:inherit;transition:color 0.3s var(--ease-osmo)}.contact__attach-trigger:has(.contact__attach-input:focus-visible){outline:2px solid var(--color-orange);outline-offset:3px}@media (hover:hover) and (pointer:fine){.contact__attach-trigger:hover{color:var(--color-orange)}}.contact__attach-plus{flex:none;display:flex;align-items:center;justify-content:center;width:15px;height:15px}.contact__attach-plus svg{display:block;width:100%;height:100%;fill:currentColor}.contact__attach-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column}.contact__attach-list[hidden]{display:none}.contact__attach-item{display:flex;align-items:center;gap:var(--space-1);padding:8px 0;border-top:1px dashed color-mix(in srgb, currentColor 25%, transparent);font-size:var(--text-sm);line-height:1.5;opacity:0;transform:translateY(6px);transition:opacity 0.3s var(--ease-osmo), transform 0.3s var(--ease-osmo)}.contact__attach-item.is-in{opacity:1;transform:none}.contact__attach-item.is-leaving{opacity:0;transform:translateY(-4px)}.contact__attach-name{font-weight:700;min-width:0;overflow:hidden;white-space:nowrap}.contact__attach-size{margin-left:auto;flex:none;font-weight:700;opacity:0.5}.contact__attach-remove{flex:none;display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:-4px;padding:0;background:none;border:0;color:inherit;font-family:var(--font);font-weight:400;font-size:18px;line-height:1;cursor:pointer;transition:color 0.3s var(--ease-osmo)}@media (hover:hover) and (pointer:fine){.contact__attach-remove:hover{color:var(--color-orange)}}@media (prefers-reduced-motion:reduce){.contact__attach, .contact__attach-item{transition:none}}.btn-pill.loading{cursor:progress}.btn-pill.loading .btn-pill__icon svg{animation:bw-send-pulse 1.1s var(--ease-osmo) infinite alternate}@keyframes bw-send-pulse{from{opacity:1}to{opacity:0.3}}@media (prefers-reduced-motion:reduce){.btn-pill.loading .btn-pill__icon svg{animation:none;opacity:0.5}}/* ============================================================================ Theme globals (design tokens, grid, base styles, primitives). Single source of truth:design-system.md (repo root), §2–§7. Compiled by bettrlite:reset → plugin style → THIS (twice:compiled + raw for mixins/@extend) → components → theme style.scss. ========================================================================== */
/* ---- Breakpoints (design-system §4.4) -------------------------------------- No breakpoint bumps grid-margin/gutter — both are FIXED at every width. */ /* ---- Fonts (design-system §3.1) -------------------------------------------- Mulish 400/700/900, latin + latin-ext, self-hosted. Six declarations (one per weight per subset) so the browser only downloads the subset(s) a page actually needs. font-display:swap;the two 400 files are preloaded from functions.php's font_head(). Never a request to fonts.googleapis.com or fonts.gstatic.com. */
@font-face{font-family:"Mulish";src:url("/wp-content/themes/dev/fonts/mulish-latin-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:"Mulish";src:url("/wp-content/themes/dev/fonts/mulish-latin-ext-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:"Mulish";src:url("/wp-content/themes/dev/fonts/mulish-latin-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:"Mulish";src:url("/wp-content/themes/dev/fonts/mulish-latin-ext-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:"Mulish";src:url("/wp-content/themes/dev/fonts/mulish-latin-900.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:"Mulish";src:url("/wp-content/themes/dev/fonts/mulish-latin-ext-900.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}:root{--width:90rem;--padding:2rem;--color-ink:#222732;--color-white:#ffffff;--color-orange:#ff4605;--color-surface-muted:#e7edf3;--color-surface-warm:#fbf3ee;--color-muted:#6a7282;--color-faint:#99a1b2;--hairline:#e3e3e3;--hairline-on-ink:rgba(255, 255, 255, 0.15);/* Image placeholder background while loading (§2.2). The white/muted case reuses --color-surface-muted (same #e7edf3 value);the ink-surface case had no variable — hero_service and story_band each hard-coded the hex directly. Promoted to a token here (QA sweep) so both components reference one source instead of repeating the literal. */ --color-placeholder-ink:#2b3040;--radius-card:12px;--font:"Mulish", Arial, Helvetica, sans-serif;--grid-columns:12;--grid-gutter:1rem;--grid-margin:2rem;/* Header offset — derived from real padding (see .header__bar), the same mechanism the starter theme used:block padding ×2 + the tallest bar child + the 1px bottom hairline. Consumed by every fixed-header page-top component as its padding-top. */ --header-pad:24px;--header-control-h:48px;--header-h:calc(var(--header-pad) * 2 + var(--header-control-h) + 1px);--text-display:clamp(36px, 2.6vw + 16px, 80px);--text-h2:clamp(26px, 1.2vw + 18px, 40px);--text-h3:clamp(20px, 0.5vw + 18px, 26px);--text-lede:clamp(17px, 0.3vw + 16px, 20px);--text-body:16px;--text-sm:14px;--text-stat:clamp(48px, 3.5vw, 96px);--tracking-display:-0.02em;--underline-offset:0.15em;--measure-legal:45rem;--space-1:8px;--space-2:16px;--space-3:24px;--space-4:32px;--space-6:48px;--space-8:64px;--space-12:96px;--ease-osmo:cubic-bezier(0.625, 0.05, 0, 1);--ease-osmo-out:cubic-bezier(0.65, 0, 0.35, 1)}@media (max-width:1023px){:root{--header-control-h:44px}}@media (max-width:767px){:root{--grid-columns:4;--padding:1.25rem;--header-pad:20px}}html{font-size:16px;scroll-behavior:auto;overflow-x:hidden;overflow-x:clip}body{font-family:var(--font);font-weight:400;font-size:var(--text-body);line-height:1.6;color:var(--color-ink);background:var(--color-white);overflow-x:hidden;overflow-x:clip;position:relative;width:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}main{position:relative;z-index:1;display:block}/* Headings — sentence case (no auto-uppercase anywhere, design-system §3.2). 900/display for H1, 700 for H2-H6;-0.02em tracking on display/H2 only;text-wrap:balance so headlines break on meaning, never a one-word widow. */
h1, h2, h3, h4, h5, h6{font-family:var(--font);font-style:normal;margin:0;text-wrap:balance}h1{font-size:var(--text-display);font-weight:900;line-height:1.05;letter-spacing:var(--tracking-display)}h2{font-size:var(--text-h2);font-weight:700;line-height:1.15;letter-spacing:var(--tracking-display)}h3, h4, h5, h6{font-size:var(--text-h3);font-weight:700;line-height:1.2}p{margin:0}p + p{margin-top:var(--space-2)}a{color:inherit}::selection{background:var(--color-orange);color:var(--color-white)}.t-display{font-size:var(--text-display);font-weight:900;line-height:1.05;letter-spacing:var(--tracking-display);text-wrap:balance}.t-h2{font-size:var(--text-h2);font-weight:700;line-height:1.15;letter-spacing:var(--tracking-display);text-wrap:balance}.t-h3{font-size:var(--text-h3);font-weight:700;line-height:1.2;text-wrap:balance}.t-lede{font-size:var(--text-lede);font-weight:400;line-height:1.5}.t-body{font-size:var(--text-body);font-weight:400;line-height:1.6}.t-sm{font-size:var(--text-sm);font-weight:400;line-height:1.4}.nums{font-variant-numeric:tabular-nums}/* ---- Grid (design-system §4.1 — non-negotiable) -------------------------------- 12 columns (4 on mobile), 1rem gutters, 2rem margins, FIXED at every width. Components place content with grid-column — never free flexbox alignment. */
.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}/* The content well (design-system §4.1, Eduards 2026-09-15):at >=1024px every body section places its content on columns 2 to 11;columns 1 and 12 stay empty. Header and footer are chrome and never use it. Below 1024px the well drops to the full grid. Use `@include well;` on the wrapper, or the class. Include it LAST in its block:it ends in a nested @media, and Sass warns about declarations that follow a nested rule (mixed-decls). */
.well{grid-column:2/span 10}@media (max-width:1023px){.well{grid-column:1/-1}}/* A nested row of equal cards across its parent's width:$n tracks on the same 1rem gutter (design-system §4.1 "rows of equal cards"), so the first card starts on the well's left edge and the last ends on its right edge. Children place themselves with `grid-column:span 1` (span 2 for a wide card). */
.tracks-2{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));column-gap:var(--grid-gutter);position:relative}.tracks-3{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));column-gap:var(--grid-gutter);position:relative}.tracks-4{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));column-gap:var(--grid-gutter);position:relative}.tracks-5{display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));column-gap:var(--grid-gutter);position:relative}/* Nested variant for content already inset by a parent's padding (a full-bleed band that places its own content on the same 12-col rhythm without doubling the side margin). */
.grid--nested{display:grid;grid-template-columns:repeat(var(--grid-columns), minmax(0, 1fr));column-gap:var(--grid-gutter);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, 70, 5, 0.06);outline:1px solid rgba(255, 70, 5, 0.25);height:100%}body.show-grid .grid-overlay{display:grid}/* ---- Surfaces (design-system §6) ----------------------------------------------- Background + color only — children read currentColor/inherit so one card, hairline or icon renders correctly on whichever surface it lands on. */
.surface-white{background:var(--color-white);color:var(--color-ink)}.surface-warm{background:var(--color-surface-warm);color:var(--color-ink)}.surface-muted{background:var(--color-surface-muted);color:var(--color-ink)}.surface-ink{background:var(--color-ink);color:var(--color-white)}.section{padding-block:72px}@media (max-width:767px){.section{padding-block:var(--space-6)}}/* ---- Pills + ghost button (design-system §7.2, §2.3) --------------------------- .pill = the primary CTA (orange fill, white label). .pill--phone modifies it to the outlined secondary form (orange outline + label, transparent fill). Hover on both:a solid fill sweeps up from the bottom (::before, translateY(100%) -> 0, 0.35s osmo), scale never above 1.02, fine-pointer only. */
.pill{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:var(--space-2) var(--space-3);padding:16px 28px;border-radius:999px;border:1.5px solid transparent;background:var(--color-orange);color:var(--color-white);font-family:var(--font);font-weight:700;font-size:var(--text-sm);line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer;overflow:hidden;transition:color 0.35s var(--ease-osmo), transform 0.35s var(--ease-osmo)}.pill::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--color-ink);transform:translateY(100%);transition:transform 0.35s var(--ease-osmo)}.pill span, .pill svg{position:relative}@media (hover:hover) and (pointer:fine){.pill:hover{transform:scale(1.02)}.pill:hover::before{transform:translateY(0)}}/* Secondary:the phone number as text. Outline + orange label at rest;hover sweeps an ORANGE fill up (converging visually on the primary pill's resting state) and flips the label to white for contrast. */
.pill--phone{background:transparent;border-color:var(--color-orange);color:var(--color-orange)}.pill--phone::before{background:var(--color-orange)}@media (hover:hover) and (pointer:fine){.pill--phone:hover{color:var(--color-white)}}/* The sanctioned third, non-accent action (design-system §2.3):ink border, ink text, transparent fill, 12px radius (the card radius) — never a pill, never accent-filled. */
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:16px 28px;border-radius:var(--radius-card);border:1.5px solid var(--color-ink);background:transparent;color:var(--color-ink);font-family:var(--font);font-weight:700;font-size:var(--text-sm);line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer;transition:background-color 0.25s var(--ease-osmo), color 0.25s var(--ease-osmo)}@media (hover:hover) and (pointer:fine){.btn-ghost:hover{background:var(--color-ink);color:var(--color-white)}}a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{outline:2px solid var(--color-orange);outline-offset:2px}/* ---- Form fields:classic boxed inputs with a floating label ----------------- (Eduards, 2026-09-16:the underline-only fields were "ultra minimalist";keep only the label that floats up when the user starts typing.) A 56px white box on a hairline, 8px radius;the label sits inside as the placeholder and floats to the top-left (12px/700) on focus or once the field has a value (:placeholder-shown with a blank placeholder);selects and date inputs always show a value, so their label is always floated. Focus:ink border + a soft ring;error:orange border, the message below. */
.field{position:relative;display:block}.field__label{font-size:var(--text-sm);font-weight:700;line-height:1.4;color:var(--color-ink)}.field .field__label{position:absolute;left:17px;top:18px;z-index:1;margin:0;font-size:var(--text-body);font-weight:400;line-height:1.25;color:var(--color-muted);pointer-events:none;transform-origin:left top;transition:top 0.18s var(--ease-osmo), font-size 0.18s var(--ease-osmo), color 0.18s var(--ease-osmo)}.field:has(.field__control:focus) .field__label,
.field:has(.field__control:not(:placeholder-shown)) .field__label,
.field:has(select.field__control) .field__label,
.field:has(input[type=date].field__control) .field__label{top:9px;font-size:12px;font-weight:700;color:var(--color-ink)}.field__control{appearance:none;display:block;width:100%;min-height:56px;border:1px solid var(--hairline);border-radius:8px;background:var(--color-white);padding:24px 16px 8px;font-family:var(--font);font-weight:400;font-size:var(--text-body);line-height:1.5;color:var(--color-ink);transition:border-color 0.2s var(--ease-osmo), box-shadow 0.2s var(--ease-osmo)}.field__control::placeholder{color:transparent}.field__control:focus{outline:0;border-color:var(--color-ink);box-shadow:0 0 0 3px rgba(34, 39, 50, 0.08)}input[type=date].field__control{color:var(--color-ink)}textarea.field__control{resize:vertical;min-height:128px;padding-top:28px}.field:has(textarea.field__control) .field__label{top:18px}.field:has(textarea.field__control:focus) .field__label,
.field:has(textarea.field__control:not(:placeholder-shown)) .field__label{top:9px}.field--error .field__control{border-color:var(--color-orange);box-shadow:none}.field--error .field__label{color:var(--color-orange)}.field__error{display:block;margin-top:6px;font-size:13px;font-weight:400;line-height:1.3;color:var(--color-orange)}@media (prefers-reduced-motion:reduce){.field .field__label, .field__control{transition:none}}/* ---- Accordion primitive (shared by FAQ, price list, any [data-accordion]) ----- Rows on hairlines, chevron rotates 0.25s;the height tween itself is owned by bw.accordion() (theme index.js), 0.45s osmo, single-open. */
.acc{display:flex;flex-direction:column;width:100%}.acc__item{border-bottom:1px solid currentColor;opacity:1;border-color:var(--hairline)}.acc__item:first-child{border-top:1px solid var(--hairline)}.acc__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);width:100%;padding:var(--space-3) 0;background:none;border:0;color:inherit;font-family:var(--font);text-align:left;cursor:pointer}.acc__title{font-size:var(--text-h3);font-weight:700;line-height:1.2}.acc__icon{flex:none;display:flex;align-items:center;justify-content:center;width:20px;height:20px;transition:transform 0.25s var(--ease-osmo)}.acc__icon svg{display:block;fill:currentColor}.acc__item.is-open .acc__icon--chevron{transform:rotate(180deg)}.acc__item.is-open .acc__icon--plus{transform:rotate(45deg)}.acc__panel{overflow:hidden}.acc__panel[hidden]{display:none}.acc__body{padding-bottom:var(--space-3);padding-left:var(--space-2);max-width:66%;font-size:var(--text-body);line-height:1.6}@media (max-width:767px){.acc__body{max-width:100%}}@media (prefers-reduced-motion:reduce){.acc__icon{transition:none}}/* ---- Card primitive (design-system §7/§13:one card style, no shadows) -------- White surface, 1px hairline border, the one shared 12px radius, 24px padding. Hover lifts 2px and the border darkens toward ink — fine-pointer only, 0.25s osmo (design-system §7.2). */
.card{display:block;background:var(--color-white);color:var(--color-ink);border:1px solid var(--hairline);border-radius:var(--radius-card);padding:var(--space-3);transition:transform 0.25s var(--ease-osmo), border-color 0.25s var(--ease-osmo)}@media (hover:hover) and (pointer:fine){.card:hover{transform:translateY(-2px);border-color:color-mix(in srgb, var(--color-ink) 30%, transparent)}}/* ---- Check primitive (checklists) ---------------------------------------------- 20px orange circle, white check mark, inline-flex so it sits on the same baseline as its label text. Expects one inline SVG child (currentColor). */
.check{display:inline-flex;flex:none;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--color-orange);color:var(--color-white)}.check svg{display:block;width:11px;height:8px}.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}/* ---- Honeypot (spam trap, shared by every form) -------------------------------- Off-canvas (not display:none, which naive scrapers skip), out of tab order, aria-hidden so screen readers never announce it. */
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}/* ---- Legacy primitives kept only for components/contact_page (not part of the new design system's pill/field language;retoken'd so nothing references a removed placeholder variable). --------------------------------------------- */
.btn-pill{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-ink);font-family:var(--font);font-weight:700;font-size:var(--text-sm);line-height:1.5;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{color:var(--color-orange);gap:8px}}.btn-pill--dark{color:var(--color-ink)}.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)}.contact__field{position:relative}.contact__error{position:absolute;left:0;top:calc(100% + 5px);font-size:var(--text-sm);line-height:1;color:var(--color-orange);opacity:0;transform:translateY(-4px);transition:opacity 0.3s var(--ease-osmo), transform 0.3s var(--ease-osmo);pointer-events:none}.contact__field.is-invalid .contact__error{opacity:1;transform:none}@media (prefers-reduced-motion:reduce){.contact__error{transition:none}}.contact__attach{display:flex;flex-direction:column;border-bottom:1px solid currentColor;padding-bottom:7px;transition:border-color 0.3s var(--ease-osmo)}.contact__attach.is-invalid, .contact__attach:focus-within{border-bottom-color:var(--color-orange)}.contact__attach.is-dragover{border-bottom-style:dashed;border-bottom-color:var(--color-orange)}.contact__attach.is-dragover .contact__attach-trigger{color:var(--color-orange)}.contact__attach-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-1);flex-wrap:wrap}.contact__attach-label{font-weight:700;font-size:var(--text-sm);line-height:1.5}.contact__attach-hint{font-size:var(--text-sm);opacity:0.6;white-space:nowrap}.contact__attach .contact__attach-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.contact__attach-trigger{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-weight:700;font-size:var(--text-sm);line-height:1.5;color:inherit;transition:color 0.3s var(--ease-osmo)}.contact__attach-trigger:has(.contact__attach-input:focus-visible){outline:2px solid var(--color-orange);outline-offset:3px}@media (hover:hover) and (pointer:fine){.contact__attach-trigger:hover{color:var(--color-orange)}}.contact__attach-plus{flex:none;display:flex;align-items:center;justify-content:center;width:15px;height:15px}.contact__attach-plus svg{display:block;width:100%;height:100%;fill:currentColor}.contact__attach-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column}.contact__attach-list[hidden]{display:none}.contact__attach-item{display:flex;align-items:center;gap:var(--space-1);padding:8px 0;border-top:1px dashed color-mix(in srgb, currentColor 25%, transparent);font-size:var(--text-sm);line-height:1.5;opacity:0;transform:translateY(6px);transition:opacity 0.3s var(--ease-osmo), transform 0.3s var(--ease-osmo)}.contact__attach-item.is-in{opacity:1;transform:none}.contact__attach-item.is-leaving{opacity:0;transform:translateY(-4px)}.contact__attach-name{font-weight:700;min-width:0;overflow:hidden;white-space:nowrap}.contact__attach-size{margin-left:auto;flex:none;font-weight:700;opacity:0.5}.contact__attach-remove{flex:none;display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:-4px;padding:0;background:none;border:0;color:inherit;font-family:var(--font);font-weight:400;font-size:18px;line-height:1;cursor:pointer;transition:color 0.3s var(--ease-osmo)}@media (hover:hover) and (pointer:fine){.contact__attach-remove:hover{color:var(--color-orange)}}@media (prefers-reduced-motion:reduce){.contact__attach, .contact__attach-item{transition:none}}.btn-pill.loading{cursor:progress}.btn-pill.loading .btn-pill__icon svg{animation:bw-send-pulse 1.1s var(--ease-osmo) infinite alternate}@keyframes bw-send-pulse{from{opacity:1}to{opacity:0.3}}@media (prefers-reduced-motion:reduce){.btn-pill.loading .btn-pill__icon svg{animation:none;opacity:0.5}}/* ============================================================================ "Par Elite Detailing", expandable (docs/specs/service.md §8 v6, design-system §8.15, docs/specs/well.md). White surface, 72px padding. Left 2/span5 with 64px padding-right (32px at 1024 to 1279px;the prose keeps its own 720px measure):H2, the first paragraph (16px/1.6), the fully collapsed container (height 0, overflow hidden, no peek;JS-gated via html.js so a no-JS visitor sees everything, §7.3), 24px, the ghost button. Right 7/span5, top-aligned with the H2, never sticky:the photo in a 16:9 frame (12px radius, object-fit cover, object-position 50% 40%) with the ink quote card inset 24px from the frame's bottom and left edges (8px radius, 24px padding, max-width 420px and never wider than the frame minus 48px):quote 18px/700 white on a 3px orange left rule (12px padding-left), 10px, caption 14px white at 70%. <=1023px:stacked, text and button first, then the photo full width (the card stays inset at 768 to 1023, where the frame is wide enough). <=767px the card leaves the frame:the photo alone in the full-width 16:9 frame, then a 12px gap and the card as its own full-width block (20px padding, quote 16px, caption 13px). The markup is the same at every width:`.about__frame` (the one rise reveal) holds the img and the card;the media queries decide whether the card is positioned into the frame or flows below it. ========================================================================== */
.component-about_expand{background:var(--color-white);color:var(--color-ink);padding-block:72px}@media (max-width:767px){.component-about_expand{padding-block:48px}}.component-about_expand .about__grid{align-items:start}.component-about_expand .about__content{grid-column:2/span 5;padding-right:var(--space-8)}@media (max-width:1279px){.component-about_expand .about__content{padding-right:var(--space-4)}}.component-about_expand .about__intro{margin-top:var(--space-4)}.component-about_expand .about__more{--about-peek:0px;position:relative;overflow:hidden}.component-about_expand .about__more-inner{padding-top:var(--space-4)}.component-about_expand .about__section + .about__section{margin-top:var(--space-4)}.component-about_expand .about__section-heading{font-size:20px;font-weight:700;line-height:1.25;margin:0 0 var(--space-2);max-width:var(--measure-legal)}.component-about_expand .about__toggle{margin-top:var(--space-3)}.component-about_expand .about__prose{max-width:var(--measure-legal);font-size:var(--text-body);line-height:1.6}.component-about_expand .about__prose p{margin:0 0 var(--space-2)}.component-about_expand .about__prose p:last-child{margin-bottom:0}.component-about_expand .about__prose h3, .component-about_expand .about__prose h4{font-size:20px;font-weight:700;line-height:1.25;margin:var(--space-4) 0 var(--space-2)}.component-about_expand .about__prose h3:first-child, .component-about_expand .about__prose h4:first-child{margin-top:0}.component-about_expand .about__prose ol, .component-about_expand .about__prose ul{margin:0 0 var(--space-2);padding-left:var(--space-3)}.component-about_expand .about__prose ol li, .component-about_expand .about__prose ul li{margin-bottom:8px;line-height:1.6}.component-about_expand .about__prose ol:last-child, .component-about_expand .about__prose ul:last-child{margin-bottom:0}.component-about_expand .about__prose strong{font-weight:700}.component-about_expand .about__prose a{color:var(--color-orange);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:var(--underline-offset);transition:color 0.25s var(--ease-osmo)}.component-about_expand .about__prose table{width:100%;border-collapse:collapse;margin:0 0 var(--space-2);font-size:var(--text-body)}.component-about_expand .about__prose table td, .component-about_expand .about__prose table th{border:1px solid var(--hairline);padding:0.6rem 0.8rem;text-align:left;line-height:1.5;vertical-align:top}.component-about_expand .about__prose table th{font-weight:700}@media (hover:hover) and (pointer:fine){.component-about_expand .about__prose a:hover{color:var(--color-ink)}}.component-about_expand .about__lists{display:grid;grid-template-columns:repeat(2, 1fr);column-gap:var(--space-4);row-gap:var(--space-3);max-width:var(--measure-legal);margin-top:var(--space-3)}.component-about_expand .about__list-heading{font-size:var(--text-body);font-weight:700;line-height:1.4;margin:0 0 8px}.component-about_expand .about__list ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.component-about_expand .about__list li{position:relative;padding-left:var(--space-2);font-size:var(--text-body);line-height:1.6}.component-about_expand .about__list li::before{content:"–";position:absolute;left:0;color:var(--color-muted)}.component-about_expand .about__aside{grid-column:7/span 5}.component-about_expand .about__frame{position:relative;aspect-ratio:16/9;border-radius:var(--radius-card);overflow:hidden;background:var(--color-surface-muted)}.component-about_expand .about__photo{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%}.component-about_expand .about__card{position:absolute;left:var(--space-3);bottom:var(--space-3);box-sizing:border-box;max-width:min(420px, 100% - 2 * var(--space-3));background:var(--color-ink);color:var(--color-white);border-radius:8px;padding:var(--space-3)}.component-about_expand .about__quote{margin:0;padding-left:12px;border-left:3px solid var(--color-orange)}.component-about_expand .about__quote p{margin:0;font-size:18px;font-weight:700;line-height:1.35;color:var(--color-white)}.component-about_expand .about__caption{display:block;margin-top:10px;font-style:normal;font-size:var(--text-sm);line-height:1.4;color:rgba(255, 255, 255, 0.7)}@media (max-width:1023px){.component-about_expand .about__content, .component-about_expand .about__aside{grid-column:1/-1}.component-about_expand .about__content{padding-right:0}.component-about_expand .about__aside{margin-top:var(--space-4)}}@media (max-width:767px){.component-about_expand{/* The card leaves the frame (an inset card covered the whole photo at this width):the wrapper stops being the 16:9 box, the img itself becomes the full-width 16:9 rounded frame, and the card flows below it as its own block, 12px under the photo. */}.component-about_expand .about__lists{grid-template-columns:1fr}.component-about_expand .about__toggle{width:100%}.component-about_expand .about__frame{aspect-ratio:auto;border-radius:0;overflow:visible;background:none}.component-about_expand .about__photo{position:static;width:100%;height:auto;aspect-ratio:16/9;border-radius:var(--radius-card);background:var(--color-surface-muted)}.component-about_expand .about__card{position:static;max-width:none;margin-top:12px;padding:20px}.component-about_expand .about__quote p{font-size:16px}.component-about_expand .about__caption{font-size:13px}}/* The reveal gate is on <html> (header.php's inline script swaps no-js -> js before first paint), so the collapsed state is JS-only:a no-JS visitor sees the whole long-form and no button (§7.3). The `selector` token can't take a compound selector, so the compiled class is spelled out (the same escape hatch content_section/benefits use). */
.js .component-about_expand .about__more:not(.is-open){height:var(--about-peek)}html.no-js .component-about_expand .about__toggle{display:none}/* Anketa (design-system §8.9, docs/specs/forms.md v3 "Anketa" §2–§4):MUTED 72px section under the ink page_top band. One centred column 4/span6 (2/span10 at <=1023px, full width at <=767px) holding a white .card (40px padding, 24px on mobile) with the whole form — rows 32px apart, two-up pairs at >=600px — and, as the card's last row under a hairline, the live total beside the submit pill. 24px below:three small info cards in a 3-column row (stacked on mobile). Underline fields reuse the shared .field/.field__control primitive (globals.scss §8.9);this file only adds the layout, the select arrow, the custom checkboxes, the absolute- positioned error line (no layout shift) and the cards. */
.component-anketa{background:var(--color-surface-muted);padding-block:72px;/* ---- Form:a flex column of "rows", 32px apart (design-system §5:"Forms (anketa, kontakti) 32px between fields"). A half row is two fields side by side (Vārds/Uzvārds, E-pasts/Telefons) at >=600px;anything else is one field per row. ---------------------------------- */ /* 24px between the rows of a step (the old single-column form spaced rows through the form's own gap;the step panels do it here). */ /* .field/.field__label/.field__control are the shared underline primitive (globals.scss §8.9) — add position:relative here so the error line below can sit absolutely without shifting the next row. */ /* Native select — .field__control's global appearance:none strips the native arrow;redraw a plain 16px chevron via a decorative sibling icon (never a background-image on the control itself:without an explicit background-size an SVG with only a viewBox has no natural size, and Chromium fell back to a ~60px default, which is the bug this replaces). Rotates 180deg on focus, 0.25s (design-system §7.2 "chevron rotate"). */ /* ---- The card's last row:hairline 24px under the consent, then the total on the left and the submit pill on the right. ------------------- */}@media (max-width:767px){.component-anketa{padding-block:48px}}.component-anketa .anketa__col{grid-column:4/span 6;display:flex;flex-direction:column}.component-anketa .anketa__card{padding:40px;cursor:default}.component-anketa .anketa__card.card:hover{transform:none;border-color:var(--hairline)}.component-anketa .anketa__form{display:flex;flex-direction:column;gap:var(--space-4)}.component-anketa .anketa__row{display:flex;flex-direction:column;gap:var(--space-1)}.component-anketa .anketa__step .anketa__row + .anketa__row{margin-top:var(--space-3)}.component-anketa .anketa__step .anketa__row + .anketa__row:has(.anketa__addons){margin-top:var(--space-4)}.component-anketa .anketa__row--half{flex-direction:row;gap:var(--grid-gutter);align-items:flex-start}.component-anketa .anketa__row--half .field{flex:1 1 0;min-width:0}.component-anketa .field{position:relative}.component-anketa .field__error{position:absolute;left:0;top:100%;margin-top:4px;opacity:0;transform:translateY(-4px);transition:opacity 0.25s var(--ease-osmo), transform 0.25s var(--ease-osmo);pointer-events:none}.component-anketa .field--error .field__error{opacity:1;transform:none}.component-anketa .field--select .field__control{appearance:none;padding-right:44px;cursor:pointer}.component-anketa .field--select .field__control optgroup,
.component-anketa .field--select .field__control option{font-family:var(--font);color:var(--color-ink)}.component-anketa .field__select-wrap{position:relative;display:block;width:100%}.component-anketa .field__select-icon{position:absolute;top:50%;right:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;color:var(--color-ink);pointer-events:none;transform:translateY(-50%);transition:transform 0.25s var(--ease-osmo)}.component-anketa .field__select-icon svg{display:block;width:100%;height:100%}.component-anketa .field--select:focus-within .field__select-icon{transform:translateY(-50%) rotate(180deg)}@media (prefers-reduced-motion:reduce){.component-anketa .field__select-icon{transition:none}}.component-anketa .anketa__addons-label{display:block;margin-bottom:var(--space-2)}.component-anketa .anketa__addons{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));column-gap:var(--space-3);row-gap:var(--space-2)}.component-anketa .anketa__addon{display:flex;align-items:center;gap:10px;cursor:pointer}.component-anketa .anketa__addon-name{flex:1;font-size:var(--text-body);line-height:1.4}.component-anketa .anketa__addon-price{flex:none;font-size:var(--text-sm);font-weight:700;color:var(--color-muted)}.component-anketa .anketa__addon-input,
.component-anketa .anketa__consent-input{appearance:none;flex:none;width:20px;height:20px;margin:0;border:1.5px solid var(--color-ink);border-radius:4px;background-color:var(--color-white);cursor:pointer;transition:background-color 0.25s var(--ease-osmo), border-color 0.25s var(--ease-osmo)}.component-anketa .anketa__addon-input:checked,
.component-anketa .anketa__consent-input:checked{background-color:var(--color-orange);border-color:var(--color-orange);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8.5L6.5 12L13 4.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:12px 12px}.component-anketa .anketa__consent{position:relative;display:flex;align-items:flex-start;gap:12px;cursor:pointer}.component-anketa .anketa__consent-input{margin-top:2px}.component-anketa .anketa__consent-text{font-size:var(--text-sm);line-height:1.5;color:var(--color-muted)}.component-anketa .anketa__consent-text p{margin:0}.component-anketa .anketa__consent-text a{color:var(--color-orange);text-decoration:underline;text-underline-offset:var(--underline-offset)}.component-anketa .anketa__consent-error.field__error{left:32px}.component-anketa .anketa__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--hairline)}.component-anketa .anketa__total{display:flex;align-items:baseline;gap:8px;min-width:0}.component-anketa .anketa__total-label{font-size:var(--text-sm);font-weight:700}.component-anketa .anketa__total-value{font-size:20px;font-weight:700;line-height:1.3}.component-anketa .anketa__submit{flex:none}.component-anketa .anketa__submit.loading{cursor:progress;opacity:0.7}.component-anketa .anketa__submit:disabled{cursor:not-allowed}.component-anketa .anketa__status{margin-top:var(--space-2);font-size:var(--text-sm);color:var(--color-orange)}.component-anketa .anketa__status[hidden]{display:none}.component-anketa .anketa__info{display:grid;grid-template-columns:repeat(3, 1fr);gap:var(--space-2);margin-top:var(--space-3)}.component-anketa .anketa__info-card{padding:20px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;cursor:default}.component-anketa .anketa__info-card.card:hover{transform:none;border-color:var(--hairline)}.component-anketa .anketa__info-icon{display:flex;width:24px;height:24px;color:var(--color-orange)}.component-anketa .anketa__info-icon svg{display:block;width:100%;height:100%}.component-anketa .anketa__info-title{font-size:var(--text-sm);font-weight:700;line-height:1.4;letter-spacing:0}.component-anketa .anketa__info-line{font-size:var(--text-sm);font-weight:400;line-height:1.5;color:var(--color-muted)}.component-anketa .anketa__info-link{font-size:var(--text-sm);font-weight:700;line-height:1.4;color:var(--color-orange);text-decoration:underline;text-underline-offset:var(--underline-offset);transition:color 0.25s var(--ease-osmo)}@media (hover:hover) and (pointer:fine){.component-anketa .anketa__info-link:hover{color:var(--color-ink)}}@media (max-width:1023px){.component-anketa .anketa__col{grid-column:2/span 10}}@media (max-width:767px){.component-anketa{}.component-anketa .anketa__col{grid-column:1/-1}.component-anketa .anketa__card{padding:var(--space-3)}.component-anketa .anketa__footer{flex-direction:column;align-items:stretch;gap:var(--space-2)}.component-anketa .anketa__submit{width:100%}.component-anketa .anketa__info{grid-template-columns:1fr}}@media (max-width:599px){.component-anketa .anketa__row--half{flex-direction:column;gap:var(--space-4)}.component-anketa .anketa__addons{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){.component-anketa .field__error, .component-anketa .anketa__addon-input, .component-anketa .anketa__consent-input, .component-anketa .anketa__info-link{transition:none}}.component-anketa .anketa__steps{list-style:none;margin:0 0 var(--space-4);padding:0 0 var(--space-3);display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:var(--space-2);border-bottom:1px solid var(--hairline)}.component-anketa .anketa__steps-item{display:flex;align-items:center;gap:10px;min-width:0;color:var(--color-muted);font-size:var(--text-sm);font-weight:700;line-height:1.3}.component-anketa .anketa__steps-num{flex:none;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--hairline);background:var(--color-white);color:var(--color-muted);font-size:13px;font-variant-numeric:tabular-nums;transition:background-color 0.25s var(--ease-osmo), border-color 0.25s var(--ease-osmo), color 0.25s var(--ease-osmo)}.component-anketa .anketa__steps-item.is-active{color:var(--color-ink)}.component-anketa .anketa__steps-item.is-active .anketa__steps-num{background:var(--color-orange);border-color:var(--color-orange);color:var(--color-white)}.component-anketa .anketa__steps-item.is-done{color:var(--color-ink)}.component-anketa .anketa__steps-item.is-done .anketa__steps-num{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-white)}.component-anketa .anketa__step[hidden]{display:none}.component-anketa .anketa__step-title{font-size:var(--text-h3);font-weight:700;line-height:1.25;margin:0 0 var(--space-3)}.component-anketa .anketa__nav{display:flex;align-items:center;gap:12px}.component-anketa .anketa__nav [hidden]{display:none}@media (max-width:767px){.component-anketa .anketa__steps{gap:8px}.component-anketa .anketa__steps-label{display:none}.component-anketa .anketa__steps-item.is-active .anketa__steps-label{display:inline}.component-anketa .anketa__nav{width:100%}.component-anketa .anketa__nav .pill{flex:1 1 auto;justify-content:center}}/* ---- Service picker (Eduards, 2026-09-16:"dropdown has no prices"):the native select is kept off-screen as the value store;the visible control is a field-shaped button showing the chosen service and its price, and a white card list under it with the groups as muted headings and each service as a row with its price at the right. ---------------------------- */
.component-anketa .field--select{position:relative}.component-anketa .anketa__select-native{position:absolute;inset:0;opacity:0;pointer-events:none}.component-anketa .anketa__picker{display:flex;align-items:center;gap:var(--space-2);width:100%;min-height:56px;padding:24px 44px 8px 16px;border:1px solid var(--hairline);border-radius:8px;background:var(--color-white);color:var(--color-ink);font-family:var(--font);font-size:var(--text-body);line-height:1.5;text-align:left;cursor:pointer;transition:border-color 0.2s var(--ease-osmo), box-shadow 0.2s var(--ease-osmo)}.component-anketa .anketa__picker:focus-visible, .component-anketa .anketa__picker[aria-expanded=true]{outline:0;border-color:var(--color-ink);box-shadow:0 0 0 3px rgba(34, 39, 50, 0.08)}.component-anketa .field--error .anketa__picker{border-color:var(--color-orange);box-shadow:none}.component-anketa .anketa__picker-value{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.component-anketa .anketa__picker-value.is-empty{color:var(--color-muted)}.component-anketa .anketa__picker-price{flex:none;font-size:15px;color:var(--color-muted)}.component-anketa .anketa__picker-list{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 6px);max-height:360px;overflow-y:auto;padding:8px;background:var(--color-white);border:1px solid var(--hairline);border-radius:var(--radius-card);box-shadow:0 16px 40px rgba(34, 39, 50, 0.16)}.component-anketa .anketa__picker-list[hidden]{display:none}.component-anketa .anketa__picker-group + .anketa__picker-group{margin-top:6px}.component-anketa .anketa__picker-group-name{display:block;padding:10px 12px 4px;font-size:12px;font-weight:700;letter-spacing:0;color:var(--color-muted)}.component-anketa .anketa__picker-option{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:10px 12px;border-radius:8px;cursor:pointer;font-size:15px;line-height:1.4}.component-anketa .anketa__picker-option:hover, .component-anketa .anketa__picker-option.is-active{background:var(--color-surface-muted)}.component-anketa .anketa__picker-option[aria-selected=true]{background:var(--color-surface-warm)}.component-anketa .anketa__picker-option[aria-selected=true] .anketa__picker-name{font-weight:700}.component-anketa .anketa__picker-option-price{flex:none;font-size:14px;color:var(--color-muted);white-space:nowrap}/* ---- Date picker (Eduards, 2026-09-16):field-shaped button + calendar card;weekends, holidays and past days disabled (muted, struck through by colour only), today outlined, the chosen day an orange disc. ------------ */
.component-anketa .field--date{position:relative}.component-anketa .field--date .field__label{top:9px;font-size:12px;font-weight:700;color:var(--color-ink)}.component-anketa .anketa__date{display:flex;align-items:center;gap:var(--space-2);width:100%;min-height:56px;padding:24px 16px 8px;border:1px solid var(--hairline);border-radius:8px;background:var(--color-white);color:var(--color-ink);font-family:var(--font);font-size:var(--text-body);line-height:1.5;text-align:left;cursor:pointer;transition:border-color 0.2s var(--ease-osmo), box-shadow 0.2s var(--ease-osmo)}.component-anketa .anketa__date:focus-visible, .component-anketa .anketa__date[aria-expanded=true]{outline:0;border-color:var(--color-ink);box-shadow:0 0 0 3px rgba(34, 39, 50, 0.08)}.component-anketa .field--error .anketa__date{border-color:var(--color-orange);box-shadow:none}.component-anketa .anketa__date-value{flex:1 1 auto}.component-anketa .anketa__date-value.is-empty{color:var(--color-muted)}.component-anketa .anketa__date-icon{flex:none;display:flex;width:20px;height:20px;color:var(--color-muted)}.component-anketa .anketa__date-icon svg{width:100%;height:100%}.component-anketa .anketa__cal{position:absolute;z-index:20;left:0;top:calc(100% + 6px);width:336px;max-width:100%;padding:16px;background:var(--color-white);border:1px solid var(--hairline);border-radius:var(--radius-card);box-shadow:0 16px 40px rgba(34, 39, 50, 0.16)}.component-anketa .anketa__cal[hidden]{display:none}.component-anketa .anketa__cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.component-anketa .anketa__cal-title{font-size:15px;font-weight:700}.component-anketa .anketa__cal-nav{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--hairline);border-radius:50%;background:var(--color-white);color:var(--color-ink);cursor:pointer}.component-anketa .anketa__cal-nav svg{width:16px;height:16px}.component-anketa .anketa__cal-nav:disabled{opacity:0.35;cursor:default}.component-anketa .anketa__cal-week, .component-anketa .anketa__cal-grid{display:grid;grid-template-columns:repeat(7, 1fr);gap:2px}.component-anketa .anketa__cal-week span{text-align:center;font-size:12px;font-weight:700;color:var(--color-muted);padding:6px 0}.component-anketa .anketa__cal-day{height:40px;border:0;border-radius:50%;background:none;color:var(--color-ink);font-family:var(--font);font-size:14px;font-variant-numeric:tabular-nums;cursor:pointer;transition:background-color 0.15s var(--ease-osmo)}.component-anketa .anketa__cal-day:hover:not(:disabled){background:var(--color-surface-muted)}.component-anketa .anketa__cal-day:disabled{color:var(--color-faint);cursor:default}.component-anketa .anketa__cal-day.is-today:not(.is-selected){box-shadow:inset 0 0 0 1px var(--hairline)}.component-anketa .anketa__cal-day.is-selected{background:var(--color-orange);color:var(--color-white);font-weight:700}.component-anketa .anketa__cal-day:focus-visible{outline:2px solid var(--color-orange);outline-offset:1px}.component-anketa .anketa__cal-note{margin:12px 0 0;font-size:12px;line-height:1.4;color:var(--color-muted)}/* ============================================================================ Before/after on the content well (docs/specs/well.md). Base rules = the approved home look (docs/specs/home.md §4):at >=1024px the H2 2/span5 and the intro 7/span5 on one row, 32px above the content row;the slider 2/span5 in a 16:10 frame (its ratio is fixed, so it gets shorter as the column narrows, never taller) starting on the same line as the list column 8/span4 (80px rows + pill);column 7 stays empty. <=1023px, as built before the well:heading + intro stacked in a full-width row, then the slider (4:3, full width) and the list. .ba__grid--frame = the service-page look (docs/specs/service.md §6), at the end of this file, on the same well placements:17px intro;the column 8/span4 as a flex column with space-between and the row's height (grid row stretch):96px rows at the top, the primary pill at the bottom edge. Mobile:frame 4:3 full width, rows, pill. ========================================================================== */
.component-before_after{padding-block:72px;/* The heading row, the 16:10 frame 2/span5 and the list 8/span4 are the base rules above (well.md:a list beside a slider leaves column 7 empty);only this look's own differences remain here. */}@media (max-width:767px){.component-before_after{padding-block:48px}}.component-before_after .ba__intro-row{grid-column:1/-1;margin-bottom:var(--space-4)}.component-before_after .ba__intro{margin-top:8px;color:var(--color-muted)}@media (min-width:1024px){.component-before_after{}.component-before_after .ba__grid{row-gap:var(--space-4)}.component-before_after .ba__intro-row{display:contents;margin-bottom:0}.component-before_after .ba__heading{grid-column:2/span 5;align-self:end}.component-before_after .ba__intro{grid-column:7/span 5;align-self:end;margin-top:0}}.component-before_after .ba__left{grid-column:2/span 5;align-self:start}.component-before_after .ba__pair{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--radius-card);overflow:hidden}.component-before_after .ba__pair + .ba__pair{margin-top:var(--space-3)}.component-before_after .ba__frame{position:relative;/* No-JS fallback size (§7.3:nothing hidden without JS);once index.js runs, [data-ba-slider].is-active below gives the merged pair the same ratio. 4:3 at <=1023px. */ aspect-ratio:16/10;overflow:hidden;background:var(--color-surface-muted)}.component-before_after .ba__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%;display:block}.component-before_after .ba__badge{position:absolute;top:var(--space-2);z-index:2;font-size:var(--text-sm);font-weight:700;color:var(--color-white);background:rgba(34, 39, 50, 0.55);padding:4px 10px;border-radius:var(--radius-card);line-height:1.4}.component-before_after .ba__badge--before{left:var(--space-2)}.component-before_after .ba__badge--after{right:var(--space-2)}.component-before_after .ba__handle{display:none}.component-before_after [data-ba-slider].is-active .ba__pair{display:block;position:relative;aspect-ratio:16/10}.component-before_after [data-ba-slider].is-active .ba__pair:not(.is-current){display:none}.component-before_after [data-ba-slider].is-active .ba__pair + .ba__pair{margin-top:0}.component-before_after [data-ba-slider].is-active .ba__frame{position:absolute;inset:0;aspect-ratio:auto}.component-before_after [data-ba-slider].is-active .ba__frame--after{clip-path:inset(0 0 0 50%)}.component-before_after [data-ba-slider].is-active .ba__handle{display:block;position:absolute;top:0;bottom:0;left:50%;width:3px;background:var(--color-white);border:0;padding:0;z-index:3;cursor:grab;touch-action:none;transform:translateX(-50%)}.component-before_after [data-ba-slider].is-active .ba__pair.is-dragging .ba__handle{cursor:grabbing}.component-before_after .ba__handle-grip{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:40px;height:40px;border-radius:50%;background:var(--color-white);color:var(--color-ink);border:1px solid var(--hairline);display:flex;align-items:center;justify-content:center}.component-before_after .ba__right{grid-column:8/span 4;display:flex;flex-direction:column}.component-before_after .ba__rows{display:flex;flex-direction:column}.component-before_after .ba__row{display:flex;flex-direction:column;justify-content:center;gap:4px;height:80px;text-align:left;background:none;border:0;border-bottom:1px solid var(--hairline);border-left:2px solid transparent;padding:0 16px;font-family:var(--font);color:var(--color-ink);cursor:pointer;transition:border-color 0.25s var(--ease-osmo)}.component-before_after .ba__row:first-child{border-top:1px solid var(--hairline)}.component-before_after .ba__row-name{font-size:17px;font-weight:700;transition:color 0.25s var(--ease-osmo)}.component-before_after .ba__row-caption{font-size:var(--text-sm);font-weight:400;color:var(--color-muted)}.component-before_after .ba__row.is-active{border-left-color:var(--color-orange)}.component-before_after .ba__row.is-active .ba__row-name{color:var(--color-orange)}@media (hover:hover) and (pointer:fine){.component-before_after .ba__row:not(.is-active):hover{border-left-color:var(--hairline);background:var(--color-surface-muted)}}.component-before_after .ba__cta{margin-top:var(--space-3);align-self:flex-start}@media (max-width:1023px){.component-before_after{}.component-before_after .ba__left, .component-before_after .ba__right{grid-column:1/-1}.component-before_after .ba__right{margin-top:var(--space-4)}.component-before_after .ba__frame, .component-before_after [data-ba-slider].is-active .ba__pair{aspect-ratio:4/3}}@media (max-width:767px){.component-before_after .ba__cta{align-self:stretch;justify-content:center}}@media (prefers-reduced-motion:reduce){.component-before_after .ba__row, .component-before_after .ba__row-name, .component-before_after .ba__handle-grip{transition:none}}@media (min-width:1024px){.component-before_after .ba__grid--frame .ba__intro{font-size:17px;line-height:1.5}.component-before_after .ba__grid--frame .ba__right{justify-content:space-between}.component-before_after .ba__grid--frame .ba__row{height:auto;min-height:96px}.component-before_after .ba__grid--frame .ba__cta{margin-top:var(--space-3)}}/* ============================================================================ Benefits (docs/specs/home.md §3 / docs/specs/service.md §5) on the content well (docs/specs/well.md). Two looks, keyed on the `columns` select (see index.php):- default "four":muted surface, centred heading 3/span8, four .card tiles on a nested four-track row across the well (`well` + `tracks(4)`, tiles span 1;the approved home page, frozen);- "three" (.benefits__grid--three, service pages):white surface, H2 2/span5 + 17px muted intro 7/span5 on the heading's baseline, three tracks. Tiles:hairline .card, no hover, 24px padding, 32px orange icon, title 18px/700, text 15px muted. <=1023px:the well drops (1/-1), two per row (the three variant keeps three);<=767px:stacked, one per row. The white surface of the "three" variant is set on the section through:has() below (the literal ".component-benefits{" token can't take a compound selector, so the compiled class is spelled out — the same escape hatch content_section uses). ========================================================================== */
.component-benefits{background:var(--color-surface-muted);padding-block:72px;/* .card (globals.scss) supplies the white/hairline/radius/24px-padding look;only the icon-tile layout is added here. Review feedback:these tiles aren't links, so .card's hover lift is cancelled below — no affordance should suggest they're clickable. */ /* <=1023px:the well has dropped (mixin);heading row and tile counts as built before the well:two per row, the three variant three, its heading 1/span6 and lede 7/span6. */}@media (max-width:767px){.component-benefits{padding-block:48px}}.component-benefits .benefits__intro{grid-column:3/span 8;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}.component-benefits .benefits__row{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));column-gap:var(--grid-gutter);position:relative;margin-top:var(--space-4);row-gap:var(--space-4);grid-column:2/span 10}@media (max-width:1023px){.component-benefits .benefits__row{grid-column:1/-1}}.component-benefits .benefits__tile{grid-column:span 1;display:flex;flex-direction:column;align-items:flex-start;gap:12px;cursor:default}.component-benefits .benefits__tile.card:hover{transform:none;border-color:var(--hairline)}.component-benefits .benefits__icon{display:flex;width:32px;height:32px;color:var(--color-orange)}.component-benefits .benefits__icon svg{display:block;width:100%;height:100%}.component-benefits .benefits__tile-title{font-size:18px;font-weight:700;line-height:1.3}.component-benefits .benefits__tile-text{font-size:15px;line-height:1.5;color:var(--color-muted)}.component-benefits .benefits__grid--three{}.component-benefits .benefits__grid--three .benefits__intro{display:contents}.component-benefits .benefits__grid--three .benefits__heading{grid-column:2/span 5;align-self:end;text-align:left}.component-benefits .benefits__grid--three .benefits__lede{grid-column:7/span 5;align-self:end;text-align:left;font-size:17px;line-height:1.5;color:var(--color-muted)}.component-benefits .benefits__grid--three .benefits__row{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));column-gap:var(--grid-gutter);position:relative}@media (max-width:1023px){.component-benefits .benefits__row{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));column-gap:var(--grid-gutter);position:relative}.component-benefits .benefits__grid--three .benefits__heading{grid-column:1/span 6}.component-benefits .benefits__grid--three .benefits__lede{grid-column:7/span 6}.component-benefits .benefits__grid--three .benefits__row{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));column-gap:var(--grid-gutter);position:relative}}@media (max-width:767px){.component-benefits{}.component-benefits .benefits__intro{grid-column:1/-1}.component-benefits .benefits__grid--three .benefits__heading, .component-benefits .benefits__grid--three .benefits__lede{grid-column:1/-1}.component-benefits .benefits__grid--three .benefits__lede{margin-top:8px}.component-benefits .benefits__row, .component-benefits .benefits__grid--three .benefits__row{display:grid;grid-template-columns:repeat(1, minmax(0, 1fr));column-gap:var(--grid-gutter);position:relative}}.component-benefits:has(> .benefits__grid--three){background:var(--color-white)}/* Blog article:a centred reading column (Eduards:the left-set prose under a full-width photo "looks like it should be centred"):label, H1 and prose on columns 4 to 9 (920px, prose capped at 760px), the photo one column wider each side (3 to 10) in 16:9. */
.component-blog_article{padding-top:calc(var(--header-h) + var(--space-8));padding-bottom:var(--space-12);background:var(--color-white);color:var(--color-ink)}@media (max-width:767px){.component-blog_article{padding-top:calc(var(--header-h) + var(--space-4));padding-bottom:var(--space-8)}}.component-blog_article .article__grid{row-gap:0}.component-blog_article .article__label{grid-column:4/span 6;font-size:var(--text-sm);font-weight:700;color:var(--color-muted);margin:0 0 var(--space-2)}.component-blog_article .article__title{grid-column:4/span 6;margin:0 0 var(--space-6);font-size:clamp(32px, 2vw + 14px, 56px)}.component-blog_article .article__media{grid-column:3/span 8;aspect-ratio:16/9;border-radius:var(--radius-card);overflow:hidden;background:var(--color-surface-muted);margin-bottom:var(--space-6)}.component-blog_article .article__img{width:100%;height:100%;object-fit:cover;display:block}.component-blog_article .article__body{grid-column:4/span 6;max-width:760px;font-size:var(--text-body);line-height:1.7}.component-blog_article .article__body p{margin:0 0 var(--space-2)}.component-blog_article .article__body h2{font-size:var(--text-h3);font-weight:700;line-height:1.25;margin:var(--space-6) 0 var(--space-2)}.component-blog_article .article__body h3{font-size:20px;font-weight:700;line-height:1.3;margin:var(--space-4) 0 var(--space-2)}.component-blog_article .article__body ul, .component-blog_article .article__body ol{margin:0 0 var(--space-3);padding-left:var(--space-3)}.component-blog_article .article__body ul li, .component-blog_article .article__body ol li{margin-bottom:8px}.component-blog_article .article__body strong{font-weight:700}.component-blog_article .article__body a{color:var(--color-orange);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:var(--underline-offset)}.component-blog_article .article__body figure{margin:var(--space-4) 0}.component-blog_article .article__body img{display:block;width:100%;height:auto;border-radius:var(--radius-card)}@media (max-width:1023px){.component-blog_article .article__label, .component-blog_article .article__title, .component-blog_article .article__body{grid-column:2/span 10}.component-blog_article .article__media{grid-column:1/-1}}@media (max-width:767px){.component-blog_article .article__label, .component-blog_article .article__title, .component-blog_article .article__body, .component-blog_article .article__media{grid-column:1/-1}}/* Blog list:cards on a three-track row across the content well;the photo 16:10 with the card's radius, meta 14px muted, title 20px/700, excerpt 15px muted clipped to three lines, "Lasīt rakstu →" 700 ink. */
.component-blog_list{padding-block:72px}@media (max-width:767px){.component-blog_list{padding-block:48px}}.component-blog_list .blog-list__heading{grid-column:2/span 10;margin-bottom:var(--space-4)}@media (max-width:1023px){.component-blog_list .blog-list__heading{grid-column:1/-1}}.component-blog_list .blog-list__row{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));column-gap:var(--grid-gutter);position:relative;row-gap:var(--space-3);grid-column:2/span 10}@media (max-width:1023px){.component-blog_list .blog-list__row{grid-column:1/-1}}.component-blog_list .blog-list__card{grid-column:span 1;display:flex;flex-direction:column;color:var(--color-ink);text-decoration:none;background:var(--color-white);border:1px solid var(--hairline);border-radius:var(--radius-card);overflow:hidden;transition:border-color 0.25s var(--ease-osmo)}.component-blog_list .blog-list__media{position:relative;aspect-ratio:16/10;background:var(--color-surface-muted);overflow:hidden}.component-blog_list .blog-list__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.component-blog_list .blog-list__body{display:flex;flex-direction:column;gap:8px;padding:var(--space-3)}.component-blog_list .blog-list__meta{font-size:var(--text-sm);color:var(--color-muted)}.component-blog_list .blog-list__title{font-size:20px;font-weight:700;line-height:1.3}.component-blog_list .blog-list__excerpt{font-size:15px;line-height:1.55;color:var(--color-muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}.component-blog_list .blog-list__more{margin-top:4px;font-size:var(--text-sm);font-weight:700;transition:color 0.25s var(--ease-osmo)}@media (hover:hover) and (pointer:fine){.component-blog_list .blog-list__card:hover{border-color:rgba(34, 39, 50, 0.35)}.component-blog_list .blog-list__card:hover .blog-list__more{color:var(--color-orange)}}@media (max-width:1023px){.component-blog_list .blog-list__row{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));column-gap:var(--grid-gutter);position:relative}}@media (max-width:767px){.component-blog_list .blog-list__row{display:grid;grid-template-columns:repeat(1, minmax(0, 1fr));column-gap:var(--grid-gutter);position:relative}}/* Checklist band ("Kad noderēs …", docs/specs/service.md v5 §2). Muted surface, 72px section padding (48px <=767px). Centred H2 3/span8, 32px below it two columns of rows, 2/span5 and 7/span5:a 32px orange check circle (the .check primitive, enlarged here) + 16px ink text, 20px between rows. No intro, no card, no pill. Mobile:one column. */
.component-checklist_band{background:var(--color-surface-muted);color:var(--color-ink);padding-block:72px}@media (max-width:767px){.component-checklist_band{padding-block:var(--space-6)}}.checklist__heading{grid-column:3/span 8;text-align:center;margin-bottom:var(--space-4)}.checklist__col{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px}.checklist__col--left{grid-column:2/span 5}.checklist__col--right{grid-column:7/span 5}.checklist__row{display:flex;align-items:flex-start;gap:var(--space-2)}.checklist__check{width:32px;height:32px}.checklist__check svg{width:16px;height:12px}.checklist__text{padding-top:3px;font-size:var(--text-body);line-height:1.6}@media (max-width:1023px){.checklist__heading{grid-column:1/-1}.checklist__col--left{grid-column:1/span 6}.checklist__col--right{grid-column:7/span 6}}@media (max-width:767px){.checklist__col--left, .checklist__col--right{grid-column:1/-1}.checklist__col--right{margin-top:20px}}/* Kontakti page section (docs/specs/forms.md v3 "Kontakti" §2–§4) on the content well (docs/specs/well.md):white 72px section under the ink page_top band. Facts as .cards stacked 16px apart col 2/span4, the underline form col 7/span5 (shares the .field/.field__control primitive with the anketa, globals.scss §8.9), then the 21:9 map band 2/span10 with the "Kā mūs atrast" card overlaid bottom-left. <=1023px as built before the well (facts 1/span5, form 7/span6, map 1/-1). */
.component-contact_page{background:var(--color-white);padding-block:72px;/* ---- Left:the facts, one .card each, 16px apart ------------------------ Not links, so .card's hover lift is cancelled (§0 rule 5). */ /* The two small outline buttons under the address:.btn-ghost (§2.3's ink-border, 12px-radius third action) at a compact padding. */ /* ---- Map band:21:9 (16:9 at <=767px), 12px radius, the iframe visible at once, the "Kā mūs atrast" card overlaid bottom-left;72px under the facts/form row (the page's section rhythm). ----------------------------- */}@media (max-width:767px){.component-contact_page{padding-block:48px}}.component-contact_page .cp__grid{row-gap:0}.component-contact_page .cp__facts{grid-column:2/span 4;display:flex;flex-direction:column;gap:var(--space-2);align-self:start}.component-contact_page .cp__card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;cursor:default}.component-contact_page .cp__card.card:hover{transform:none;border-color:var(--hairline)}.component-contact_page .cp__key{font-size:var(--text-sm);font-weight:700;line-height:1.4;color:var(--color-muted)}.component-contact_page .cp__value{font-size:var(--text-body);font-weight:400;line-height:1.6;color:var(--color-ink);text-decoration:none}.component-contact_page .cp__value--strong{font-weight:700}.component-contact_page .cp__value--link{display:inline-block;width:fit-content;border-bottom:1px solid var(--color-ink);line-height:1.4;padding-bottom:1px;transition:color 0.25s var(--ease-osmo), border-color 0.25s var(--ease-osmo)}@media (hover:hover) and (pointer:fine){.component-contact_page .cp__value--link:hover{color:var(--color-orange);border-color:var(--color-orange)}}.component-contact_page .cp__address-links{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-top:var(--space-1)}.component-contact_page .cp__ghost{padding:10px 16px}.component-contact_page .cp__form{grid-column:7/span 5;display:flex;flex-direction:column;gap:var(--space-4)}.component-contact_page .cp__field--full{width:100%}.component-contact_page .field{position:relative}.component-contact_page .field__error{position:static}.component-contact_page .field--error .field__error{opacity:1;transform:none}.component-contact_page .cp__consent{position:relative;display:flex;align-items:flex-start;gap:12px;cursor:pointer}.component-contact_page .cp__consent-input{appearance:none;flex:none;width:20px;height:20px;margin-top:2px;border:1.5px solid var(--color-ink);border-radius:4px;background-color:var(--color-white);cursor:pointer;transition:background-color 0.25s var(--ease-osmo), border-color 0.25s var(--ease-osmo)}.component-contact_page .cp__consent-input:checked{background-color:var(--color-orange);border-color:var(--color-orange);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8.5L6.5 12L13 4.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:12px 12px}.component-contact_page .cp__consent-text{font-size:var(--text-sm);line-height:1.5;color:var(--color-muted)}.component-contact_page .cp__consent-text p{margin:0}.component-contact_page .cp__consent-text a{color:var(--color-orange);text-decoration:underline;text-underline-offset:var(--underline-offset)}.component-contact_page .cp__consent-error.field__error{left:32px}.component-contact_page .cp__submit{align-self:flex-start}.component-contact_page .cp__submit.loading{cursor:progress;opacity:0.7}.component-contact_page .cp__submit:disabled{cursor:not-allowed}.component-contact_page .cp__status{font-size:var(--text-sm);color:var(--color-orange)}.component-contact_page .cp__status[hidden]{display:none}.component-contact_page .cp__map{position:relative;margin-top:72px;aspect-ratio:21/9;border-radius:var(--radius-card);overflow:hidden;background:var(--color-surface-muted);grid-column:2/span 10}@media (max-width:1023px){.component-contact_page .cp__map{grid-column:1/-1}}.component-contact_page .cp__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}.component-contact_page .cp__map-card{position:absolute;left:var(--space-4);bottom:var(--space-4);z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-1);max-width:min(420px, 100% - var(--space-4) * 2);cursor:default}.component-contact_page .cp__map-card.card:hover{transform:none;border-color:var(--hairline)}.component-contact_page .cp__map-title{font-size:18px;font-weight:700;line-height:1.3;letter-spacing:0}.component-contact_page .cp__map-address{font-size:var(--text-body);line-height:1.6;color:var(--color-ink)}.component-contact_page .cp__map-card .cp__address-links{margin-top:4px}@media (max-width:1023px){.component-contact_page .cp__facts{grid-column:1/span 5}.component-contact_page .cp__form{grid-column:7/span 6}}@media (max-width:767px){.component-contact_page{/* 16:9 at <=767px (~175px tall):the card would cover the whole map, so it drops below the frame (static) and the map stays visible. */}.component-contact_page .cp__facts, .component-contact_page .cp__form, .component-contact_page .cp__map{grid-column:1/-1}.component-contact_page .cp__form{margin-top:var(--space-6)}.component-contact_page .cp__map{margin-top:var(--space-6);aspect-ratio:auto;overflow:visible;background:none}.component-contact_page .cp__map iframe{position:relative;inset:auto;aspect-ratio:16/9;height:auto;border-radius:var(--radius-card);background:var(--color-surface-muted)}.component-contact_page .cp__map-card{position:static;max-width:none;margin-top:var(--space-2)}}/* SEO long-form body copy (docs/specs/service.md §9) on the content well (docs/specs/well.md). White surface, reading layout:heading 2/span3 at 24px/700, wysiwyg 5/span7 at 16px/1.6, optional pros/cons lists below it (inside the 5/span7 measure, split 50/50);<=1023px as built before the well (1/span4, 5/span8). 72px above the first and below the last instance of a run (48px <=767px);adjacent instances sit 40px apart with a hairline in the middle (20px + 1px + 20px). */
.component-content_section{padding-block:72px;background:var(--color-white);color:var(--color-ink)}@media (max-width:767px){.component-content_section{padding-block:var(--space-6)}}/* Adjacent content_sections:40px apart on a hairline. The str_replace-based "selector" token (bettrlite/inc/actions.php) only matches the literal substring ".component-content_section{", so a compound sibling selector must spell out the compiled class directly — the same escape hatch anketa/header already use for their own compound selectors. The first instance in a run is never matched by `+` below (keeps 72px above);the last is never matched by:has() below (keeps 72px below). */
.component-content_section + .component-content_section{padding-top:20px;border-top:1px solid var(--hairline)}.component-content_section:has(+ .component-content_section){padding-bottom:20px}.content-section__heading{grid-column:2/span 3;font-size:24px;font-weight:700;line-height:1.25;letter-spacing:0}.content-section__body{grid-column:5/span 7}@media (max-width:1023px){.content-section__heading{grid-column:1/span 4}.content-section__body{grid-column:5/span 8}}.content-section__wysiwyg h3{font-size:var(--text-h3);font-weight:700;line-height:1.2;margin:var(--space-6) 0 var(--space-2)}.content-section__wysiwyg h3:first-child{margin-top:0}.content-section__wysiwyg p{margin:0 0 var(--space-2);font-size:var(--text-body);line-height:1.6}.content-section__wysiwyg ol, .content-section__wysiwyg ul{margin:0 0 var(--space-3);padding-left:var(--space-3)}.content-section__wysiwyg ol li, .content-section__wysiwyg ul li{margin-bottom:8px;line-height:1.6}.content-section__wysiwyg strong{font-weight:700}.content-section__wysiwyg a{color:var(--color-orange);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:var(--underline-offset);transition:color 0.25s var(--ease-osmo)}.content-section__wysiwyg a:hover{color:var(--color-ink)}.content-section__wysiwyg table{width:100%;border-collapse:collapse;margin:0 0 var(--space-3);font-size:var(--text-body)}.content-section__wysiwyg table td, .content-section__wysiwyg table th{border:1px solid var(--hairline);padding:0.6rem 0.8rem;text-align:left;line-height:1.5;vertical-align:top}.content-section__wysiwyg table th{font-weight:700}.content-section__lists{display:grid;grid-template-columns:repeat(2, 1fr);column-gap:var(--space-4);margin-top:var(--space-4)}.content-section__list h3{margin:0 0 var(--space-2)}.content-section__list ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.content-section__list li{position:relative;padding-left:var(--space-2);line-height:1.6}.content-section__list li::before{content:"–";position:absolute;left:0;color:var(--color-muted)}@media (max-width:767px){.content-section__heading{grid-column:1/-1}.content-section__body{grid-column:1/-1;margin-top:var(--space-2)}.content-section__lists{grid-template-columns:1fr;row-gap:var(--space-3)}}/* ============================================================================ Final CTA band, v2 (docs/specs/home.md §11). Ink surface, background photo at 25% under a 75%-opaque ink scrim, 96px padding, centred 3/span8. ========================================================================== */
.component-cta_band{position:relative;background:var(--color-ink);color:var(--color-white);padding-block:96px;overflow:hidden;/* Stacked round team photos above the heading:56px, overlapping by 14px, a 2px ink ring so the edges read on the photo background. */ /* The two direct channels under the single pill:a 16px line at 85% white with the phone and the WhatsApp link underlined in white. */}@media (max-width:767px){.component-cta_band{padding-block:48px}}.component-cta_band .cta__bg{position:absolute;inset:0;z-index:0}.component-cta_band .cta__bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.45}.component-cta_band .cta__scrim{position:absolute;inset:0;background:rgba(34, 39, 50, 0.55)}.component-cta_band .cta__grid{position:relative;z-index:1}.component-cta_band .cta__inner{grid-column:3/span 8;display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-3)}.component-cta_band .cta__team{display:flex;justify-content:center;margin-bottom:var(--space-3)}.component-cta_band .cta__team-photo{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid var(--color-ink);background:var(--color-placeholder-ink);margin-left:-14px}.component-cta_band .cta__team-photo:first-child{margin-left:0}.component-cta_band .cta__heading{color:var(--color-white)}.component-cta_band .cta__text{max-width:40rem;font-size:var(--text-lede);color:rgba(255, 255, 255, 0.85)}.component-cta_band .cta__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2);margin-top:var(--space-2)}.component-cta_band .cta__alt{margin-top:var(--space-2);font-size:var(--text-body);color:rgba(255, 255, 255, 0.85)}.component-cta_band .cta__alt-link{color:var(--color-white);font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:var(--underline-offset);transition:color 0.25s var(--ease-osmo)}@media (hover:hover) and (pointer:fine){.component-cta_band .cta__alt-link:hover{color:var(--color-orange)}}.component-cta_band .cta__meta{margin-top:var(--space-3);font-size:var(--text-sm);color:rgba(255, 255, 255, 0.7)}@media (max-width:767px){.component-cta_band .cta__inner{grid-column:1/-1}.component-cta_band .cta__actions .pill{flex:1 1 auto;justify-content:center}}/* FAQ section (design-system §8.4/§4.3) on the content well (docs/specs/well.md):heading + lede col 2/span3, chevron accordion col 5/span7;<=1023px as built before the well (1/span3, 5/span8). Accordion base = .acc primitive (globals.scss). */
.component-faq{padding-block:var(--space-12)}.component-faq .faq__intro{grid-column:2/span 3;display:flex;flex-direction:column;gap:var(--space-2)}.component-faq .faq__lede{font-size:var(--text-body);line-height:1.6;color:var(--color-muted)}.component-faq .faq__list{grid-column:5/span 7}@media (max-width:1023px){.component-faq .faq__intro{grid-column:1/span 3}.component-faq .faq__list{grid-column:5/span 8}}@media (max-width:767px){.component-faq .faq__grid{row-gap:var(--space-2)}.component-faq .faq__intro{grid-column:1/-1}.component-faq .faq__list{grid-column:1/-1}}/* ============================================================================ Site footer (design-system §8.11/§4.3/§5;columns per docs/specs/chrome.md). Ink surface, 64px top padding, full-width top hairline;the content on the well (columns 2 to 11) at >=1024px. >=1024px, row 1:logo+description 2/span3, services in two columns of four 5/span4, contact key/value 9/span3. Row 2:legal bar 2/span10 with the privacy and terms links at its right (no "Uzņēmums" column). <=1023px:brand 1/span4, services 5/span5, contact row 2 and legal row 3 at 1/-1;<=767px everything stacked at 1/-1. ========================================================================== */
footer{position:relative;z-index:0}.component-footer{background:var(--color-ink);color:var(--color-white);border-top:1px solid var(--hairline-on-ink);padding-top:var(--space-8);padding-bottom:var(--space-6)}.footer__grid{row-gap:var(--space-4);grid-template-rows:auto auto;align-items:start}.footer__brand{grid-column:2/span 3;grid-row:1;display:flex;flex-direction:column;gap:var(--space-2)}.footer__logo{display:flex;align-items:center;width:fit-content;max-width:100%;color:var(--color-white);text-decoration:none}.footer__logo svg{/* The lockup scales to its column (docs/specs/chrome.md):the file's own 406x111 box at the header's 176px width (48px tall). */ display:block;max-width:min(100%, 176px);height:auto}.footer__description{font-size:var(--text-sm);line-height:1.5;max-width:32ch;opacity:0.6}.footer__col{grid-row:1}.footer__col--services{grid-column:5/span 4}.footer__services{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));column-gap:var(--grid-gutter)}.footer__label{font-size:var(--text-sm);font-weight:700;line-height:1.4;opacity:0.6;margin:0 0 var(--space-2)}.footer__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-1)}.footer__link{color:currentColor;text-decoration:none;font-size:var(--text-sm);line-height:1.5;transition:color 0.25s var(--ease-osmo)}@media (hover:hover) and (pointer:fine){.footer__link:hover{color:var(--color-orange)}}.footer__contact{grid-column:9/span 3;grid-row:1}.footer__kv{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-1)}.footer__kv li{display:flex;align-items:baseline;gap:var(--space-2)}.footer__key{min-width:96px;flex:none;font-size:var(--text-sm);opacity:0.6}.footer__value{font-size:var(--text-sm);font-weight:400;line-height:1.5;color:var(--color-white);text-decoration:none}a.footer__value{transition:color 0.25s var(--ease-osmo)}@media (hover:hover) and (pointer:fine){a.footer__value:hover{color:var(--color-orange)}}.footer__legal{grid-column:2/span 10;grid-row:2;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--hairline-on-ink)}.footer__legal-item{margin:0;font-size:var(--text-sm);line-height:1.4;opacity:0.6}.footer__legal-links{margin-left:auto;display:flex;gap:var(--space-3)}.footer__legal-link{color:currentColor;text-decoration:none;opacity:0.6;transition:color 0.25s var(--ease-osmo), opacity 0.25s var(--ease-osmo)}@media (hover:hover) and (pointer:fine){.footer__legal-link:hover{color:var(--color-orange);opacity:1}}@media (max-width:1023px){.footer__brand{grid-column:1/span 4}.footer__col--services{grid-column:5/span 5}.footer__contact{grid-column:1/-1;grid-row:2}.footer__legal{grid-column:1/-1;grid-row:3}}@media (max-width:767px){.footer__grid{row-gap:var(--space-4)}.footer__brand, .footer__col, .footer__contact, .footer__legal{grid-column:1/-1;grid-row:auto}.footer__legal{flex-direction:column;align-items:flex-start;gap:var(--space-1)}.footer__legal-links{margin-left:0;flex-direction:column;gap:var(--space-1)}}/* Gallery (docs/specs/home.md §7 / docs/specs/service.md §7) on the content well (docs/specs/well.md). White surface, intro 2/span5;uniform 4:3 tiles, 12px radius, 16px row gap on top of the shared 16px grid gutter, on a nested row across the well:four tracks (the home) or three (.gallery__row--three, the service pages), tiles span 1. <=1023px the well drops (1/-1), counts as built;<=767px two per row. Caption in the lightbox only (data-caption). */
.component-gallery{padding-block:72px}@media (max-width:767px){.component-gallery{padding-block:48px}}.component-gallery .gallery__intro{grid-column:2/span 5;display:flex;flex-direction:column;gap:8px;margin-bottom:var(--space-4)}.component-gallery .gallery__lede{color:var(--color-muted)}.component-gallery .gallery__row{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));column-gap:var(--grid-gutter);position:relative;row-gap:var(--space-2);grid-column:2/span 10}@media (max-width:1023px){.component-gallery .gallery__row{grid-column:1/-1}}.component-gallery .gallery__row--three{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));column-gap:var(--grid-gutter);position:relative}.component-gallery .gallery__tile{grid-column:span 1;margin:0;aspect-ratio:4/3;border-radius:var(--radius-card);overflow:hidden;background:var(--color-surface-muted)}.component-gallery .gallery__link{display:block;width:100%;height:100%}.component-gallery .gallery__img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.5s var(--ease-osmo)}@media (hover:hover) and (pointer:fine){.component-gallery .gallery__link:hover .gallery__img{transform:scale(1.04)}}@media (max-width:1023px){.component-gallery{}.component-gallery .gallery__intro{grid-column:1/span 6}}@media (max-width:767px){.component-gallery{}.component-gallery .gallery__intro{grid-column:1/-1}.component-gallery .gallery__row, .component-gallery .gallery__row--three{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));column-gap:var(--grid-gutter);position:relative}}@media (prefers-reduced-motion:reduce){.component-gallery .gallery__img{transition:none}}/* ============================================================================ Site header (design-system §8.1/§4.3/§7.2, docs/specs/chrome.md). An auto/1fr/auto bar:logo, centred nav, phone+CTA pills justify-end. At >=1024px the bar's content sits on the content well (logo left edge on column 2, pill cluster right edge on column 11:x = 188/1732 at 1920, 148/1292 at 1440, 135/1145 at 1280, 113/911 at 1024) via .header__bar's padding-inline;below 1024px the 2rem grid margin. <=767px:phone icon link | centred logo | burger, both side tracks 44px so the logo centres on the viewport. Always the ink surface (header/index.js adds .is-solid unconditionally);hides on scroll-down past 200px and returns on scroll-up (.is-hidden, translateY(-100%), 0.3s), pinned visible while the mobile panel is open. The mobile panel (z-index 90) opens UNDER the bar (z-index 100), so the burger stays in view and morphs into the close cross. The old `style` ACF select's other code paths stay defined below at no runtime cost, since nothing sets them any more:- .header--transparent (default class, no rule of its own):the base selector below IS the transparent look — dead now that JS always adds .is-solid. - .header--dark:always ink (same result as .is-solid). - .header--white:always white, ink content — unused. .is-page-solid (functions.php, every non-hero page) is likewise redundant with the unconditional .is-solid but harmless to leave in place. ========================================================================== */
.component-header{position:fixed;top:0;left:0;right:0;z-index:100;color:var(--color-white);background:transparent;border-bottom:1px solid transparent;transition:background-color 0.3s var(--ease-osmo), color 0.3s var(--ease-osmo), border-color 0.3s var(--ease-osmo), transform 0.3s var(--ease-osmo)}.component-header.is-hidden{transform:translateY(-100%)}.component-header.is-solid{background:var(--color-ink);border-bottom-color:var(--hairline-on-ink)}.header--dark{background:var(--color-ink)}.header--white{background:var(--color-white);color:var(--color-ink);border-bottom-color:var(--hairline)}.header--white.is-solid{background:var(--color-white);border-bottom-color:var(--hairline)}/* ---- Bar:auto/1fr/auto grid row (revised after review:the old fixed 4/span6 nav + 10/span3 end cluster overlapped on 1300-1600px desktops once the nav's own content got close to that column's width). The nav now truly centres in whatever space is left over regardless of how wide the logo or the pill cluster are, so it can never collide with either — fits at every width from 1024px up. --------------------------------------- */
.header__bar{display:grid;grid-template-columns:auto 1fr auto;column-gap:var(--space-3);align-items:center;padding-inline:var(--grid-margin);padding-block:var(--header-pad)}/* The content well (design-system §4.1, docs/specs/chrome.md):the header is fixed and viewport-wide, so its padding does what `grid-column:2 / span 10` does for a body section — one grid margin + one column + one gutter on each side puts the logo's left edge on column 2 and the pill cluster's right edge on column 11. */
@media (min-width:1024px){.header__bar{padding-inline:calc(var(--grid-margin) + (100% - 2 * var(--grid-margin) - 11 * var(--grid-gutter)) / 12 + var(--grid-gutter))}}.header__logo{grid-column:1;grid-row:1;justify-self:start;display:flex;align-items:center;overflow:visible;color:var(--color-white);text-decoration:none}.header--white .header__logo{color:var(--color-ink)}.header__logo-full{display:flex;align-items:center;overflow:visible}.header__logo-full svg{display:block;width:auto;overflow:visible}/* Sized by the wordmark's own letterforms, not the file's full viewBox (111 units tall incl. the ghost monogram;the wordmark band within it is ~32 units) — height:32px on the full lockup rendered ~9px letters, illegible. 48px full-lockup -> ~14px letters/~175px wide, the same box at every width (the wordmark-only file is gone:the ghost monogram must read on mobile too). Header height stays unchanged (--header-h);the taller box can overlap the bar's own padding, which overflow:visible above allows. */
.header__logo-full svg{height:48px}/* ---- Phone icon link (<=767px only;docs/specs/chrome.md) ------------------- Left track of the mobile bar:a 24px white line icon inside a 44x44 hit area, no text, no pill outline, no orange at rest. Hidden above 767px:there the number is the phone pill (>=1280px) or the overlay's foot. */
.header__call{display:none;grid-column:1;grid-row:1;justify-self:start;align-items:center;justify-content:center;width:44px;height:44px;color:currentColor;text-decoration:none;transition:color 0.25s var(--ease-osmo)}.header__call svg{display:block;width:24px;height:24px}@media (hover:hover) and (pointer:fine){.header__call:hover{color:var(--color-orange)}}.header__nav{grid-column:2;grid-row:1;justify-self:center;display:flex;align-items:center;justify-content:center;gap:var(--space-3)}.header__link{display:inline-flex;align-items:center;white-space:nowrap;padding:6px 0;font-family:var(--font);font-weight:400;font-size:var(--text-body);line-height:1;color:currentColor;text-decoration:none;transition:color 0.25s var(--ease-osmo)}@media (hover:hover) and (pointer:fine){.header__link:hover{color:var(--color-orange)}}.header__link.is-active{color:var(--color-orange)}/* ---- "Pakalpojumi" dropdown (design-system v2 §5):the nav link plus a 12px chevron button;a white card panel under the header bar (620px, 12px radius, hairline, soft shadow, 8px padding) with the eight services as 48px rows in two columns (orange icon, 15px/700 name, 13px muted from-price, muted hover fill) and a foot row of two links;0.2s fade. Opens on hover and on focus (CSS), the chevron toggles it and Escape closes it (header/index.js:.is-open / .is-closed). The item stretches to the bar's full control height so "top:100%" + the bar's own padding puts the panel exactly under the bar's bottom edge;that padding doubles as the hover bridge. ------------------------------------------------------------------ */
.header__nav-item--dropdown{position:relative;display:flex;align-items:center;gap:6px;align-self:stretch;min-height:var(--header-control-h)}.header__dropdown-toggle{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:0;background:none;color:currentColor;cursor:pointer;transition:color 0.25s var(--ease-osmo)}.header__chevron{display:block;transition:transform 0.25s var(--ease-osmo)}.header__dropdown{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:var(--header-pad);opacity:0;visibility:hidden;pointer-events:none;transition:opacity 0.2s var(--ease-osmo), visibility 0s linear 0.2s}.header__nav-item--dropdown:hover .header__dropdown,
.header__nav-item--dropdown:focus-within .header__dropdown,
.header__nav-item--dropdown.is-open .header__dropdown{opacity:1;visibility:visible;pointer-events:auto;transition:opacity 0.2s var(--ease-osmo), visibility 0s}.header__nav-item--dropdown.is-closed .header__dropdown{opacity:0;visibility:hidden;pointer-events:none;transition:opacity 0.2s var(--ease-osmo), visibility 0s linear 0.2s}.header__nav-item--dropdown:hover .header__chevron,
.header__nav-item--dropdown:focus-within .header__chevron,
.header__nav-item--dropdown.is-open .header__chevron{transform:rotate(180deg)}.header__nav-item--dropdown.is-closed .header__chevron{transform:none}.header__dropdown-panel{width:620px;background:var(--color-white);color:var(--color-ink);border:1px solid var(--hairline);border-radius:var(--radius-card);box-shadow:0 16px 40px rgba(34, 39, 50, 0.16);padding:8px}.header__dropdown-grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:2px 8px}.header__dropdown-link{display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 12px;border-radius:8px;color:var(--color-ink);text-decoration:none;transition:background-color 0.2s var(--ease-osmo)}.header__dropdown-icon{flex:none;display:flex;width:24px;height:24px;color:var(--color-orange)}.header__dropdown-icon svg{display:block;width:100%;height:100%}.header__dropdown-text{display:flex;flex-direction:column;gap:2px;min-width:0}.header__dropdown-name{font-size:15px;font-weight:700;line-height:1.3;white-space:nowrap}.header__dropdown-price{font-size:13px;line-height:1.2;color:var(--color-muted)}.header__dropdown-foot{display:flex;gap:var(--space-3);margin:8px 4px 0;padding:12px 8px 4px;border-top:1px solid var(--hairline)}.header__dropdown-all{font-size:14px;font-weight:700;color:var(--color-ink);text-decoration:none;transition:color 0.2s var(--ease-osmo)}@media (hover:hover) and (pointer:fine){.header__dropdown-link:hover{background:var(--color-surface-muted)}.header__dropdown-all:hover, .header__dropdown-toggle:hover{color:var(--color-orange)}}@media (prefers-reduced-motion:reduce){.header__dropdown, .header__chevron{transition:none}}/* ---- Mobile overlay sub-list:the same 8 services, indented under "Pakalpojumi" -------------------------------------------------------------- */
.header__overlay-sublist{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:0;/* Clear hierarchy (Eduards):parents 28px/700 white, children 17px/400 at 75% white, 6px apart, indented 24px. */}.header__overlay-sublist .header__overlay-sublink{font-size:17px;font-weight:400;line-height:1.4;color:rgba(255, 255, 255, 0.75);padding:2px 0}.header__end{grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;gap:var(--space-3)}.header__cta{flex-shrink:0}/* The phone:a plain number, 16px/700 white, orange on hover, never a pill (Eduards, 2026-09-15 night). */
.header__phone{color:currentColor;font-size:var(--text-body);font-weight:700;line-height:1;text-decoration:none;white-space:nowrap;transition:color 0.25s var(--ease-osmo)}@media (hover:hover) and (pointer:fine){.header__phone:hover{color:var(--color-orange)}}/* Below 1280px the number drops (nav + number + pill no longer fit);it stays reachable via the mobile panel, the footer and the sticky pill. */
@media (max-width:1279px){.header__end .header__phone{display:none}}.header__burger{display:none;grid-row:1;align-items:center;justify-content:center;flex-direction:column;gap:6px;width:44px;height:44px;background:none;border:0;cursor:pointer;color:inherit}.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:ink surface under the header bar, clip-path circle reveal from the burger's corner (circle(0) -> circle(150%), 0.6s). Links stagger in via GSAP (header/index.js, 0.05s). Phone + CTA sit in the footer, visible without scrolling. The bar stays on top (z-index 100 vs 90), so the burger morphs into the close cross in place. ------------------ */
.header__overlay{position:fixed;inset:0;z-index:90;background:var(--color-ink);color:var(--color-white);display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--header-h) + var(--space-4)) var(--grid-margin) var(--space-4);clip-path:circle(0% at calc(100% - 32px) 32px);visibility:hidden;transition:clip-path 0.6s var(--ease-osmo), visibility 0s linear 0.6s}body.nav-open .header__overlay{clip-path:circle(150% at calc(100% - 32px) 32px);visibility:visible;transition:clip-path 0.6s var(--ease-osmo), visibility 0s}@media (prefers-reduced-motion:reduce){.header__overlay{clip-path:none;opacity:0;transition:opacity 0.2s linear, visibility 0s linear 0.2s}body.nav-open .header__overlay{opacity:1;visibility:visible;transition:opacity 0.2s linear, visibility 0s}}.header__overlay-list{display:flex;flex-direction:column;gap:var(--space-3);margin:0;padding:0;list-style:none}.header__overlay-list .header__link{font-size:28px;font-weight:700;line-height:1.2;padding:2px 0}.header__overlay-list .header__overlay-sublist .header__overlay-sublink{display:flex;align-items:baseline;gap:10px;font-size:17px;font-weight:400;line-height:1.4;padding:10px 0;color:rgba(255, 255, 255, 0.75)}.header__overlay-list .header__overlay-sublist .header__overlay-sublink::before{content:"–";flex:none;color:rgba(255, 255, 255, 0.45)}.header__overlay-list{overflow-y:auto;min-height:0;padding-bottom:var(--space-4)}.header__overlay-foot{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);border-top:1px solid var(--hairline-on-ink);padding-top:var(--space-3)}@media (max-width:1023px){.header__nav, .header__end{display:none}.header__burger{display:flex;grid-column:3;justify-self:end}}/* <=767px:phone icon | logo | burger on the same auto/1fr/auto row, 16px gaps. Both side tracks are 44px wide, so the logo (justify-self:center in the middle track) centres on the viewport:at 375 its centre is x = 187.5. */
@media (max-width:767px){.header__bar{column-gap:var(--space-2)}.header__call{display:flex}.header__logo{grid-column:2;justify-self:center;min-width:0;max-width:100%}.header__logo-full svg{max-width:100%}}@media (min-width:600px){body.admin-bar .component-header, body.admin-bar .header__overlay{top:var(--wp-admin--admin-bar--height, 32px)}}/* ============================================================================ Home hero, v3 (docs/specs/home.md §1, docs/specs/well.md). Full-bleed ink-surface background photo with a left-to-right scrim;the copy sits on the content well, 2/span6 at >=1024px (1/span7 at <=1023px, 1/-1 at <=767px). A white trust strip follows directly under the band, at its bottom edge:its four items sit on a nested four-track row across the well (wrapper `well` + `tracks(4)`, items span 1, hairline dividers in the gutters), two per row at <=767px. The fixed header (position:fixed, --header-h tall) overlays the very top of this band — padding-top:var(--header-h) on the band reserves that space so the label/H1 never sit under it, same mechanism the previous build used. The spec's own min(760px,86vh)/48px figures are layered on TOP of that reserved header space, not instead of it. ========================================================================== */
.component-hero_home{position:relative;overflow:hidden;/* The copy column starts on column 2, the content anchor (well.md):column 1 stays empty as the free column of air on the left. */ /* The four items on one nested four-track row across the well:the first item starts on column 2, the last ends on column 11, the same 1rem gutter between the tracks (well.md "rows of equal cards"). At <=1023px the well drops to the full grid, the four tracks stay. */ /* Each cell carries the strip's vertical padding itself:48px above the icon, 48px below the sub line (home.md §1 v3;Eduards:32px left the strip with "almost no top padding"), so the measure holds in every cell at every width, including the 2×2 mobile grid (where one strip-level padding would leave the second row short). Grid cells stretch to the row height, so the dividers below get one consistent box. Inside the cell:icon, 10px, label, 6px, sub line, as explicit margins (the global `p + p` 16px rule must not reach the sub line). */ /* hairline between the four items (desktop only), centred in the 1rem gutter, inset 8px below the strip's top hairline and 8px above its bottom edge:never touching either outer edge */}.component-hero_home .hero-home__band{position:relative;box-sizing:border-box;display:flex;align-items:center;min-height:min(760px, 86vh);padding-top:calc(var(--header-h) + var(--space-2));padding-bottom:var(--space-4);background:var(--color-ink);color:var(--color-white);overflow:hidden}.component-hero_home .hero-home__bg{position:absolute;inset:0;z-index:0}.component-hero_home .hero-home__bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.component-hero_home .hero-home__scrim{position:absolute;inset:0;background:linear-gradient(90deg, rgba(34, 39, 50, 0.92) 0%, rgba(34, 39, 50, 0.6) 50%, rgba(34, 39, 50, 0.15) 100%)}.component-hero_home .hero-home__grid{position:relative;z-index:1;width:100%}.component-hero_home .hero-home__content{grid-column:2/span 6;display:flex;flex-direction:column;gap:var(--space-3)}.component-hero_home .hero-home__label{display:flex;align-items:center;gap:8px;font-size:var(--text-sm);font-weight:700;color:var(--color-white);margin:0}.component-hero_home .hero-home__dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--color-orange)}.component-hero_home .hero-home__heading{max-width:100%;overflow-wrap:break-word;color:var(--color-white)}.component-hero_home .hero-home__lede{max-width:46rem;color:rgba(255, 255, 255, 0.85)}.component-hero_home .hero-home__checks{list-style:none;margin:var(--space-1) 0 0;padding:0;display:flex;flex-direction:column;gap:12px}.component-hero_home .hero-home__check{display:flex;align-items:center;gap:10px;font-size:var(--text-body);color:var(--color-white)}.component-hero_home .hero-home__ctas{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-top:var(--space-2)}.component-hero_home .hero-home__trust{position:relative;z-index:1;background:var(--color-white);color:var(--color-ink);border-top:1px solid var(--hairline)}.component-hero_home .hero-home__trust-row{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));column-gap:var(--grid-gutter);position:relative;grid-column:2/span 10}@media (max-width:1023px){.component-hero_home .hero-home__trust-row{grid-column:1/-1}}.component-hero_home .hero-home__trust-item{position:relative;grid-column:span 1;display:flex;flex-direction:column;padding-block:var(--space-6)}.component-hero_home .hero-home__trust-item:not(:first-child){padding-left:var(--space-4)}.component-hero_home .hero-home__trust-item:not(:first-child)::before{content:"";position:absolute;top:var(--space-6);bottom:var(--space-6);left:calc(var(--grid-gutter) / -2);width:1px;background:var(--hairline)}.component-hero_home .hero-home__trust-icon{display:flex;width:28px;height:28px;color:var(--color-orange)}.component-hero_home .hero-home__trust-icon svg{display:block;width:100%;height:100%}.component-hero_home .hero-home__trust-label{margin:10px 0 0;font-size:18px;font-weight:700;color:var(--color-ink)}.component-hero_home .hero-home__trust-sub{margin:6px 0 0;font-size:var(--text-sm);font-weight:400;color:var(--color-muted)}@media (max-width:1023px){.component-hero_home .hero-home__content{grid-column:1/span 7}}@media (max-width:767px){.component-hero_home{/* two per row:each item spans two of the four tracks;the cells' own 32px padding sets the row spacing, so no row gap */}.component-hero_home .hero-home__band{min-height:0;padding-top:calc(var(--header-h) + var(--space-6));padding-bottom:var(--space-6)}.component-hero_home .hero-home__scrim{background:rgba(34, 39, 50, 0.85)}.component-hero_home .hero-home__content{grid-column:1/-1}.component-hero_home .hero-home__break{display:none}.component-hero_home .hero-home__lede{max-width:100%}.component-hero_home .hero-home__ctas .pill{flex:1 1 auto;justify-content:center}.component-hero_home .hero-home__trust-row{row-gap:0}.component-hero_home .hero-home__trust-item{grid-column:span 2;padding-block:var(--space-4)}.component-hero_home .hero-home__trust-item::before{display:none}.component-hero_home .hero-home__trust-item:not(:first-child){padding-left:0}}/* Service hero (docs/specs/service.md v5 §1) on the content well (docs/specs/well.md). WHITE surface under the fixed ink header (the header's height is added to the 72px section padding). Copy 2/span5 with 64px padding-right (32px at 1024 to 1279) so the text never touches the poster (the padding is on the column, the text keeps its own measure) and media 7/span5, vertically centred against each other. Copy stack gaps:H1 16 lede 24 CTA row 24 bullets (12 apart) 24 price. Media:16:9 frame, 12px radius, poster object-fit cover, a centred 72px white play circle (orange triangle) when the frame is a video link. <=1023px:media first (16:9), then the stack;<=767px the stack reorders to H1, lede, bullets, price, pills (spec:"media first, then H1, lede, bullets, pills"), everything inside the first two screens. */
.component-hero_service{background:var(--color-white);color:var(--color-ink);padding-top:calc(var(--header-h) + 72px);padding-bottom:72px}@media (max-width:767px){.component-hero_service{padding-top:calc(var(--header-h) + var(--space-4));padding-bottom:var(--space-6)}}.hero-service__grid{align-items:center}.hero-service__copy{grid-column:2/span 5;padding-right:64px;display:flex;flex-direction:column;align-items:flex-start}@media (max-width:1279px){.hero-service__copy{padding-right:32px}}.hero-service__title{margin:0 0 var(--space-2);color:var(--color-ink)}.hero-service__lede{margin:0 0 var(--space-3);font-size:18px;font-weight:400;line-height:1.5;color:var(--color-muted);text-wrap:pretty}.hero-service__actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:0 0 var(--space-3)}.hero-service__bullets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}.hero-service__bullet{display:flex;align-items:center;gap:12px;font-size:var(--text-body);line-height:1.4;color:var(--color-ink)}.hero-service__dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--color-orange)}.hero-service__from-price{margin:var(--space-3) 0 0;font-size:var(--text-sm);font-weight:700;color:var(--color-ink)}.hero-service__media{grid-column:7/span 5}.hero-service__frame{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--radius-card);overflow:hidden;background:var(--color-surface-muted);color:inherit;text-decoration:none}.hero-service__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.5s var(--ease-osmo)}.hero-service__play{position:absolute;top:50%;left:50%;width:72px;height:72px;transform:translate(-50%, -50%);border-radius:50%;background:var(--color-white);color:var(--color-orange);display:flex;align-items:center;justify-content:center;z-index:1}.hero-service__play svg{display:block;width:30px;height:30px;margin-left:3px}@media (hover:hover) and (pointer:fine){.hero-service__frame--video:hover .hero-service__poster{transform:scale(1.04)}}@media (prefers-reduced-motion:reduce){.hero-service__poster{transition:none}}@media (max-width:1023px){.hero-service__grid{row-gap:var(--space-4)}.hero-service__media{grid-column:1/-1;order:-1}.hero-service__copy{grid-column:1/-1;padding-right:0}}@media (max-width:767px){.hero-service__grid{row-gap:var(--space-3)}.hero-service__title{order:1;margin-bottom:12px}.hero-service__lede{order:2;margin-bottom:20px;font-size:var(--text-body);line-height:1.5}.hero-service__bullets{order:3;gap:10px}.hero-service__from-price{order:4;margin-top:var(--space-2)}.hero-service__actions{order:5;width:100%;margin:20px 0 0;gap:10px 12px}.hero-service__actions .pill{flex:1 1 auto;justify-content:center}}/* 404 — white surface, full viewport, vertically centred, on the content well (docs/specs/well.md:2/span6;1/span6 at <=1023px as built before the well). "404" is the page's one oversized typographic device (design-system §3.4:a single numeral at clamp(80px, 12vw, 240px), 900 weight, decorative/aria-hidden);the real heading is the readable label beside it, plus a pill home. */
.component-not_found{background:var(--color-white)}.nf__section{position:relative;min-height:100svh;display:flex;align-items:center}.nf__grid{width:100%;row-gap:var(--space-2)}.nf__code{grid-column:2/span 6;margin:0;font-weight:900;font-size:clamp(80px, 12vw, 240px);line-height:0.9;letter-spacing:var(--tracking-display);color:var(--color-ink);opacity:0.06}.nf__label{grid-column:2/span 6;grid-row:2;margin-top:calc(-1 * var(--space-8))}.nf__actions{grid-column:2/span 6;grid-row:3;margin-top:var(--space-4)}@media (max-width:1023px){.nf__code, .nf__label, .nf__actions{grid-column:1/span 6}}@media (max-width:767px){.nf__code, .nf__label, .nf__actions{grid-column:1/-1}.nf__label{margin-top:calc(-1 * var(--space-4))}}/* Page-top pattern (design-system §8.12/§4.3) on the content well (docs/specs/well.md):header offset, hairline 2/span10 (hidden on mobile, site-wide convention), muted label and display H1 col 2/span7, optional lede 2/span5 below. <=1023px as built before the well (rule 1/-1, label and title 1/span8, lede 1/span6). */
.component-page_intro{padding-top:calc(var(--header-h) + var(--space-8));padding-bottom:0}.component-page_intro .page-intro__grid{row-gap:var(--space-2)}.component-page_intro .page-intro__label{grid-column:2/span 6;grid-row:2;font-size:var(--text-sm);font-weight:700;color:var(--color-muted)}.component-page_intro .page-intro__title{grid-column:2/span 6;grid-row:3}.component-page_intro .page-intro__lede{grid-column:8/span 4;grid-row:2/span 2;align-self:end;margin-top:0;padding-bottom:6px;color:var(--color-muted)}.component-page_intro .page-intro__label ~ .page-intro__title{grid-row:3}@media (max-width:1023px){.component-page_intro .page-intro__label, .component-page_intro .page-intro__title{grid-column:1/span 8}.component-page_intro .page-intro__lede{grid-column:1/span 8;grid-row:4;align-self:auto;margin-top:var(--space-2);padding-bottom:0}}@media (max-width:767px){.component-page_intro .page-intro__grid{row-gap:var(--space-1)}.component-page_intro .page-intro__label, .component-page_intro .page-intro__title, .component-page_intro .page-intro__lede{grid-column:1/-1}}/* Page-top band (docs/specs/forms.md) on the content well (docs/specs/well.md). Ink surface under the fixed ink header, 48px padding around the content (header offset added on top, as hero_home does). Content 2/span7:label with orange dot, H1 at the H2 size, one line at 85%;the optional phone block sits in 9/span3 and aligns to the bottom of the text block. <=1023px as built before the well (1/span8, 9/span4);stacks at <=767px. */
.component-page_top{background:var(--color-ink);color:var(--color-white);padding-top:calc(var(--header-h) + var(--space-6));padding-bottom:var(--space-6)}.component-page_top .page-top__grid{align-items:end}.component-page_top .page-top__content{grid-column:2/span 7;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2)}.component-page_top .page-top__label{display:flex;align-items:center;gap:8px;font-size:var(--text-sm);font-weight:700;line-height:1.4;color:var(--color-white)}.component-page_top .page-top__dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--color-orange)}.component-page_top .page-top__heading{font-size:var(--text-h2);line-height:1.15;color:var(--color-white)}.component-page_top .page-top__text{font-size:var(--text-lede);line-height:1.5;color:rgba(255, 255, 255, 0.85)}.component-page_top .page-top__phone{grid-column:9/span 3;display:flex;flex-direction:column;align-items:flex-start;gap:4px}.component-page_top .page-top__phone-label{font-size:var(--text-sm);line-height:1.4;color:rgba(255, 255, 255, 0.7)}.component-page_top .page-top__phone-link{font-size:var(--text-lede);font-weight:700;line-height:1.3;color:var(--color-white);text-decoration:none;font-variant-numeric:tabular-nums;transition:color 0.25s var(--ease-osmo)}@media (hover:hover) and (pointer:fine){.component-page_top .page-top__phone-link:hover{color:var(--color-orange)}}@media (max-width:1023px){.component-page_top .page-top__content{grid-column:1/span 8}.component-page_top .page-top__phone{grid-column:9/span 4}}@media (max-width:767px){.component-page_top .page-top__grid{row-gap:var(--space-3)}.component-page_top .page-top__content, .component-page_top .page-top__phone{grid-column:1/-1}}@media (prefers-reduced-motion:reduce){.component-page_top .page-top__phone-link{transition:none}}/* post_content — long-form legal/editorial pages (privacy policy, terms). White surface;the body sits on the grid at columns 2 to 7 (>=1024px) with a 720px measure, left-aligned with the page_intro title above it;16px/1.7 body, H3 sub-headings, orange underlined links (design-system §3.2/§3.3/ §4.3/§8.12). No header offset here:page_intro carries it. No entrance animation — legal pages are read top to bottom, never scanned (§7.3). */
.component-post_content{padding:0 0 var(--space-12);background:var(--color-white);color:var(--color-ink)}@media (max-width:767px){.component-post_content{padding:0 0 var(--space-8)}}.post-content__inner{grid-column:2/span 6;max-width:720px}@media (max-width:1023px){.post-content__inner{grid-column:1/span 9}}@media (max-width:767px){.post-content__inner{grid-column:1/-1}}.post-content__inner h1{font-size:var(--text-h2);font-weight:700;line-height:1.2;letter-spacing:var(--tracking-display);margin:0 0 var(--space-4)}.post-content__inner h2, .post-content__inner h3{font-size:var(--text-h3);font-weight:700;line-height:1.2;margin:var(--space-6) 0 var(--space-2)}.post-content__inner p{margin:0 0 var(--space-2);font-size:var(--text-body);line-height:1.7}.post-content__inner ol, .post-content__inner ul{margin:0 0 var(--space-3);padding-left:var(--space-3)}.post-content__inner ol li, .post-content__inner ul li{margin-bottom:8px;line-height:1.7}.post-content__inner ol ol, .post-content__inner ol ul, .post-content__inner ul ol, .post-content__inner ul ul{margin:8px 0 0}.post-content__inner a{color:var(--color-orange);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:var(--underline-offset);transition:color 0.25s var(--ease-osmo)}.post-content__inner a:hover{color:var(--color-ink)}.post-content__inner table{width:100%;border-collapse:collapse;margin:0 0 var(--space-3)}.post-content__inner table td, .post-content__inner table th{border:1px solid var(--hairline);padding:0.6rem 0.8rem;text-align:left;line-height:1.5}/* Price list / "Cenrādis" (docs/specs/service.md v5 §3, revised). White surface, 72px section padding. Centred block 2/span10 (one empty column each side;full width on mobile):H2, the VAT note 14px muted under it (left), 32px, then the groups as closed card rows exactly like the old page:the .acc primitive restyled as cards (1px hairline border, 12px radius, 20px 24px padding, name 20px/700, 20px orange chevron right, 12px between cards), all closed on load, one open at a time. Open:the rows inside the card under a hairline, 52px on hairlines, name 16px/400, price 16px/700 right, tabular-nums, never orange. Footnote 13px muted under the last card. No sidebar. Mobile:three-column groups stack their prices as labelled lines. */
.component-price_list{padding-block:72px;background:var(--color-white);color:var(--color-ink)}@media (max-width:767px){.component-price_list{padding-block:var(--space-6)}}.price-list__intro{grid-column:2/span 10;display:flex;flex-direction:column;gap:8px}.price-list__note{font-size:var(--text-sm);font-weight:400;line-height:1.4;color:var(--color-muted)}.price-list__list{grid-column:2/span 10;margin-top:var(--space-4)}.price-list__cards{gap:12px}.price-list__card{border:1px solid var(--hairline);border-radius:var(--radius-card);background:var(--color-white);padding:0 var(--space-3)}.price-list__card:first-child{border-top:1px solid var(--hairline)}.price-list__card .acc__head{padding:20px 0}.price-list__card .acc__title{font-size:20px;line-height:1.2}.price-list__card .acc__icon{width:20px;height:20px;color:var(--color-orange)}.price-list__card .acc__icon svg{width:20px;height:12px}.price-list__panel-body{border-top:1px solid var(--hairline);padding-bottom:12px}.price-list__panel-body .price-list__row:last-child{border-bottom:0}.price-list__rows{display:flex;flex-direction:column}.price-list__row{display:grid;grid-template-columns:1fr minmax(72px, 128px);column-gap:var(--space-2);align-items:center;min-height:52px;padding-block:8px;border-bottom:1px solid var(--hairline)}.price-list__row--three{grid-template-columns:1fr repeat(3, minmax(72px, 128px))}.price-list__row--head{min-height:0;padding-block:12px 8px}.price-list__row--head .price-list__cell{font-size:var(--text-sm);font-weight:700;color:var(--color-muted);line-height:1.3}.price-list__name{font-size:var(--text-body);font-weight:400;line-height:1.4}.price-list__cell,
.price-list__price{font-size:var(--text-body);font-weight:700;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.price-list__footnote,
.price-list__footer-note{font-size:13px;line-height:1.5;color:var(--color-muted)}.price-list__footnote{margin-top:12px}.price-list__footer-note{margin-top:var(--space-2)}.price-list__full-link{display:inline-block;margin-top:var(--space-3);color:var(--color-orange);font-weight:700;font-size:var(--text-body);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:var(--underline-offset);transition:color 0.25s var(--ease-osmo)}@media (hover:hover) and (pointer:fine){.price-list__full-link:hover{color:var(--color-ink)}}@media (max-width:767px){.price-list__intro, .price-list__list{grid-column:1/-1}.price-list__card{padding:0 20px}.price-list__card .acc__head{padding:16px 0}.price-list__row, .price-list__row--three{grid-template-columns:1fr;row-gap:4px;padding-block:12px}.price-list__cell, .price-list__price{text-align:left}.price-list__row--head{display:none}/* Non-breaking-space escape rather than a literal trailing space:the build's CSS minify pass trims a plain trailing space out of a content string, which ran the label into the price ("Vieglie auto:15 €"). */ .price-list__row--three:not(.price-list__row--head) .price-list__cell:nth-child(2)::before{content:"Vieglie auto: ";color:var(--color-muted);font-weight:400}.price-list__row--three:not(.price-list__row--head) .price-list__cell:nth-child(3)::before{content:"Džipi, krosoveri, miniveni: ";color:var(--color-muted);font-weight:400}.price-list__row--three:not(.price-list__row--head) .price-list__cell:nth-child(4)::before{content:"Busi: ";color:var(--color-muted);font-weight:400}}/* Cenrādis page:the H1 above already says "Cenrādis" and carries the page top's padding, so the list starts right under it without its own heading block or top padding (hide_heading). */
.component-price_list:has(.price-list__grid--no-heading){padding-top:var(--space-6)}/* ============================================================================ Price teaser, new (docs/specs/home.md §5) on the content well (docs/specs/well.md). White surface. Heading+note row 1 (2/span5);table (2/span5) and the ink card (8/span4, column 7 empty) share row 2, via explicit grid-row, so the card top lines up with the table top. <=1023px as built before the well (intro and table 1/span7, card 8/span5). ========================================================================== */
.component-price_teaser{padding-block:72px}@media (max-width:767px){.component-price_teaser{padding-block:48px}}.component-price_teaser .pt__grid{row-gap:var(--space-4)}.component-price_teaser .pt__intro{grid-column:2/span 5;grid-row:1;display:flex;flex-direction:column;gap:8px}.component-price_teaser .pt__note{font-size:var(--text-sm);font-weight:400;color:var(--color-muted)}.component-price_teaser .pt__table-col{grid-column:2/span 5;grid-row:2}.component-price_teaser .pt__table{display:flex;flex-direction:column}.component-price_teaser .pt__row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);height:56px;border-bottom:1px solid var(--hairline)}.component-price_teaser .pt__row:first-child{border-top:1px solid var(--hairline)}.component-price_teaser .pt__name{font-size:var(--text-body);font-weight:400}.component-price_teaser .pt__price{font-size:var(--text-body);font-weight:700;color:var(--color-ink);white-space:nowrap}.component-price_teaser .pt__link{display:inline-block;margin-top:var(--space-3);color:var(--color-orange);font-weight:700;text-decoration:underline;text-underline-offset:var(--underline-offset)}@media (hover:hover) and (pointer:fine){.component-price_teaser .pt__link:hover{color:var(--color-ink)}}.component-price_teaser .pt__card{grid-column:8/span 4;grid-row:2;background:var(--color-ink);color:var(--color-white);border-radius:var(--radius-card);padding:var(--space-4);display:flex;flex-direction:column;gap:12px;height:fit-content}.component-price_teaser .pt__card-title{font-size:22px;font-weight:700;line-height:1.25;color:var(--color-white)}.component-price_teaser .pt__card-text{font-size:15px;line-height:1.5;color:rgba(255, 255, 255, 0.85)}.component-price_teaser .pt__card-pill{width:100%;margin-top:8px}.component-price_teaser .pt__card-phone-row{margin-top:4px;display:flex;align-items:baseline;gap:8px}.component-price_teaser .pt__card-phone-label{font-size:var(--text-sm);color:rgba(255, 255, 255, 0.7)}.component-price_teaser .pt__card-phone{font-size:var(--text-body);font-weight:700;color:var(--color-white);text-decoration:none}.component-price_teaser .pt__card-hours{font-size:var(--text-sm);color:rgba(255, 255, 255, 0.7)}@media (max-width:1023px){.component-price_teaser .pt__intro, .component-price_teaser .pt__table-col{grid-column:1/span 7}.component-price_teaser .pt__card{grid-column:8/span 5}}@media (max-width:767px){.component-price_teaser .pt__intro, .component-price_teaser .pt__table-col, .component-price_teaser .pt__card{grid-column:1/-1}.component-price_teaser .pt__intro{grid-row:1}.component-price_teaser .pt__table-col{grid-row:2}.component-price_teaser .pt__card{grid-row:3}}/* Process row (docs/specs/service.md §4) on the content well (docs/specs/well.md). Muted surface, 72px section padding (48px <=767px). Heading 2/span5, 32px above the row. Steps on a nested N-track row across the well (`well` + `tracks(5)`, the count from --step-count, 1rem gutter), one hairline through the centre of the 32px orange discs;20px disc -> label;label 17px/700 (two lines allowed), description 14px muted 8px below. <=1023px as built before the well:heading 1/span6, the row 1/-1 with its 24px gap. <=767px:the steps stack, disc left and text right, a vertical hairline joining the discs. The section's own hairlines (service pages) stay full-bleed. .process__grid--home = the frozen home-page look (docs/specs/home.md §6, approved as built):48px heading gap, 40px discs on a hairline at their top edge, --text-h3 labels 32px below the disc. .process__grid--service = the service pages:the warm light surface (--color-surface-warm) between Cenrādis and the reasons row, same sizes. */
.process__grid{background:var(--color-surface-muted);padding-block:72px}@media (max-width:767px){.process__grid{padding-block:48px}}.process__intro{grid-column:2/span 5;display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-4)}.process__lede{color:var(--color-muted)}.process__row{display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));column-gap:var(--grid-gutter);position:relative;grid-template-columns:repeat(var(--step-count, 5), minmax(0, 1fr));grid-column:2/span 10}@media (max-width:1023px){.process__row{grid-column:1/-1}}/* <=1023px:the well has dropped (mixin);heading and gap as built before the well. */
@media (max-width:1023px){.process__intro{grid-column:1/span 6}.process__row{column-gap:var(--space-3)}}.process__hairline{position:absolute;top:16px;left:0;right:0;height:1px;background:var(--hairline);z-index:0}.process__step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start}.process__disc{width:32px;height:32px;flex:none;border-radius:50%;background:var(--color-orange);color:var(--color-white);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--text-sm);line-height:1}.process__body{margin-top:20px}.process__label{font-size:17px;font-weight:700;line-height:1.3}.process__desc{margin-top:8px;font-size:var(--text-sm);font-weight:400;line-height:1.5;color:var(--color-muted)}@media (max-width:767px){.process__intro{grid-column:1/-1}.process__row{grid-template-columns:1fr;row-gap:var(--space-3)}.process__hairline{display:none}.process__step{display:grid;grid-template-columns:32px 1fr;column-gap:var(--space-2);align-items:start}.process__step::before{content:"";position:absolute;left:16px;top:16px;bottom:calc(-1 * var(--space-3));width:1px;background:var(--hairline);z-index:-1}.process__step:last-child::before{display:none}.process__body{margin-top:5px}}.process__grid--home{}.process__grid--home .process__intro{margin-bottom:var(--space-6)}.process__grid--home .process__row{padding-top:var(--space-3)}.process__grid--home .process__hairline{top:var(--space-3)}.process__grid--home .process__disc{width:40px;height:40px;line-height:1.6}.process__grid--home .process__body{margin-top:0}.process__grid--home .process__label{margin-top:var(--space-4);font-size:var(--text-h3);font-weight:700;line-height:1.2;text-wrap:balance}.process__grid--home .process__desc{font-size:var(--text-sm);font-weight:400;line-height:1.4}@media (max-width:767px){.process__grid--home .process__row{row-gap:var(--space-4);padding-top:0}.process__grid--home .process__step{display:flex}.process__grid--home .process__step::before{display:none}.process__grid--home .process__body{margin-top:0}}.process__grid--service{background:var(--color-surface-warm)}/* ============================================================================ "3 iemesli, lai izvēlētos …" (docs/specs/service.md v5 §5) on the content well (docs/specs/well.md). Left 2/span5 with 64px padding-right (32px at 1024 to 1279;on the column, the text keeps its own measure):two-line H2, 17px muted intro, three numbered rows (orange numeral 28px/900 in a 48px column, title 18px/700, text 15px muted, 24px between rows). Right 7/span5:the before/after slider, 16:10, 12px radius, PIRMS/PĒC badges, seam handle;dot pager under the frame for several pairs. Rows and frame top-aligned. <=1023px as built:heading, intro, frame (4:3), rows. Surface:WHITE. The spec says muted, but the reviews band that follows it on every service page (and on page 63) is the frozen muted `reviews` component, and two muted bands in a row is a design-system §13 rule broken;white keeps the alternation (process hairlines -> white -> muted reviews -> ink stats) without touching `reviews`. ========================================================================== */
.component-reasons{background:var(--color-white);color:var(--color-ink);padding-block:72px}@media (max-width:767px){.component-reasons{padding-block:48px}}.component-reasons .rs__grid{align-items:start}.component-reasons .rs__copy{grid-column:2/span 5;padding-right:64px}@media (max-width:1279px){.component-reasons .rs__copy{padding-right:32px}}.component-reasons .rs__intro{margin-top:var(--space-2);font-size:17px;line-height:1.5;color:var(--color-muted)}.component-reasons .rs__list{list-style:none;margin:var(--space-4) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}.component-reasons .rs__row{display:grid;grid-template-columns:48px 1fr;align-items:start}.component-reasons .rs__num{font-size:28px;font-weight:900;line-height:23px;color:var(--color-orange);letter-spacing:var(--tracking-display)}.component-reasons .rs__title{font-size:18px;font-weight:700;line-height:1.3;text-wrap:balance}.component-reasons .rs__text{margin-top:4px;font-size:15px;line-height:1.5;color:var(--color-muted)}.component-reasons .rs__media{grid-column:7/span 5}.component-reasons .rs__pair{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--radius-card);overflow:hidden}.component-reasons .rs__pair + .rs__pair{margin-top:var(--space-2)}.component-reasons .rs__frame{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--color-surface-muted)}.component-reasons .rs__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%;display:block}.component-reasons .rs__badge{position:absolute;top:var(--space-2);z-index:2;font-size:var(--text-sm);font-weight:700;color:var(--color-white);background:rgba(34, 39, 50, 0.55);padding:4px 10px;border-radius:var(--radius-card);line-height:1.4}.component-reasons .rs__badge--before{left:var(--space-2)}.component-reasons .rs__badge--after{right:var(--space-2)}.component-reasons .rs__handle{display:none}.component-reasons [data-rs-slider].is-active .rs__pair{display:block;position:relative;aspect-ratio:16/10}.component-reasons [data-rs-slider].is-active .rs__pair:not(.is-current){display:none}.component-reasons [data-rs-slider].is-active .rs__pair + .rs__pair{margin-top:0}.component-reasons [data-rs-slider].is-active .rs__frame{position:absolute;inset:0;aspect-ratio:auto}.component-reasons [data-rs-slider].is-active .rs__frame--after{clip-path:inset(0 0 0 50%)}.component-reasons [data-rs-slider].is-active .rs__handle{display:block;position:absolute;top:0;bottom:0;left:50%;width:3px;background:var(--color-white);border:0;padding:0;z-index:3;cursor:grab;touch-action:none;transform:translateX(-50%)}.component-reasons [data-rs-slider].is-active .rs__pair.is-dragging .rs__handle{cursor:grabbing}.component-reasons .rs__handle-grip{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:40px;height:40px;border-radius:50%;background:var(--color-white);color:var(--color-ink);border:1px solid var(--hairline);display:flex;align-items:center;justify-content:center}.component-reasons .rs__dots{display:flex;justify-content:center;gap:4px;margin-top:12px}.component-reasons .rs__dot{width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center}.component-reasons .rs__dot::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--hairline);transition:background-color 0.25s var(--ease-osmo)}.component-reasons .rs__dot.is-active::before{background:var(--color-orange)}@media (hover:hover) and (pointer:fine){.component-reasons .rs__dot:not(.is-active):hover::before{background:var(--color-muted)}}@media (max-width:1023px){.component-reasons{/* stacked:heading, intro, frame, rows (spec §5 mobile order);the copy column (and its padding) is gone, its children are grid items */}.component-reasons .rs__copy{display:contents;padding-right:0}.component-reasons .rs__heading{grid-column:1/-1;order:1}.component-reasons .rs__intro{grid-column:1/-1;order:2;margin-top:8px}.component-reasons .rs__media{grid-column:1/-1;order:3;margin-top:var(--space-4)}.component-reasons .rs__list{grid-column:1/-1;order:4;margin-top:var(--space-4)}}@media (max-width:767px){.component-reasons .rs__frame, .component-reasons [data-rs-slider].is-active .rs__pair{aspect-ratio:4/3}}@media (prefers-reduced-motion:reduce){.component-reasons .rs__dot::before, .component-reasons .rs__handle-grip{transition:none}}/* Reviews (docs/specs/home.md §8 / docs/specs/service.md §8) on the content well (docs/specs/well.md). Muted surface, heading 2/span5. ONE layout on every page:a nested three-track row across the well (`well` + `tracks(3)`, cards span 1, 16px gutter and row gap, equal heights per row from the grid's own stretch;an orphan row left-aligns), one card per row on mobile;<=1023px the well drops (1/-1), still three per row. Card:white .card, 72x72 rounded-square thumbnail top-left with the five orange stars beside it, quote 16px/400 ink, name (700) and date (muted) 14px on the bottom row. No hover:the cards are not links. */
.component-reviews{background:var(--color-surface-muted);padding-block:72px;/* .card (globals.scss) supplies the white/hairline/radius/24px-padding look;its fine-pointer hover lift is cancelled here. */}@media (max-width:767px){.component-reviews{padding-block:48px}}.component-reviews .reviews__intro{grid-column:2/span 5;margin-bottom:var(--space-4)}.component-reviews .reviews__row{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));column-gap:var(--grid-gutter);position:relative;row-gap:var(--space-2);grid-column:2/span 10}@media (max-width:1023px){.component-reviews .reviews__row{grid-column:1/-1}}.component-reviews .reviews__card{grid-column:span 1;display:flex;flex-direction:column;gap:var(--space-2);cursor:default;transition:none}.component-reviews .reviews__card.card:hover{transform:none;border-color:var(--hairline)}.component-reviews .reviews__head{display:flex;align-items:center;gap:var(--space-2)}.component-reviews .reviews__thumb{flex:none;width:72px;height:72px;border-radius:var(--radius-card);overflow:hidden;background:var(--color-surface-muted)}.component-reviews .reviews__thumb img{display:block;width:100%;height:100%;object-fit:cover}.component-reviews .reviews__rating{display:flex;gap:4px}.component-reviews .reviews__star{width:16px;height:16px;color:var(--hairline);display:flex}.component-reviews .reviews__star.is-filled{color:var(--color-orange)}.component-reviews .reviews__quote{margin:0}.component-reviews .reviews__quote p{font-size:var(--text-body);font-weight:400;line-height:1.6;color:var(--color-ink)}.component-reviews .reviews__who{margin-top:auto;display:flex;align-items:baseline;gap:4px;font-size:var(--text-sm)}.component-reviews .reviews__name{font-weight:700;color:var(--color-ink)}.component-reviews .reviews__date{font-weight:400;color:var(--color-muted)}@media (max-width:1023px){.component-reviews{}.component-reviews .reviews__intro{grid-column:1/span 6}}@media (max-width:767px){.component-reviews{}.component-reviews .reviews__intro{grid-column:1/-1}.component-reviews .reviews__row{display:grid;grid-template-columns:repeat(1, minmax(0, 1fr));column-gap:var(--grid-gutter);position:relative}}/* ============================================================================ Services overview, v3 (Eduards' reference, 2026-09-15 night):no photos. Heading 2/span5 (optional fact line 7/span5);the services as hairline card ROWS on a nested two-track grid across the content well (`well` + `tracks(2)`), 16px gaps:icon | name | from-price | arrow, 72px tall. <=1023px:the well drops (1/-1), still two per row;<=767px one per row. ========================================================================== */
.component-services_overview{padding-block:72px}@media (max-width:767px){.component-services_overview{padding-block:48px}}.component-services_overview .services__heading{grid-column:2/span 5;align-self:end}.component-services_overview .services__lede{grid-column:7/span 5;align-self:end;font-size:17px;line-height:1.5;color:var(--color-muted)}.component-services_overview .services__cards{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));column-gap:var(--grid-gutter);position:relative;margin-top:var(--space-4);row-gap:var(--space-2);grid-column:2/span 10}.component-services_overview .services__cards:first-child{margin-top:0}@media (max-width:1023px){.component-services_overview .services__cards{grid-column:1/-1}}.component-services_overview .services__card{grid-column:span 1;display:flex;align-items:center;gap:var(--space-2);min-height:72px;padding:20px var(--space-3);color:var(--color-ink);text-decoration:none;background:var(--color-white);border:1px solid var(--hairline);border-radius:var(--radius-card);transition:border-color 0.25s var(--ease-osmo)}.component-services_overview .services__card-icon{flex:none;display:flex;width:24px;height:24px;color:var(--color-orange)}.component-services_overview .services__card-icon svg{display:block;width:100%;height:100%}.component-services_overview .services__card-text{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}.component-services_overview .services__card-title{min-width:0;font-size:18px;font-weight:700;line-height:1.3}.component-services_overview .services__card-price{flex:none;font-size:15px;line-height:1;color:var(--color-muted);white-space:nowrap}.component-services_overview .services__card-arrow{flex:none;display:flex;width:20px;height:20px;color:var(--color-ink);transition:transform 0.25s var(--ease-osmo), color 0.25s var(--ease-osmo)}.component-services_overview .services__card-arrow svg{display:block}@media (hover:hover) and (pointer:fine){.component-services_overview .services__card:hover{border-color:rgba(34, 39, 50, 0.35)}.component-services_overview .services__card:hover .services__card-arrow{transform:translateX(4px);color:var(--color-orange)}}@media (max-width:1023px){.component-services_overview .services__heading{grid-column:1/span 6}.component-services_overview .services__lede{grid-column:7/span 6}}@media (max-width:767px){.component-services_overview{}.component-services_overview .services__heading, .component-services_overview .services__lede{grid-column:1/-1;align-self:auto}.component-services_overview .services__lede{margin-top:8px}.component-services_overview .services__cards{display:grid;grid-template-columns:repeat(1, minmax(0, 1fr));column-gap:var(--grid-gutter);position:relative;row-gap:12px}.component-services_overview .services__card{min-height:64px;padding:16px 20px}.component-services_overview .services__card-text{flex-direction:column;align-items:flex-start;gap:4px}.component-services_overview .services__card-title{font-size:17px}.component-services_overview .services__card-price{font-size:14px}}@media (prefers-reduced-motion:reduce){.component-services_overview .services__card, .component-services_overview .services__card-arrow{transition:none}}/* ============================================================================ Stats band (design-system §8.8/§4.3/§6/§7.2) on the content well (docs/specs/well.md). Ink surface, full-bleed photo at 30% ink scrim, two figures 2/span3 and 5/span3 (1/span3 and 4/span3 at <=1023px, as built before the well), 16px figure->caption. Section padding 72px (48px <=767px) per docs/specs/service.md v5 §7 (the band's only page use is the service pages;the home never carried it). ========================================================================== */
.component-stats_band{position:relative;overflow:hidden;background:var(--color-ink);color:var(--color-white);padding-block:72px}@media (max-width:767px){.component-stats_band{padding-block:var(--space-6)}}.component-stats_band .stats__media{position:absolute;inset:0;z-index:0}.component-stats_band .stats__img{width:100%;height:100%;object-fit:cover}.component-stats_band .stats__scrim{position:absolute;inset:0;background:rgba(34, 39, 50, 0.3)}.component-stats_band .stats__grid{position:relative;z-index:1}.component-stats_band .stats__stat{display:flex;flex-direction:column}.component-stats_band .stats__stat:nth-child(1){grid-column:2/span 3}.component-stats_band .stats__stat:nth-child(2){grid-column:5/span 3}@media (max-width:1023px){.component-stats_band .stats__stat:nth-child(1){grid-column:1/span 3}.component-stats_band .stats__stat:nth-child(2){grid-column:4/span 3}}.component-stats_band .stats__figure{font-size:var(--text-stat);line-height:1}.component-stats_band .stats__caption{margin-top:var(--space-2);opacity:0.85}@media (max-width:767px){.component-stats_band .stats__stat:nth-child(1), .component-stats_band .stats__stat:nth-child(2){grid-column:span 2}.component-stats_band .stats__stat:nth-child(2){grid-column:3/span 2}}/* ============================================================================ Story/about band, v2 (docs/specs/home.md §9) on the content well (docs/specs/well.md). Ink surface, photo 2/span5 (4:3, capped so the band stays ~640px tall at 1920), text 8/span4 (column 7 empty), photo+text vertically centred as a pair. <=1023px as built before the well. ========================================================================== */
.component-story_band{background:var(--color-ink);color:var(--color-white);padding-block:72px}@media (max-width:767px){.component-story_band{padding-block:48px}}.component-story_band .story__grid{align-items:center}.component-story_band .story__media{grid-column:2/span 5;position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:var(--radius-card);background:var(--color-placeholder-ink)}.component-story_band .story__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.component-story_band .story__content{grid-column:8/span 4;display:flex;flex-direction:column;gap:var(--space-3)}.component-story_band .story__text{font-size:var(--text-body);line-height:1.6;color:rgba(255, 255, 255, 0.85)}.component-story_band .story__text p + p{margin-top:var(--space-2)}.component-story_band .story__quote{margin:0;padding-left:var(--space-3);border-left:2px solid var(--color-orange)}.component-story_band .story__quote p{font-size:20px;font-weight:700;line-height:1.35;color:var(--color-white);margin:0}.component-story_band .story__caption{display:block;margin-top:8px;font-style:normal;font-size:var(--text-sm);color:rgba(255, 255, 255, 0.7)}.component-story_band .story__link{width:fit-content;color:var(--color-white);text-decoration:none;font-weight:700;transition:color 0.25s var(--ease-osmo)}@media (hover:hover) and (pointer:fine){.component-story_band .story__link:hover{text-decoration:underline;text-underline-offset:var(--underline-offset)}}@media (max-width:1023px){.component-story_band .story__media{grid-column:1/span 5}.component-story_band .story__content{grid-column:6/span 7}}@media (max-width:767px){.component-story_band .story__media, .component-story_band .story__content{grid-column:1/-1}.component-story_band .story__content{margin-top:var(--space-4)}}/* Internal style guide (/stils/, #admin only). Not part of the public design language — just enough structure to make every token/primitive checkable in one scroll. */
.component-styleguide{padding-block:var(--space-12);background:var(--color-white);color:var(--color-ink)}.sg{row-gap:var(--space-12)}.sg__section{grid-column:1/-1;display:flex;flex-direction:column;gap:var(--space-4)}.sg__hint{font-size:var(--text-sm);color:var(--color-muted)}.sg__swatches{display:grid;grid-template-columns:repeat(4, 1fr);gap:var(--space-2)}@media (max-width:767px){.sg__swatches{grid-template-columns:repeat(2, 1fr)}}.sg__swatch{height:120px;border-radius:var(--radius-card);border:1px solid var(--hairline);display:flex;flex-direction:column;justify-content:flex-end;padding:var(--space-2);font-size:var(--text-sm)}.sg__swatch--ink{color:var(--color-ink)}.sg__swatch--white{color:var(--color-white)}.sg__swatch-name{font-weight:700;display:block}.sg__swatch-hex{opacity:0.7;display:block}.sg__type-row{border-top:1px solid var(--hairline);padding-top:var(--space-2);display:flex;flex-direction:column;gap:8px}.sg__type-label{font-size:var(--text-sm);font-weight:700;color:var(--color-muted)}.sg__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}.sg__form{display:grid;grid-template-columns:repeat(3, 1fr);gap:var(--space-3);max-width:60rem}@media (max-width:767px){.sg__form{grid-template-columns:1fr}}.sg__surfaces{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}@media (max-width:767px){.sg__surfaces{grid-template-columns:1fr}}.sg__surface{padding:var(--space-4);border-radius:var(--radius-card);display:flex;align-items:center;justify-content:center}.sg__section--flush{margin-inline:calc(var(--grid-margin) * -1);padding-inline:var(--grid-margin)}.sg__row--animate{align-items:flex-start;gap:var(--space-4)}.sg__demo{display:flex;flex-direction:column;gap:8px;width:160px}.sg__demo-label{font-size:var(--text-sm);font-weight:700;color:var(--color-muted)}.sg__count{margin:0}.sg__count--manual{margin-top:var(--space-2)}.sg__logos{display:grid;grid-template-columns:repeat(2, 1fr);gap:var(--space-4)}@media (max-width:767px){.sg__logos{grid-template-columns:1fr}}.sg__logo-pair{display:flex;flex-direction:column;gap:var(--space-1)}.sg__logo-tiles{display:flex;gap:var(--space-2)}.sg__logo-tile{flex:1;height:120px;border-radius:var(--radius-card);display:flex;align-items:center;justify-content:center}.sg__logo-tile svg{height:48px;width:auto}.sg__logo-tile--white{background:var(--color-white);color:var(--color-ink);border:1px solid var(--hairline)}.sg__logo-tile--ink{background:var(--color-ink);color:var(--color-white)}.sg__logo-name{font-size:var(--text-sm);color:var(--color-muted);margin:0}/* Thank-you page (/paldies/, docs/specs/forms.md v3 "Paldies"):one dark full-height scene. Ink surface, background photo (object-fit:cover) under an ink scrim at .82 (.88 flat on mobile), running under the fixed ink header (padding-top:--header-h reserves the header's own height, so the scene below is at least 100svh - header). Centred column 4/span6 (2/span10 at <=1023px, full width on mobile), text centred, vertically centred, 96px padding (48px at <=767px, as the home cta_band does):check circle, H1, lede, one pill. */
.component-thanks{position:relative;overflow:hidden;background:var(--color-ink);color:var(--color-white);padding-top:var(--header-h)}.component-thanks .thanks__bg{position:absolute;inset:0;z-index:0;background:var(--color-placeholder-ink)}.component-thanks .thanks__bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.component-thanks .thanks__scrim{position:absolute;inset:0;background:rgba(34, 39, 50, 0.82)}.component-thanks .thanks__scene{position:relative;z-index:1;box-sizing:border-box;min-height:calc(100svh - var(--header-h));display:flex;align-items:center;padding-block:96px}.component-thanks .thanks__grid{width:100%}.component-thanks .thanks__content{grid-column:4/span 6;display:flex;flex-direction:column;align-items:center;text-align:center}.component-thanks .thanks__check{width:72px;height:72px}.component-thanks .thanks__check svg{width:38px;height:28px}.component-thanks .thanks__heading{margin-top:var(--space-4);color:var(--color-white)}.component-thanks .thanks__lede{margin-top:var(--space-2);max-width:40rem;color:rgba(255, 255, 255, 0.85)}.component-thanks .thanks__actions{display:flex;justify-content:center;margin-top:40px}@media (max-width:1023px){.component-thanks .thanks__content{grid-column:2/span 10}}@media (max-width:767px){.component-thanks{}.component-thanks .thanks__scrim{background:rgba(34, 39, 50, 0.88)}.component-thanks .thanks__scene{padding-block:var(--space-6)}.component-thanks .thanks__content{grid-column:1/-1}}/* ============================================================================ Theme style.scss (compiled LAST, after all components). Component base + the .js reveal-gate + the mobile sticky CTA bar. ========================================================================== */
/* ---- Component base --------------------------------------------------------- Every builder section renders as <section class="component component-X">. Sections own their backgrounds;<main> stays opaque so nothing shows through gaps. */
.component:not(.component-header){position:relative}main{background:var(--color-white);/* Empty-page fix (no builder components yet):a sane minimum keeps skeleton pages from collapsing the fixed header onto the footer. */ min-height:calc(100svh - 320px)}.component:empty{display:none}/* ============================================================================ Reveal gate, part 2 of 3 (design-system §7.3:"nothing is hidden without JavaScript"). header.php's inline script swaps html.no-js -> html.js the instant it runs, BEFORE any stylesheet, so a no-JS visitor always sees full content. Under html.js a [data-animate] element is hidden until it carries data-animate-visible, which is set by exactly two things:header.php's pre-paint pass (everything at or above the fold, tagged before the first frame is drawn, so on-screen content is visible from first paint and never animates) and theme index.js (a below-the-fold element, the moment its scroll reveal starts;the tween's own inline opacity carries the fade). Nothing removes the attribute, so nothing that was visible is ever hidden again. The tween's from-state is inline, so this rule never fights it. ========================================================================== */
.js [data-animate]:not([data-animate-visible]){opacity:0}@media (prefers-reduced-motion:reduce){.js [data-animate]{opacity:1 !important;transform:none !important}}/* ============================================================================ Mobile sticky CTA (parts/sticky-cta.php;design-system v2 §5). <=767px, single service pages only:ONE floating "Pieteikties" pill, no bar, no background, fixed 16px above the bottom edge inside the grid margins. Hidden before JS via the same .js gate the reveal system uses;theme index.js's initStickyCta() lifts it and drives the slide-up with GSAP yPercent from a clean slate (never a plain-CSS transform:GSAP would misread a percentage transform as pixels and stack on it). No-JS visitors always see the pill. ========================================================================== */
.sticky-cta{display:none}@media (max-width:767px){.sticky-cta{display:block;position:fixed;left:var(--grid-margin);right:var(--grid-margin);bottom:var(--space-2);z-index:80;pointer-events:none}}.sticky-cta__btn{pointer-events:auto;display:flex;width:100%;justify-content:center;box-shadow:0 8px 24px rgba(34, 39, 50, 0.25)}body.nav-open .sticky-cta{visibility:hidden !important}@media (max-width:767px){.js .sticky-cta{visibility:hidden}}@media (max-width:767px){body.has-sticky-cta{padding-bottom:80px}}