/* MONOLITH · the plates of glass (Servicii). Acasă is the built thing, in chrome; this is its plan, held in glass.
   Each plate: the word of a domain, very large, on paper; thick panes of real glass over it, carrying the drawings of what we deliver.
   The words you read never sit under the glass: they live below the plate's stage. */

.page-plansa{background:var(--bg)}
.page-plansa main{position:relative;z-index:2}
/* the matter behind the paper and a fine grid on it: the glass bends both */
.matter{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;mix-blend-mode:multiply}
[data-theme="dark"] .matter{opacity:.34;mix-blend-mode:screen}
.paper{position:fixed;inset:0;z-index:1;pointer-events:none;background-image:linear-gradient(var(--line-faint) 1px,transparent 1px),linear-gradient(90deg,var(--line-faint) 1px,transparent 1px);background-size:24px 24px}

/* glass tokens: clear, a bright cut edge on top and left, a darker one below; thickness you can see, a shadow on the paper */
.page-plansa{--lq-tint:rgba(255,255,255,.12);--lq-tint-deep:rgba(255,255,255,.04);--lq-rim-hi:rgba(255,255,255,.95);--lq-rim-lo:rgba(255,255,255,.35);
  --pane-ext:rgba(255,255,255,.5);--pane-ext-lo:rgba(16,19,21,.09);--pane-shadow:rgba(16,19,21,.32);--pane-in-lo:rgba(16,19,21,.2)}
[data-theme="dark"] .page-plansa{--lq-tint:rgba(255,255,255,.05);--lq-tint-deep:rgba(255,255,255,.02);--lq-rim-hi:rgba(255,255,255,.55);--lq-rim-lo:rgba(255,255,255,.14);
  --pane-ext:rgba(255,255,255,.14);--pane-ext-lo:rgba(0,0,0,.5);--pane-shadow:rgba(0,0,0,.75);--pane-in-lo:rgba(0,0,0,.45)}
.pane,.slab,.gp__bar{box-shadow:7px 9px 0 -1px var(--pane-ext),7px 9px 0 0 var(--pane-ext-lo),30px 46px 70px -34px var(--pane-shadow)}
.pane::after,.slab::after,.gp__bar::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 1px 0 var(--lq-rim-hi),inset 1px 0 0 var(--lq-rim-lo),inset 0 -1px 0 var(--pane-in-lo),inset -1px 0 0 var(--pane-in-lo)}
.pane.is-back{box-shadow:5px 6px 0 -1px var(--pane-ext),5px 6px 0 0 var(--pane-ext-lo)}

