/* Inter v20 (Google Fonts build via Fontsource 5.2.8, OFL), served from our own domain instead of fonts.googleapis.com:
   no request to Google before the page can render, and no visitor IP sent to Google (GDPR). Same files, same look. */
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/inter/inter-cyrillic-ext-wght-normal.251d36f2b5a6.woff2") format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/inter/inter-cyrillic-wght-normal.de93fdc85e3d.woff2") format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/inter/inter-latin-ext-wght-normal.1ad231aac0a8.woff2") format('woff2');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:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/inter/inter-latin-wght-normal.260c81a4759b.woff2") format('woff2');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}
/* Additions for the live site (navigation, language menu, forms, content pages). Design tokens live in site.css. */
.envbar{position:fixed;left:0;right:0;bottom:0;z-index:300;background:#B42318;color:#fff;font:600 12px/1 Inter,sans-serif;text-align:center;padding:6px 8px;letter-spacing:.02em}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;opacity:0}
.consent{font-size:12.5px;color:var(--muted);margin:10px 0 0;line-height:1.45}
.consent a{color:inherit}
.ferr{color:#B42318;font-size:14px;margin:10px 0 0}
.cform .done,.box .done{text-align:center;padding:24px 8px}
.cform .done .ok,.box .done .ok{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;background:var(--ink);color:#fff;font-size:24px}
button[disabled]{opacity:.6;cursor:progress}

/* language menu */
.lngw{position:relative}
.lngw ul{display:none;position:absolute;right:0;top:calc(100% + 10px);margin:0;padding:6px;list-style:none;background:#fff;border-radius:12px;box-shadow:var(--shadow);min-width:150px;z-index:120}
.lngw.open ul{display:block}
.lngw ul a{display:block;padding:9px 12px;border-radius:8px;color:var(--ink)!important;font-size:14px}
.lngw ul a:hover,.lngw ul a[aria-current]{background:var(--paper)}
#nav nav .mlang,#nav nav .mcont{display:none}

/* mobile menu. Up to 1240px: the LV/RU desktop menu does not fit in one line below ~1160px (EN ~1080px),
   so tablets and small laptops get the menu button instead of a menu wrapping onto two lines */
@media (min-width:1081px) and (max-width:1240px){
  #nav nav{display:none}.burger{display:block;background:none;border:0;color:inherit;padding:4px}
  #nav .aux .callme{display:none}
}
@media (max-width:1240px){
  /* desktop menu is hidden, so nothing pushed the right-hand group (languages, CTA, menu button) to the right edge */
  #nav .aux{margin-left:auto}
  /* backdrop-filter on the solid header makes it the containing block of the fixed menu, so the menu was squeezed
     into the 64px header and never appeared once the page was scrolled (and always on pages with a solid header) */
  #nav.open{background:#fff!important;color:var(--ink);backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  #nav.open .lgw{display:none}#nav.open .lgb{display:block}
  #nav.open nav{display:flex;flex-direction:column;position:fixed;left:0;right:0;top:var(--navh,64px);bottom:0;background:#fff;padding:24px 28px;gap:0;margin:0;overflow:auto;z-index:110}
  #nav.open nav a{color:var(--ink)!important;font-size:20px;font-weight:500;padding:10px 0;border-bottom:1px solid var(--line)}
  /* language switch at the top of the mobile menu */
  #nav.open nav .mlang{display:flex;gap:4px;background:var(--paper);border-radius:999px;padding:4px;margin:0 0 8px;flex:none}
  #nav.open nav .mlang a{flex:1;text-align:center;border:0;padding:10px 0;font-size:15px;font-weight:500;border-radius:999px;color:var(--muted)!important}
  #nav.open nav .mlang a.on{background:#fff;color:var(--ink)!important;font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.12)}
  /* contacts at the bottom of the mobile menu */
  #nav.open nav .mcont{display:block;margin-top:8px;flex:none}
  #nav.open nav .mcont a{display:flex;align-items:center;gap:14px;border:0;padding:7px 0;font-size:17px}
  #nav.open nav .mcont svg{flex:none;color:var(--muted)}
  #nav.open nav .mcont span{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere}
  #nav.open nav .mcont small{font-size:13px;font-weight:400;color:var(--muted)}
  #nav.open .aux a:not(.btn),#nav.open .aux button{color:var(--ink)!important} /* not the CTA: dark text on a dark button */
  body.menu-open{overflow:hidden}
}
@media (max-width:820px){#nav .aux .lngw{display:none}#nav.open .aux .lngw{display:block}}

/* content pages */
.pagetop{padding-top:150px}
.wrap.narrow{max-width:820px}
.article .cover{border-radius:var(--r-lg);margin:40px 0}
.prose{font-size:18px;line-height:1.7;color:var(--ink2)}
.prose h2{font-size:28px;margin:48px 0 12px}
.prose figure{margin:32px 0}.prose figure img{border-radius:var(--r-md)}
.prose figcaption{font-size:14px;color:var(--muted);margin-top:8px}
.prose blockquote{margin:32px 0;padding-left:20px;border-left:3px solid var(--ink);font-size:20px;color:var(--ink)}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.post{text-decoration:none;color:inherit}.post img{border-radius:var(--r-md);aspect-ratio:8/5;object-fit:cover;width:100%;margin-bottom:14px}
.post .date{font-size:13px;color:var(--muted)}.post h2{font-size:22px;margin:6px 0 8px}.post p{color:var(--muted);margin:0}
@media (max-width:820px){.posts{grid-template-columns:1fr}.pagetop{padding-top:110px}}
.lvonly{display:none!important}
html.lv .lvonly{display:block!important}
.tw td p,.tw th p{margin:0}
/* "No exact match / Didn't find the one?" card in the catalogue: keep a gap between the text and the button */
.custom{gap:24px}
/* Multi-column catalogue: the grey panel has the size of a model photo, the button is inside it.
   When the panel is alone in its row (no results, or 3/6/9 models), it becomes a low full-width strip: text left, button right */
@media (min-width:561px){
  .custom{align-self:start;aspect-ratio:16/10;padding:32px;gap:16px}
  .custom .btn{line-height:normal}
  .custom.solo{grid-column:1/-1;aspect-ratio:auto;flex-direction:row;align-items:center;gap:20px 40px;padding:28px 32px}
  .custom.solo>div:first-child{max-width:640px}
  .custom.solo .btn{align-self:center!important;flex:none}
}
@media (min-width:561px) and (max-width:820px){.custom{padding:20px 22px;gap:12px}.custom h3{font-size:19px}.custom p{font-size:14px;margin-top:6px}}

/* staging bar: link to the deployed commit */
.envbar a{color:#fff;text-decoration:underline;text-underline-offset:2px}
@media (max-width:560px){.envbar:has(a) .envnote{display:none}}

/* Phones: catalogue filters as one row "Filters + sort" and a bottom sheet (includes/catalogue_filters.html) */
.mfil,.mbar{display:none}
@media (max-width:560px){
  #homes:not(.pagetop){padding-top:48px} /* home page only: the catalogue page needs room for the fixed header */
  #homes .head{margin-bottom:16px}
  #homes .head .lead,#homes .chips,#homes .bar{display:none}
  .mfil{display:flex;gap:8px;margin-bottom:10px}
  .mfil .sel{flex:1;min-width:0;padding:12px 30px 12px 14px;background-position:right 12px center}
  #m-open{flex:none;display:flex;align-items:center;justify-content:center;gap:6px;background-image:none;padding-right:14px;color:var(--ink);font-weight:600}
  .mbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 14px;font-size:14px;color:var(--muted);margin-bottom:20px}
  .mbar button{background:none;border:0;padding:0;font:inherit;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
  .mbar button+button{margin-left:14px}
}
.fsheet{position:fixed;inset:0;z-index:400}
.fsheet[hidden]{display:none}
.fs-bg{position:absolute;inset:0;background:rgba(0,0,0,.4)}
.fs-panel{position:absolute;left:0;right:0;bottom:0;max-height:88vh;display:flex;flex-direction:column;background:#fff;border-radius:20px 20px 0 0;padding:20px 20px calc(20px + env(safe-area-inset-bottom))}
.fs-head{display:flex;align-items:center;gap:16px}
.fs-head b{font-size:20px;letter-spacing:-.02em;margin-right:auto}
.fs-reset{background:none;border:0;padding:0;font:inherit;font-size:15px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.fs-x{background:none;border:0;padding:0 2px;font-size:30px;line-height:1;color:var(--ink);cursor:pointer}
.fs-body{overflow:auto;margin:0 -20px;padding:0 20px 4px}
.fs-g{font-size:13px;color:var(--muted);margin:18px 0 8px}
.fs-o{display:flex;flex-wrap:wrap;gap:8px}
.fs-o .chip{padding:11px 16px;font-size:15px}
.fs-go{width:100%;margin-top:20px;flex:none}
html.fs-lock{overflow:hidden}

/* Phones: whole card opens the model, so no separate "View model" link; "Show N more" sits closer to the cards */
@media (max-width:560px){
  #c-grid .card .ca .more{display:none}
  #c-grid .card .ca{justify-content:flex-end}
  #c-more{margin-top:32px}
}

}

/* Configurator price bar: "+ VAT" is a <small> so phones can show it smaller; desktop looks as before */
#cfgbar .tt b small{font:inherit;color:inherit}
.wa{transition:transform .2s,bottom .35s}
/* Phones (#cfgbar: model.css loads after this file): two rows – "Your <model> ··· price" and a full-width "Get my offer"; WhatsApp moves above the bar */
@media (max-width:560px){
  #cfgbar .in{flex-wrap:wrap;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  #cfgbar .tt{flex:1 1 100%;min-width:0;display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13px}
  #cfgbar .tt b{display:inline;flex:none;font-size:21px;white-space:nowrap}
  #cfgbar .tt b small{font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0}
  #cfgbar .btn{flex:1 1 100%;padding:14px;font-size:16px}
  body.cfg-on .wa{bottom:136px;width:48px;height:48px;right:16px}
}

/* Stats: a value with Latvia/other tokens ([lv]23[/lv]) becomes a <span> inside <b>, and the label rule
   (".kpis span" – small grey text) shrank it. Keep such spans looking like the number. */
.kpis b span,.stats b span,.cstats b span{font-size:inherit;color:inherit;margin:0}

/* Language switch in the mobile menu only where the header has none (site.css hides #nav .aux .lsw at <=900px) */
@media (min-width:901px){#nav.open nav .mlang{display:none}}

/* Section rhythm (spacing audit 11.11).
   1. Phones: sections had 96px top + 96px bottom, i.e. ~192px of empty space at every joint (~2000px on the home page).
      Home and catalogue sections 64px, model page sections 64px (were 72px) -> ~130px between blocks everywhere. */
@media (max-width:560px){
  .sec{padding-bottom:64px}.sec:not(.pagetop){padding-top:64px}   /* .pagetop keeps room for the fixed header */
  section.msec{padding-top:64px;padding-bottom:64px}   /* section.msec: model.css loads after this file */
}
/* 2. "Stays" and "Price" share the paper background, so their paddings added up (204-236px on tablet/desktop) */
#stays{padding-bottom:40px}
#stays + #quote{padding-top:56px}
@media (max-width:560px){#stays{padding-bottom:24px}#stays + #quote{padding-top:40px}}
/* 3. "Factory" -> "Blog": same white background with only a thin line between -> half the top padding of the blog */
#blog{padding-top:56px}
@media (max-width:820px){#blog{padding-top:48px}}
@media (max-width:560px){#blog{padding-top:32px}}

/* Tap targets on touch screens (audit 11.11): bigger invisible hit areas, same look.
   Either an invisible ::before layer (no part in layout) or padding cancelled by an equal negative margin,
   so nothing moves on screen. ::before because .more already uses :after for its arrow. */
@media (max-width:1240px){
  /* menu button: 22x28 -> 44x44 around the same icon */
  #nav .burger{position:relative}
  #nav .burger::before{content:"";position:absolute;inset:-8px -11px} /* invisible layer: 22x28 -> 44x44, icon stays put */
}
@media (max-width:820px){
  /* hero finder: the whole cell (caption + value) opens the list, not only the 18px value line */
  .finder select{padding:calc(6px + 18.6px + 2px) 14px 10px;margin:calc(-6px - 18.6px) -14px -10px;width:calc(100% + 28px);position:relative} /* starts 4px below the cell top: hero buttons sit right above it */
  /* FAQ: the whole question row is tappable (padding moved from <details> into <summary>) */
  details{padding:0}
  summary{padding:26px 0}
  details[open]{padding-bottom:26px}
  details[open] summary{padding-bottom:0}
  /* footer: link rows are 8px apart, so +4px each side (20 -> 28px) without overlapping the neighbours */
  footer .cols a{padding:4px 0;margin:-4px 0 4px}
  footer .bot a{display:inline-block;padding:0 4px;margin:0 -4px} /* this line wraps with no gap between rows (RU): wider only, not taller; languages are also in the menu */
  footer .bot .lswf a{margin-left:6px}
  /* small text links: breadcrumbs, "All articles", "The process in detail", "Real houses", catalogue links */
  /* invisible layer around the link (does not take part in layout, so own margins stay as they are) */
  .crumbs a,.more,.real-link,.mbar button{position:relative}
  .crumbs a::before,.more::before,.real-link::before,.mbar button::before{content:"";position:absolute;inset:-10px 0}
  .crumbs a::before{inset:-14px -4px}
  .mbar button::before{inset:-9px 0}
}