/* Progresyvūs projektai — v10 "Nuo brėžinio iki pastato". Tokens below are the single source; DESIGN.md explains roles. */
@font-face{font-family:'Sora';src:url('assets/fonts/sora-latin.woff2') format('woff2');font-weight:100 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Sora';src:url('assets/fonts/sora-latinext.woff2') format('woff2');font-weight:100 800;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:'Albert Sans';src:url('assets/fonts/albertsans-latin.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Albert Sans';src:url('assets/fonts/albertsans-latinext.woff2') format('woff2');font-weight:100 900;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:'Reddit Mono';src:url('assets/fonts/redditmono-latin.woff2') format('woff2');font-weight:200 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Reddit Mono';src:url('assets/fonts/redditmono-latinext.woff2') format('woff2');font-weight:200 900;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}

@property --rise{syntax:'<percentage>';inherits:false;initial-value:125%}
@property --fill{syntax:'<number>';inherits:true;initial-value:1}
@property --p1{syntax:'<number>';inherits:true;initial-value:1}
@property --p2{syntax:'<number>';inherits:true;initial-value:1}
@property --p3{syntax:'<number>';inherits:true;initial-value:1}
@property --p4{syntax:'<number>';inherits:true;initial-value:1}
@property --sweep{syntax:'<percentage>';inherits:false;initial-value:0%}

:root{
  --paper:#eef1ef;--paper-2:#e2e8e5;--sheet:#fff;--mineral:#dce5e1;
  --ink:#18242a;--ink-2:#4b5a60;--rule:rgba(24,36,42,.22);
  --night:#111a1e;--night-2:#1b272c;--on-night:#e9efec;--on-night-2:#9fb2ac;
  --red:#d33124;--red-ink:#b8261b;--red-deep:#8e1c13;
  --f-display:'Sora','Albert Sans',Arial,sans-serif;--f-text:'Albert Sans',Arial,sans-serif;--f-mono:'Reddit Mono',ui-monospace,monospace;
  --gut:clamp(16px,4vw,64px);--maxw:1560px;--frame:clamp(8px,.9vw,14px);--hh:88px;
  --sec:clamp(96px,11vw,176px);
  /* motion tokens (docs/PREMIUM_MOTION.md §2): one set for the whole site */
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-out-soft:cubic-bezier(.25,1,.5,1);--ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-pen:cubic-bezier(.45,.05,.2,1);   /* a drafting pen: steady stroke, soft start and stop */
  --t-micro:280ms;--t-text:950ms;--t-media:1200ms;--t-scene:1600ms;--step-line:110ms;--step-item:80ms;
  --ease:var(--ease-out);--draw-ease:var(--ease-pen);
  --v:0;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hh) + 16px)}
html.smooth{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--f-text);overflow-x:clip}
body.modal-open{overflow:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3,p,figure,ol,ul,dl,dd{margin:0}
ol,ul{padding:0;list-style:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
::selection{background:var(--red);color:#fff}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:fixed;left:16px;top:10px;z-index:100;background:var(--ink);color:var(--paper);padding:12px 16px;transform:translateY(-200%)}
.skip:focus-visible{transform:none}
.ico{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--ease)}
.direction-left{transform:rotate(180deg)}.direction-up{transform:rotate(-90deg)}.direction-down{transform:rotate(90deg)}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s}
::view-transition-group(cover){animation-duration:.7s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}

/* ---------- type: Sora display in sentence case, Albert Sans text, Reddit Mono indices ---------- */
h1,h2,.display{font-family:var(--f-display);font-weight:640;line-height:1.08;letter-spacing:-.045em;text-wrap:balance}
h2{font-size:clamp(2.6rem,5.6vw,5.8rem)}
h3{font-family:var(--f-display);font-weight:600;line-height:1.15;letter-spacing:-.025em}
.lead{font-size:clamp(1.2rem,1.65vw,1.6rem);line-height:1.42}
.idx{font:500 .78rem/1 var(--f-mono);letter-spacing:.02em;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(40px,5vw,80px)}

/* Drafted headings: construction guides run across the column, the contour is drawn, then the letters fill with mass. */
.draft{position:relative;color:color-mix(in oklab,currentColor calc(var(--fill)*100%),transparent);-webkit-text-stroke:calc((1 - var(--fill))*1px) currentColor}
.draft::before,.draft::after{content:'';position:absolute;left:-.08em;right:-.08em;height:1px;background:currentColor;opacity:0;transform-origin:0 50%;pointer-events:none}
.draft::before{top:-.18em}.draft::after{bottom:-.2em}
@supports not (color:color-mix(in oklab,red 50%,blue)){.draft{color:inherit;-webkit-text-stroke:0}}
html.js .draft:not(.is-drafted){--fill:0}
html.js .draft:not(.is-drafted)::before,html.js .draft:not(.is-drafted)::after{opacity:0}
.draft.is-drafted{animation:fill .575s var(--ease) .21s backwards}  /* ×0.5 (user, 18 Oct 2026) */
.draft.is-drafted::before{animation:guide .85s var(--draw-ease) both}
.draft.is-drafted::after{animation:guide .85s var(--draw-ease) .06s both}
@keyframes fill{from{--fill:0}to{--fill:1}}
@keyframes guide{0%{opacity:.5;transform:scaleX(0)}42%{opacity:.5;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}
html.js:not(.ready) .draft:not(.is-drafted){animation:fs-fill 1ms 2.6s both}
@keyframes fs-fill{to{--fill:1}}

/* ---------- drawing-photo frames ---------- */
.drw{position:relative;overflow:hidden;aspect-ratio:var(--ar,3/2);background:var(--drw-bg,var(--paper-2));--drw-line:var(--ink);--sw:1.4;isolation:isolate}
.drw>img,.drw>.lines{position:absolute;inset:0;width:100%;height:100%;transform:translateY(var(--py,0px)) scale(calc(var(--ps,1)*var(--hs,1)));transition:transform .75s var(--ease-out-soft),filter .7s var(--ease-out),opacity .6s var(--ease-out)}
.drw>img{object-fit:cover;object-position:50% 50%}
.drw>.lines{fill:none;stroke:var(--drw-line);stroke-width:var(--sw);stroke-linecap:butt;opacity:0;pointer-events:none;z-index:1}
.drw .lines path{stroke-dasharray:1 1;stroke-dashoffset:0}
/* v11 drawing: the layers an architect draws, in order (--at start, --dur pen time; × --k, the hero draws slower).
   Styling uses stroke/fill-opacity, so `opacity` stays free for showing and hiding layers. */
.drw .lines .dgr{--at:0s;--dur:.7s;stroke:var(--red);stroke-width:calc(var(--sw)*1.2)}
.drw .lines .dg{--at:.05s;--dur:.8s;stroke-width:calc(var(--sw)*.5);stroke-opacity:.45}
.drw .lines .da{--at:.2s;--dur:.7s;stroke-width:calc(var(--sw)*.55);stroke-opacity:.6}
.drw .lines .db{--at:.3s;--dur:.45s;stroke-width:calc(var(--sw)*.75);stroke-opacity:.8}
.drw .lines .l1{--at:.25s;--dur:.9s;stroke-width:calc(var(--sw)*1.5)}
.drw .lines .dv{--at:.5s;--dur:.7s;stroke-width:calc(var(--sw)*.6);stroke-opacity:.55}
.drw .lines .l2{--at:.45s;--dur:.85s}
.drw .lines .dz{--at:.9s;--dur:.4s;stroke-width:calc(var(--sw)*.55);stroke-opacity:.75}
.drw .lines .l3{--at:.85s;--dur:.5s;stroke-width:calc(var(--sw)*.5);stroke-opacity:.6}
.drw .lines .dl{fill:var(--drw-line);stroke:none;font:600 17px var(--f-mono);text-anchor:middle;fill-opacity:.85}
html.js .drw:not(.is-built):not(.is-drafting)>.lines .dl{opacity:0}
html.js .drw:not(.is-built)>.lines{opacity:1}
html.js .drw:not(.is-built):not(.is-drafting)>.lines path{stroke-dashoffset:1}
html.js .drw:not(.is-built)>img{-webkit-mask-image:linear-gradient(to top,#000 calc(var(--rise) - 22%),transparent var(--rise));mask-image:linear-gradient(to top,#000 calc(var(--rise) - 22%),transparent var(--rise));filter:grayscale(1) contrast(.92) brightness(1.06)}
html.js .drw:not(.is-built):not(.is-drafting)>img{--rise:-4%}
.drw.is-drafting>.lines path{animation:draw calc(var(--dur,.9s)*var(--k,1)) var(--draw-ease) calc(var(--at,0s)*var(--k,1)) both}
.drw.is-drafting>.lines .dl{animation:fade .4s var(--ease-out) calc(.55s*var(--k,1)) both}
.drw.is-drafting>.lines{animation:lines-out .8s ease 1.8s both}
.drw.is-drafting>img{animation:rise 1.15s var(--ease-out) 1.05s both,develop 1.4s ease 1.2s both}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes rise{from{--rise:-4%}to{--rise:125%}}
@keyframes develop{from{filter:grayscale(1) contrast(.92) brightness(1.06)}to{filter:grayscale(0) contrast(1) brightness(1)}}
@keyframes lines-out{from{opacity:1}to{opacity:0}}
/* Project cover: the built photograph is shown at once (it is also the View Transition target); its drawing traces over it. */
html.js .drw.cover:not(.is-built)>img{-webkit-mask-image:none;mask-image:none;filter:none;animation:none}
.drw.cover.is-drafting>img{animation:none}
/* After construction the drawing hides under the photograph; scroll speed and the pointer bring it back in red pencil. */
.drw.is-built>.lines{stroke:var(--red);opacity:calc(var(--v)*.85);transition:opacity .25s linear}
html.js:not(.ready) .drw:not(.is-built)>img{animation:fs-rise 1ms 2.6s both}
html.js:not(.ready) .drw:not(.is-built)>.lines{animation:fs-hide 1ms 2.6s both}
@keyframes fs-rise{to{--rise:125%;filter:none}}
@keyframes fs-hide{to{opacity:0}}
@media (hover:hover) and (pointer:fine){
  .xray:hover .drw.is-built>.lines,.xray:focus-visible .drw.is-built>.lines{opacity:1}
  .xray:hover .drw.is-built>.lines path,.xray:focus-visible .drw.is-built>.lines path{animation:draw .8s var(--draw-ease) both}
  .xray:hover .drw.is-built>.lines path{animation-delay:calc(var(--at,0s)*.5)}
  .xray:hover .drw>*{--hs:1.04}
  .xray:hover .drw.is-built>img{filter:brightness(.8) saturate(.8)}
}

/* ---------- buttons and links: buttons stay in place; a fill sweeps across them ---------- */
.btn{--fill-c:var(--red);--fill-t:#fff;position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:14px;min-height:50px;padding:14px 24px;border-radius:999px;font:600 .95rem/1 var(--f-text);letter-spacing:.01em;white-space:nowrap;background:var(--ink);color:var(--paper);transition:color .25s var(--ease)}
.btn::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--fill-c);clip-path:inset(0 calc(100% - var(--sweep)) 0 0 round 999px);transition:--sweep .55s var(--ease)}
.btn-paper{background:var(--paper);color:var(--ink)}
.btn-ink{background:var(--ink);color:var(--paper)}
@media (hover:hover){.btn:hover::before{--sweep:100%}.btn:hover{color:var(--fill-t);transition:color .2s var(--ease) .22s}.btn:hover .ico{transform:translateX(4px)}}
.btn:focus-visible::before{--sweep:100%}.btn:focus-visible{color:var(--fill-t);transition:color .2s var(--ease) .22s}
.btn:active{scale:.98}
.btn-round{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--ink);color:var(--paper);transition:background .3s}
.btn-round:disabled{background:var(--paper-2);color:var(--ink-2);cursor:default}
@media (hover:hover){.btn-round:not(:disabled):hover{background:var(--red)}}
.btn-round:active{scale:.96}
/* Dimension-line link: an underline with end ticks, like a measured length on a drawing. */
.link,.link-label{position:relative;display:inline-flex;align-items:center;gap:10px;font-weight:600;padding:8px 0 12px;white-space:nowrap}
.link::before,.link-label::before{content:'';position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor;opacity:.45;transition:opacity .3s,background .3s}
.link::after,.link-label::after{content:'';position:absolute;left:0;right:0;bottom:0;height:9px;border-inline:1px solid currentColor;opacity:.45;transform:scaleY(.55);transform-origin:50% 100%;transition:transform .45s var(--ease-out-soft),opacity .3s}
@media (hover:hover){
  .link:hover::before,a:hover .link-label::before{opacity:1;background:var(--red)}
  .link:hover::after,a:hover .link-label::after{opacity:1;transform:scaleY(1.25)}
  .link:hover .ico,a:hover .link-label .ico{transform:translateX(4px)}
}

/* ---------- header ---------- */
.header{position:sticky;top:0;z-index:40;background:var(--paper);transition:transform .5s var(--ease)}
.header.is-hidden{transform:translateY(-100%)}
/* all header text on one baseline (user rule 2026-10-04): logo wordmark (its last line sits on the image's bottom edge),
   links, the button label and the menu label; the single line itself is centred in the bar */
.header-inner{height:var(--hh);display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:0 24px}
.brand{flex:0 1 auto;min-width:0;display:inline-block;font-size:0;line-height:0;--lh:clamp(58px,4.2vw,64px);--lb:.36}  /* big logo (user rule 25.10.2026: ≥ 52 px on desktop, measured on the mark) */
/* the logo is one line (user, 5 Oct 2026). An image's baseline is its bottom edge, so it is lowered by the distance
   from its bottom to its wordmark's baseline (--lb of its height): the header text then stands on the letters' line */
.brand img{display:inline-block;height:var(--lh);width:auto;vertical-align:calc(var(--lh)*var(--lb)*-1)}  /* inline: the global img{display:block} would cancel vertical-align */
.nav{display:flex;align-items:baseline;gap:clamp(18px,2.4vw,36px);font-weight:600;font-size:.95rem}
.nav>a:not(.btn){position:relative;padding:10px 0}
.nav>a:not(.btn)::after{content:'';position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--red);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease)}
.nav>a:not(.btn):hover::after,.nav>a[aria-current]::after{transform:scaleX(1)}
.nav .btn{min-height:44px;padding:12px 20px}
.menu-toggle{align-items:baseline;gap:.55em;min-height:44px;padding:0 0 0 .4em;font-weight:600;font-size:.95rem;color:inherit}
/* the two lines meet in a cross (user rule 2026-10-04, as on Aigesa): each path turns about its own centre */
/* Header (user rule 25.10.2026, every site: «я уже 100 раз писал не делать такой маленький логотип и кашу из элементов в хедере»):
   at every width the bar holds only the big logo and «Meniu»; links, LT|EN, phone and socials live in the menu sheet. */
