/* MONOLITH · Contact: glass with a moment of chrome.
   The same sheet as the home page: words in the column on the left, metal in the zone on the right.
   The form is a pane of glass in the column of words; behind it, the pool of the metal you just cast. */

.page-contact .frame{display:none}
.cstage{position:fixed;inset:0;z-index:0;pointer-events:none}
.cast{position:absolute;inset:0;width:100%;height:100%}
.cast__fallback{display:none}
.no-cast .cast{display:none}
.no-cast .cast__fallback{display:block;position:absolute;left:calc(var(--m) + var(--zone));right:var(--m);top:50%;transform:translateY(-50%);font-size:clamp(48px,7vw,140px);font-weight:600;letter-spacing:-0.05em;line-height:1;color:var(--ink);opacity:.9;overflow-wrap:anywhere}

.contact{position:relative;z-index:2}
.csec{min-height:100svh;display:flex;align-items:center;padding:calc(var(--hdr) + var(--toc-h) + 40px) var(--m) 56px}
.copy--static{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:var(--col);padding:0;display:block}
.copy--static .copy__title{font-size:var(--s-h-fit, var(--s-h))}
@media (min-width:861px){ .copy--static .copy__title .ln{white-space:nowrap} }

/* the name: written large, on a measured line */
.namefield{display:block;margin-top:34px;position:relative}
.namefield input{width:100%;background:none;border:0;border-bottom:1px solid var(--ink);padding:6px 0 12px;font:500 clamp(28px,min(3vw,5.4vh),48px)/1.1 Geist,sans-serif;letter-spacing:-0.035em;color:var(--ink);border-radius:0;outline:none;caret-color:var(--ink)}
.namefield input::placeholder{color:var(--soft);opacity:.55}
.namefield::before,.namefield::after{content:"";position:absolute;bottom:-4px;width:1px;height:9px;background:var(--ink)}
.namefield::before{left:0}.namefield::after{right:0}
.namefield input:focus-visible{border-bottom-width:2px;padding-bottom:11px}
.namefield__hint{font-size:13px;color:var(--soft)}

/* the brief: one pane of glass, one question at a time.
   Five layers, like the monolith: each answer sets one. */
