/* Arcord Web Studio, stile delle sezioni sotto l'apertura.
   Il CSS dell'apertura (font, token, base, icone, bottoni, loader, header, menu, vetrina) è inline in
   index.html, nel <style id="critical">: si disegna subito, senza aspettare file. Questo file arriva dopo,
   senza bloccare. Stessi token, stessi breakpoint (1080, 960, 700, 560, 380), poi il movimento ridotto. */
.fld input:focus-visible,.fld textarea:focus-visible{outline:none;box-shadow:0 1px 0 0 var(--on-night)}
.opt input:focus-visible{outline:none}
[tabindex="-1"]:focus-visible{outline:none}
.pj{grid-column:span 6;display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.pj-img{position:relative;aspect-ratio:16/10.5;border-radius:6px;overflow:hidden}
.t-cream{background:radial-gradient(80% 80% at 50% 30%,#F4EFE6 0%,#E2D9CB 72%)}
.t-night{background:radial-gradient(80% 80% at 50% 30%,#2E2925 0%,#161412 72%)}
.t-bc{background:radial-gradient(75% 75% at 50% 32%,#D8D3CA 0%,#C6C0B6 72%)}
.pj-fr{position:absolute;left:50%;top:8%;width:24%;margin-left:-12%;padding:.8%;background:#060606;border-radius:15%/7.6%;transform:rotate(-8deg)}
.pj-fr img{width:100%;height:auto;aspect-ratio:800/1590;object-fit:cover;object-position:top;border-radius:12.6%/6.4%}
.pj-cap{display:flex;flex-direction:column;gap:var(--s0)}
.pj-n{font-size:var(--fs-m);font-weight:500;letter-spacing:-.03em;line-height:1.05}
.pj-s{color:var(--muted);font-size:var(--fs-label)}
.pj-d{color:var(--muted);font-size:var(--fs-body)}
/* Other work: a quiet list on the same columns as the rest of the page */
.ot{padding-block:var(--sec) var(--sec2)}
.ot-hr{display:flex;align-items:center;justify-content:space-between;margin:0 0 var(--s2)}
.ot-h{font-size:var(--fs-label);font-weight:500;color:var(--muted);margin:0}
/* the sound, on the label's line at the grid's right edge: as tall as the label's text, so the row does not grow;
   its 44px target is drawn around it without taking room */
.snd-ot{position:relative;min-height:0;height:1.5em;color:var(--muted)}
.snd-ot .i{width:24px;height:24px;margin:-1px -3px -1px 0}
.snd-ot::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.snd-ot:hover,.snd-ot[aria-pressed="true"]{color:var(--ink)}
.ot-l{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ot-l li{position:relative;border-bottom:1px solid var(--line)}
/* With a mouse the rules between the works are strings: they quiver under the pointer (always, lightly) and
   sound only when the sound is on. Phones, and motion turned off, keep plain lines */
.ot-l .ot-str{display:none}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .ot-l{border-top-color:transparent}
  .ot-l li{border-bottom-color:transparent}
  .ot-l .ot-str{display:block;bottom:-20px}
  .ot-l .ot-str.t{top:-20px;bottom:auto}
  .ot-l .ot-str path{stroke:var(--line)}
  .ot-l .ot-str.on path{stroke:var(--soft)}
  .ot-l .ot-str polyline{stroke:var(--line)}
  .ot-l .ot-str.on polyline{stroke:var(--soft)}
  .snd-ot{display:inline-flex}
}
.ot-l a{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:baseline;padding:var(--s3) 0;font-size:var(--fs-body)}
.ot-n{grid-column:1/span 3;font-weight:500;transition:transform var(--t2) var(--ease)}
.ot-n small{display:block;font-size:var(--fs-label);font-weight:400;color:var(--muted);margin-top:var(--s0)}
.ot-s{grid-column:4/span 6;color:var(--body)}
.ot-d{grid-column:10/span 3;justify-self:end;font-size:var(--fs-label);color:var(--muted);transition:color var(--t1) var(--ease)}
@media (hover:hover){
  .ot-l a:hover .ot-n{transform:translateX(var(--s1))}
  .ot-l a:hover .ot-d{color:var(--ink)}
}
/* Desktop with a mouse: a small preview of the site follows the pointer, a little late. Phones never see it */
.ot-pv{display:none}
@media (hover:hover) and (pointer:fine){
  .ot-pv{display:block;position:fixed;left:0;top:0;z-index:60;width:320px;height:200px;pointer-events:none;will-change:transform}
  .ot-pv-in{position:relative;width:100%;height:100%;border-radius:6px;overflow:hidden;background:var(--stone);box-shadow:0 1px 0 rgba(11,11,11,.06),0 18px 40px -12px rgba(11,11,11,.35);opacity:0;transform:scale(.92);transition:opacity var(--t2) var(--ease),transform var(--t3) var(--ease)}
  .ot-pv.on .ot-pv-in{opacity:1;transform:none}
  .ot-pv picture{position:absolute;inset:0;opacity:0;transition:opacity var(--t2) var(--ease)}
  .ot-pv picture.on{opacity:1}
  .ot-pv img{display:block;width:100%;height:100%;object-fit:cover}
}
/* Statement: the words light up as you read them, the promise gets a string under it */
/* one rhythm between sections: each one has half of --sec above and half below its content */
.st{padding-block:var(--sec2)}
.lead{grid-column:4/span 9;font-size:var(--fs-l);line-height:1.06;font-weight:500;letter-spacing:-.038em;text-wrap:pretty}
.acc{position:relative;display:inline-block;white-space:nowrap}
/* Strings: every rule here is a cord. Pass the pointer through one and it bends, lets go and rings. */
.str{position:absolute;left:0;right:0;height:40px;display:block;pointer-events:none}
.str svg{display:block;width:100%;height:100%;overflow:visible}
.str path,.str polyline{fill:none;stroke:var(--rule);stroke-width:1;vector-effect:non-scaling-stroke;transition:stroke var(--t2) var(--ease)}
.str.k path,.str.on path,.str.k polyline,.str.on polyline{stroke:var(--ink)}
.acc-str{bottom:-.07em;transform:translateY(50%) scaleX(0);transform-origin:0 50%;transition:transform var(--t4) var(--draw)}
.acc.drawn .acc-str,html:not(.fill) .acc-str{transform:translateY(50%) scaleX(1)}
.acc-str path,.acc-str polyline{stroke:var(--ink);stroke-width:2}
/* Section heads */
.sh{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);margin-bottom:var(--s3)}
/* Services: an editorial list, a line draws above each row as it arrives */
.sv{padding-block:var(--sec2)}
/* closing line inside the margins, like the row lines (.wrap pads, so a border would run edge to edge) */
.sv-list::after{content:"";display:block;height:1px;background:var(--stone-line)}
.sv-row{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:var(--s2);padding-block:var(--s6);color:var(--ink)}
.sv-row::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--ink);transform-origin:0 50%;transition:transform var(--t4) var(--ease) .1s}
.js .sv-row.rv.pre::before{transform:scaleX(0)}
.sv-t{grid-column:1/span 6;font-size:var(--fs-m);letter-spacing:-.045em;line-height:.95;transition:transform var(--t3) var(--ease)}
.sv-r{grid-column:7/span 6;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s1)}
.sv-k{font-size:var(--fs-label);font-weight:500}
.sv-d{max-width:44ch;color:var(--body)}
.sv-go{margin-top:var(--s2);display:inline-flex;align-items:center;gap:var(--s1);font-size:var(--fs-label);border-bottom:1px solid currentColor;padding-bottom:3px}
/* the configurator's row has two links (start here, see Studio 96): the row itself is not a link */
.sv-gos{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-top:var(--s2)}
.sv-gos .sv-go{position:relative;margin-top:0}
.sv-gos .sv-go::after{content:"";position:absolute;inset:-14px -4px}
@media (hover:hover){
  .sv-row:hover .sv-t{transform:translateX(var(--s2))}
}
/* Method: the two words are stitched together as you scroll */
/* clipped only on the sides: a clip at the bottom cut the phone's shadow as the scene left */
.md{padding-top:var(--sec2);overflow-x:clip}
.md-top{row-gap:var(--s4);margin-bottom:var(--head)}
.md-top .label{grid-column:1/span 3;padding-top:.6em}
/* "Cucito addosso.": the section's one strong line, on the scale like the others (L), after its label */
.big2{grid-column:4/span 9;font-size:var(--fs-l);line-height:1.04;font-weight:500;font-stretch:88%;letter-spacing:-.038em;white-space:nowrap}
/* promoted to a layer only while the words move (JS), so at rest they are painted as plain, crisp text */
.bw{display:inline-block;vertical-align:top;overflow:hidden;padding:.06em .04em .12em;margin:-.06em -.04em -.12em}
.bw>span{display:inline-block;transition:transform var(--t4) var(--ease)}
.bw2>span{transition-delay:.09s}
.js .big2.pre .bw>span{transform:translateY(110%)}
.md-sub{grid-column:4/span 7;font-size:var(--fs-lead);line-height:1.35;letter-spacing:-.012em;color:var(--body);max-width:34em;text-wrap:pretty}
/* desktop, with the scene: its stage starts under the heading, so the first step (centred in the stage) comes right
   after the line under "Cucito addosso." instead of after an empty screen; the stage's top is empty there */
@media (min-width:961px) and (prefers-reduced-motion:no-preference){html.js .md-top{margin-bottom:0}html.js .md-sc{margin-top:calc(var(--vh) * -24)}}
/* The still scene: the phone of the window tells the four steps. The section is tall, its stage stays on screen
   (sticky, the fixed 100svh of --vh); main.js writes the pose of the phone (the same one the WebGL phone draws,
   moved here from the window) and the pictures on its screen, from the scroll only, transform and opacity (and the
   thread drawing itself). The screen is HTML in units of its own width (cqw): 1cqw is 1 unit of the page's SVG */
.md-sc{position:relative;height:calc(var(--vh) * 560)}
.md-st{position:sticky;top:0;height:calc(var(--vh) * 100);container-type:inline-size;--col:calc((100cqw - 2 * var(--g) - 11 * var(--gap)) / 12);--tw:calc(var(--col) * 5 + var(--gap) * 4);--pw:min(calc((var(--vh) * 100 - var(--hd) - var(--s4) * 2) / 1.93),calc(var(--col) * 4 + var(--gap) * 3));--ax:calc(var(--g) + (var(--col) + var(--gap)) * 7 + (var(--col) * 4 + var(--gap) * 3) / 2)}
.md-steps{position:absolute;left:0;right:0;top:var(--hd);bottom:0;z-index:4;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);margin:0;padding-block:0;list-style:none;pointer-events:none}
.md-step{position:absolute;top:0;bottom:0;left:calc(var(--g) + var(--col) + var(--gap));width:var(--tw);display:flex;flex-direction:column;justify-content:center}
.md-step h3{font-size:var(--fs-l);line-height:1;font-weight:500;letter-spacing:-.045em;font-stretch:88%;text-wrap:balance;margin-bottom:var(--s3)}
/* the step's name changes like every title: the old one leaves upwards through its mask, the new one rises */
.mdm{display:block;width:fit-content;min-width:100%;overflow:hidden;padding:.08em 0 .16em;margin:-.08em 0 -.16em}
.mdm>span{display:block;transform:translateY(120%);will-change:transform}
.md-step p{opacity:0;will-change:opacity}
.md-step:first-child .mdm>span{transform:none}
.md-step:first-child p{opacity:1}
.md-step p{font-size:var(--fs-lead);line-height:1.35;letter-spacing:-.012em;color:var(--body);max-width:40em;text-wrap:pretty}
/* the phone: the outer box moves and scales and holds the perspective, the inner one only turns (as in the window) */
.md-ph{position:absolute;z-index:3;left:calc(var(--ax) - var(--pw) / 2);top:calc(50% + var(--hd) / 2 - var(--pw) * .963);width:var(--pw);perspective:1800px;will-change:transform;pointer-events:none}
.md-rot{position:relative;transform:rotateX(42deg) rotateZ(-90deg);will-change:transform;transform-style:preserve-3d;--tk:.06}
.md-st .vt-gl{z-index:3}  /* over the phone: the light lies on its glass */
.md-sh{position:absolute;inset:0;border-radius:calc(var(--pw) * .15);background:#000;filter:blur(36px);opacity:.3;transform:translate3d(16%,9%,calc(var(--pw) * -.06 - 2px));will-change:opacity}  /* behind the body */
.md-sh2{opacity:0;transform:translate3d(0,4%,calc(var(--pw) * -.06 - 2px))}
.md-fr{position:relative;padding:calc(var(--pw) * .031);background:linear-gradient(145deg,#2E2A26,#060606 38%);border-radius:calc(var(--pw) * .15);border:1px solid #4A433C}
/* with the WebGL phone drawn under it, only the screen stays: same place, same turns */
.md-scr{position:relative;overflow:hidden;aspect-ratio:800/1590;border-radius:calc(var(--pw) * .122);background:var(--night);color:var(--on-night);isolation:isolate;container-type:size;font-stretch:100%;letter-spacing:-.01em;line-height:1.2}
.md-scr i{display:block}
/* 1. the brief, lying: a landscape layer turned back upright, in the style of the contact form */
.mq{--bx:-63.35cqw;--bk:.3;position:absolute;left:50%;top:50%;width:100cqh;height:100cqw;margin:-50cqw 0 0 -50cqh;transform:rotate(90deg)}
/* a real inner margin: the glass is rounded and seen in perspective, so the words keep 14% of its width from the
   near edge and 10% from the long ones */
.mq-q{position:absolute;left:14cqw;top:10cqw;bottom:10cqw;width:116cqw;display:flex;flex-direction:column;justify-content:center;gap:3cqw;opacity:0;will-change:transform,opacity}
.mq-k{font-size:10cqw;color:var(--on-night-muted);text-wrap:balance}
.mq-a{position:relative;display:block;align-self:flex-start;padding-bottom:3cqw;font-size:17cqw;line-height:1.02;font-weight:500;letter-spacing:-.035em;font-stretch:88%}
.mq-l{position:absolute;left:0;right:0;bottom:0;height:1.2cqw;border-radius:1cqw;background:var(--on-night);transform:scaleX(0);transform-origin:0 50%;will-change:transform}
.mq-b{position:absolute;right:7cqw;top:12cqw;bottom:12cqw;width:58cqw;padding:5cqw 6cqw;border-radius:5cqw;background:#1C1916;display:flex;flex-direction:column;justify-content:center;gap:2.2cqw;transform-origin:50% 50%;will-change:transform}
.mq-m{width:11cqw;margin-bottom:1cqw;height:auto;overflow:visible;fill:none;stroke:var(--on-night);stroke-width:14;stroke-linecap:round}
.mq-r{display:block;font-size:4.2cqw;white-space:nowrap;opacity:0;will-change:transform,opacity}
.mq-rk{display:block;margin-bottom:.4cqw;font-size:3.8cqw;color:var(--on-night-muted)}
/* 2-4. the page of the shop, standing: the thread of the mark draws its blocks, then they fill, then it lives */
.mp{position:absolute;inset:0;opacity:0;will-change:opacity}
.mp-bg{position:absolute;inset:0;background:var(--stone);opacity:0;will-change:opacity}
.mp-pg{position:absolute;left:0;top:0;width:100cqw;height:240cqw;will-change:transform}
.mp-pg>*{position:absolute}
.mp-im{left:8cqw;top:28cqw;width:84cqw;height:84cqw;border-radius:2cqw;background:var(--paper);opacity:0}
.mp-pr{left:8cqw;top:28cqw;width:84cqw;height:84cqw;fill:#1C1916;opacity:0;will-change:transform,opacity}
.mp-pr ellipse{fill:var(--stone)}
.mp-th{left:0;top:0;width:100cqw;height:240cqw;overflow:visible;fill:none;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.mp-th path{stroke-dasharray:1 2;stroke-dashoffset:1}
.mp-tl{stroke:var(--on-night)}
.mp-td{stroke:var(--ink);opacity:0}
.mp-w{font-size:5.4cqw;color:var(--on-night-muted);white-space:nowrap;opacity:0;will-change:transform,opacity}
.mp-w1{left:8cqw;top:118cqw;font-size:7cqw;line-height:1.2;color:var(--on-night);font-weight:500;letter-spacing:-.03em}
.mp-ts{left:8cqw;top:136cqw;transform-origin:0 0}
.mp-w2,.mp-tg{left:8cqw;top:144cqw}
.mp-w3,.mp-f{left:8cqw;top:190cqw}
.mp-t{left:7.4cqw;top:116cqw;font-size:16cqw;line-height:1;font-weight:500;letter-spacing:-.045em;font-stretch:88%;color:var(--ink);opacity:0;will-change:transform,opacity}
.mp-ts,.mp-tg,.mp-f{font-size:5.4cqw;line-height:1.2;color:#5C5852;white-space:nowrap;opacity:0;will-change:transform,opacity}
.mp-b{left:6.6cqw;top:156.6cqw;width:86.8cqw;height:20.8cqw;border-radius:10.4cqw;height:18cqw;border-radius:9cqw;background:var(--ink);color:var(--paper);font-size:5.6cqw;font-weight:500;display:flex;align-items:center;justify-content:center;opacity:0;will-change:transform,opacity}
.mp-c{top:202cqw;width:40cqw;height:36cqw;border-radius:2cqw;background:var(--paper);opacity:0}
.mp-c1{left:8cqw}
.mp-c2{left:52cqw}
.mp-c::after{content:"";position:absolute;left:50%;top:50%;width:14cqw;height:14cqw;margin:-7cqw 0 0 -7cqw;border-radius:50%;background:#1C1916}
.mp-c2::after{width:10cqw;height:18cqw;margin:-9cqw 0 0 -5cqw;border-radius:5cqw}
.mp-n{position:absolute;left:5cqw;right:5cqw;top:5cqw;height:21cqw;padding:0 5cqw;border-radius:6cqw;background:var(--ink);color:var(--paper);display:grid;grid-template-columns:11cqw 1fr;column-gap:4cqw;align-content:center;transform:translate3d(0,-140%,0);will-change:transform}
.mp-n svg{grid-row:1/span 2;align-self:center;width:11cqw;height:auto;overflow:visible;fill:none;stroke:var(--paper);stroke-width:14;stroke-linecap:round}
.mp-nt{font-size:5.6cqw;font-weight:500}
.mp-nd{font-size:4.6cqw;color:var(--on-night-muted)}
/* the brief's words travelling to their blocks: upright, above the phone, placed and scaled by transform (main.js) */
.md-fly{position:absolute;inset:0;z-index:5;pointer-events:none}
.md-fly>span{position:absolute;left:0;top:0;line-height:1.2;white-space:nowrap;color:var(--on-night-muted);transform-origin:0 0;opacity:0;will-change:transform,opacity}
.md-fly>span:first-child{color:var(--on-night);font-weight:500;letter-spacing:-.03em}
html:not(.js) .md-ph,html:not(.js) .md-fly{display:none}
html:not(.js) .md-sc{height:auto}
html:not(.js) .md-st{position:relative;height:auto;padding-bottom:var(--sec)}
html:not(.js) .md-steps{position:relative;top:auto;display:flex;flex-direction:column;gap:var(--s6)}
html:not(.js) .md-step{position:relative;left:auto;top:auto;bottom:auto;width:auto;opacity:1;align-self:stretch}
html:not(.js) .mdm>span{transform:none}
html:not(.js) .md-step p{opacity:1}
/* Studio */
/* the label, the one sentence as the title, then two columns under it: the reason (lead size, in ink) and the way
   we work (body), as in the rows of the services */
.sd2{padding-block:var(--sec2);row-gap:var(--s5);align-items:start}
.sd-l{grid-column:1/span 3;padding-top:.5em}
.sd-big{grid-column:4/span 9;font-size:var(--fs-l);line-height:1.04;font-weight:500;letter-spacing:-.038em;text-wrap:balance}
.sd-lead{grid-column:4/span 5;display:flex;flex-direction:column;gap:var(--s2);font-size:var(--fs-lead);line-height:1.3;letter-spacing:-.015em;text-wrap:pretty}
.sd-side{grid-column:9/span 4;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);color:var(--body);max-width:44ch;text-wrap:pretty}
.sd-side .u{margin-top:var(--s1)}
/* Contact: the dark close */
.ct{position:relative;color:var(--on-night);color-scheme:dark;padding-block:var(--sec2) var(--sec)}
.ct ::selection{background:var(--on-night);color:var(--ink)}
.ct-in{position:relative;z-index:5;row-gap:var(--s5);align-items:start}
/* the section's name is a small line: the big title is the question itself */
.ct-head{grid-column:1/span 6;display:flex;flex-direction:column;gap:var(--s1);max-width:44ch}
.ct h2{font-size:var(--fs-body);font-weight:500;line-height:1.3;letter-spacing:-.01em}
.ct-head p{color:var(--on-night-muted);text-wrap:pretty}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#8BC79A;margin-right:var(--s1);vertical-align:1px;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
#clockLine.off .dot{animation-play-state:paused}
/* Project form: no box, it is the section. One question at a time, as the section's title, with the mark next to
   it that draws a little more at each step and closes on the confirmation. The answers are big rows under it,
   chosen by the thread that underlines them (left to right) and a tick that draws itself. Each step is
   display:contents, so its pieces sit in the form's own grid. The change of question is a small scene written in
   main.js (masks, then the answers one after the other, 600 ms at most). */
.pf{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start;border-top:1px solid var(--night-line)}
.fs{display:contents}
.fs[hidden]{display:none}
html:not(.js) .pf{display:block}
html:not(.js) .fs:not([hidden]){display:block;margin-bottom:var(--s6)}
html:not(.js) .pf-pr,html:not(.js) .pf-next,html:not(.js) .pf-back{display:none}
.pf-q{grid-column:1/span 9;grid-row:1;align-self:end;padding-top:var(--s5);font-size:var(--fs-l);font-weight:500;font-stretch:88%;line-height:1;letter-spacing:-.045em;text-wrap:balance;outline:none}
/* the question split in words, each in its mask (main.js): the lines leave and arrive inside them */
.qm{display:inline-block;overflow:hidden;vertical-align:top;padding:.14em .06em .1em;margin:-.14em -.06em -.1em}  /* room for ascenders and the last letter of the tight cut */
.qm>span{display:inline-block}
.pf-pr{grid-column:10/span 3;grid-row:1;align-self:end;justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:var(--s1)}
.pf-pr svg{width:168px;height:114px;overflow:visible}
.pf-pr path{fill:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
.pf-pr .tr{stroke:var(--night-line)}
.pf-pr .pg{stroke:var(--on-night);stroke-dasharray:1 2;stroke-dashoffset:1;transition:stroke-dashoffset var(--t2) var(--draw) .2s}
.pf-count{font-size:var(--fs-label);color:var(--on-night-muted);font-variant-numeric:tabular-nums}
.pf-hint{grid-column:1/span 6;grid-row:2;margin-top:var(--s3);color:var(--on-night-muted);text-wrap:pretty}
.opts{grid-column:1/-1;grid-row:3;margin-top:var(--s5)}
.fields,.pf-sum{grid-column:1/span 8;grid-row:3;margin-top:var(--s5)}
.fs>.pf-err{grid-column:1/span 8;grid-row:4;margin-top:var(--s2)}
.pf-nav{grid-column:1/span 8;grid-row:5;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);margin-top:var(--s4)}
.pf-note{grid-column:1/span 8;grid-row:6;margin-top:var(--s3);font-size:var(--fs-label);color:var(--on-night-muted)}
.pf-sum .pf-nav{margin-top:var(--s4)}
/* answers: the ones not chosen stay quieter, the chosen one is full, underlined by the thread, with the tick */
.opts{display:flex;flex-direction:column;border-top:1px solid var(--night-line)}
.opt{position:relative;display:flex;align-items:center;gap:var(--s3);min-height:88px;border-bottom:1px solid var(--night-line);color:var(--on-night-muted);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color var(--t1) var(--ease)}
.opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.opt span{padding:var(--s2) 0 6px;font-size:var(--fs-m);font-weight:500;letter-spacing:-.03em;line-height:1.1;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size var(--t3) var(--draw)}
.opt .ck{margin-left:auto;width:32px;height:32px;stroke-width:1.75;stroke-dasharray:1 2;stroke-dashoffset:1;transition:stroke-dashoffset var(--t2) var(--draw)}
.opt:has(input:checked){color:var(--on-night)}
.opt input:checked~span{background-size:100% 2px}
.opt input:checked~.ck{stroke-dashoffset:0;transition-delay:.15s}
/* question 2 moves on by itself: there the thread and the tick are done in 400 ms */
[role="radiogroup"] .opt span{transition-duration:var(--t2)}
[role="radiogroup"] .opt .ck{transition-duration:var(--t1)}
[role="radiogroup"] .opt input:checked~.ck{transition-delay:var(--t1)}
.opt input:focus-visible~span{outline:2px solid currentColor;outline-offset:6px;border-radius:2px}
/* hover and keyboard focus on desktop: the text lights up and the thread hints at itself */
@media (hover:hover){
  .opt:hover{color:var(--on-night)}
  .opt:hover input:not(:checked)~span{background-size:var(--s5) 2px}
}
.opt:has(input:focus-visible){color:var(--on-night)}
.opt input:focus-visible:not(:checked)~span{background-size:var(--s5) 2px}
.pf-err{font-size:var(--fs-label);color:#F0B9A2}
.pf-err::before{content:"";display:inline-block;width:6px;height:6px;margin-right:var(--s1);border-radius:50%;background:currentColor;vertical-align:2px}
/* contact fields: the same thread under each */
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--gap)}
.fld{display:flex;flex-direction:column;gap:var(--s1);min-width:0}
.fld:first-child,.fld:last-child{grid-column:1/-1}
.fld label{font-size:var(--fs-label);color:var(--on-night-muted);text-wrap:balance}
.opt-l{margin-left:var(--s1)}
.opt-l::before{content:"· "}
.fld input,.fld textarea{width:100%;min-height:56px;font:inherit;font-size:var(--fs-lead);letter-spacing:-.015em;color:var(--on-night);background:transparent;border:0;border-bottom:1px solid var(--night-edge);border-radius:0;padding:var(--s1) 0;outline:none;transition:border-color var(--t1) var(--ease)}
.fld textarea{resize:vertical;min-height:112px;font-size:var(--fs-body);line-height:1.45}
.fld input:focus,.fld textarea:focus{border-bottom-color:var(--on-night)}
.fld input[aria-invalid="true"]{border-bottom:2px solid #F0B9A2}
.fld input:-webkit-autofill{-webkit-text-fill-color:var(--on-night);box-shadow:0 0 0 1000px var(--night) inset;caret-color:var(--on-night)}
.fld .pf-err{margin-top:var(--s0)}
/* the end: what you chose, what happens now, and the honest note (the form is not connected yet) */
.sum{margin:0;border-top:1px solid var(--night-line)}
.sum>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--s3);padding:var(--s2) 0;border-bottom:1px solid var(--night-line)}
.sum dt{font-size:var(--fs-label);color:var(--on-night-muted);padding-top:3px}
.sum dd{margin:0;font-weight:500;overflow-wrap:anywhere;white-space:pre-line}
.pf-next-t{margin-top:var(--s5);font-size:var(--fs-label);font-weight:500;color:var(--on-night-muted)}
.pf-sum p{max-width:52ch;margin-top:var(--s1);text-wrap:pretty}
.pf-sum .pf-honest{margin-top:var(--s3);color:var(--on-night-muted)}
/* the other ways, one line under the form; the time in Italy, small, at the very end */
.ct-alt{grid-column:1/-1;margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--night-line);text-wrap:pretty}
.ct-alt a{position:relative}
.ct-alt a::after{content:"";position:absolute;inset:-12px -4px}
.ct-clock{grid-column:1/-1;font-size:var(--fs-label);color:var(--on-night-muted)}
/* WhatsApp: a quick line next to the email, and on phones a quiet round button between the shop window and the contacts */
.ct-mail{display:block}
.wa-l{display:inline-flex;align-items:center;gap:var(--s1);min-height:44px}
.wa-l .i{width:22px;height:22px}
@media (hover:hover){
  .wa-l:hover .u{background-size:0 1px;background-position:100% 100%}
}
/* Footer: it waits underneath and is revealed as the page lifts away */
.ftr{visibility:visible;position:sticky;bottom:0;z-index:0;background:var(--stone);color:var(--ink);font-size:var(--fs-label)}
.ftr-top{padding-top:var(--head);row-gap:var(--s4);align-items:start}
.f-slogan{grid-column:1/span 6;font-size:var(--fs-m);font-weight:500;letter-spacing:-.035em;line-height:1.05;max-width:13ch;text-wrap:balance}
.f-nav{grid-column:7/span 3;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s1)}
.f-ct{grid-column:10/span 3;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s1)}
.ftr{overflow:hidden}
.ftr .wrap{container-type:inline-size;will-change:transform}
@supports (timeline-scope:--a) and (animation-timeline:--a){
  @media (prefers-reduced-motion:no-preference){
    body{timeline-scope:--ftr}
    #mainEnd{view-timeline:--ftr block}
    html.js .ftr .wrap{animation:ftrRide linear both;animation-timeline:--ftr;animation-range:cover 0px cover var(--fh,600px)}
  }
}
@keyframes ftrRide{from{transform:translate3d(0,calc(var(--fh,600px) * .5),0)}to{transform:none}}
/* taller than the window (a short screen, a page zoomed to 200%): stuck to the bottom its top could never be seen,
   so it simply follows the page */
html.ftr-tall .ftr{position:relative}
html.js.ftr-tall .ftr .wrap{animation:none;transform:none}
/* the big lockup is a graphic measured on the width */
.fbig{display:flex;align-items:center;gap:.375em;width:max-content;font-size:calc((100vw - 2 * var(--g)) / 4.4);font-size:calc(100cqw / 4.33);line-height:1;padding-top:.2em;margin-left:-.07em}
.fbig svg{width:1.25em;height:.84em;flex:none;will-change:transform}  /* its own layer: drawing the mark repaints only it, not the whole footer */
.fbig path{stroke-dasharray:1 2;stroke-dashoffset:0;transition:stroke-dashoffset var(--t4) var(--draw) .1s}
.fbig-m{display:inline-block;overflow:hidden;padding-bottom:.04em}
.fbig-w{display:inline-block;font-weight:500;letter-spacing:-.045em;line-height:1;transition:transform var(--t4) var(--ease) .65s}
.ftr.pre .fbig path{stroke-dashoffset:1;transition:none}
.ftr.pre .fbig-w{transform:translateY(106%);transition:none}
.ftr-bot .f-top{font-size:var(--fs-label)}
.ftr-bot{row-gap:var(--s1);align-items:center;margin-top:var(--s3);padding-block:var(--s2) max(var(--s3),env(safe-area-inset-bottom,0px));border-top:1px solid var(--stone-line);color:var(--muted);font-size:var(--fs-sm)}
.f-c{grid-column:1/span 6}
.f-perf{display:none;grid-column:1/span 6;grid-row:2;color:var(--muted)}
.js .f-perf{display:block;visibility:hidden}
.js .f-perf.on{visibility:visible}
.f-iva{grid-column:7/span 3}
.f-top{grid-column:10/span 3;justify-self:start;color:var(--ink)}
/* States below the opening: focus mirrors hover, a press answers with a small give */
.sv-row:focus-visible .sv-t{transform:translateX(var(--s2))}
.sv-row:active .sv-t,.ot-l a:active .ot-n{opacity:.7}
.ot-l a:focus-visible .ot-n{transform:translateX(var(--s1))}
.ot-l a:focus-visible .ot-d{color:var(--ink)}
.opt:active span{opacity:.6}
.lnk{transition:text-decoration-thickness var(--t1) var(--ease)}
.lnk:hover,.lnk:focus-visible{text-decoration-thickness:2px}
.pj-fr{transition:transform var(--t3) var(--ease)}
.pj:focus-visible .pj-fr{transform:rotate(-4deg) translateY(-2%)}
@media (hover:hover){a.pj:hover .pj-fr{transform:rotate(-4deg) translateY(-2%)}}
.wa-l:active,.u:active{opacity:.7}

/* Reveal on scroll: only what is still below the fold gets prepared */
/* One system for text across the site: titles rise from their mask (--t4, --ease, as in the opening), running text
   fades in (--t3, --ease). Nothing comes from the side. */
.js .rv{transition:opacity var(--t3) var(--ease);transition-delay:var(--d,0s)}
.js .rv.pre{opacity:0}
.wr .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.07em;margin-bottom:-.07em}
.wr .w>span{display:inline-block;transition:transform var(--t4) var(--ease);transition-delay:var(--d,0s)}
.js .wr.pre .w>span{transform:translateY(106%)}
.nw{white-space:nowrap}
[data-split] .ln{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}  /* room for descenders at line-height .95 (WebKit cut the g of Configuratori by a pixel at .08) */
[data-split] .ln>span{display:block;transition:transform var(--t4) var(--ease);transition-delay:calc(var(--i,0) * .09s + var(--d,0s))}
.js [data-split].pre .ln>span{transform:translateY(115%)}  /* waiting line wholly below the deeper mask */
/* One surface under the whole page, like the shop window between two stores: the sections have no ground of
   their own, a layer stuck under the screen (.surf, sticky in main: at the end it leaves with main and the footer
   shows) turns stone, back to paper, then night (with the grain), by opacity only, in the ordinary space between
   two sections (40% of a screen, tracks in main.js). Without JS the sections keep their own ground. */
/* The surface lives in a frame as tall as main (.surf-w, absolute): a sticky box cannot leave its containing block,
   so it stops at main's bottom by itself. No negative margin and no reliance on main's clip: Safari macOS did not
   clip the composited sticky layer and the night ran a screen past main, over the footer. */
.surf-w{position:absolute;inset:0;z-index:-1;pointer-events:none}
.surf{position:sticky;top:0;height:100lvh;background:var(--paper)}
.surf i{position:absolute;inset:0;opacity:0;will-change:opacity}
.sf-st{background:var(--stone)}
.sf-nt{background:var(--night)}
html:not(.js) .sv{background:var(--stone)}
html:not(.js) .ct{background:var(--night)}
/* Text on the ground that turns from paper to night (end of the studio, start of the contacts): the colours step
   with the ground so that every text stays AA at every point of the change (t = opacity of the night layer):
   up to .08 the usual colours (the grey still holds), then pure black up to .577, pure white up to .84, then the
   colours of the night. The form sits on the same ground and follows it. */
.sd2.tx-l1,.ct.tx-l1{color:#000;--body:#000;--muted:#000;--on-night:#000;--on-night-muted:#000;--night-edge:rgba(0,0,0,.45)}
.sd2.tx-d1,.ct.tx-d1{color:#fff;--body:#fff;--muted:#fff;--on-night:#fff;--on-night-muted:#fff;--night-edge:rgba(255,255,255,.45)}
.sd2.tx-d0{color:var(--on-night);--body:var(--on-night);--muted:var(--on-night-muted)}
.ct.tx-l0{color:var(--ink);--on-night:var(--ink);--on-night-muted:var(--muted);--night-edge:rgba(11,11,11,.3);color-scheme:light}
/* the light button turns its text over when the ground is light (the form now sits on the surface) */
.ct.tx-l0 .btn-light,.ct.tx-l1 .btn-light{color:var(--paper)}
/* the link of the section you are in */
.nav a[aria-current]{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.hd .cta[aria-current]::before{transform:translateY(-100%)}
.hd .cta[aria-current]{color:var(--ink)}
.hd.light .cta[aria-current],.hd.ink .cta[aria-current]{color:var(--paper)}

/* Big type with more character: the narrow cut of the same family, tight */
.lead,.sd-big,.sv-t{font-stretch:88%}
@media (max-width:1080px){
  .sd-big{grid-column:1/-1}
  .sd-lead{grid-column:1/span 7}
  .sd-side{grid-column:8/span 5}
}
@media (max-width:960px){
  /* same rule as the inline CSS: repeated here because this file comes later in the cascade */
  .grid>*{grid-column:1/-1}
  .ot-l a{grid-template-columns:1fr;row-gap:var(--s1)}
  .ot-n,.ot-s,.ot-d{grid-column:1/-1;justify-self:start}
  .ot-s{line-height:1.45;max-width:46ch}
  .sv-row{grid-template-columns:1fr;row-gap:var(--s2);padding-block:var(--s5)}
  .sv-row>*{grid-column:1/-1}
  /* phones: no sliding in from off screen. The two lines arrive once, a short step towards each other (less than the
     margin), so both words are always whole on screen */
  /* phones: the step's words on top (room for two lines of each), the phone in the space below */
  .md-st{--mdT:calc(2 * 1 * var(--fs-l) + var(--s3) + 2 * 1.35 * var(--fs-lead))}
  .md-steps{top:calc(var(--hd) + var(--s4));bottom:auto}
  .md-step,.md-step:first-child{left:var(--g);right:var(--g);width:auto;bottom:auto;display:block}
  /* the active question big enough to read on a phone; the brief beside it stays small */
  .mq{--bx:-71.35cqw;--bk:.5}
  .mq-q{left:13cqw;width:121cqw;gap:2cqw}
  .mq-k{font-size:10.5cqw}
  .mq-a{font-size:20cqw}
  .mq-b{right:5cqw;width:56cqw;top:14cqw;bottom:14cqw;padding-inline:5cqw}
  .mq-r{font-size:3.6cqw}
  .mq-rk{font-size:3.4cqw}
  .md-st{--room:calc(var(--vh) * 100 - var(--hd) - var(--s4) * 2 - var(--mdT) - var(--s5) - env(safe-area-inset-bottom,0px));--pw:min(64vw,calc(var(--room) / 1.93))}
  .md-ph{left:calc(50% - var(--pw) / 2);top:calc(var(--hd) + var(--s4) * 2 + var(--mdT) + var(--room) / 2 - var(--pw) * .963)}
  /* phones and tablets: the question with the mark beside it, then everything in one column */
  .pf{grid-template-columns:minmax(0,1fr) auto}
  .pf-q{grid-column:1;padding-top:var(--s4)}
  .pf-pr{grid-column:2;gap:var(--s0);padding-left:var(--s2)}
  .pf-pr svg{width:64px;height:44px}
  .pf-hint,.opts,.fields,.pf-sum,.fs>.pf-err,.pf-nav,.pf-note{grid-column:1/-1}
  .pf-hint{margin-top:var(--s2)}
  .opts,.fields,.pf-sum{margin-top:var(--s3)}
  .opt{min-height:64px;gap:var(--s2)}
  .opt .ck{width:26px;height:26px}
  .fields{grid-template-columns:minmax(0,1fr)}
  /* the keyboard is open on the last step: the question, smaller, stays under the header and the way on rides
     above the keys */
  .pf[data-step="3"] .pf-q{position:sticky;top:calc(var(--hd) + env(safe-area-inset-top,0px));z-index:2;padding:var(--s2) var(--g) var(--s1);margin-inline:calc(-1*var(--g));background:linear-gradient(rgb(18 16 16/.93),rgb(18 16 16/.93)),url(/assets/img/grain.e55d3599.webp) 0 0/180px}  /* the night with its grain (.07), as on the ground */
  .pf[data-step="3"] .pf-q{grid-column:1/-1}
  .pf[data-step="3"] .pf-hint{grid-column:1}
  .pf[data-step="3"] .pf-pr{grid-row:2;align-self:start;padding-top:var(--s2)}
  .pf.kb .pf-q{font-size:var(--fs-lead);letter-spacing:-.02em}
  .pf.kb .fs:not([hidden]) .pf-nav{position:fixed;left:0;right:0;bottom:0;z-index:30;margin:0;padding:var(--s2) var(--g) max(var(--s2),env(safe-area-inset-bottom,0px));background:var(--night);border-top:1px solid var(--night-line)}
  .f-nav{grid-column:1/span 2}
  .f-ct{grid-column:3/span 2}
  .f-iva{grid-column:1/span 2}
  .f-top{grid-column:3/span 2}
}
/* fingers: the small text links (footer, Studio) keep their look and take a 44px tall touch area; in the footer the
   lists open up to --s3 so neighbouring areas never overlap */
@media (pointer:coarse){
  .ftr .u,.sd-side .u{position:relative}
  .ftr .u::after,.sd-side .u::after{content:"";position:absolute;left:-4px;right:-4px;top:calc((44px - 100%) / -2);bottom:calc((44px - 100%) / -2)}
  .f-nav,.f-ct{gap:var(--s3)}
}
@media (max-width:560px){
  .sum>div{grid-template-columns:1fr;gap:var(--s0)}
  /* the footer composed to fit one phone screen (so it can be uncovered from below like on desktop): the two lists
     side by side, the legal lines gathered, "back to top" beside the copyright */
  .ftr-top{padding-top:var(--s5);row-gap:var(--s3)}
  .ftr-bot{grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s2);row-gap:var(--s0);margin-top:var(--s2)}
  .f-c{grid-column:1;grid-row:1}
  .f-top{grid-column:2;grid-row:1;justify-self:end}
  .f-iva,.f-perf{grid-column:1/-1}
  .f-iva{grid-row:2}
  .f-perf{grid-row:3}
}
@media (prefers-reduced-motion:reduce){
  .js .big2.pre .bw>span{transform:none}
  .js .wr.pre .w>span,.js [data-split].pre .ln>span{transform:none}
  /* the Method: no still scene, the four steps one under the other, each with its phone still at its frame */
  .md-sc{height:auto}
  .md-st{position:relative;height:auto;padding-bottom:var(--sec)}
  .md-steps{position:relative;top:auto;display:flex;flex-direction:column;gap:var(--s7);pointer-events:auto}
  .md-step,.md-step:first-child{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center;align-self:stretch;opacity:1}
  .mdm>span{transform:none}
  .md-step p{opacity:1}
  .md-fly{display:none}
  .md-step>h3,.md-step>p,.md-step:first-child>h3,.md-step:first-child>p{grid-column:1/span 6}
  .md-step>p{grid-row:2;align-self:start}
  .md-step>h3{align-self:end}
  #mdPh{display:none}
  .md-ph[data-s]{position:relative;left:auto;top:auto;grid-column:8/span 5;grid-row:1/span 2;justify-self:center;--pw:min(calc(var(--vh) * 30),24vw)}
  .md-ph[data-s] .md-rot{transform:none}
  .md-ph[data-s] .md-sh{opacity:.25}
  .md-ph[data-s="1"]{width:calc(var(--pw) * 1.926);height:var(--pw)}
  .md-ph[data-s="1"] .md-rot{width:var(--pw);left:calc(var(--pw) * .463);top:calc(var(--pw) * -.463);transform:rotate(-90deg)}
  .md-ph[data-s="1"] .mq-q{display:none}
  .md-ph[data-s="1"] .mq-b{transform:translate3d(var(--bx),0,0) scale(calc(1 + var(--bk)))}
  .md-ph[data-s="1"] .mq-r{opacity:1}
  .md-ph[data-s]:not([data-s="1"]) .mq{display:none}
  .md-ph[data-s]:not([data-s="1"]) .mp{opacity:1}
  .md-ph[data-s] .mp-th path{stroke-dashoffset:0}
  .md-ph[data-s="2"] .mp-w{opacity:1}
  .md-ph[data-s="3"] .mp-bg,.md-ph[data-s="4"] .mp-bg,.md-ph[data-s="3"] .mp-im,.md-ph[data-s="4"] .mp-im,.md-ph[data-s="3"] .mp-td,.md-ph[data-s="4"] .mp-td{opacity:1}
  .md-ph[data-s="3"] .mp-tl,.md-ph[data-s="4"] .mp-tl{opacity:0}
  .md-ph[data-s="3"] :is(.mp-t,.mp-ts,.mp-tg,.mp-pr,.mp-b,.mp-f),.md-ph[data-s="4"] :is(.mp-t,.mp-ts,.mp-tg,.mp-pr,.mp-b,.mp-f,.mp-c){opacity:1}
  .md-ph[data-s="4"] .mp-pg{transform:translate3d(0,-44cqw,0)}
  .md-ph[data-s="4"] .mp-n{transform:none}
  .js .fs-c.anim{animation:none}
  .ot-pv-in,.ot-pv picture{transition:none}
  .ot-pv-in{transform:none}
}
@media (prefers-reduced-motion:reduce) and (max-width:960px){
  .md-step,.md-step:first-child{display:flex;flex-direction:column;align-items:stretch;gap:0}  /* :first-child too, or the first step stays a 12-column grid */
  .md-step>h3,.md-step>p,.md-step:first-child>h3,.md-step:first-child>p{align-self:auto}
  .md-ph[data-s]{align-self:center;margin-top:var(--s5);--pw:min(52vw,calc(var(--vh) * 46))}
  .md-ph[data-s="1"]{--pw:min(46vw,calc(var(--vh) * 40))}
}