.menu-toggle{display:inline-flex}
.nav{position:fixed;inset:var(--hh) 0 0;z-index:39;background:var(--paper);flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:24px var(--gut) 40px;font-size:1rem;overflow-y:auto;visibility:hidden;opacity:0;transform:translateY(-12px);transition:opacity .35s var(--ease),transform .5s var(--ease),visibility 0s .5s}
.nav.is-open{visibility:visible;opacity:1;transform:none;transition:opacity .35s var(--ease),transform .5s var(--ease)}
.nav>a:not(.btn){font-family:var(--f-display);font-weight:600;font-size:clamp(2.2rem,7vw,3.4rem);letter-spacing:-.045em;line-height:1.1;padding:14px 0}
.nav>a:not(.btn)::after{display:none}
.nav .btn{margin-top:28px;align-self:flex-start;min-height:52px}
.ic-menu{width:26px;height:26px;align-self:center;flex:none}
.ic-menu path{transform-box:fill-box;transform-origin:center;transition:transform .5s var(--ease-in-out)}
.menu-toggle[aria-expanded=true] .mb-a{transform:translateY(4px) rotate(45deg)}
.menu-toggle[aria-expanded=true] .mb-b{transform:translateY(-4px) rotate(-45deg)}
.mb-l{display:inline-grid}
.mb-l>span{grid-area:1/1;transition:opacity .3s var(--ease-out),transform .45s var(--ease-out)}
.mb-close{opacity:0;transform:translateY(.5em)}
.menu-toggle[aria-expanded=true] .mb-open{opacity:0;transform:translateY(-.5em)}
.menu-toggle[aria-expanded=true] .mb-close{opacity:1;transform:none}