/* ── a plate ── */
.gp{position:relative;padding:calc(var(--hdr) + var(--toc-h)) var(--m) 0;border-bottom:1px solid var(--line)}
.gp__stage{position:relative;height:calc(100svh - var(--hdr) - var(--toc-h));min-height:560px}
.gp__ch{position:absolute;left:0;top:28px;z-index:4;display:flex;gap:14px;align-items:baseline;margin:0;font-size:13px;color:var(--soft)}
.gp__ch b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
/* the word: very large, on the paper, under the glass */
.gp__word{position:absolute;left:-0.04em;top:44%;z-index:1;margin:0;font-size:clamp(96px,19vw,360px);font-weight:600;line-height:.8;letter-spacing:-0.06em;white-space:nowrap;color:var(--ink);opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease),transform 1.2s var(--ease);pointer-events:none}
.gp.is-on .gp__word{opacity:.94;transform:none}
.gp__panes{position:absolute;inset:0;z-index:2;pointer-events:none}
.pane{position:absolute;left:0;top:0;opacity:0;transition:opacity .8s var(--ease) calc(var(--k,0) * .12s);will-change:transform}
.gp.is-on .pane{opacity:1}
.pane.is-hot{z-index:20!important}
.pane__dim{position:absolute;left:0;right:0;top:-24px;height:12px;border-left:1px solid var(--ink);border-right:1px solid var(--ink);z-index:3}
.pane__dim::before{content:"";position:absolute;left:0;right:0;top:6px;border-top:1px solid var(--ink);opacity:.7}
.pane__dim b{position:absolute;left:50%;top:-16px;transform:translateX(-50%);font:500 11px/1 Geist,sans-serif;color:var(--ink);background:var(--bg);padding:2px 6px;white-space:nowrap}
.pane>svg{position:absolute;inset:0;width:100%;height:100%;z-index:2}
/* the drawings on the panes */
.scheme .ln{fill:none;stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke}
.scheme .f{fill:var(--ink);opacity:.78}
.scheme .d{fill:none;stroke:var(--soft);stroke-dasharray:3 3}
.scheme .t{fill:var(--ink);font-family:Geist,sans-serif}
.scheme .big{font-size:22px;font-weight:600}
/* the technical drawing inside a pane, or on the monolith of the cover */
.dw{padding:6%}
.dw .ln{fill:none;stroke:var(--ink);stroke-width:1.1;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.dw .w1{stroke-width:.8;stroke:var(--soft)}.dw .w2{stroke-width:1.3}.dw .w3{stroke-width:2.2}
.dw .ld{stroke:var(--soft);stroke-width:.7;stroke-dasharray:2 3}.dw .dm{stroke:var(--soft);stroke-width:.7}.dw .gr{stroke-width:1.3}
.dw .arc{stroke:var(--soft);stroke-dasharray:4 4}.dw .route{stroke-width:1.5;stroke-dasharray:6 5}.dw .idl{stroke:var(--soft);stroke-width:.8;stroke-dasharray:10 6}.dw .sw{stroke-dasharray:3 3}
.dw .hl{stroke:var(--soft);stroke-width:.6}.dw .hf{fill:var(--soft)}.dw .mk{fill:none;stroke:var(--soft);stroke-width:1.2}.dw .dotf{fill:var(--ink)}
.dw text{font-family:Geist,sans-serif;fill:var(--ink)}.dw .dt{font-size:11px;fill:var(--soft)}.dw .lc{font-size:11px;font-weight:500}.dw .ln2{font-size:12px;fill:var(--soft)}.dw .note{display:none}.dw .room{font-size:13px;font-weight:500}
/* drawing in: solid lines draw themselves; dashed lines, fills and words arrive after */
.motion .gp .ln:not(.ld):not(.dm):not(.arc):not(.route):not(.idl):not(.sw):not(.d){stroke-dasharray:1;stroke-dashoffset:1}
.motion .gp.is-on .ln:not(.ld):not(.dm):not(.arc):not(.route):not(.idl):not(.sw):not(.d){stroke-dashoffset:0;transition:stroke-dashoffset 1.3s cubic-bezier(.65,0,.35,1) calc(.35s + var(--k,0) * .15s)}
.motion .gp .f,.motion .gp text,.motion .gp [fill^="url"],.motion .gp .earth,.motion .gp .dotf,.motion .gp .ld,.motion .gp .dm,.motion .gp .arc,.motion .gp .route,.motion .gp .idl,.motion .gp .sw,.motion .gp .d{opacity:0;transition:opacity .7s var(--ease)}
.motion .gp.is-on .f{opacity:.78;transition-delay:1.1s}
.motion .gp.is-on text,.motion .gp.is-on [fill^="url"],.motion .gp.is-on .earth,.motion .gp.is-on .dotf,.motion .gp.is-on .ld,.motion .gp.is-on .dm,.motion .gp.is-on .arc,.motion .gp.is-on .route,.motion .gp.is-on .idl,.motion .gp.is-on .sw,.motion .gp.is-on .d{opacity:1;transition-delay:1.1s}

/* ── under the stage: the words you read ── */
.gp__body{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,6vw,120px);padding:clamp(32px,5vh,64px) 0 clamp(40px,6vh,72px);border-top:1px solid var(--line)}
.gp__title{margin:0;font-size:clamp(34px,min(3.6vw,6.4vh),62px);font-weight:500;line-height:.98;letter-spacing:-0.045em;color:var(--ink)}
.gp__lead{margin:18px 0 0;font-size:var(--s-lead2);line-height:1.3;letter-spacing:-0.016em;max-width:30ch;color:var(--ink)}
.gp__note{margin:14px 0 0;font-size:14px;line-height:1.5;color:var(--soft);max-width:44ch}
.gp__note a{color:var(--ink)}
.gp__act{margin-top:26px;display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.gp__fig{margin:28px 0 0;width:min(100%,320px);border:1px solid var(--line);background:var(--bg)}
.gp__fig img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.gp__fig figcaption{padding:7px 10px;font-size:11px;color:var(--soft);border-top:1px solid var(--line)}

/* the schedule: every service, with its code */
.sched{list-style:none;padding:0;margin:0;border-top:1px solid var(--ink)}
.sched li{border-bottom:1px solid var(--line)}
.sched__row{display:grid;grid-template-columns:44px minmax(0,1fr) 18px;column-gap:12px;align-items:baseline;width:100%;padding:12px 0;border:0;background:none;color:var(--ink);text-align:left;font:inherit;cursor:pointer}
.sched__row .c{font-size:12px;color:var(--soft);font-variant-numeric:tabular-nums}
.sched__row b{font-size:17px;font-weight:500;line-height:1.3}
.sched__row i{grid-column:2;font-style:normal;font-size:14px;line-height:1.45;color:var(--soft);margin-top:3px}
.sched__row::after{content:"";grid-column:3;grid-row:1;width:9px;height:9px;justify-self:end;align-self:center;border-right:1px solid var(--soft);border-bottom:1px solid var(--soft);transform:rotate(45deg) translateY(-3px);transition:transform .3s var(--ease)}
.sched__row[aria-expanded=true]::after{transform:rotate(225deg) translateY(-1px)}
.sched__row:hover b,.sched__row:focus-visible b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.sched__more{display:grid;grid-template-columns:44px 110px minmax(0,1fr);column-gap:12px;padding:0 0 14px}
.sched__more[hidden]{display:none}
.sched__more dt{grid-column:2;font-size:12.5px;color:var(--soft);padding:6px 0;border-top:1px solid var(--line-faint)}
.sched__more dd{grid-column:3;margin:0;font-size:13.5px;line-height:1.45;color:var(--ink);padding:6px 0;border-top:1px solid var(--line-faint)}

/* the title block */
.tb{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));border-top:1px solid var(--line);margin:0 calc(-1 * var(--m));padding:0 var(--m)}
.tb div{padding:10px 12px;border-left:1px solid var(--line);min-width:0}
.tb div:first-child{border-left:0;padding-left:0}
.tb small{display:block;font-size:10px;color:var(--soft);margin-bottom:3px}
.tb b{display:block;font-size:12.5px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb__mark{display:block;width:96px;color:var(--ink)}
.tb__mark svg{display:block;width:100%;height:auto}

/* ── the cover: the title, and the monolith of glass over it ── */
.gp--cover .gp__stage{display:flex;flex-direction:column;justify-content:center}
.gp__hero{position:relative;z-index:1;margin:0;font-size:clamp(64px,10.5vw,200px);font-weight:500;line-height:.9;letter-spacing:-0.055em;color:var(--ink)}
.gp__hero span{display:block}
.slab{position:absolute;z-index:3;top:9%;right:8vw;height:min(74%,620px);aspect-ratio:4/9;cursor:grab;touch-action:pan-y;will-change:transform}
.slab:active{cursor:grabbing}
.slab .dw{position:absolute;inset:0;width:100%;height:100%;padding:8% 2%;z-index:2}
.slab__hint{position:absolute;z-index:3;right:8vw;bottom:4%;margin:0;font-size:12px;color:var(--soft)}
.lens{position:fixed;left:0;top:0;z-index:30;width:150px;height:150px;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .4s var(--ease);will-change:transform}
.lens.is-on{opacity:1}
.lens.lg,.lens.lg>.lg__layer{corner-shape:round;border-radius:50%}
/* the index of plates */
.idx{list-style:none;padding:0;margin:0;border-top:1px solid var(--ink)}
.idx a{display:grid;grid-template-columns:52px minmax(0,1fr) auto;column-gap:12px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.idx .c{font-size:12px;color:var(--soft);font-variant-numeric:tabular-nums}
.idx b{font-size:18px;font-weight:500}
.idx span:last-child{font-size:13px;color:var(--soft)}
.idx a:hover b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* ── the end: a bar of glass crosses the question as you arrive ── */
.gp--end{overflow:hidden}
.gp--end .gp__stage{display:flex;flex-direction:column;justify-content:center;height:auto;min-height:72svh;padding:8vh 0}
.gp__q{position:relative;z-index:1;margin:0;font-size:clamp(56px,9vw,170px);font-weight:500;line-height:.9;letter-spacing:-0.055em;color:var(--ink)}
.gp__q span{display:block}
.gp__bar{position:absolute;z-index:3;left:0;top:18%;height:clamp(120px,15vw,260px);width:clamp(180px,22vw,380px);pointer-events:none}
.gp--end .gp__act{position:relative;z-index:4;margin-top:40px}

@media (max-width:860px){
  .gp__stage{height:auto;min-height:0;aspect-ratio:3/4}
  .gp__word{top:46%;font-size:clamp(72px,24vw,140px)}
  .gp__body{grid-template-columns:1fr;row-gap:28px}
  .gp__hero{font-size:clamp(52px,15vw,96px)}
  .gp--cover .gp__stage{aspect-ratio:auto;min-height:72svh;justify-content:flex-start;padding-top:72px}
  .slab{top:auto;bottom:6%;right:16px;height:46%}
  .slab__hint,.lens{display:none}
  .tb{grid-template-columns:1fr 1fr}.tb div:nth-child(n+4){display:none}
  .sched__more{grid-template-columns:1fr}.sched__more dt,.sched__more dd{grid-column:1}.sched__more dt{padding-bottom:0}
  .gp__q{font-size:clamp(46px,13vw,84px)}
}
/* the word may run past the edge of the paper, never past the page */
.gp{overflow-x:clip}

/* ── the end, reworked: the question on the left; on the right, your plate, still blank, leading to the brief ── */
.gp--end .gp__stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.85fr);align-items:center;column-gap:clamp(40px,6vw,120px);min-height:78svh;height:auto;padding:12vh 0 10vh}
.gp__endtext{position:relative;z-index:2}
.gp__blank{position:relative;z-index:3;display:block;aspect-ratio:4/3;color:var(--ink);text-decoration:none;cursor:pointer;transition:transform .5s var(--ease)}
.gp__blank .dw{position:absolute;inset:0;width:100%;height:100%;padding:0;z-index:2}
.gp__blank:hover{transform:translateY(-6px)}
.gp__blank:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.gp__blank,.gp__blank::after{box-shadow:7px 9px 0 -1px var(--pane-ext),7px 9px 0 0 var(--pane-ext-lo),30px 46px 70px -34px var(--pane-shadow)}
.gp__blank::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 1px 0 var(--lq-rim-hi),inset 1px 0 0 var(--lq-rim-lo),inset 0 -1px 0 var(--pane-in-lo),inset -1px 0 0 var(--pane-in-lo)}
.blank .ln2{font-size:13px}
@media (max-width:860px){ .gp--end .gp__stage{grid-template-columns:1fr;row-gap:48px;aspect-ratio:auto;padding:14vh 0 8vh} .gp__blank{width:min(100%,420px)} }
.gp--end .gp__q{font-size:clamp(48px,6.2vw,118px)}
/* your plate leaves Servicii and becomes the brief on Contact (cross-document view transition) */
.gp__blank{view-transition-name:plansa}
/* arriving from Acasă: the monolith is still chrome for a moment, then it cools into clear glass */
.slab::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity 1.8s var(--ease) .2s;
  background:linear-gradient(100deg,#7d8287 0%,#f2f4f5 18%,#5b6065 34%,#e8ebec 52%,#6b7075 68%,#fafbfb 84%,#8a8f94 100%)}
.slab.is-chrome::before{opacity:1;transition:none}

/* ── Pachete: the section through the building. Solid and hatched: what the package adds; dashed: what exists; faint: not included ── */
.dw .lr{stroke:var(--ink);stroke-width:1.4;vector-effect:non-scaling-stroke;transition:stroke-dasharray .4s,opacity .4s}
.dw .lay.st-have .lr,.dw .lg-have{fill:none;stroke-dasharray:6 4;stroke:var(--soft)}
.dw .lay.st-off .lr,.dw .lg-off{fill:none;stroke-dasharray:1 5;opacity:.45;stroke:var(--soft)}
.dw .lay.st-off text{opacity:.45}
.dw .lay.st-new .lst{fill:var(--ink);font-weight:500}
.dw .sig{opacity:0;transition:opacity .5s var(--ease)}
.dw .sig.on{opacity:1}
.motion .gp .lr{opacity:0;transition:opacity .8s var(--ease) .5s}
.motion .gp.is-on .lr{opacity:1}
.motion .gp.is-on .lay.st-off .lr{opacity:.45}
/* the cover of Pachete: a wide slab, the section of your building in it */
.slab--wide{aspect-ratio:640/520;height:min(72%,560px);top:10%}
.slab--wide .dw{padding:4%}
.sched__row--plain{cursor:default;grid-template-columns:44px minmax(0,1fr)}
.sched__row--plain::after{display:none}
.sched__row--plain b{font-size:16px}
@media (max-width:860px){ .slab--wide{left:16px;right:16px;width:auto;height:auto;top:auto;bottom:2%} .gp--cover .gp__stage{min-height:86svh} }
.dw .obj.is-lit .ln{stroke:var(--ink);stroke-width:2.4}
.dw .lb.is-lit .lc{text-decoration:underline}
.sched__row--plain[data-s-link]{cursor:default}
.sched__row--plain[data-s-link]:hover b,.sched__row--plain[data-s-link]:focus-visible b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
@media (min-width:861px){ .gp__hero--long{font-size:clamp(56px,8vw,156px)} }
/* phone: one column. Chapter, the word, the glass with its drawing at full width, then the text. Nothing on top of anything */
@media (max-width:860px){
  .gp__stage{display:flex;flex-direction:column;aspect-ratio:auto;height:auto;min-height:0;padding:24px 0 44px}
  .gp__ch{position:static}
  .gp__word{position:static;margin:26px 0 0 -0.04em;font-size:clamp(64px,22vw,140px);line-height:.86}
  .gp__panes{position:relative;inset:auto;margin-top:52px}
  .gp--cover .gp__stage{min-height:0;padding:24px 0 40px;justify-content:flex-start}
  .gp--cover .gp__hero{margin-top:26px}
  .slab,.slab--wide{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:640/520;margin-top:52px}
  .slab .dw{padding:5% 3%}
  .tb{grid-template-columns:auto minmax(0,1fr) minmax(0,1fr)}
  .tb div:nth-child(2),.tb div:nth-child(5){display:none}
  .tb div:nth-child(4){display:block}
}
/* English runs longer: the cover of Packages a little smaller beside its wide slab; on a phone the titles flow, balanced */
@media (min-width:861px){ html[lang=en] #h-pachetele{font-size:clamp(44px,5.1vw,98px)} }
@media (max-width:860px){ html[lang=en] .gp__hero{text-wrap:balance;font-size:clamp(40px,11vw,80px)} html[lang=en] .gp__hero span{display:inline} html[lang=en] .gp__hero span+span::before{content:" "} }