.csec--brief{align-items:center}
.brief{width:min(var(--col), 680px)}
.brief__glass{position:relative;border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 42%,transparent)}
.brief__in{position:relative;z-index:2;padding:clamp(24px,3vw,44px);display:flex;flex-direction:column;min-height:min(560px,calc(100svh - var(--hdr) - var(--toc-h) - 120px))}
.brief__head{display:grid;grid-template-columns:1fr auto;align-items:baseline;row-gap:16px}
.brief__head .copy__ch{margin:0}
.brief__head .copy__ch b{font-weight:500;color:var(--ink)}
.brief__count{grid-column:2;grid-row:1;margin:0;font-size:13px;color:var(--soft);font-variant-numeric:tabular-nums}
.brief__prog{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.brief__prog i{display:block;height:3px;background:var(--line);position:relative;overflow:hidden}
.brief__prog i::after{content:"";position:absolute;inset:0;background:var(--ink);transform-origin:0 50%;transform:scaleX(0);transition:transform .7s var(--ease-move)}
.brief__prog i.is-on::after{transform:scaleX(1)}
.brief__steps{flex:1;display:grid;margin-top:clamp(32px,6vh,64px)}
.bstep{grid-area:1/1;border:0;margin:0;padding:0;min-width:0;display:none}
.bstep.is-on{display:block}
.bstep__q{display:block;padding:0;margin:0 0 12px;font-size:clamp(26px,min(2.4vw,4.4vh),40px);font-weight:500;line-height:1.08;letter-spacing:-0.035em;color:var(--ink);max-width:18ch}
.bstep__hint{margin:0 0 26px;font-size:15px;line-height:1.5;color:var(--soft);max-width:46ch}
.bstep__sub{margin:30px 0 12px;font-size:16px;font-weight:500}
.brief em{font-style:normal;font-weight:400;font-size:13px;color:var(--soft);margin-left:8px}
.brief textarea,.brief__who input{display:block;width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:10px 0 12px;font:400 clamp(18px,1.4vw,21px)/1.45 Geist,sans-serif;letter-spacing:-0.01em;color:var(--ink);resize:none;overflow:hidden;outline:none;transition:border-color .25s var(--ease)}
.brief textarea{min-height:52px}
.brief textarea:focus,.brief__who input:focus{border-bottom-color:var(--ink)}
.brief [aria-invalid="true"]{border-bottom-color:#d4574f}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{position:relative;cursor:pointer;margin:0}
.chips input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chips span{display:block;padding:12px 16px;border:1px solid var(--line);font-size:15px;line-height:1;color:var(--ink);transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.chips label:hover span{border-color:var(--ink)}
.chips input:checked+span{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chips input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.brief__who{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px}
.brief__who label{display:block}
.brief__who label:last-child{grid-column:1/-1}
.brief__who span{display:block;font-size:13px;color:var(--soft)}
.brief__sum{margin:4px 0 24px;display:grid;grid-template-columns:minmax(0,1fr) auto;border-top:1px solid var(--line)}
.brief__sum dt{grid-column:1;padding:9px 0 1px;font-size:12px;color:var(--soft)}
.brief__sum dd{grid-column:1;margin:0;padding:0 0 9px;font-size:15px;line-height:1.45;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.brief__sum button{grid-column:2;align-self:center;grid-row:span 2;background:none;border:0;padding:0 0 0 20px;font:400 13px/1 Geist,sans-serif;color:var(--soft);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.brief__sum button:hover{color:var(--ink)}
.brief__send{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-bottom:14px}
.brief__send .btn{min-width:240px}
.brief__send .link{background:none;border:0;cursor:pointer;font-family:inherit}
.brief__err{margin:16px 0 0;font-size:14px;color:#d4574f}
.brief__nav{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:32px}
.brief__nav .btn{min-width:200px}
.brief__back{background:none;border:0;cursor:pointer;font-family:inherit;color:var(--ink)}
.brief__back[hidden]{display:block!important;visibility:hidden}
.brief__nav[hidden]{display:none}
.brief__done{margin:0;font-size:var(--s-lead2);line-height:1.3;letter-spacing:-0.016em}
html:not(.js) .bstep{display:block;margin-bottom:32px}
html:not(.js) .brief__nav{display:none}

/* the tape: three steps */
.toc--3 .toc__list{grid-template-columns:repeat(3,1fr)}

/* the signature, the same as at the end of the film */
.csec--sign{min-height:80svh}
.copy--sign .sign__mark{color:var(--ink)}

@media (max-width:860px){
  .csec{min-height:auto;padding:calc(var(--hdr) + var(--toc-h) + 22px) var(--m) 40px}
  #nume{min-height:100svh;align-items:flex-start}
  .copy--static{width:100%}
  .brief{width:100%}
  .brief__in{padding:22px 18px;min-height:0}
  .brief__nav .btn{min-width:0;flex:1}
  .brief__send .btn{width:100%}
  .brief__who{grid-template-columns:1fr}
  #nume .copy__act{flex-direction:column;align-items:stretch;gap:12px}
  #nume .copy__act .btn{width:100%;flex:none}
  .no-cast .cast__fallback{left:var(--m);top:auto;bottom:12vh;transform:none;font-size:clamp(40px,13vw,72px)}
}

.bstep--review .bstep__q{font-size:clamp(22px,min(1.9vw,3.6vh),32px);margin-bottom:8px}
@media (max-width:860px){
  /* on a phone the metal belongs to the first screen and leaves with it: nothing scrolls over it */
  .cstage{position:absolute;height:100svh}
}

/* ── round 2 of the brief ── */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
/* the pane: a rim of light instead of a drawn box; the pool runs behind it, so the glass has something to bend */
.brief__glass{border:1px solid color-mix(in srgb,var(--ink) 9%,transparent);background:color-mix(in srgb,var(--bg) 30%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 14%,transparent),0 40px 80px -40px rgba(0,0,0,.45)}
[data-theme="light"] .brief__glass{background:color-mix(in srgb,#fff 34%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 40px 80px -46px rgba(10,15,20,.25)}
.brief__in{min-height:0}
.brief__steps{margin-top:clamp(28px,4.5vh,48px);min-height:clamp(220px,30vh,300px);align-content:start}
.bstep__q{font-size:clamp(28px,min(2.6vw,4.8vh),44px);margin-bottom:10px}
.bstep__hint{margin-bottom:20px}
.brief textarea,.brief__who input{font-size:clamp(19px,1.5vw,23px)}
.brief__nav{margin-top:28px;padding-top:20px;border-top:1px solid color-mix(in srgb,var(--ink) 8%,transparent)}
/* quick answers: small, quiet, a start */
.quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.quick button{background:none;border:1px dashed color-mix(in srgb,var(--ink) 22%,transparent);padding:8px 12px;font:400 14px/1 Geist,sans-serif;color:var(--soft);cursor:pointer;transition:color .2s var(--ease),border-color .2s var(--ease)}
.quick button::before{content:"+";margin-right:6px;color:var(--soft)}
.quick button:hover{color:var(--ink);border-color:var(--ink)}
.quick button[aria-pressed="true"]{color:var(--ink);border-style:solid;border-color:var(--ink)}
.quick button[aria-pressed="true"]::before{content:"✓"}
.bstep__sub{margin:26px 0 12px}
/* the answer has landed */
.brief__ok{margin-top:clamp(28px,4.5vh,48px)}
.brief__next{list-style:none;counter-reset:n;margin:8px 0 28px;padding:0;border-top:1px solid var(--line)}
.brief__next li{counter-increment:n;display:grid;grid-template-columns:28px 1fr;column-gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.brief__next li::before{content:counter(n);grid-row:span 2;font-size:13px;line-height:1.6;color:var(--soft)}
.brief__next b{font-size:16px;font-weight:500}
.brief__next span{font-size:14px;color:var(--soft)}
.brief__ok .link{background:none;border:0;cursor:pointer;font-family:inherit}
[hidden]{display:none!important}
.brief__back[hidden]{display:block!important;visibility:hidden}
@media (max-width:860px){ .brief__steps{min-height:0} .quick button{font-size:13px} }

/* ── round 3: options first, words where they help ── */
.bstep .chips{gap:8px}
.bstep .chips span{padding:12px 15px}
.other{display:block;margin-top:12px;max-width:420px}
.other input,.more textarea{display:block;width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:8px 0 10px;font:400 17px/1.45 Geist,sans-serif;color:var(--ink);outline:none;resize:none;overflow:hidden;transition:border-color .25s var(--ease)}
.other input:focus,.more textarea:focus{border-bottom-color:var(--ink)}
.other input::placeholder,.more textarea::placeholder{color:var(--soft);opacity:.7}
.more{display:block;margin-top:24px}
.more>span{display:block;font-size:13px;color:var(--soft)}
.more textarea{min-height:40px;font-size:16px}
.bstep .bstep__sub:first-of-type{margin-top:8px}
@media (max-width:860px){ .bstep .chips span{padding:10px 12px;font-size:14px} }
/* the review: a compact table, one line per answer */
.brief__sum{grid-template-columns:clamp(110px,26%,170px) minmax(0,1fr) auto;column-gap:16px;border-top:1px solid var(--line)}
.brief__sum dt,.brief__sum dd,.brief__sum button{padding:10px 0;border-bottom:1px solid var(--line);align-self:stretch}
.brief__sum dt{grid-column:1;font-size:13px;line-height:1.45;color:var(--soft)}
.brief__sum dd{grid-column:2;font-size:15px;line-height:1.45}
.brief__sum button{grid-column:3;grid-row:auto;padding-left:0;display:flex;align-items:flex-start}
@media (max-width:860px){ .brief__sum{grid-template-columns:minmax(0,1fr) auto} .brief__sum dt{grid-column:1/-1;border-bottom:0;padding-bottom:0} .brief__sum dd{grid-column:1} .brief__sum button{grid-column:2} }

/* ── round 5: no box. The brief is a block in the column of words, held by hairlines like the rest of the site ── */
.brief{width:min(var(--col), 680px)}
.brief__glass{border:0!important;background:none!important;box-shadow:none!important}
.brief__glass>.lg-layer,.brief__glass>[class*="lq-"]{display:none}
.brief__in{padding:0}
.brief__head{padding-bottom:0}
.brief__count{font-variant-numeric:tabular-nums;color:var(--ink)}
.brief__prog{gap:4px}
.brief__prog i{height:2px}
.brief__steps{min-height:clamp(380px,46vh,470px)}
/* options: rows with a letter, two columns; the letter fills when chosen */
.bstep{counter-reset:opt}
.bstep .chips{display:grid;grid-template-columns:1fr 1fr;column-gap:28px;gap:0 28px;border-top:1px solid var(--line)}
.bstep .chips label{counter-increment:opt;border-bottom:1px solid var(--line)}
.bstep .chips span{display:grid;grid-template-columns:24px 1fr;align-items:center;column-gap:14px;padding:13px 0;border:0;background:none!important;font-size:16px;line-height:1.3;color:var(--soft);transition:color .2s var(--ease)}
.bstep .chips span::before{content:counter(opt, upper-alpha);display:grid;place-items:center;width:24px;height:24px;border:1px solid var(--line);font-size:11px;font-weight:500;line-height:1;color:var(--soft);transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.bstep .chips label:hover span{color:var(--ink);border:0}
.bstep .chips label:hover span::before{border-color:var(--ink);color:var(--ink)}
.bstep .chips input:checked+span{color:var(--ink)!important;background:none!important}
.bstep .chips input:checked+span::before{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.bstep .chips input[type=checkbox]:checked+span::before{content:"✓";font-size:13px}
.bstep .chips input:focus-visible+span{outline:2px solid var(--ink);outline-offset:3px}
.bstep__sub{margin:28px 0 10px;font-size:15px}
.other{margin-top:14px}
.more{margin-top:26px}
.brief__nav{border-top:0;padding-top:0;margin-top:32px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:24px}
.brief__keys{justify-self:end;font-size:12px;color:var(--soft)}
.brief__nav .btn{min-width:200px}
.brief__sum{border-top:1px solid var(--line)}
@media (hover:none),(max-width:860px){ .brief__keys{display:none} }
@media (max-width:860px){
  .bstep .chips{grid-template-columns:1fr}
  .bstep .chips span{padding:12px 0;font-size:15px}
  .brief__steps{min-height:0}
  .brief__nav{grid-template-columns:auto 1fr}
}
@media (max-width:860px){ .brief__nav .btn{justify-self:stretch} }
@media (max-width:860px){ .brief{width:100%} .brief__head .copy__ch{flex-wrap:wrap} }
.brief__count{white-space:nowrap}

/* ── round 6: glass and chrome together. The pane is glass again; your name passes under it ── */
.brief__glass{border:0!important;box-shadow:var(--lq-shadow)!important;background:none!important}
[data-theme="dark"] .brief__glass{--lq-tint:rgba(15,17,19,.56);--lq-tint-deep:rgba(15,17,19,.34);--lq-rim-hi:rgba(255,255,255,.42);--lq-rim-lo:rgba(255,255,255,.1)}
[data-theme="light"] .brief__glass{--lq-tint:rgba(236,239,240,.5);--lq-tint-deep:rgba(236,239,240,.3)}
.brief__in{padding:clamp(26px,3vw,46px)!important}
/* phone: the metal stays behind the first screen and the glass, then leaves before the next words */
.cstage{transition:opacity .6s var(--ease)}
@media (max-width:860px){
  .cstage{position:fixed;height:auto;inset:0}
  .cstage.is-away{opacity:0}
}
/* a browser that cannot blur what is behind: the pane becomes solid, the words never sit on sharp metal */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .brief__glass{background:color-mix(in srgb,var(--bg) 94%,transparent)!important}
}

/* Contact on the paper of the plans: the grid under the metal, never over it */
.paper--back{z-index:0}
/* the brief is the plate you start: its measure sits above it, as on every plate of Servicii */
.brief__glass{position:relative;view-transition-name:plansa}
.brief__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;pointer-events:none}
.brief__dim::before{content:"";position:absolute;left:0;right:0;top:6px;border-top:1px solid var(--ink);opacity:.7}
.brief__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}