/* ---------- hero ---------- */
.hero{position:relative;padding:0 var(--frame)}
.hero-stage{--drw-bg:var(--night);--drw-line:var(--on-night);height:max(560px,min(calc(100svh - var(--hh) - var(--frame)),1060px));aspect-ratio:auto;border-radius:2px}
.hero-stage>img{object-position:50% 50%}
.hero-shade{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(95% 70% at 0% 100%,rgba(8,13,15,.62),rgba(8,13,15,.3) 45%,transparent 72%)}  /* only under the text block, bottom left */
.hero-copy{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;flex-direction:column;align-items:flex-start;padding-bottom:clamp(32px,3.6vw,60px);color:var(--paper);pointer-events:none}
.hero-copy a{pointer-events:auto}
.hero-title{font-size:clamp(3rem,8.6vw,10.6rem);font-weight:700;line-height:1;letter-spacing:-.055em;text-wrap:nowrap;margin-left:-.04em}
.ht-line{display:block;white-space:nowrap}
/* v10a: the offer is read first — larger copy */
.hero-lede{max-width:30em;font-size:clamp(1rem,1.15vw,1.15rem);line-height:1.5;font-weight:500;color:#fff}
.hero-act{display:flex;align-items:center;flex-wrap:wrap;gap:16px clamp(24px,2.6vw,40px);margin-top:clamp(22px,2.4vw,38px)}

.hero-caption{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;margin-bottom:clamp(12px,1.2vw,20px);color:var(--paper);transition:color .3s}
.hero-caption span{font-family:var(--f-display);font-weight:600;font-size:1.05rem;letter-spacing:-.02em;line-height:1.1}
.hero-caption small{font:500 .74rem/1.3 var(--f-mono);color:rgba(238,241,239,.8)}
.hero-caption:hover span{text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:5px}

/* intro: ≤2 s, accelerated by any input */
html.js .hero:not(.is-built) .ht-line{font-weight:100}
/* v10a intro: the pen draws on calc paper, the red ground line runs out, then the photograph rises from it */
.hero-stage>.lines{background-image:linear-gradient(rgba(233,239,236,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(233,239,236,.045) 1px,transparent 1px);background-size:56px 56px}
.hero-stage::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;z-index:2;background:var(--red);transform-origin:0 50%;transform:scaleX(0);opacity:0;pointer-events:none}
.hero.is-drafting .hero-stage::after{animation:ground-line 2.6s var(--ease-pen) .1s both}
@keyframes ground-line{0%{transform:scaleX(0);opacity:1}38%{transform:scaleX(1);opacity:1}78%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
.hero-stage.is-rising>img{animation:rise 1.15s var(--ease-out) both,develop 1.4s ease .2s both}
.hero-stage.is-rising>.lines{animation:lines-out .55s var(--ease-out) .3s both}
html.js .hero:not(.is-built) .hero-lede,html.js .hero:not(.is-built) .hero-act{opacity:0;transform:translateY(18px)}
.hero.is-drafting .ht-line{animation:mass 1.35s var(--ease) .5s both}
.hero.is-drafting .ht-line+.ht-line{animation-delay:.62s}
.hero.is-drafting .hero-lede{animation:enter .9s var(--ease) 1.05s both}
.hero.is-drafting .hero-act{animation:enter .9s var(--ease) 1.25s both}
.hero-stage{--k:1.35}
.hero-stage>.lines .dg{stroke-opacity:.22}  /* fewer construction lines over the headline (judge v11) */
.hero.is-drafting .hero-stage:not(.is-rising)>img{animation:none}
.hero.is-drafting .hero-stage:not(.is-rising)>.lines{animation:none}
@keyframes mass{from{font-weight:100}to{font-weight:700}}
@keyframes enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
html.js:not(.ready) .hero:not(.is-built) .ht-line{animation:fs-weight 1ms 2.6s both}
html.js:not(.ready) .hero:not(.is-built) .hero-lede,html.js:not(.ready) .hero:not(.is-built) .hero-act{animation:enter 1ms 2.6s both}
html.js .hero:not(.is-built) .hero-copy{opacity:0;transition:opacity .45s var(--ease)}
.hero:has(.hero-stage.is-rising) .hero-copy{opacity:1}
@keyframes fs-weight{to{font-weight:700}}

/* ---------- featured works: a street elevation on one red ground line ---------- */
.works{padding-block:var(--sec) calc(var(--sec)*.8)}
.street{--meta:5.6rem;padding-inline:var(--gut);max-width:calc(var(--maxw) + 2*var(--gut));margin-inline:auto}
.street-row{position:relative;display:flex;align-items:flex-end;gap:clamp(12px,1.8vw,28px);height:min(78vh,760px)}
.street-row::after{content:'';position:absolute;left:calc(var(--gut)*-1);right:calc(var(--gut)*-1);bottom:var(--meta);height:2px;background:var(--red);transform-origin:0 50%;transform:scaleX(var(--ground,1));transition:transform 1.4s var(--draw-ease)}
html.js .street:not(.is-in) .street-row{--ground:0}
.lot{flex:var(--g) 1 0;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.lot-photo{display:block;height:calc((100% - var(--meta))*var(--h));transition:height .9s var(--ease)}
.lot-drw{aspect-ratio:auto;height:100%}
.lot-meta{height:var(--meta);display:grid;grid-template-columns:1fr;column-gap:12px;align-content:start;padding-top:16px}
.lot-meta .idx{grid-row:1/3;padding-top:.32em}
.lot-name{font-family:var(--f-display);font-weight:600;font-size:clamp(1.15rem,1.6vw,1.6rem);letter-spacing:-.025em;line-height:1.2}
.lot-sub{font-size:.95rem;color:var(--ink-2)}
/* the lot you point at is built to full height; its neighbours fall back to the drawing board */
@media (hover:hover) and (pointer:fine){
  .street .lot .drw.is-built>img{transition:opacity .55s var(--ease-out) .12s,filter .55s var(--ease-out) .12s,transform .75s var(--ease-out-soft)}
  .street .lot .drw.is-built>.lines{transition:opacity .45s var(--ease-out) .12s,stroke 0s .6s}
  .street-row:has(.lot:hover) .lot:not(:hover) .drw.is-built>img{opacity:.42;filter:grayscale(1) contrast(.9) brightness(1.08);transition-delay:.1s}
  .street-row:has(.lot:hover) .lot:not(:hover) .drw.is-built>.lines{opacity:1;stroke:var(--ink);transition:opacity .45s var(--ease-out) .1s,stroke 0s}
  .street-row:has(.lot:hover) .lot:not(:hover) .drw.is-built>.lines :not(.l1){opacity:1}
  .street-row:has(.lot:hover) .lot:hover .lot-photo{height:calc(100% - var(--meta))}
  .lot:hover .lot-name{color:var(--red-ink)}
  .lot:hover .idx{color:var(--red)}
}

/* ---------- process (night) ---------- */
.night{background:var(--night);color:var(--on-night)}
.night .idx{color:var(--on-night-2)}
.bleed{clip-path:inset(0 var(--bx,0px) round var(--br,0px))}
.process{padding-top:var(--sec)}
.process-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end}
.process-head h2{grid-column:1/7}
.process-copy{grid-column:7/13;display:grid;gap:18px;max-width:640px}
.process-copy p:not(.lead){color:var(--on-night-2)}
.process-track{height:320vh;height:320svh;position:relative;margin-top:clamp(40px,5vw,72px)}
.process-sticky{position:sticky;top:var(--hh);height:calc(100vh - var(--hh));height:calc(100svh - var(--hh));display:grid;grid-template-columns:minmax(240px,3.4fr) 8.6fr;gap:clamp(24px,4vw,72px);align-items:center;padding-block:clamp(20px,3vh,40px)}
.stages{display:grid;gap:clamp(18px,3vh,34px)}
.stages li{display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:10px;color:var(--on-night-2);transition:color .4s}
.stages .idx{padding-top:.55em}
.stage-name{font-family:var(--f-display);font-weight:200;font-size:clamp(1.3rem,2vw,2.1rem);letter-spacing:-.035em;line-height:1.28;transition:font-weight .6s var(--ease)}
.stage-bar{grid-column:2;height:1px;background:rgba(233,239,236,.18);overflow:hidden}
.stage-bar i{display:block;height:100%;background:var(--red);transform:scaleX(var(--sp,0));transform-origin:0 50%}
.stages li.is-active,.stages li.is-done{color:var(--on-night)}
.stages li.is-active .stage-name{font-weight:640}
.stages li.is-active .idx{color:var(--red)}
.process-figure{display:grid;gap:12px;min-width:0}
.process-figure figcaption{font:500 .74rem/1.3 var(--f-mono);color:var(--on-night-2)}
.scene-link{display:block}
.scene{--drw-bg:var(--night-2);--drw-line:var(--on-night);aspect-ratio:3/2;max-height:calc(100vh - var(--hh) - 110px);width:100%;margin-inline:auto}
html.js.ready .scene>.lines{opacity:calc(1 - var(--p4)*.95);stroke:color-mix(in oklab,var(--on-night) calc((1 - var(--p4))*100%),var(--red))}
html.js.ready .scene>.lines :is(.l1,.dg,.da,.db,.dgr){stroke-dashoffset:calc(.6 - var(--p1)*.6)}  /* the sketch starts with its main lines ~40 % drawn: never lonely dots (user, 4 Oct 2026) */
html.js.ready .scene>.lines .dl{opacity:var(--p1)}
html.js.ready .scene>.lines :is(.l2,.dv){stroke-dashoffset:calc(1 - var(--p2))}
html.js.ready .scene>.lines :is(.l3,.dz){stroke-dashoffset:calc(1 - var(--p3))}
html.js.ready .scene>img{-webkit-mask-image:linear-gradient(to top,#000 calc(var(--p4)*150% - 25%),rgba(0,0,0,.14) calc(var(--p4)*150%));mask-image:linear-gradient(to top,#000 calc(var(--p4)*150% - 25%),rgba(0,0,0,.14) calc(var(--p4)*150%));filter:grayscale(calc(1 - var(--p4)))}
/* sun path: Klaipėda's real sun over a day — a motion-graphics piece, scrubbed by the pointer, touch or keys */
.sun{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(24px,3vw,48px);align-items:stretch;padding-block:clamp(64px,8vw,120px) 0}
.sun-copy{grid-column:1/6;display:flex;flex-direction:column;gap:22px}
.sun-title{font-size:clamp(2.2rem,4vw,4rem);font-weight:640;letter-spacing:-.045em;line-height:1.08}
.sun-text{font-size:clamp(1.1rem,1.4vw,1.35rem);line-height:1.5;color:var(--on-night);max-width:36ch}
.sun-data{margin-top:auto;border-top:1px solid rgba(233,239,236,.3)}
.sun-data>div{display:grid;grid-template-columns:8rem 1fr;gap:16px;padding:12px 0;border-bottom:1px solid rgba(233,239,236,.16);align-items:baseline}
.sun-data dt{font:500 .84rem/1.3 var(--f-mono);color:var(--on-night-2)}
.sun-data dd{font:600 1.02rem/1.4 var(--f-mono);color:var(--on-night);font-variant-numeric:tabular-nums}
.sun-data dd span{white-space:nowrap}
.sun-dial{grid-column:6/13;justify-self:center;align-self:center;width:min(100%,860px,calc((100svh - var(--hh) - 150px)*1.56));aspect-ratio:1000/640;position:relative;touch-action:pan-y;cursor:ew-resize;border-radius:50%}
.sun-dial:focus-visible{outline-offset:6px}
.sun-svg{width:100%;height:100%;overflow:visible}
.sun-svg .horizon{fill:var(--night-2);stroke:rgba(233,239,236,.6);stroke-width:1.6}
.sun-svg .ring{fill:none;stroke:rgba(233,239,236,.32);stroke-width:1.2;stroke-dasharray:4 7}
.sun-svg .tick{stroke:rgba(233,239,236,.45);stroke-width:1.4}
.sun-svg .card{font:600 30px var(--f-mono);fill:var(--on-night-2);text-anchor:middle}
.sun-svg .season{fill:none;stroke:rgba(233,239,236,.62);stroke-width:2}
.sun-svg .season.equ{stroke-dasharray:1 0}
.sun-svg .season-label{font:600 23px var(--f-mono);fill:var(--on-night);paint-order:stroke;stroke:var(--night-2);stroke-width:6px;text-anchor:middle}
.sun-svg .today{fill:none;stroke:var(--red);stroke-width:4;stroke-linecap:round}
.sun-svg .hours circle{fill:var(--night);stroke:var(--red);stroke-width:2}
.sun-svg .hours text{font:700 23px var(--f-mono);fill:var(--on-night);text-anchor:middle}
.sun-svg .ray{fill:none;stroke:var(--red);stroke-width:1.4;stroke-dasharray:6 8;opacity:.8}
.sun-svg .shadow-tone{fill:rgba(3,7,9,.34)}
.sun-svg .shadow-hatch{fill:url(#sun-hatch)}
.sun-svg pattern path{stroke:var(--on-night);stroke-opacity:.42;stroke-width:1.6}
.sun-svg .mass{fill:var(--night);stroke:var(--on-night);stroke-width:2.4;stroke-linejoin:round}
.sun-svg .ridge{fill:none;stroke:var(--on-night);stroke-width:1.4;stroke-linecap:round;opacity:.8}
.sun-svg .night-track{fill:none;stroke:rgba(233,239,236,.4);stroke-width:1.4;stroke-dasharray:3 9}
.sun-svg .sun-time{font:700 30px var(--f-mono);fill:var(--on-night);text-anchor:middle;paint-order:stroke;stroke:var(--night-2);stroke-width:7px;stroke-linejoin:round;font-variant-numeric:tabular-nums}
.sun-svg.is-night .sun-dot{fill:var(--night-2);stroke:var(--on-night-2)}
.sun-svg .sun-dot{fill:var(--red);stroke:var(--on-night);stroke-width:3}
/* the piece: rings and the three seasonal arcs are drafted, then today's arc, then the sun travels from sunrise */
.sun.is-armed:not(.is-in) .sun-svg [pathLength]{stroke-dashoffset:1}
.sun.is-armed .sun-svg [pathLength]{stroke-dasharray:1 1}
.sun.is-armed .sun-svg .ring{stroke-dasharray:1 1}
.sun.is-armed:not(.is-in) .sun-svg :is(.ticks,.card,.season-label,.hours,.mass,.ridge,.shadow,.ray,.sun-dot,.sun-time,.night-track){opacity:0}
.sun.is-armed:not(.is-in) .sun-svg .horizon{fill-opacity:0}
.sun.is-in .sun-svg .horizon{animation:draw var(--t-scene) var(--ease-pen) both,ground-fill var(--t-text) var(--ease-out) 1.1s both}
@keyframes ground-fill{from{fill-opacity:0}to{fill-opacity:1}}
.sun.is-in .sun-svg .ring{animation:draw var(--t-scene) var(--ease-pen) .15s both}
.sun.is-in .sun-svg :is(.ticks,.card){animation:fade var(--t-text) var(--ease-out) .5s both}
.sun.is-in .sun-svg .season.jun{animation:draw 1.1s var(--ease-pen) .55s both}
.sun.is-in .sun-svg .season.equ{animation:draw 1.1s var(--ease-pen) .7s both}
.sun.is-in .sun-svg .season.dec{animation:draw 1.1s var(--ease-pen) .85s both}
.sun.is-in .sun-svg .season-label{animation:fade var(--t-text) var(--ease-out) 1.3s both}
.sun.is-in .sun-svg :is(.mass,.ridge){animation:fade var(--t-text) var(--ease-out) 1.1s both}
.sun.is-in .sun-svg .night-track{animation:fade var(--t-text) var(--ease-out) 1.7s both}
.sun.is-in .sun-svg .today{animation:draw 1.3s var(--ease-pen) 1.45s both}
.sun.is-in .sun-svg :is(.hours,.ray,.sun-dot,.sun-time){animation:fade .6s var(--ease-out) 2.1s both}
@keyframes fade{from{opacity:0}to{opacity:1}}
/* since 2004: the year, the company's bound documents and the archive photo, both columns the same height */
.since{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(24px,3vw,48px);align-items:stretch;padding-block:clamp(72px,8vw,128px) var(--sec)}
.since-copy{grid-column:1/7;display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.since-year{display:flex;flex-direction:column}
.since-kicker{font-family:var(--f-display);font-weight:300;font-size:clamp(1.3rem,1.9vw,1.9rem);letter-spacing:-.03em;color:var(--on-night-2)}
.since-num{font-family:var(--f-display);font-weight:700;font-size:clamp(7rem,15vw,15rem);line-height:.92;letter-spacing:-.07em;color:var(--on-night);margin:.02em 0 .04em -.05em}
.docs ol{border-top:1px solid rgba(233,239,236,.3)}
.docs a{display:grid;grid-template-columns:3.2rem 1fr auto;gap:12px;align-items:center;padding:16px 0;border-bottom:1px solid rgba(233,239,236,.18);font-weight:500;transition:color .3s,padding .5s var(--ease)}
.docs a .ico{transition:transform .45s var(--ease)}
@media (hover:hover){.docs a:hover{color:#fff;padding-left:8px}.docs a:hover .idx{color:var(--red)}.docs a:hover .ico{transform:translate(3px,-3px)}}
.since-photo{grid-column:7/13;display:grid;grid-template-rows:1fr auto;gap:10px;min-height:420px}
.since-photo .drw{aspect-ratio:auto;height:100%;--drw-bg:var(--night-2);--drw-line:var(--on-night)}
.since-photo figcaption{font:500 .74rem/1.3 var(--f-mono);color:var(--on-night-2)}

/* ---------- services (white sheet) ---------- */
.sheet{background:var(--sheet)}
.services{padding-block:var(--sec)}
.services-grid{display:grid;gap:clamp(24px,3vw,48px)}
.services-head{margin-bottom:clamp(0px,1vw,12px)}
.services-head p{margin-top:18px;color:var(--ink-2);max-width:520px}
/* v23: no pinned stage on the left — the row in focus opens its own photograph beside its description */
.svc-list{border-top:1px solid var(--ink)}
.svc-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,5fr) 44px;grid-template-areas:"name thumb go" "desc thumb ." "cap thumb .";grid-template-rows:auto auto 1fr;column-gap:clamp(20px,3vw,48px);padding:clamp(22px,2.6vw,36px) 0;border-bottom:1px solid var(--rule);position:relative;transition:padding .5s var(--ease)}
.svc-name{grid-area:name;font-family:var(--f-display);font-weight:600;font-size:clamp(1.5rem,2.3vw,2.35rem);letter-spacing:-.04em;line-height:1.12}
.svc-desc{grid-area:desc;color:var(--ink-2);max-width:560px;font-size:clamp(1rem,1.1vw,1.1rem);line-height:1.55}
.svc-cap{grid-area:cap;align-self:end;font:500 .74rem/1.3 var(--f-mono);color:var(--ink-2)}
.svc-thumb{grid-area:thumb;display:block;overflow:hidden}
.svc-thumb .drw{width:100%;aspect-ratio:3/2}
.svc-thumb.is-board .drw{aspect-ratio:var(--ar)}

.svc-go{grid-area:go;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--rule);transition:background .3s,color .3s,border-color .3s}
.svc-row::before{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--red);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease)}
.svc-row.is-active::before,.svc-row:hover::before{transform:scaleX(1)}
@media (hover:hover){.svc-row:hover{padding-left:12px}.svc-row:hover .svc-go{background:var(--ink);color:var(--paper);border-color:var(--ink)}}
/* a live register: the row in focus opens its description, caption and photograph, the others close to their names */
.svc-list.is-live .svc-desc{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .6s var(--ease),opacity .4s}
.svc-list.is-live .svc-desc>span{overflow:hidden}
.svc-list.is-live .svc-row.is-active .svc-desc{grid-template-rows:1fr;opacity:1}
.svc-list.is-live .svc-thumb{max-height:0;opacity:0;transition:max-height .8s var(--ease),opacity .5s var(--ease)}
.svc-list.is-live .svc-row.is-active .svc-thumb{max-height:560px;opacity:1}
.svc-list.is-live .svc-cap{opacity:0;transition:opacity .5s .2s}
.svc-list.is-live .svc-row.is-active .svc-cap{opacity:1}
.svc-list.is-live .svc-row{row-gap:0}
.svc-list.is-live .svc-row.is-active{row-gap:18px}
.svc-list.is-live .svc-name{font-weight:400;transition:font-weight .6s var(--ease),color .4s;color:var(--ink-2)}
.svc-list.is-live .svc-row.is-active .svc-name{font-weight:640;color:var(--ink)}

/* ---------- renovation register (mineral) ---------- */
.mineral{background:var(--mineral)}
.reno{padding-block:var(--sec)}
.reno-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(24px,3vw,48px);align-items:start}
.reno-head{grid-column:1/6;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,4vw,56px);container-type:inline-size;min-width:0}
/* the long word „daugiabučiai“ is fitted to its column, not to the window */
.reno-head h2{font-size:min(11.2cqi,5.8rem)}
.reno-tabs{display:grid;border-top:1px solid var(--ink)}
.reno-tab{display:grid;grid-template-columns:1fr auto;column-gap:16px;row-gap:4px;text-align:left;padding:18px 4px;border-bottom:1px solid var(--rule);position:relative;transition:background .3s,padding .5s var(--ease)}
.reno-addr{font-family:var(--f-display);font-weight:600;font-size:clamp(1.15rem,1.6vw,1.5rem);letter-spacing:-.03em;line-height:1.15}
.reno-meta{grid-column:1;font:500 .78rem/1.4 var(--f-mono);color:var(--ink-2)}
.reno-class{grid-column:2;grid-row:1/3;align-self:center;display:flex;align-items:center;gap:6px;font:600 1.05rem/1 var(--f-mono)}
.reno-tab[aria-selected=true]{background:var(--sheet);padding-inline:16px}
.reno-tab[aria-selected=true]::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red)}
@media (hover:hover){.reno-tab:not([aria-selected=true]):hover{background:rgba(255,255,255,.5)}}
.reno-panel{grid-column:6/13;min-width:0;display:grid;grid-template-columns:1fr minmax(170px,230px);gap:clamp(16px,2.4vw,40px);align-items:start}
.reno-photos{position:relative;aspect-ratio:4/5}
.reno-photo{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s .5s}
.reno-photo.is-active{opacity:1;visibility:visible;transition:opacity .5s var(--ease)}
.reno-photo .drw{aspect-ratio:auto;height:100%;--drw-bg:var(--paper)}
.meter-wrap{position:relative;--row:clamp(30px,3.6vw,40px)}
.meter-title{font:500 .74rem/1.3 var(--f-mono);letter-spacing:.02em;margin-bottom:14px;color:var(--ink-2)}
.meter{display:grid;gap:0;position:relative;width:calc(100% - 76px)}
.m-row{height:var(--row);display:flex;align-items:center}
.m-bar{display:flex;align-items:center;height:calc(var(--row) - 6px);width:var(--w);background:var(--c);color:var(--tc,#fff);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%);padding-left:10px;transition:filter .4s,opacity .4s}
.m-bar b{font:600 .9rem/1 var(--f-mono)}
.m-row[data-class="A++"]{--c:#1e7a3c}.m-row[data-class="A+"]{--c:#3a9142}.m-row[data-class="A"]{--c:#5fa83e}.m-row[data-class="B"]{--c:#a8c436;--tc:var(--ink)}.m-row[data-class="C"]{--c:#e7d52c;--tc:var(--ink)}.m-row[data-class="D"]{--c:#f2b12b;--tc:var(--ink)}.m-row[data-class="E"]{--c:#ec8326;--tc:var(--ink)}.m-row[data-class="F"]{--c:#e05327}.m-row[data-class="G"]{--c:#c92b23}
.meter.is-set .m-row:not(.is-after):not(.is-before) .m-bar{background:color-mix(in oklab,var(--c) 30%,var(--paper));color:var(--ink)}
.m-mark{position:absolute;left:calc(100% - 70px);top:calc(var(--meter-top,0px) + var(--row)*var(--i,0) + var(--row)/2);display:flex;align-items:center;gap:6px;font:600 .78rem/1 var(--f-mono);transform:translateY(-50%);transition:top 1.1s var(--ease),opacity .4s}
.m-mark::before{content:'';width:0;height:0;border-block:7px solid transparent;border-right:11px solid currentColor}
.m-before{color:var(--ink-2);opacity:.85}
.m-before::after{content:'Prieš'}
.m-after{color:var(--ink)}
.m-after::after{content:'Po'}
.m-mark.is-off{opacity:0}
html:not(.ready) .m-mark{display:none}

/* ---------- recent works: an endless strip through a construction zone ---------- */
.recent{padding-block:var(--sec) calc(var(--sec)*.8);overflow:hidden}
.strip-controls{display:flex;gap:10px}
.strip{position:relative;overflow-x:auto;scrollbar-width:none;outline-offset:-4px}
.strip::-webkit-scrollbar{display:none}
.strip.is-marquee{overflow:hidden;cursor:grab;touch-action:pan-y}
.strip.is-dragging{cursor:grabbing}
.strip-track{display:flex;align-items:flex-end;gap:clamp(16px,2vw,32px);width:max-content;padding-inline:var(--gut);will-change:transform}
.shot{flex:none;width:clamp(260px,32vw,560px);display:grid;gap:14px;-webkit-user-drag:none;user-select:none}
.shot-tall{width:clamp(200px,22vw,380px)}
.shot .drw{aspect-ratio:3/2}
.shot-tall .drw{aspect-ratio:4/5}
.shot-meta{display:grid;grid-template-columns:1fr;column-gap:12px;align-items:baseline}
.shot-meta .idx{grid-row:1/3}
.shot-name{font-family:var(--f-display);font-weight:600;font-size:1.15rem;letter-spacing:-.025em;line-height:1.2}
.shot-sub{font-size:.85rem;color:var(--ink-2)}
/* --b: 1 in the middle of the strip (built), 0 at the edges (still a drawing) */
html.js.ready .strip.is-marquee .shot .drw>img{-webkit-mask-image:linear-gradient(to top,#000 calc(var(--b,1)*150% - 25%),transparent calc(var(--b,1)*150%));mask-image:linear-gradient(to top,#000 calc(var(--b,1)*150% - 25%),transparent calc(var(--b,1)*150%));filter:grayscale(calc(1 - var(--b,1)));animation:none}
html.js.ready .strip.is-marquee .shot .drw>.lines{opacity:calc(1 - var(--b,1)*.9);stroke:var(--ink);animation:none}
html.js.ready .strip.is-marquee .shot .drw>.lines path{stroke-dashoffset:0;animation:none}
@media (hover:hover) and (pointer:fine){.shot:hover .shot-name{color:var(--red-ink)}}

/* ---------- team as a title block ---------- */
.team{padding-block:var(--sec)}
.stamp{background:var(--sheet);border:1.5px solid var(--ink)}
.stamp-head{display:grid;grid-template-columns:1fr auto;border-bottom:1.5px solid var(--ink)}
.stamp-head h2{padding:clamp(20px,3vw,44px);border-right:1px solid var(--ink)}
.stamp-org{display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:clamp(20px,3vw,44px);font:500 .82rem/1.4 var(--f-mono);min-width:min(34vw,420px)}
.stamp-org span+span{color:var(--ink-2)}
.stamp-table{width:100%;border-collapse:collapse}
.stamp-table thead th{font:500 .74rem/1 var(--f-mono);color:var(--ink-2);text-align:left;padding:14px clamp(14px,2vw,28px);border-bottom:1px solid var(--ink)}
.stamp-table td,.stamp-table tbody th{padding:12px clamp(14px,2vw,28px);border-bottom:1px solid var(--rule);text-align:left;vertical-align:middle;transition:background .3s}
.stamp-table tbody tr:last-child>*{border-bottom:0}
.st-role{color:var(--ink-2);width:24%}
.st-name{font-family:var(--f-display);font-weight:600;font-size:clamp(1.25rem,2.1vw,1.9rem);letter-spacing:-.03em;line-height:1.2}
.st-photo{width:148px;padding-block:12px!important}
.st-photo img,.st-mono{width:112px;height:112px;object-fit:cover;display:block}
.st-mono{display:grid;place-items:center;background:var(--paper);color:var(--ink-2);font:600 2.2rem/1 var(--f-display);letter-spacing:-.04em;transition:background .4s,color .4s}
.stamp-table tbody tr:hover .st-mono{background:var(--ink);color:var(--paper)}
.st-photo img{filter:grayscale(1) contrast(1.05);transition:filter .5s}
.st-mail a{display:inline-flex;align-items:center;gap:8px;font-weight:600;overflow-wrap:anywhere}
.stamp-table tbody tr:hover>*{background:var(--paper)}
.stamp-table tbody tr:hover .st-photo img{filter:none}
.stamp-table tbody tr:hover .st-mail a{color:var(--red-ink)}
/* v23: tablet widths — the e-mail never breaks before “lt”: smaller portraits, the address stays on one line */
@media (min-width:700px) and (max-width:1099px){
  .st-role{width:20%}
  .st-photo{width:112px}
  .st-photo img,.st-mono{width:80px;height:80px}
  .st-mail a{white-space:nowrap;font-size:.94rem}
}

/* ---------- news: the renovation selections as two podiums of real photographs (v23) ---------- */
.news{padding-block:0 var(--sec)}
.news-kicker{margin-top:14px;font:500 .82rem/1.3 var(--f-mono);color:var(--ink-2)}
.contests{display:grid;gap:clamp(56px,7vw,104px)}
.contest{display:grid;gap:clamp(18px,2vw,28px);align-content:start;position:relative}
.contest-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.contest-year{font-family:var(--f-display);font-weight:700;font-size:clamp(4rem,9vw,9rem);line-height:.9;letter-spacing:-.07em}
.podium{--ph:clamp(240px,29vw,430px);display:flex;align-items:flex-end;gap:clamp(10px,1.2vw,18px);position:relative;padding-bottom:0}
.step{flex:var(--g,1) 1 0;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;transition:flex-grow .7s var(--ease)}
.step.s1{--g:2.3}.step.s2{--g:1}.step.s3{--g:.9}
.step-rank{font:600 .85rem/1 var(--f-mono);color:var(--ink-2);display:flex;align-items:center;gap:10px}
.step-rank::after{content:'';flex:0 0 36px;height:1px;background:currentColor;opacity:.5}
.step.s1 .step-rank{color:var(--red)}
.step-photo{display:block;height:calc(var(--m)*var(--ph));position:relative;overflow:hidden;transition:height .7s var(--ease)}
.step-photo>img{display:block;width:100%;height:100%;object-fit:cover}
.step-slab{position:absolute;inset:0;background:var(--ink);color:var(--sheet);padding:clamp(12px,1.4vw,20px);display:flex;flex-direction:column;justify-content:space-between;transition:background .5s var(--ease)}
.step-slab::after{content:attr(data-rank);font:700 clamp(3.4rem,7vw,7rem)/.9 var(--f-display);letter-spacing:-.06em}
.slab-addr{font-size:.9rem;line-height:1.35;max-width:14em}
.step.s3 .step-slab{background:#33454c}
.step-addr{font-size:.86rem;line-height:1.3;color:var(--ink-2);min-height:2.6em}
.step.s1 .step-addr{color:var(--ink)}
html.js .contest:not(.is-in) .step-photo{clip-path:inset(100% 0 0 0)}
.step-photo{clip-path:inset(0 0 0 0);transition:clip-path 1.1s var(--ease),height .7s var(--ease)}
.contest.is-in .step.s1 .step-photo{transition-delay:.15s,0s}.contest.is-in .step.s3 .step-photo{transition-delay:.3s,0s}
/* the whole contest is a link: its steps light up together */
@media (hover:hover){.contest:hover .step.is-slab .step-slab{background:var(--red)}.contest:hover .step.is-slab.s3 .step-slab{background:var(--red-ink)}}

/* ---------- finale (brand red) and footer (night) ---------- */
.finale{background:var(--red);color:#fff;padding-block:var(--sec)}
.finale ::selection{background:#fff;color:var(--red-deep)}
.finale :focus-visible{outline-color:#fff}
.finale-inner{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(24px,3vw,48px);align-items:stretch}
.finale-title{grid-column:1/7;font-size:clamp(2.8rem,6.6vw,7rem);line-height:1.12;align-self:start}
.finale-contact{grid-column:7/13;display:flex;flex-direction:column;justify-content:space-between;gap:36px}
.call{display:inline-flex;align-items:center;gap:clamp(14px,1.6vw,24px);align-self:flex-start;color:#fff}
.call-icon{flex:none;display:grid;place-items:center;width:clamp(56px,5.2vw,84px);aspect-ratio:1;border-radius:50%;background:#fff;color:var(--red);transition:background .3s,color .3s}
.call-icon .ico{width:44%;height:44%;stroke-width:1.8}
.call-number{font-family:var(--f-display);font-weight:640;font-size:clamp(1.9rem,3.9vw,4.1rem);letter-spacing:-.05em;line-height:1;white-space:nowrap}
@media (hover:hover){.call:hover .call-icon{background:var(--night);color:#fff}}
.finale-list{display:grid;border-top:1px solid rgba(255,255,255,.5)}
.finale-list div{display:grid;grid-template-columns:8.5rem 1fr;gap:16px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.35);align-items:baseline}
.finale-list dt{font:500 .78rem/1.3 var(--f-mono);opacity:.85}
.finale-list dd a{font-weight:600;font-size:1.1rem;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:rgba(255,255,255,.5);transition:text-decoration-color .3s}
.finale-list dd a:hover{text-decoration-color:#fff}
.footer{background:var(--night);color:var(--on-night);padding-block:56px 40px}
.footer-inner{display:grid;justify-items:center;gap:28px;text-align:center}
.footer-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:20px clamp(28px,4vw,64px)}
.footer-logo{display:block;width:min(640px,100%)}
.footer-logo img{width:100%;height:auto;display:block}
.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px;font-weight:600;font-size:.95rem}
.footer-nav a{padding:6px 0;color:var(--on-night);transition:color .3s}
.footer-nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:5px}
.legal{display:flex;flex-wrap:wrap;justify-content:center;font:500 .74rem/1.6 var(--f-mono);color:var(--on-night-2);row-gap:6px;padding-top:24px;border-top:1px solid rgba(233,239,236,.16);width:100%}
.legal span{padding-inline:14px;border-left:1px solid rgba(233,239,236,.28)}
.legal span.row-start{border-left:0}
.legal a{color:var(--on-night);text-decoration:underline;text-underline-offset:4px}

/* ---------- catalogue: a rhythm of sizes instead of a uniform grid ---------- */
.catalog{padding-block:clamp(48px,6vw,96px) var(--sec)}
.catalog-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 40px;margin-bottom:clamp(28px,3vw,48px)}
.catalog-head h1{font-size:clamp(3.4rem,9vw,9rem)}
.search{display:grid;gap:8px;width:min(100%,380px)}
.search span{font:500 .78rem/1.3 var(--f-mono);color:var(--ink-2)}
.search input{width:100%;min-height:52px;padding:12px 2px;border:0;border-bottom:1.5px solid var(--ink);background:transparent;font-size:1.1rem;border-radius:0}
.search input:focus{outline:none;border-bottom-color:var(--red)}
.search input:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.filters{display:flex;flex-wrap:wrap;gap:4px 28px;border-bottom:1px solid var(--rule);margin-bottom:18px}
.filter{position:relative;padding:14px 0;font-weight:600;color:var(--ink-2);transition:color .3s}
.filter .idx{margin-left:4px}
.filter::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--red);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease)}
.filter[aria-pressed=true]{color:var(--ink)}
.filter[aria-pressed=true]::after{transform:scaleX(1)}
.filter:hover{color:var(--ink)}
.results{font:500 .78rem/1.3 var(--f-mono);color:var(--ink-2);margin-bottom:32px}
.catalog-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(48px,5vw,88px) clamp(16px,2vw,32px);align-items:end}
.card{display:flex;flex-direction:column;gap:16px;min-width:0;grid-column:span 4}
.card .drw{aspect-ratio:4/3}
.card-meta{display:grid;grid-template-columns:1fr;column-gap:12px;align-items:baseline}
.card-meta .idx{grid-row:1/3}
.card-title{font-family:var(--f-display);font-weight:600;font-size:clamp(1.1rem,1.4vw,1.4rem);letter-spacing:-.03em;line-height:1.2}
.card-sub{font-size:.85rem;color:var(--ink-2)}
@media (hover:hover){.card:hover .card-title{color:var(--red-ink)}.card:hover .idx{color:var(--red)}}
/* slot pattern of seven (set by script after filtering; nth-child without script) */
.catalog-grid .card[data-slot="0"],.catalog-grid .card:not([data-slot]):nth-child(7n+1){grid-column:span 7}
.catalog-grid .card[data-slot="0"] .drw,.catalog-grid .card:not([data-slot]):nth-child(7n+1) .drw{aspect-ratio:16/11}
.catalog-grid .card[data-slot="1"],.catalog-grid .card:not([data-slot]):nth-child(7n+2){grid-column:span 5}
.catalog-grid .card[data-slot="1"] .drw,.catalog-grid .card:not([data-slot]):nth-child(7n+2) .drw{aspect-ratio:4/5}
.catalog-grid .card[data-slot="3"] .drw,.catalog-grid .card:not([data-slot]):nth-child(7n+4) .drw{aspect-ratio:1/1}
.catalog-grid .card[data-slot="5"],.catalog-grid .card:not([data-slot]):nth-child(7n+6){grid-column:span 5}
.catalog-grid .card[data-slot="5"] .drw,.catalog-grid .card:not([data-slot]):nth-child(7n+6) .drw{aspect-ratio:3/4}
.catalog-grid .card[data-slot="6"],.catalog-grid .card:not([data-slot]):nth-child(7n+7){grid-column:span 7}
.empty{padding:48px 0;font-size:1.15rem}
.load-wrap{display:flex;justify-content:center;margin-top:56px}

/* ---------- project page ---------- */
.project{padding-top:clamp(36px,5vw,80px)}
.back{display:inline-flex;align-items:center;gap:10px;font-weight:600;padding:8px 0;margin-bottom:clamp(24px,3vw,48px);transition:color .3s,gap .4s var(--ease)}
.back:hover{color:var(--red-ink);gap:16px}
.project-head h1{font-size:clamp(2.4rem,5.4vw,5.8rem);max-width:18ch;line-height:1.16}
.project-full{margin-top:18px;max-width:72ch;color:var(--ink-2)}
.facts{display:flex;flex-wrap:wrap;gap:12px 48px;margin-top:clamp(24px,3vw,40px);padding-top:16px;border-top:1px solid var(--ink);max-width:900px}
.facts dt{font:500 .74rem/1.2 var(--f-mono);color:var(--ink-2)}
.facts dd{font-family:var(--f-display);font-weight:600;font-size:1.3rem;letter-spacing:-.03em;line-height:1.2;margin-top:4px}
.project-desc{margin-top:28px;max-width:66ch;font-size:clamp(1.08rem,1.3vw,1.25rem);white-space:pre-line}
.project-credit{margin-top:20px;font-size:.92rem;color:var(--ink-2);display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px}
/* gallery rhythm: cover, then a wide frame with a narrow one lowered beside it, mirrored, then a full row */
.gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);padding-block:clamp(40px,5vw,80px);align-items:start}
.gallery-link{display:block;cursor:zoom-in;grid-column:span 6}
.gallery-link:first-child{grid-column:1/-1}
.gallery-link:nth-child(5n+2){grid-column:1/9}
.gallery-link:nth-child(5n+3){grid-column:9/13;margin-top:clamp(40px,8vw,140px)}
.gallery-link:nth-child(5n+4){grid-column:1/6}
.gallery-link:nth-child(5n+5){grid-column:6/13;margin-top:clamp(24px,5vw,90px)}
.gallery-link:nth-child(5n+6){grid-column:2/12}
.gallery-link:last-child:nth-child(5n+2),.gallery-link:last-child:nth-child(5n+4){grid-column:2/12;margin-top:0}
.gallery-link .cover{view-transition-name:cover}
.next-project{padding-bottom:var(--sec)}
.next-link{display:grid;grid-template-columns:1fr minmax(160px,340px);grid-template-rows:auto 1fr;column-gap:32px;align-items:end;padding-top:28px;border-top:1px solid var(--ink)}
.next-label{font:500 .74rem/1 var(--f-mono);color:var(--ink-2)}
.next-name{grid-column:1;font-family:var(--f-display);font-weight:640;font-size:clamp(1.8rem,3.8vw,4rem);letter-spacing:-.045em;line-height:1.18;transition:color .3s}
.next-photo{grid-column:2;grid-row:1/3}
.next-photo.drw{aspect-ratio:4/3}
.next-link:hover .next-name{color:var(--red-ink)}

/* ---------- information pages ---------- */
.page{padding-top:clamp(36px,5vw,80px)}
.page-head h1{font-size:clamp(2.4rem,5.4vw,5.6rem);max-width:20ch}
.article{max-width:860px;padding-block:clamp(32px,4vw,56px) var(--sec)}
.article>*+*{margin-top:1.1em}
.article h2,.article h3,.article h4{font-family:var(--f-display);font-weight:600;letter-spacing:-.035em;line-height:1.15;font-size:clamp(1.5rem,2.2vw,2.1rem);margin-top:1.8em}
.article ul,.article ol{padding-left:1.2em;list-style:disc}
.article ol{list-style:decimal}
.article li+li{margin-top:.4em}
.article a{color:var(--red-ink);text-decoration:underline;text-underline-offset:3px}
.article img{max-height:720px;width:auto;margin-block:1.4em}
.article table{width:100%;border-collapse:collapse;font-size:.95rem}
.article td,.article th{padding:10px 12px;border-bottom:1px solid var(--rule);vertical-align:top;text-align:left}
.intro-note{font:500 .78rem/1.5 var(--f-mono);color:var(--ink-2)}

/* ---------- viewer ---------- */
.viewer{border:0;padding:0;background:var(--night);color:var(--on-night);width:min(96vw,1500px);max-width:none;max-height:96dvh;overflow:hidden;border-radius:2px}
.viewer::backdrop{background:rgba(8,13,15,.9)}
.viewer-top,.viewer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 18px}
.viewer-bottom{justify-content:center}
.viewer-top h2{font-size:1.2rem;line-height:1.2;letter-spacing:-.03em;text-wrap:pretty}
.viewer-stage{display:grid;place-items:center;min-height:200px}
.viewer-stage img{max-height:74dvh;max-width:100%;object-fit:contain}
.viewer-count{font:500 .85rem/1 var(--f-mono);min-width:72px;text-align:center}
.viewer-error{padding:40px;text-align:center}
.icon-button{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:rgba(233,239,236,.12);transition:background .3s}
.icon-button:hover{background:var(--red)}

/* ---------- reveal grammar for body copy (no generic fade-up) ----------
   rows of registers, tables and lists are ruled left to right, like a line drawn with a ruler, lettering included;
   paragraphs are set line by line inside a mask. */
/* the row and its rule stay put (so the observer sees it — Chrome does not count a clip-path-hidden target as
   intersecting); its contents rise into their own boxes. `translate` composes with any transform they already have. */
html.js .ruled:not(.is-in)>*{translate:0 100%;clip-path:inset(-100% 0 100% 0);visibility:hidden}
.ruled.is-in>*{animation:row-in var(--t-text) var(--ease-out) var(--d,0s) backwards}
@keyframes row-in{from{translate:0 100%;clip-path:inset(-100% 0 100% 0)}to{translate:0 0;clip-path:inset(0 0 -2px 0)}}
.split .ln{display:block;overflow:clip;padding-bottom:.08em;margin-bottom:-.08em}
.split .ln-in{display:block}
html.js .split:not(.is-in) .ln-in{transform:translateY(105%)}
.split.is-in .ln-in{animation:line-in var(--t-text) var(--ease-out) calc(var(--i,0)*var(--step-line)) backwards}
@keyframes line-in{from{transform:translateY(105%)}to{transform:none}}

/* ---------- responsive ---------- */
@media (max-width:1099px){

  .hero-title{font-size:clamp(3rem,11.4vw,8rem)}
  .street-row{height:min(64vh,620px)}
  .process-head h2,.process-copy{grid-column:1/-1}
  .process-sticky{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-content:center;gap:24px}
  .process-figure{order:-1}
  .stages{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .stages li{grid-template-columns:1fr;row-gap:6px}
  .stages .idx{padding:0}
  .stage-name{font-size:clamp(.95rem,2.1vw,1.25rem)}
  .stage-bar{grid-column:1}
  .since-copy,.since-photo{grid-column:1/-1}
  .sun-copy{display:contents}
  .sun-title,.sun-text,.sun-data,.sun-dial{grid-column:1/-1}
  .sun-dial{order:3;width:100%;margin-block:-8px -14px}  /* the scene's empty sky margin is trimmed on phones */
  .sun-data{order:4;margin-top:8px}
  .since-photo{min-height:0}
  .since-photo .drw{aspect-ratio:3/2;height:auto}
  .reno-head,.reno-panel{grid-column:1/-1}
  .finale-title,.finale-contact{grid-column:1/-1}
  .catalog-grid .card,.catalog-grid .card[data-slot]{grid-column:span 6}
  .catalog-grid .card[data-slot="0"],.catalog-grid .card[data-slot="6"],.catalog-grid .card:not([data-slot]):nth-child(7n+1){grid-column:1/-1}
}
@media (max-width:699px){
  :root{--hh:80px;--sec:88px}
  body{font-size:1rem}
  .brand{--lh:clamp(40px,calc((100vw - 2*var(--gut) - 80px)*50/333),46px)}  /* ≥ 40 px on phones (user rule 25.10.2026); leaves 12 px + the 44 px menu button */
  .header-inner{gap:0 12px}
  h2{font-size:clamp(2.2rem,10.4vw,3.4rem)}
  .sec-head{flex-direction:column;align-items:flex-start;gap:12px}
  .hero{padding:0}
  .hero-stage{height:max(540px,calc(100svh - var(--hh)));border-radius:0}
  .hero-title{font-size:clamp(2.4rem,12.6vw,4.2rem)}

  /* the street becomes a swipe row on phones */
  .street{padding-inline:0}
  .street-row{height:440px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-inline:var(--gut);scroll-padding-inline:var(--gut)}
  .street-row::-webkit-scrollbar{display:none}
  .street-row::after{left:0;right:0}
  .lot{flex:0 0 74vw;scroll-snap-align:start}
  .process-track{height:260vh;height:260svh}
  .stages{grid-template-columns:1fr 1fr;gap:14px 16px}
  .scene{max-height:none}
  .since-num{font-size:clamp(5.6rem,30vw,9rem)}
  .docs a{grid-template-columns:2.8rem 1fr auto}
  .svc-row{grid-template-columns:1fr;grid-template-areas:"thumb" "name" "desc" "cap";padding:22px 0}
  .svc-go{display:none}
  .reno-panel{grid-template-columns:1fr}
  .reno-photos{aspect-ratio:4/3}
  .meter-wrap{--row:30px}
  .shot{width:72vw}.shot-tall{width:52vw}
  .stamp-head{grid-template-columns:1fr}
  .stamp-head h2{border-right:0;border-bottom:1px solid var(--ink)}
  .stamp-org{min-width:0;flex-direction:row;flex-wrap:wrap;gap:4px 16px}
  .stamp-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .stamp-table,.stamp-table tbody,.stamp-table tr{display:block}
  .stamp-table tr{display:grid;grid-template-columns:1fr 88px;grid-template-areas:"name photo" "role photo" "mail mail";column-gap:12px;padding:16px 18px;border-bottom:1px solid var(--rule)}
  .stamp-table tbody tr:last-child{border-bottom:0}
  .stamp-table tr>*{display:block;padding:0!important;border:0!important;width:auto!important}
  .st-photo img,.st-mono{width:88px;height:88px}
  .st-mono{font-size:1.7rem}
  .st-name{grid-area:name}.st-role{grid-area:role;margin-top:6px}.st-photo{grid-area:photo;align-self:center}.st-mail{grid-area:mail;margin-top:10px}
  .contests{gap:64px}
  .contest-head{align-items:center}
  .podium{display:grid;grid-template-columns:1fr 1fr;gap:20px 12px}
  .step{display:flex}
  .step.s1{grid-column:1/-1;order:-1}
  .step-photo{height:auto;aspect-ratio:16/10}
  .step.s2 .step-photo,.step.s3 .step-photo{aspect-ratio:1/1}
  .step-slab{min-height:0;aspect-ratio:auto}
  .step-slab::after{font-size:3.2rem}
  .call-number{font-size:clamp(1.6rem,8.4vw,2.4rem)}
  .finale-list div{grid-template-columns:1fr;gap:2px}
  .catalog-grid{grid-template-columns:1fr}
  .catalog-grid .card,.catalog-grid .card[data-slot]{grid-column:1/-1}
  .filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut);gap:24px}
  .filters::-webkit-scrollbar{display:none}
  .filter{white-space:nowrap;flex:none}
  .gallery{grid-template-columns:1fr}
  .gallery-link,.gallery-link:nth-child(n){grid-column:1/-1;margin-top:0}
  .next-link{grid-template-columns:1fr;row-gap:16px}
  .next-photo{grid-column:1;grid-row:auto}
  .viewer{width:100vw;max-height:100dvh;border-radius:0}
}

/* ---------- v10a round 1 (judge): one red line, sheets drawn over sheets, controls after their heading ---------- */
/* after a frame is built only its main structure (l1) answers the scroll velocity in red; the rest of the drawing returns on x-ray hover */
.drw.is-built:not(.scene)>.lines :not(.l1){opacity:0;transition:opacity .25s linear}
@media (hover:hover){.xray:hover .drw.is-built>.lines :not(.l1),.xray:focus-visible .drw.is-built>.lines :not(.l1){opacity:1}}
html.js.ready .strip.is-marquee .shot .drw>.lines :not(.l1){opacity:1}
.reno-photos{background:var(--paper)}
.reno-photo .drw{--drw-bg:transparent}
.reno-photo.is-active{z-index:2;transition:none}
.reno-photo.is-leaving{opacity:1;visibility:visible;z-index:1;transition:none}
.reno-photo.is-leaving .drw>img{filter:grayscale(1) brightness(1.1) contrast(.8);transition:filter .7s var(--ease-out)}
.strip-controls{transition:opacity var(--t-text) var(--ease-out) .55s}
html.js .sec-head:has(.draft:not(.is-drafted)) .strip-controls{opacity:0;transition:none}

/* hero intro: the photograph is a faint underlay from the first frame, the pen traces over it and the building rises in full */
html.js .hero-stage.drw:not(.is-built)>img{-webkit-mask-image:linear-gradient(to top,#000 calc(var(--rise) - 22%),rgba(0,0,0,.12) var(--rise));mask-image:linear-gradient(to top,#000 calc(var(--rise) - 22%),rgba(0,0,0,.12) var(--rise))}

/* phones and tablets: no pinned sheet over the register (it covered the row names — user, 3 Oct 2026);
   every service shows its own drawing-photo above its name, all descriptions open */
@media (max-width:1099px){
  .svc-row{grid-template-columns:minmax(0,1fr) 44px;grid-template-areas:"thumb thumb" "name go" "desc desc" "cap cap";grid-template-rows:auto;column-gap:16px}
  .svc-thumb{margin-bottom:6px}
  .svc-go{grid-row:auto}
  .svc-list.is-live .svc-thumb{max-height:none;opacity:1}
  .svc-list.is-live .svc-cap{opacity:1;margin-top:-4px}
  .svc-list.is-live .svc-desc{grid-template-rows:1fr;opacity:1}
  .svc-list.is-live .svc-row{row-gap:12px}
  .svc-list.is-live .svc-name{font-weight:640;color:var(--ink)}
}

/* phones: the large logo leaves room for the icon only; the label stays for screen readers */
@media (max-width:699px){
  .mb-l{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .menu-toggle{width:48px;justify-content:center;padding:0;align-self:center}
}

/* v11b „Saulės kelias“ as a sun study (user, 5 Oct 2026: the sky-dome plan was unclear and its roof plan read as an envelope) */
.sun-svg .ground{fill:var(--night-2);stroke:rgba(233,239,236,.55);stroke-width:1.6}
.sun-svg .ring{fill:none;stroke:rgba(233,239,236,.16);stroke-width:1.2}
.sun-svg .season{fill:none;stroke:rgba(233,239,236,.6);stroke-width:1.8}
.sun-svg .season.near,.sun-svg .today.near{stroke:rgba(233,239,236,.18);stroke-width:1.2;stroke-dasharray:4 7}
.sun-svg .today.near{stroke:rgba(226,65,47,.4)}
.sun-svg .season-label{font:600 19px var(--f-mono);fill:var(--on-night);text-anchor:middle;paint-order:stroke;stroke:var(--night);stroke-width:6px}
.sun-svg .face{fill:var(--on-night);fill-opacity:calc(.1 + var(--lit,.2)*.62);stroke:var(--on-night);stroke-width:1.6;stroke-linejoin:round;transition:fill-opacity .2s linear}
.sun-svg .house{transform-box:fill-box;transform-origin:50% 100%}
.sun-svg .shadow-tone{fill:rgba(3,7,9,.55)}
.sun-svg .ray{stroke-opacity:.55}
.sun-svg .sun-time{font:700 26px var(--f-mono)}
.sun.is-armed:not(.is-in) .sun-svg :is(.house,.season-label,.season.near,.today.near){opacity:0}
.sun.is-armed:not(.is-in) .sun-svg .ground{fill-opacity:0}
.sun.is-in .sun-svg .ground{animation:draw var(--t-scene) var(--ease-pen) both,ground-fill var(--t-text) var(--ease-out) .9s both}
.sun.is-in .sun-svg .house{animation:house-up 1s var(--ease-out) 1s both}
@keyframes house-up{from{opacity:0;transform:scaleY(0)}to{opacity:1;transform:none}}
.sun.is-in .sun-svg :is(.season.near,.today.near){animation:fade var(--t-text) var(--ease-out) 1.6s both}
.sun.is-armed .sun-svg .ring{stroke-dasharray:none}
.sun.is-armed:not(.is-in) .sun-svg .ring{opacity:0}
.sun.is-in .sun-svg .ring{animation:fade var(--t-text) var(--ease-out) .4s both}

/* phones: the sun study's labels and readings are set larger in the drawing's own units, so they stay readable */
@media (max-width:699px){
  .sun-svg .season-label{font-size:30px;stroke-width:8px}
  .sun-svg .hours text{font-size:32px}
  .sun-svg .sun-time{font-size:40px}
  .sun-svg .card{font-size:38px}
  .sun-data dt{font-size:.9rem}
  .sun-data dd{font-size:1.06rem}
}

/* touch (user rule 2026-10-05): no blue tap flash; a press shows its own state in place; focus rings only for the keyboard */
html{-webkit-tap-highlight-color:transparent}
.menu-toggle:active{color:var(--red)}
.btn:active::before{--sweep:100%}.btn:active{color:var(--fill-t);transition:color .2s var(--ease) .22s}
.btn-round:not(:disabled):active{background:var(--red);color:#fff}
.nav>a:not(.btn):active,.footer-nav a:active,.card:active .card-title,.shot:active .shot-name,.lot:active .lot-name{color:var(--red-ink)}
.svc-row:active .svc-name,.reno-tab:active .reno-addr{color:var(--red-ink)}
:focus:not(:focus-visible){outline:none}

/* language switch LT | EN (user rule 2026-10-17): header bar on phones, nav (desktop header and phone menu), footer */
.lang{display:inline-flex;align-items:baseline;gap:2px;font:600 .8rem/1 var(--f-mono);letter-spacing:.08em}
.lang a{padding:10px 6px;color:var(--ink-2);position:relative;transition:color .3s}
.lang a[aria-current]{color:var(--ink)}
.lang a[aria-current]::after{content:'';position:absolute;left:6px;right:6px;bottom:6px;height:1px;background:var(--red)}
.lang a:active{color:var(--red-ink)}
@media (hover:hover){.lang a:not([aria-current]):hover{color:var(--ink)}}
.lang-bar{display:none}
.footer .lang a{color:var(--on-night-2)}.footer .lang a[aria-current]{color:var(--on-night)}
@media (hover:hover){.footer .lang a:not([aria-current]):hover{color:#fff}}
.nav>.lang{margin-left:-6px}
@media all{
  .nav>.lang{margin:24px 0 0 -6px;font-size:1rem}
}

/* social links (user rules 17–18 Oct 2026): every client profile, always with its icon; contacts, footer and the phone menu */
.soc{display:inline-flex;align-items:center;gap:.45em;white-space:nowrap}
.soc .ico{width:1.05em;height:1.05em;stroke-width:1.6}
.nav>.nav-soc{display:none}
@media all{.nav>.nav-soc{display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:22px;font-weight:600}.nav-soc .soc{padding:10px 0}}

.finale-list .soc-row{display:flex;flex-wrap:wrap;gap:6px 18px}

/* «Шапка без каши» (user rule 18 Oct 2026): on phones the bar holds only the logo (left) and the menu button (right);
   the language switch and a large phone button live in the menu. The compact logo takes the bar up to 699 px, so the bar
   switch goes there too. */
.nav>a.nav-phone{display:none}
@media all{
  .nav>a.nav-phone{display:inline-flex;align-items:center;justify-content:center;gap:12px;align-self:stretch;margin-top:28px;min-height:60px;padding:0 24px;border:1.5px solid var(--ink);font-family:var(--f-display);font-weight:600;font-size:1.3rem;letter-spacing:-.01em;white-space:nowrap}
  .nav>a.nav-phone .ico{width:1.1em;height:1.1em;color:var(--red)}
  .nav>a.nav-phone:active{background:var(--ink);color:var(--paper)}
}

/* open phone menu without «каша» (user rule 18 Oct 2026): ONE column at one x; links → language → CTA → phone button → social icons in a row;
   groups ≥ 24 px apart, nothing on opposite edges, nothing wider than the screen */
@media all{
  .nav>a:not(.btn):not(.nav-phone){order:0}
  .nav>.lang{order:1;margin:24px 0 0;font-size:1rem}
  .nav>.lang a:first-child{padding-left:0}
  .nav>a.btn{order:2;align-self:flex-start;margin-top:24px}
  .nav>a.nav-phone{order:3;margin-top:24px}
  .nav>.nav-soc{order:4;display:flex;flex-wrap:nowrap;gap:0 24px;margin-top:24px}
  .nav-soc .soc{width:44px;height:44px;padding:0;justify-content:center}
  .nav-soc .soc .ico{width:28px;height:28px}
  .nav-soc .soc span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .nav-soc .soc:first-child{margin-left:-8px}
}

/* the open menu is its own sheet in the night colour of the drawings (FIRST_TIME_RIGHT B1: a full-screen sheet of another colour) */
.nav{background:var(--night);color:var(--on-night)}
.nav>a:not(.btn){color:var(--on-night)}
.nav>a:not(.btn):active{color:#fff}
.nav .lang a{color:var(--on-night-2)}.nav .lang a[aria-current]{color:#fff}
.nav .btn{background:var(--red);color:#fff}
.nav>a.nav-phone{border-color:var(--on-night);color:var(--on-night)}
.nav>a.nav-phone .ico{color:var(--red)}
.nav>a.nav-phone:active{background:var(--on-night);color:var(--night)}
.nav-soc .soc{color:var(--on-night)}
@media (hover:hover){.nav>a:not(.btn):hover{color:#fff}.nav .lang a:not([aria-current]):hover{color:#fff}.nav-soc .soc:hover{color:#fff}}
.nav .btn{--fill-c:var(--paper);--fill-t:var(--ink)}

/* Facebook cases (SOCIAL_ANALYSIS.md 24.10): who ordered each work, and the clients of the current feed in one quiet row */
.shot-client{display:block;margin-top:2px;font:500 .74rem/1.35 var(--f-mono);color:var(--ink-2)}
.clients{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px 32px;margin-top:clamp(28px,3vw,48px)}
.clients-label{font:500 .74rem/1.2 var(--f-mono);color:var(--ink-2)}
.clients-list{flex:1 1 40ch;display:flex;flex-wrap:wrap;gap:6px 28px;font-family:var(--f-display);font-weight:600;font-size:clamp(1rem,1.3vw,1.2rem);letter-spacing:-.02em;line-height:1.3}
.clients .link{margin-left:auto}
@media (max-width:699px){.clients{flex-direction:column;gap:12px}.clients .link{margin-left:0}}

/* logo and menu button share one centre line; the bar turns night with the open menu, so the sheet fills the screen (FIRST_TIME_RIGHT B1) */
.brand{display:flex;align-items:center}
.brand img{vertical-align:middle}
.menu-toggle{align-items:center;align-self:center}
.brand-night{display:none}
body.modal-open .header{background:var(--night);color:var(--on-night)}
body.modal-open .brand-day{display:none}
body.modal-open .brand-night{display:block}
.nav{top:var(--hh)}
.nav>a.nav-phone{border-radius:999px}
@media (max-width:699px){.menu-toggle{width:44px}}
/* project facts in one row on wide screens */
.facts{max-width:none}
/* the clients row: a quiet label above one flowing line of names */
.clients{flex-direction:column;align-items:flex-start;gap:10px}
.clients-list{flex:none;font-size:clamp(.95rem,1.05vw,1.05rem);font-weight:600;gap:4px 24px;color:var(--ink)}
.clients .link{margin-left:0}

/* menu sheet on wide screens: the phone button as wide as its number, like the CTA beside it */
@media (min-width:700px){.nav>a.nav-phone{align-self:flex-start}}
/* clients: names in an even grid of quiet lines, not one bold run */
.clients-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px 32px;width:100%;font-weight:500;font-size:clamp(.95rem,1vw,1.02rem);letter-spacing:-.01em}

/* first screen, v21: caption → headline → [button + lede] in one block on the dark left of the photograph */
.hero-act{align-items:center;flex-wrap:nowrap}
.hero-act .btn{flex:none}
@media (max-width:699px){.hero-act{flex-direction:column;align-items:flex-start;gap:18px}.hero-act .hero-lede{order:-1}}
html.js .hero:not(.is-built) .hero-caption{opacity:0;transform:translateY(18px)}
.hero.is-drafting .hero-caption{animation:enter .9s var(--ease) .9s both}
html.js:not(.ready) .hero:not(.is-built) .hero-caption{animation:enter 1ms 2.6s both}
/* phones: the block sits higher, so the lede reads on the dark brick wall and the white button covers the light steps */
@media (max-width:699px){.hero-copy{padding-bottom:clamp(88px,14svh,140px)}}
/* phones: the photo's caption goes under the button, onto the lawn (above the headline it crossed the pale birches) */
@media (max-width:699px){.hero-caption{order:3;margin:clamp(18px,3svh,28px) 0 0}.hero-copy{padding-bottom:clamp(64px,10svh,96px)}}

/* ===== Header v22 (rules of 27–28.10.2026, all sites): medium logo, everything needed visible at once ===========================
   desktop ≥ 1200: logo · links · LT|EN · phone · «Susisiekite»; 1024–1199: links go into «Meniu»; 700–1023: no button;
   phones: logo 28–30 px · LT|EN · phone icon · menu. Stuck: shorter bar, smaller logo, soft shade (never a 1 px line). */
:root{--hh:80px}
.header{transition:box-shadow .35s var(--ease)}
.header.is-stuck{box-shadow:0 10px 24px rgba(17,26,30,.09)}
.header-inner{gap:0 clamp(24px,2.4vw,40px)}
html.ready .header-inner{transition:height .35s var(--ease)}
.header.is-stuck .header-inner{height:64px}
.header .brand{--lh:42px;flex:none}
.header .brand img{transform-origin:0 50%;transition:transform .35s var(--ease)}  /* the stuck logo is scaled, its box never changes (no jump on first paint) */
.header.is-stuck .brand img{transform:scale(.905)}  /* stuck: 42 → 38 px, still within 36–60 */
.header.is-stuck .nav{top:64px}
.bar-tools{display:flex;align-items:center;gap:clamp(22px,2vw,32px);margin-left:auto;flex:none}
.bar-tools .lang-bar{display:inline-flex}
.bar-tools .lang{font-size:.88rem;gap:8px}
.bar-phone{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;font-size:.98rem;white-space:nowrap;color:var(--ink)}
.bar-phone .ico{color:var(--red)}
@media (hover:hover){.bar-phone:hover{color:var(--red-ink)}}
.bar-cta{min-height:46px;padding:12px 20px}
@media (min-width:1200px){
  .nav{position:static;inset:auto;z-index:auto;flex-direction:row;align-items:center;gap:clamp(28px,2.6vw,40px);padding:0;margin-left:auto;background:none;color:var(--ink);visibility:visible;opacity:1;transform:none;overflow:visible;font-size:1rem}
  .nav>a:not(.btn){font-family:inherit;font-weight:600;font-size:1.02rem;letter-spacing:0;line-height:1.2;padding:10px 0;color:var(--ink)}
  .nav>a:not(.btn)::after{display:block}
  .nav>a.nav-phone,.nav>.nav-soc,.nav>.lang,.nav>a.btn{display:none}
  .bar-tools{margin-left:0}
  .bar-tools .menu-toggle{display:none}
}
@media (max-width:1199px){.bar-tools .menu-toggle{margin-left:4px}}
@media (max-width:1023px){.bar-cta{display:none}}
@media (max-width:699px){
  :root{--hh:72px}
  .header.is-stuck .header-inner{height:60px}
  .header.is-stuck .nav{top:60px}
  .header .brand{--lh:28px}
  .header.is-stuck .brand img{transform:none}
  .header-inner{gap:0 10px}
  .bar-tools{gap:10px}
  .bar-tools .lang{font-size:.82rem;gap:6px}
  .bar-tools .lang a{padding:10px 4px}
}
@media (max-width:389px){.bar-tools .lang a[aria-current]{display:none}}  /* the narrowest phones show only the other language */
@media (min-width:1200px) and (hover:hover){.nav>a:not(.btn):hover{color:var(--red-ink)}}
body.modal-open .bar-phone{color:var(--on-night)}
body.modal-open .bar-tools .lang a{color:var(--on-night-2)}
body.modal-open .bar-tools .lang a[aria-current]{color:#fff}
@media (max-width:699px){body.modal-open .bar-phone{background:var(--on-night);color:var(--night)}body.modal-open .bar-phone .ico{color:var(--night)}}
@media (max-width:899px){
  .bar-phone{justify-content:center;width:40px;height:40px;min-height:0;border-radius:50%;background:var(--ink);color:var(--paper)}
  .bar-phone .ico{color:var(--paper);width:18px;height:18px}
  .bar-phone-n{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  body.modal-open .bar-phone{background:var(--on-night);color:var(--night)}body.modal-open .bar-phone .ico{color:var(--night)}
}