/* ARTU Creative Lab — shared site styles (homepage sections below the film + static service pages) */
:root{
  --bg:#111214; --bg2:#16171a; --card:#1a1b1f; --rule:#2a2c31;
  --line:#e8e3d8; --line2:#8b9097; --mute:#5b6067; --rose:#d9a48a; --orange:#f39200; --paper:#ece8e0; --ink:#f3efe7; --text:#b9b5ad;
  /* the four colours of the ARTU logo pencil */
  --c-red:#e74a4f; --c-yel:#e5a227; --c-blu:#00699d; --c-tea:#049c90;
}
/* small text in a logo colour on the dark background uses a lighter tint of it (lines and bars keep the exact colour) */
.phero .kick,.svc-k,.flow .n,.inputs b{color:color-mix(in srgb,var(--m) 66%,#fff)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg)}
body{color:var(--line);font-family:"Instrument Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body.page{scroll-behavior:smooth}
a{color:inherit}
img{max-width:100%}
.wrap{width:min(1240px,calc(100% - 64px));margin:0 auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- top bar: big logo on the left, centred menu (Studio · Servizi ▾ · Portfolio · Contatti), progress line in the logo colours ---- */
:root{--barh:104px}
.skip{position:fixed;left:16px;top:-80px;z-index:70;background:#fff;color:#111214;padding:12px 16px;border-radius:4px;font:600 15px "Instrument Sans",sans-serif;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.skip:focus{top:12px}
.bar{position:fixed;inset:0 0 auto 0;height:var(--barh);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 34px;z-index:30;color:#f3efe7;font:400 15px/1.4 "Instrument Sans",sans-serif;letter-spacing:normal;text-transform:none;
     background:linear-gradient(rgba(17,18,20,.97) 38%,rgba(17,18,20,0));transition:background .45s,box-shadow .45s,color .45s}
.brand{justify-self:start;display:block;height:70px;flex:none}
.brand img{height:100%;width:auto;display:block}
.brand .lg-d{display:none}
.menu{justify-self:center}
.menu > ul{list-style:none;display:flex;align-items:center;gap:6px}
.menu li{position:relative}
.menu > ul > li > a{display:block;position:relative;padding:14px 15px;color:inherit;text-decoration:none;
     font:650 14px/1 Archivo,sans-serif;font-variation-settings:"wdth" 114;letter-spacing:.14em;text-transform:uppercase}
.menu > ul > li > a::after{content:"";position:absolute;left:15px;right:15px;bottom:5px;height:3px;border-radius:2px;background:var(--m);
     transform:scaleX(0);transform-origin:0 50%;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.menu > ul > li > a:hover::after,.menu > ul > li > a[aria-current]::after,.menu > ul > li > a.in::after,.menu .has-sub.open > a::after{transform:scaleX(1)}
.has-sub{display:flex;align-items:center}
.menu .has-sub > a{padding-right:4px} .menu .has-sub > a::after{right:4px}
.sub-btn{display:grid;place-items:center;width:30px;height:38px;margin-right:6px;background:none;border:0;border-radius:6px;color:inherit;cursor:pointer}
.chev{width:13px;height:13px;transition:transform .3s}
.has-sub.open .chev{transform:rotate(180deg)}
/* services submenu: list on the left, preview of the hovered service on the right */
.sub{position:absolute;left:50%;top:100%;width:min(800px,94vw);padding-top:16px;opacity:0;visibility:hidden;pointer-events:none;
     transform:translate(-50%,10px);transition:opacity .2s,transform .28s cubic-bezier(.2,.7,.2,1),visibility 0s .28s}
.has-sub.open .sub{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition:opacity .2s,transform .28s cubic-bezier(.2,.7,.2,1)}
.sub-card{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:10px;padding:10px;background:#fbfaf7;color:#1c1a18;border-radius:12px;
     box-shadow:0 34px 80px -24px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.06)}
.sub-card ul{list-style:none;display:grid;gap:2px}
.sub-card li a{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:3px;align-items:center;padding:12px 14px;border-radius:8px;color:inherit;text-decoration:none;transition:background .2s}
.sub-card li a:hover,.sub-card li a:focus-visible,.sub-card li a.hv{background:#efe9df}
.sub-card .n{grid-row:span 2;align-self:center;font:600 11px/1 "JetBrains Mono",monospace;letter-spacing:.06em;color:#fff;background:var(--m);border-radius:5px;padding:7px 6px}
.sub-card b{font:700 17px/1.15 Archivo,sans-serif;font-variation-settings:"wdth" 106;color:#1c1a18}
.sub-card .d{font-size:13.5px;line-height:1.35;color:#6b645b}
.sub-card li a[aria-current] b{text-decoration:underline;text-decoration-color:var(--m);text-decoration-thickness:2px;text-underline-offset:4px}
.sub-prev{position:relative;border-radius:8px;overflow:hidden;background:#1a1b1f;grid-row:span 2;min-height:250px}
.sub-prev img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .35s,transform .6s}
.sub-prev img.on{opacity:1;transform:none}
.sub-prev span{position:absolute;left:12px;bottom:12px;font:600 10.5px/1 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(17,18,20,.72);padding:8px 10px;border-radius:4px}
.sub-all{display:flex;justify-content:space-between;align-items:center;padding:14px 14px 12px;margin-top:4px;border-top:1px solid #e6dfd4;
     font:600 12px/1 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:#1c1a18;text-decoration:none}
.sub-all:hover span{transform:translateX(4px)} .sub-all span{transition:transform .25s;color:var(--c-red)}
.menu-btn{display:none;justify-self:end;grid-column:3;align-items:center;gap:10px;background:none;color:inherit;border:1.5px solid currentColor;border-radius:99px;
     padding:11px 16px;font:650 13px/1 Archivo,sans-serif;font-variation-settings:"wdth" 112;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.menu-btn i{display:block;width:17px;height:10px;border-top:2px solid currentColor;border-bottom:2px solid currentColor}
/* progress line: on the homepage the five film chapters, on the other pages how far you have read */
.filmprog{position:absolute;left:34px;right:34px;bottom:0;height:6px;display:flex;gap:6px;pointer-events:none}
.filmprog i{position:relative;flex:1 1 0;background:rgba(232,227,216,.16);border-radius:3px;overflow:hidden}
.filmprog i::after{content:"";position:absolute;inset:0;background:var(--m);transform-origin:0 50%;transform:scaleX(var(--f,0))}
body.home.past .filmprog{opacity:0;transition:opacity .4s}
/* the bar over light content (paper during the film, every page below it) */
body.onpaper .bar{background:linear-gradient(rgba(236,232,224,.95) 38%,rgba(236,232,224,0));color:#1c1a18}
body.past .bar{background:rgba(244,241,236,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 #ddd6cb;color:#1c1a18}
body.onpaper .brand .lg-l,body.past .brand .lg-l{display:none} body.onpaper .brand .lg-d,body.past .brand .lg-d{display:block}
body.onpaper .filmprog i,body.past .filmprog i{background:rgba(29,27,25,.1)}
/* mobile menu */
.mmenu{position:fixed;inset:0;z-index:50;background:#111214;color:#f3efe7;display:flex;flex-direction:column;overflow-y:auto;padding:0 22px 30px}
.mmenu[hidden]{display:none}
.mm-top{display:flex;justify-content:space-between;align-items:center;height:76px;flex:none}
.mm-top .brand{height:49px}
.mmenu-close{background:none;border:1.5px solid #4a4d53;color:#f3efe7;font:650 13px/1 Archivo,sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:11px 16px;border-radius:99px;cursor:pointer}
.mmenu nav{display:flex;flex-direction:column;margin-top:18px}
.mm-l{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid #2a2c31;color:#f3efe7;text-decoration:none;
     font:700 30px/1.1 Archivo,sans-serif;font-variation-settings:"wdth" 112;letter-spacing:.02em;text-transform:uppercase}
.mm-l::before{content:"";width:12px;height:12px;border-radius:3px;background:var(--m);flex:none}
.mm-sub{list-style:none;display:grid;gap:2px;padding:10px 0 12px 26px;border-bottom:1px solid #2a2c31}
.mm-sub a{display:flex;align-items:center;gap:10px;padding:8px 0;color:#cfcac1;text-decoration:none;font-size:17px;line-height:1.3}
.mm-sub a::before{content:"";width:16px;height:3px;border-radius:2px;background:var(--m);flex:none}
.mm-cta{display:grid;gap:10px;margin-top:auto;padding-top:26px}
.mm-cta .btn,.mm-cta .btn-wa{justify-content:center}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,label:focus-within,[tabindex]:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* ---- buttons ---- */
.btn,.btn-ghost,.btn-wa{display:inline-flex;align-items:center;gap:10px;font:600 15px/1 "Instrument Sans",sans-serif;padding:15px 20px;border-radius:3px;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:filter .2s,border-color .2s,background .2s}
.btn{background:var(--orange);color:#111214}
.btn:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent;color:var(--line);border-color:#4a4d53}
.btn-ghost:hover{border-color:var(--line2)}
.btn-wa{background:var(--c-tea);color:#07110f}
.btn-wa:hover{filter:brightness(1.08)}
.btn-wa svg,.wa-float svg{width:18px;height:18px;flex:none}

/* ---- sections ---- */
.sec{padding:clamp(76px,10vw,140px) 0;border-top:1px solid var(--rule);position:relative}
.sec-alt{background:var(--bg2)}
.kick{font:500 11px/1.4 "JetBrains Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--rose);display:flex;gap:10px;align-items:center;margin-bottom:18px}
.kick::before{content:"";width:22px;height:1px;background:currentColor}
.sec-head h2{font-family:Archivo,sans-serif;font-variation-settings:"wdth" 112;font-weight:700;font-size:clamp(30px,3.4vw,52px);line-height:1.04;letter-spacing:-.012em;color:var(--ink);max-width:22ch;text-wrap:balance}
.sec-head p{margin-top:18px;font-size:17px;line-height:1.6;color:var(--text);max-width:58ch}
.two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}

/* services */
.svc-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;margin-top:56px}
.svc{grid-column:span 2;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--rule);border-radius:6px;overflow:hidden;text-decoration:none;color:inherit;transition:border-color .3s,transform .3s}
.svc.wide{grid-column:span 4}
.svc:hover{border-color:var(--m);transform:translateY(-3px)}
.svc-img{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0d0e10}
.svc.wide .svc-img{aspect-ratio:2.05}
.svc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s}
.svc:hover .svc-img img{transform:scale(1.03)}
.svc-txt{padding:22px 24px 26px;border-top:3px solid var(--m);flex:1;display:flex;flex-direction:column}
.svc.tall .svc-img{aspect-ratio:auto;flex:1 1 auto;min-height:230px} .svc.tall .svc-txt{flex:none}
.svc-k{font:500 11px "JetBrains Mono",monospace;color:var(--m);letter-spacing:.14em}
.svc h3{font-family:Archivo,sans-serif;font-variation-settings:"wdth" 108;font-weight:700;font-size:22px;line-height:1.15;margin:8px 0 10px;color:var(--ink)}
.svc p{color:#aeaaa2;font-size:15px;line-height:1.55}
.svc .more{margin-top:auto;padding-top:16px;font:500 11.5px "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--line)}
.svc .more::after{content:" →";color:var(--m)}
/* CSS mock of a manual page (no photo needed) */
.mock-man{display:grid;place-items:center;background:radial-gradient(ellipse at 50% 40%,#23252a,#0d0e10 75%)}
.mpage{height:84%;max-height:340px;aspect-ratio:1/1.3;background:var(--paper);transform:rotate(-4deg);box-shadow:0 30px 50px -20px rgba(0,0,0,.8);padding:7% 8%;display:flex;flex-direction:column;gap:6%;container-type:inline-size}
.mpage .mh{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid #cfc7bb;padding-bottom:3cqw;font:600 5cqw/1.1 Archivo,sans-serif;color:#1c1a18}
.mpage .mh b{font:500 3.6cqw "JetBrains Mono",monospace;color:#9a8f83;letter-spacing:.1em}
.mpage .mimg{flex:1;background:url(../media/scheda-linee.jpg) center/contain no-repeat;mix-blend-mode:multiply}
.mpage .msteps{display:grid;grid-template-columns:auto 1fr;gap:2.4cqw 3cqw;align-items:center;font:600 4cqw "JetBrains Mono",monospace;color:#1c1a18}
.mpage .msteps i{display:block;height:2.2cqw;background:#cfc7bb;border-radius:2cqw}
.mpage .msteps i.s{width:70%}
.mpage .mwarn{display:flex;align-items:center;gap:3cqw;font:600 3.8cqw/1.2 "Instrument Sans",sans-serif;color:#3b352f}
.mpage .mwarn span{flex:none;width:9cqw;height:8cqw;background:var(--c-yel);clip-path:polygon(50% 0,100% 100%,0 100%);display:grid;place-items:center;font:800 5cqw/1 Archivo;color:#1c1a18;padding-top:1.5cqw}

/* real works (portfolio) */
.works{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:48px}
.works.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.works figure{margin:0;background:var(--card);border:1px solid var(--rule);border-radius:6px;overflow:hidden}
.works .wimg{aspect-ratio:4/3;overflow:hidden;background:#e9e7e3}
.works img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s}
.works figure:hover img{transform:scale(1.03)}
.works img.fit{object-fit:contain;background:#fff;padding:5%}
.works figcaption{padding:14px 16px 16px}
.works figcaption b{display:block;font:500 10.5px "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--rose);margin-bottom:6px}
.works figcaption span{color:var(--text);font-size:14.5px;line-height:1.45}

/* method */
.flow{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:56px;counter-reset:f}
.flow li{border-top:1px solid #3a3d42;padding-top:22px;position:relative}
.flow li::before{content:"";position:absolute;left:0;top:-2px;width:44px;height:3px;background:var(--m)}
.flow .n{font:500 12px "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--m)}
.flow h3{font-family:Archivo,sans-serif;font-variation-settings:"wdth" 108;font-weight:700;font-size:21px;line-height:1.2;color:var(--ink);margin:10px 0 10px}
.flow p{color:var(--text);font-size:15.5px;line-height:1.6}

/* sectors */
.sect{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.sect li{display:grid;grid-template-columns:auto 1fr;column-gap:14px;padding:20px 0;border-bottom:1px solid var(--rule)}
.sect li::before{content:"";grid-row:span 2;width:10px;height:10px;margin-top:7px;border-radius:2px;background:var(--m)}
.sect b{font-family:Archivo,sans-serif;font-variation-settings:"wdth" 108;font-weight:700;font-size:20px;color:var(--ink)}
.sect span{color:var(--text);font-size:15px;line-height:1.55;margin-top:4px}

/* studio */
.studio p{font-size:18px;line-height:1.65;color:#cfcac1;max-width:60ch}
.studio p + p{margin-top:16px}
.pillars{list-style:none;margin-top:36px;display:grid;gap:14px}
.pillars li{padding:18px 20px;background:var(--card);border:1px solid var(--rule);border-left:3px solid var(--m);border-radius:4px;color:var(--text);font-size:15.5px;line-height:1.55}
.pillars b{color:var(--ink);font-weight:600}

/* quote form (3 steps) */
.contact-alt{display:flex;flex-direction:column;gap:12px;margin-top:30px;align-items:flex-start}
.contact-alt a:not(.btn-wa){font-size:16px;color:var(--line);text-decoration:none;border-bottom:1px solid #3d4046;padding-bottom:2px}
.qf{background:var(--card);border:1px solid var(--rule);border-radius:8px;padding:clamp(22px,3vw,40px)}
.qf-steps{list-style:none;display:flex;gap:8px;margin-bottom:28px;counter-reset:q}
.qf-steps li{flex:1;font:500 11px/1.3 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);border-top:3px solid #2f3136;padding-top:10px;counter-increment:q}
.qf-steps li::before{content:"0" counter(q) "  ";color:inherit}
.qf-steps li.on{color:var(--line);border-color:var(--orange)} .qf-steps li.done{color:var(--line2);border-color:#6b6f75}
.qf-step{border:0;display:none}
.qf-step.on{display:block}
.qf legend{font-family:Archivo,sans-serif;font-variation-settings:"wdth" 108;font-weight:700;font-size:24px;color:var(--ink);margin-bottom:18px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chips span{display:inline-block;padding:11px 14px;border:1px solid #3d4046;border-radius:3px;font-size:15px;color:var(--line);transition:background .2s,border-color .2s,color .2s}
.chips input:checked + span{background:var(--line);color:#111214;border-color:var(--line)}
.chips label:focus-within span{outline:2px solid var(--ink);outline-offset:2px}
.field{display:block;margin-top:18px}
.field .lbl{display:block;font:500 11px "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--line2);margin-bottom:8px}
.field input,.field select,.field textarea{width:100%;background:#121316;border:1px solid #34363c;border-radius:3px;color:var(--ink);font:400 16px "Instrument Sans",sans-serif;padding:13px 14px}
.field textarea{resize:vertical;min-height:110px;line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:#6b6f75}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#8b9097 50%),linear-gradient(135deg,#8b9097 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 15px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.field input[aria-invalid="true"]{border-color:var(--c-red)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.check{display:flex;gap:12px;align-items:flex-start;margin-top:22px;font-size:14.5px;line-height:1.5;color:var(--text);cursor:pointer}
.check input{margin-top:3px;width:18px;height:18px;accent-color:var(--orange);flex:none}
.qf-err{margin-top:16px;color:#ff8f8f;font-size:14.5px}
.qf-nav{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.qf-nav [data-next],.qf-nav [data-send="mail"]{margin-left:auto}
.qf-done h3{font-family:Archivo,sans-serif;font-weight:700;font-size:26px;color:var(--ink)}
.qf-done p{margin-top:12px;color:var(--text);font-size:16px;line-height:1.6}
.qf-done .btn-ghost{margin-top:22px}

/* footer + floating WhatsApp */
.foot{border-top:1px solid var(--rule);padding:64px 0 96px;background:#0d0e10}
.foot-grid{display:grid;grid-template-columns:1.5fr 1.3fr 1fr 1.25fr;gap:40px}
.foot-logo{height:66px;width:auto;display:block}
.foot address{font-style:normal;margin-top:18px;color:var(--text);font-size:14.5px;line-height:1.65}
.foot address b{color:var(--ink);font-weight:600}
.foot p{margin-top:16px;color:var(--text);font-size:15px;line-height:1.6;max-width:34ch}
.foot .fh{font:500 11px "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--line2);margin-bottom:14px}
.foot ul{list-style:none;display:grid;gap:9px}
.foot ul a{color:var(--line);text-decoration:none;font-size:15px}
.foot ul a:hover{color:var(--ink);text-decoration:underline}
.foot-legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:56px;padding-top:20px;border-top:1px solid var(--rule);font:400 12.5px "JetBrains Mono",monospace;color:var(--mute);letter-spacing:.04em}
.foot-legal a{color:var(--line2)}
.wa-float{position:fixed;right:22px;bottom:22px;z-index:35;display:flex;align-items:center;gap:10px;background:var(--c-tea);color:#07110f;text-decoration:none;font:600 14px "Instrument Sans",sans-serif;padding:13px 16px;border-radius:99px;box-shadow:0 14px 34px -10px rgba(0,0,0,.7);
          opacity:0;pointer-events:none;transform:translateY(14px);transition:opacity .4s,transform .4s}
body.past .wa-float{opacity:1;pointer-events:auto;transform:none}

/* ---- service pages ---- */
.phero{padding:172px 0 clamp(64px,8vw,110px);position:relative;overflow:hidden}
.phero::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:var(--rule)}
.phero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:center}
.back{display:inline-block;font:500 11px "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--line2);text-decoration:none;margin-bottom:34px}
.back:hover{color:var(--ink)}
.phero .kick{color:var(--m)}
.phero h1{font-family:Archivo,sans-serif;font-variation-settings:"wdth" 112;font-weight:700;font-size:clamp(36px,3.9vw,62px);line-height:1;letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.phero .lead{margin-top:24px;font-size:18px;line-height:1.6;color:#cfcac1;max-width:46ch}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.phero-img{margin:0;border-radius:6px;overflow:hidden;border:1px solid var(--rule);background:#0d0e10;box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.phero-img img{display:block;width:100%;height:auto}
.benefits{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:48px}
.benefits li{background:var(--card);border:1px solid var(--rule);border-top:3px solid var(--m);border-radius:4px;padding:24px 22px}
.benefits h3{font-family:Archivo,sans-serif;font-variation-settings:"wdth" 108;font-weight:700;font-size:20px;line-height:1.2;color:var(--ink)}
.benefits p{margin-top:10px;color:var(--text);font-size:15px;line-height:1.55}
.how{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(28px,5vw,72px);align-items:center}
.how .txt p{font-size:17px;line-height:1.65;color:#cfcac1}
.how .txt p + p{margin-top:14px}
.ticks{list-style:none;margin-top:26px;display:grid;gap:12px}
.ticks li{position:relative;padding-left:28px;color:var(--line);font-size:16px;line-height:1.5}
.ticks li::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:8px;border-left:2px solid var(--m);border-bottom:2px solid var(--m);transform:rotate(-45deg)}
.how figure{margin:0;border-radius:6px;overflow:hidden;border:1px solid var(--rule);background:#0d0e10}
.how figure img,.how figure video{display:block;width:100%;height:auto}
.inputs{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:44px}
.inputs li{padding-top:18px;border-top:1px solid #3a3d42}
.inputs b{display:block;font:500 11px "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--m);margin-bottom:10px}
.inputs span{color:var(--line);font-size:16px;line-height:1.5}
.faq{margin-top:40px;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:22px 0;font-family:Archivo,sans-serif;font-variation-settings:"wdth" 106;font-weight:600;font-size:20px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 26px/1 "Instrument Sans";color:var(--m);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 24px;color:var(--text);font-size:16px;line-height:1.65;max-width:70ch}
.cta-band{padding:clamp(72px,9vw,120px) 0;border-top:1px solid var(--rule);background:radial-gradient(ellipse 70% 120% at 80% 0%,rgba(243,146,0,.10),transparent 60%),var(--bg2)}
.cta-band h2{font-family:Archivo,sans-serif;font-variation-settings:"wdth" 112;font-weight:700;font-size:clamp(30px,3.6vw,54px);line-height:1.04;color:var(--ink);max-width:20ch;text-wrap:balance}
.cta-band p{margin-top:16px;font-size:17px;color:var(--text);max-width:52ch;line-height:1.6}

/* ================= LIGHT THEME — everything below the film and the service pages =================
   The film stays dark (cinema); content is paper-light like the sketch sheet; the CTA band and the footer stay dark. */
main{--bg:#f4f1ec; --bg2:#ebe6de; --card:#fff; --rule:#ddd6cb; --line:#1c1a18; --line2:#6b645b; --mute:#a1998e; --ink:#1c1a18; --text:#575047; --rose:#a0603f;
     background:var(--bg); color:var(--ink)}
body.page{background:#f4f1ec}
main .sec-alt{background:var(--bg2)}
main .phero .kick,main .svc-k,main .flow .n,main .inputs b{color:color-mix(in srgb,var(--m) 74%,#000)}
main .svc,main .works figure,main .benefits li,main .pillars li{box-shadow:0 1px 2px rgba(0,0,0,.05)}
main .svc:hover{box-shadow:0 22px 44px -24px rgba(0,0,0,.35)}
main .svc p,main .studio p,main .phero .lead,main .how .txt p,main .faq details p{color:var(--text)}
main .flow li,main .inputs li{border-top-color:#cfc7bb}
main .btn-ghost{border-color:#c9c1b5;color:var(--ink)}
main .contact-alt a:not(.btn-wa){border-bottom-color:#c9c1b5}
main .chips span{border-color:#cfc7bb;background:#fff;color:var(--ink)}
main .chips input:checked + span{background:var(--ink);border-color:var(--ink);color:#fff}
main .field input,main .field select,main .field textarea{background:#fff;border-color:#d6cec2;color:var(--ink)}
main .field input::placeholder,main .field textarea::placeholder{color:#a1998e}
main .qf{box-shadow:0 26px 60px -38px rgba(0,0,0,.4)}
main .qf-steps li{border-top-color:#e2dbd0} main .qf-steps li.on{color:var(--ink);border-color:var(--orange)} main .qf-steps li.done{color:#8d857b;border-color:#b5ab9e}
main .qf-err{color:#b3261e}
main .phero-img,main .how figure{box-shadow:0 34px 70px -42px rgba(0,0,0,.55);border-color:#d6cec2}
main .studio-img{margin:34px 0 0;border-radius:6px;overflow:hidden;border:1px solid #d6cec2;box-shadow:0 30px 60px -40px rgba(0,0,0,.45)}
main .studio-img img{display:block;width:100%;height:auto}
/* dark islands inside the light content */
.cta-band{--ink:#f3efe7; --text:#b9b5ad; --rule:#2a2c31; --line:#e8e3d8; color:var(--ink);
          background:radial-gradient(ellipse 70% 120% at 80% 0%,rgba(243,146,0,.12),transparent 60%),#16171a}

/* ================= NEW PAGES (2026-11-12): studio, services overview, portfolio, contacts + one interactive piece per service ================= */
/* reveal on scroll (only with JavaScript: without it everything is simply visible) */
html.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 70ms)}
html.js .rv.in{opacity:1;transform:none}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px 10px;margin-bottom:30px;font:500 11.5px/1.4 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--line2)}
.crumbs li+li::before{content:"/";margin-right:10px;color:var(--mute)}
.crumbs a{color:inherit;text-decoration:none} .crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs [aria-current]{color:var(--ink)}
.phero h1 .kick{font-variation-settings:normal;letter-spacing:.16em}
.phero.simple .phero-grid{grid-template-columns:minmax(0,1fr)}
.phero.simple h1{max-width:17ch;font-size:clamp(40px,5.4vw,84px)}
.phero.simple .lead{max-width:62ch}
.lnk{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--m,var(--c-red));padding-bottom:6px}
.lnk::after{content:"→";transition:transform .25s} .lnk:hover::after{transform:translateX(4px)}
.sec-head .lnk{margin-top:22px}
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}

/* services overview: one big row per service */
.srows{display:grid;gap:clamp(64px,9vw,128px);margin-top:12px}
.srow{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,76px);align-items:center}
.srow:nth-child(even) .srow-img{order:2}
.srow-img{position:relative;display:block;border-radius:10px;overflow:hidden;aspect-ratio:16/10;background:#111214;box-shadow:0 40px 80px -46px rgba(0,0,0,.6)}
.srow-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.srow-img:hover img{transform:scale(1.045)}
.srow-img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--m)}
.srow .big{display:block;font:800 clamp(64px,8vw,124px)/.78 Archivo,sans-serif;font-variation-settings:"wdth" 125;color:var(--m);letter-spacing:-.03em}
.srow h2{font:700 clamp(28px,3vw,46px)/1.04 Archivo,sans-serif;font-variation-settings:"wdth" 112;color:var(--ink);margin-top:18px;letter-spacing:-.01em;text-wrap:balance}
.srow h2 a{color:inherit;text-decoration:none}
.srow p{margin-top:16px;font-size:17px;line-height:1.62;color:var(--text);max-width:52ch}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.tags li{font:500 12px/1 "JetBrains Mono",monospace;letter-spacing:.04em;padding:9px 11px;border:1px solid var(--rule);border-radius:99px;background:#fff;color:var(--ink)}
.srow .lnk{margin-top:26px}
/* other services, at the bottom of each service page */
.msv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:40px}
.msv a{display:flex;flex-direction:column;gap:8px;padding:22px 20px 24px;background:#fff;border:1px solid var(--rule);border-top:4px solid var(--m);border-radius:6px;text-decoration:none;color:var(--ink);transition:transform .3s,box-shadow .3s}
.msv a:hover{transform:translateY(-5px);box-shadow:0 24px 46px -28px rgba(0,0,0,.45)}
.msv .n{font:500 11px "JetBrains Mono",monospace;letter-spacing:.12em;color:color-mix(in srgb,var(--m) 74%,#000)}
.msv b{font:700 19px/1.2 Archivo,sans-serif;font-variation-settings:"wdth" 106}
.msv .d{font-size:14.5px;line-height:1.45;color:var(--text)}

/* studio: the path from the idea to every form it takes, drawn while you scroll */
.journey{position:relative;margin-top:60px;padding-left:76px;max-width:900px}
.jline{position:absolute;left:24px;top:14px;bottom:70px;width:6px;border-radius:3px;background:#e2dbd0}
.jline i{position:absolute;inset:0;border-radius:3px;background:linear-gradient(var(--c-red),var(--c-yel) 28%,var(--c-blu) 52%,var(--c-tea) 76%,var(--c-red));transform-origin:50% 0;transform:scaleY(var(--p,0))}
.jline b{position:absolute;left:50%;top:calc(var(--p,0) * 100%);width:16px;height:22px;margin:-2px 0 0 -8px;background:linear-gradient(#e5a227 55%,#e74a4f 55%);clip-path:polygon(0 0,100% 0,50% 100%)}
.jstep{position:relative;padding:4px 0 64px;--d:0}
.jstep::before{content:"";position:absolute;left:-62px;top:6px;width:22px;height:22px;border-radius:50%;background:#f4f1ec;border:4px solid var(--m);transition:background .4s,transform .4s;transform:scale(.7)}
.jstep.on::before{background:var(--m);transform:scale(1)}
.jstep .n{font:500 12px "JetBrains Mono",monospace;letter-spacing:.14em;color:color-mix(in srgb,var(--m) 74%,#000)}
.jstep h3{font:700 clamp(26px,2.8vw,40px)/1.06 Archivo,sans-serif;font-variation-settings:"wdth" 112;color:var(--ink);margin-top:8px}
.jstep p{margin-top:12px;font-size:17px;line-height:1.62;color:var(--text);max-width:58ch}
.jstep .lnk{margin-top:18px;--m:inherit}
.facts{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:44px}
.facts li{background:#fff;border:1px solid var(--rule);border-radius:6px;padding:24px 22px;border-top:4px solid var(--m)}
.facts b{display:block;font:700 21px/1.2 Archivo,sans-serif;font-variation-settings:"wdth" 108;color:var(--ink)}
.facts span{display:block;margin-top:10px;color:var(--text);font-size:15.5px;line-height:1.55}

/* portfolio */
.pf-bar{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 34px}
.pf-bar button{display:inline-flex;align-items:center;gap:9px;padding:11px 16px;border-radius:99px;border:1px solid #cfc7bb;background:#fff;color:var(--ink);font:600 14.5px/1 "Instrument Sans",sans-serif;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.pf-bar button::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--m,#1c1a18)}
.pf-bar button span{font:500 11px "JetBrains Mono",monospace;opacity:.55}
.pf-bar button:hover{border-color:#1c1a18}
.pf-bar button[aria-pressed="true"]{background:#1c1a18;border-color:#1c1a18;color:#fff}
.pf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.pf-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--rule);border-radius:8px;overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.pf-card:hover{transform:translateY(-5px);box-shadow:0 28px 54px -32px rgba(0,0,0,.55)}
.pf-card[hidden]{display:none}
.pf-card.pop{animation:pop .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 40ms)}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.97)}}
.pf-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:#e9e7e3}
.pf-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.pf-card:hover .pf-img img{transform:scale(1.05)}
.pf-img.fit img{object-fit:contain;background:#fff;padding:5%}
.pf-img .cnt{position:absolute;right:10px;top:10px;font:600 11px/1 "JetBrains Mono",monospace;background:rgba(17,18,20,.78);color:#fff;padding:7px 8px;border-radius:4px}
.pf-img .ex{position:absolute;left:10px;top:10px;font:600 10.5px/1 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;background:#e5a227;color:#16120a;padding:7px 8px;border-radius:4px}
.pf-txt{padding:16px 18px 18px;border-top:3px solid var(--m);flex:1}
.pf-txt .t{font:500 10.5px/1.4 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--m) 74%,#000)}
.pf-txt h3{font:700 19px/1.2 Archivo,sans-serif;font-variation-settings:"wdth" 106;margin-top:6px}
.pf-txt p{font-size:14.5px;line-height:1.45;color:var(--text);margin-top:5px}
.pf-empty{padding:40px;text-align:center;color:var(--text);border:1px dashed #cfc7bb;border-radius:8px}
/* lightbox */
.lb{width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;padding:18px 18px 22px;background:rgba(12,13,15,.96);color:#f3efe7;display:none}
.lb[open]{display:grid;grid-template-rows:minmax(0,1fr) auto}
.lb::backdrop{background:rgba(12,13,15,.6)}
.lb-stage{position:relative;display:grid;place-items:center;min-height:0}
.lb-stage img,.lb-stage video{max-width:min(100%,1500px);max-height:100%;object-fit:contain;border-radius:4px;box-shadow:0 40px 90px -30px #000;animation:lbin .4s cubic-bezier(.2,.7,.2,1)}
@keyframes lbin{from{opacity:0;transform:scale(.98)}}
.lb-cap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 24px;align-items:end;width:min(100%,1200px);margin:16px auto 0}
.lb-cap .t{font:500 11px "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--m) 66%,#fff)}
.lb-cap h2{font:700 clamp(20px,2vw,28px)/1.15 Archivo,sans-serif;margin-top:6px}
.lb-cap p{color:#b9b5ad;max-width:76ch;margin-top:6px;font-size:15.5px;line-height:1.55}
.lb-cap a{color:#f3efe7}
.lb-thumbs{display:flex;gap:8px;grid-column:1 / -1;flex-wrap:wrap}
.lb-thumbs button{width:64px;height:48px;border-radius:4px;overflow:hidden;border:2px solid transparent;padding:0;cursor:pointer;opacity:.6;background:#222}
.lb-thumbs button[aria-current="true"]{border-color:#fff;opacity:1}
.lb-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.lb-n{font:500 12px "JetBrains Mono",monospace;color:#8b9097;white-space:nowrap}
.lb-b{position:absolute;top:50%;width:54px;height:54px;margin-top:-27px;border-radius:50%;border:1px solid #4a4d53;background:rgba(17,18,20,.7);color:#fff;font:400 24px/1 "Instrument Sans";cursor:pointer;z-index:2}
.lb-b:hover{background:#2a2c31} .lb-prev{left:6px} .lb-next{right:6px}
.lb-x{position:absolute;top:12px;right:12px;z-index:3;background:rgba(17,18,20,.7);border:1px solid #4a4d53;color:#f3efe7;font:650 12px/1 Archivo,sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:12px 16px;border-radius:99px;cursor:pointer}

/* contacts */
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,84px);align-items:start}
.ccards{display:grid;gap:12px;margin-top:30px}
.ccard{display:grid;grid-template-columns:50px 1fr;gap:16px;align-items:center;padding:16px 18px;background:#fff;border:1px solid var(--rule);border-left:4px solid var(--m);border-radius:6px;text-decoration:none;color:var(--ink);transition:transform .25s,box-shadow .25s}
a.ccard:hover{transform:translateX(5px);box-shadow:0 18px 36px -24px rgba(0,0,0,.4)}
.ccard i{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--m) 15%,#fff);color:color-mix(in srgb,var(--m) 78%,#000)}
.ccard i svg{width:22px;height:22px}
.ccard b{display:block;font:500 10.5px "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--line2)}
.ccard span{display:block;margin-top:4px;font:600 17.5px/1.35 "Instrument Sans",sans-serif}

/* ---- interactive piece 1 · graphic design: the same elements, without and with a layout grid ---- */
.demo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,84px);align-items:center}
.seg{display:inline-flex;padding:4px;background:#e4ddd2;border-radius:99px;margin-top:28px}
.seg button{border:0;background:none;padding:12px 18px;border-radius:99px;font:600 15px/1 "Instrument Sans",sans-serif;color:#575047;cursor:pointer;transition:background .3s,color .3s}
.seg button[aria-pressed="true"]{background:#1c1a18;color:#fff}
.sw{display:flex;align-items:center;gap:12px;margin-top:18px;font-size:15.5px;color:var(--text);cursor:pointer;width:max-content}
.sw input{appearance:none;-webkit-appearance:none;width:44px;height:26px;border-radius:99px;background:#d6cec2;position:relative;cursor:pointer;transition:background .25s;flex:none;margin:0}
.sw input::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .25s}
.sw input:checked{background:var(--c-red)} .sw input:checked::after{transform:translateX(18px)}
.adv{position:relative;aspect-ratio:1/1.32;width:min(100%,500px);margin:0 auto;background:#f7f4ef;container-type:inline-size;overflow:hidden;border-radius:3px;
     box-shadow:0 60px 100px -50px rgba(0,0,0,.65),0 0 0 1px rgba(0,0,0,.06);transform:rotate(-1.2deg)}
.adv .e{position:absolute;margin:0;transition:left 1s cubic-bezier(.65,0,.25,1),top 1s cubic-bezier(.65,0,.25,1),width 1s cubic-bezier(.65,0,.25,1),height 1s cubic-bezier(.65,0,.25,1),font-size 1s cubic-bezier(.65,0,.25,1),transform 1s cubic-bezier(.65,0,.25,1),color .6s,background .6s,padding 1s,letter-spacing 1s}
.adv .img{overflow:hidden;background:#141416}
.adv .img img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;display:block}
.adv .mark{font:700 3.2cqw/1 Archivo,sans-serif;letter-spacing:.3em;text-transform:uppercase}
.adv .h{font-family:Archivo,sans-serif;font-weight:800;line-height:.94;font-variation-settings:"wdth" 108;letter-spacing:-.02em}
.adv .p{font-family:"Instrument Sans",sans-serif;line-height:1.45}
.adv .nm{font:700 2.6cqw/1 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase}
.adv .cta{font:700 2.4cqw/1 "Instrument Sans",sans-serif;border-radius:2px}
.adv .url{font:500 2cqw/1 "JetBrains Mono",monospace;letter-spacing:.1em}
/* with the project: everything on a 12-column grid with 8% margins */
.adv.pro .img{left:0;top:0;width:100%;height:57%}
.adv.pro .mark{left:8%;top:5.5%;color:#fff;font-size:3.2cqw}
.adv.pro .h{left:8%;top:61%;width:84%;font-size:10.6cqw;color:#1c1a18}
.adv.pro .p{left:8%;top:82.5%;width:46%;font-size:2.55cqw;color:#575047}
.adv.pro .nm{left:61.5%;top:82.8%;font-size:2.6cqw;color:#a0603f}
.adv.pro .cta{left:61.5%;top:87.4%;padding:2.2cqw 3cqw;font-size:2.4cqw;background:#1c1a18;color:#fff}
.adv.pro .url{left:8%;top:95%;font-size:2cqw;color:#9a8f83}
/* without: same content, sizes and positions by chance */
.adv.raw .img{left:22%;top:30%;width:62%;height:34%;transform:rotate(5deg)}
.adv.raw .mark{left:68%;top:3%;color:#c4393d;font-size:5.4cqw;transform:rotate(-8deg)}
.adv.raw .h{left:5%;top:7%;width:70%;font-size:7.4cqw;color:#2a5ea8;transform:rotate(-3deg)}
.adv.raw .p{left:44%;top:68%;width:52%;font-size:3.6cqw;color:#2a2622;transform:rotate(2deg)}
.adv.raw .nm{left:6%;top:70%;font-size:6cqw;color:#e5a227;transform:rotate(-6deg)}
.adv.raw .cta{left:9%;top:84%;padding:1.2cqw 1.6cqw;font-size:4cqw;background:#e74a4f;color:#fff;transform:rotate(3deg)}
.adv.raw .url{left:52%;top:93%;font-size:3.2cqw;color:#049c90;transform:rotate(-2deg)}
.adv .g{position:absolute;inset:0 8%;display:grid;grid-template-columns:repeat(12,1fr);gap:2.2%;pointer-events:none;opacity:0;transition:opacity .5s}
.adv .g i{background:rgba(231,74,79,.10);border-left:1px solid rgba(231,74,79,.35);border-right:1px solid rgba(231,74,79,.35)}
.adv .g::before,.adv .g::after{content:"";position:absolute;left:-10%;right:-10%;height:1px;background:rgba(231,74,79,.55)}
.adv .g::before{top:57%} .adv .g::after{top:80.5%}
.adv.grid .g{opacity:1}
.sec-head .demo-note,.demo-note{margin-top:22px;font:500 11.5px/1.5 "JetBrains Mono",monospace;letter-spacing:.06em;color:var(--line2)}

/* ---- interactive piece 2 · render: drag to go from the drawing / the 3D model to the finished render ---- */
.cmp-box{display:grid;justify-items:center}
.cmp{position:relative;width:min(100%,600px);aspect-ratio:1100/1128;border-radius:12px;overflow:hidden;background:#111214;box-shadow:0 60px 100px -50px rgba(0,0,0,.7);--x:50%;user-select:none;-webkit-user-select:none}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.cmp .cmp-top{clip-path:inset(0 0 0 var(--x))}
.cmp-h{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:#fff;pointer-events:none;box-shadow:0 0 12px rgba(0,0,0,.4)}
.cmp-h::after{content:"";position:absolute;top:50%;left:50%;width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6' fill='none' stroke='%23111214' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.cmp input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.cmp:has(input:focus-visible) .cmp-h::after{outline:3px solid var(--c-yel);outline-offset:3px}
.cmp-l{position:absolute;bottom:16px;font:600 11px/1 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;padding:9px 11px;border-radius:4px;background:rgba(17,18,20,.72);color:#fff;pointer-events:none}
.cmp-l.a{left:16px} .cmp-l.b{right:16px;background:var(--c-yel);color:#16120a}
.cmp-tabs{display:inline-flex;padding:4px;background:#e4ddd2;border-radius:99px;margin-top:22px}
.cmp-tabs button{border:0;background:none;padding:11px 16px;border-radius:99px;font:600 14.5px/1 "Instrument Sans",sans-serif;color:#575047;cursor:pointer}
.cmp-tabs button[aria-pressed="true"]{background:#1c1a18;color:#fff}

/* ---- interactive piece 3 · spare parts: exploded view + parts list that talk to each other ---- */
.xpl{margin-top:44px;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);background:#fff;border:1px solid var(--rule);border-radius:12px;overflow:hidden;box-shadow:0 50px 90px -60px rgba(0,0,0,.6)}
.xpl-fig{position:relative;background:#fbf9f5;aspect-ratio:1/1;--ln:#2a2622;--bg:#fbf9f5;--line2:#9a9086;--mute:#c2b9ad;--orange:#f39200;overflow:hidden}
.xpl-fig > svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.xpl-fig svg *{vector-effect:non-scaling-stroke}
.xpl-fig .s{fill:var(--bg);stroke:var(--ln);stroke-width:1.1;stroke-linejoin:round} .xpl-fig .s.eo{fill-rule:evenodd}
.xpl-fig .l{fill:none;stroke:var(--ln);stroke-width:1.1;stroke-linejoin:round;stroke-linecap:round}
.xpl-fig .d{fill:none;stroke:var(--ln);stroke-width:.75;opacity:.42;stroke-linejoin:round}
.xpl-fig .f{fill:none;stroke:var(--ln);stroke-width:.6;opacity:.22}
.xpl-fig .glass{fill:rgba(42,38,34,.03);stroke:var(--ln);stroke-width:1;opacity:.85}
.xpl-fig .glow{display:none}
.xpl-fig .ax{fill:none;stroke:var(--mute);stroke-width:.8;stroke-dasharray:24 5 3 5}
.xpl-fig .co line{stroke:var(--line2);stroke-width:.8}
.xpl-fig .co .bal{fill:#fff;stroke:var(--line2);stroke-width:.9}
.xpl-fig .co .num{font:500 14px "JetBrains Mono",monospace;fill:var(--ln);text-anchor:middle;dominant-baseline:central}
.xpl-fig .co .dot{fill:var(--ln)}
.xpl-fig .co{cursor:pointer}
.xpl-fig .part,.xpl-fig .co{transition:opacity .3s}
.xpl-fig .part.hl{--ln:var(--orange)}
.xpl-fig .co.hl line{stroke:var(--orange)} .xpl-fig .co.hl .bal{fill:var(--orange);stroke:var(--orange)} .xpl-fig .co.hl .num{fill:#fff;font-weight:600} .xpl-fig .co.hl .dot{fill:var(--orange)}
.xpl.has-hl .part:not(.hl){opacity:.22} .xpl.has-hl .co:not(.hl){opacity:.3}
.xpl-tools{position:absolute;left:14px;top:14px;display:flex;gap:8px;z-index:2}
.xpl-tools span,.xpl-tools button{font:600 10.5px/1 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;padding:9px 11px;border-radius:4px;border:1px solid #ddd6cb;background:rgba(255,255,255,.9);color:#575047}
.xpl-tools button{cursor:pointer;color:#1c1a18} .xpl-tools button[hidden]{display:none}
.xpl-bom{display:flex;flex-direction:column;border-left:1px solid var(--rule);height:0;min-height:100%}
.xpl-hd{padding:18px 20px 14px;border-bottom:1px solid var(--rule)}
.xpl-hd b{display:block;font:700 19px/1.2 Archivo,sans-serif;font-variation-settings:"wdth" 106;color:var(--ink)}
.xpl-hd span{display:block;margin-top:4px;font:500 11px "JetBrains Mono",monospace;letter-spacing:.08em;color:var(--line2)}
.xpl-list{flex:1;overflow:auto;overscroll-behavior:contain;scroll-behavior:smooth}
.xpl table{width:100%;border-collapse:collapse;font-size:14px}
.xpl thead th{position:sticky;top:0;background:#fff;z-index:1;font:500 10px "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--line2);text-align:left;padding:10px 12px;border-bottom:2px solid var(--c-blu)}
.xpl td{padding:9px 12px;border-bottom:1px solid #eee8de;color:var(--ink);vertical-align:middle}
.xpl td:first-child{width:46px} .xpl td:nth-child(3){font:500 11.5px "JetBrains Mono",monospace;color:var(--line2);white-space:nowrap}
.xpl td .p{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid #c9c1b5;font:500 12px "JetBrains Mono",monospace;transition:background .25s,border-color .25s,color .25s}
.xpl tbody tr{cursor:pointer;transition:background .2s}
.xpl tbody tr:hover,.xpl tbody tr.hl{background:#fff4e2}
.xpl tbody tr.hl .p{background:var(--orange);border-color:var(--orange);color:#fff}
.xpl .add{width:30px;height:30px;border-radius:50%;border:1px solid #c9c1b5;background:#fff;color:var(--ink);font:500 18px/1 "Instrument Sans";cursor:pointer;transition:background .2s,color .2s}
.xpl .add:hover{background:var(--ink);color:#fff} .xpl .add.on{background:var(--c-tea);border-color:var(--c-tea);color:#fff}
.xpl-req{border-top:1px solid var(--rule);padding:14px 20px 18px;background:#faf8f4}
.xpl-req p{font-size:14px;color:var(--text);line-height:1.45}
.xpl-req b{color:var(--ink)}
.xpl-req .btn{margin-top:12px;padding:12px 16px;font-size:14px}
.xpl-req .btn[disabled]{opacity:.4;cursor:default;filter:none}
.toast{position:fixed;left:50%;bottom:28px;z-index:90;transform:translate(-50%,20px);opacity:0;pointer-events:none;width:min(560px,calc(100% - 32px));background:#1c1a18;color:#f3efe7;padding:18px 20px;border-radius:10px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);transition:opacity .35s,transform .35s;font-size:15px;line-height:1.5}
.toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast a{color:#fff;font-weight:600}

/* ---- interactive piece 4 · catalogues: a catalogue you can leaf through ---- */
.book-box{display:grid;justify-items:center;margin-top:40px}
.book{position:relative;width:min(100%,1000px);aspect-ratio:1.414;perspective:2600px;transition:transform .9s cubic-bezier(.45,.05,.2,1)}
.book.closed{transform:translateX(-25%)} .book.end{transform:translateX(25%)}
.leaf{position:absolute;left:50%;top:0;width:50%;height:100%;transform-origin:0 50%;transform-style:preserve-3d;transition:transform 1.05s cubic-bezier(.45,.05,.2,1);cursor:pointer}
.leaf.turned{transform:rotateY(-180deg)}
.leaf > div{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#f2eee7 center/cover no-repeat;box-shadow:0 30px 60px -30px rgba(0,0,0,.55)}
.leaf > .bk{transform:rotateY(180deg)}
.leaf > .fr::after,.leaf > .bk::after{content:"";position:absolute;inset:0;pointer-events:none}
.leaf > .fr::after{background:linear-gradient(90deg,rgba(0,0,0,.16),rgba(0,0,0,0) 7%)}
.leaf > .bk::after{background:linear-gradient(270deg,rgba(0,0,0,.16),rgba(0,0,0,0) 7%)}
.book-ui{display:flex;align-items:center;gap:14px;margin-top:26px}
.book-ui button{width:50px;height:50px;border-radius:50%;border:1px solid #cfc7bb;background:#fff;color:var(--ink);font:400 22px/1 "Instrument Sans";cursor:pointer;transition:background .2s,color .2s}
.book-ui button:hover:not([disabled]){background:var(--ink);color:#fff} .book-ui button[disabled]{opacity:.35;cursor:default}
.book-ui span{font:500 12px "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--line2);min-width:120px;text-align:center}

/* ---- interactive piece 5 · corporate identity: our own brand as the example ---- */
.bk-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:center}
.card3d{perspective:1400px;width:min(100%,540px);aspect-ratio:85/55;margin:0 auto;cursor:pointer;background:none;border:0;padding:0;display:block}
.card3d .in{display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.45,.05,.2,1);transform:rotate(-3deg)}
.card3d.flip .in{transform:rotate(-3deg) rotateY(180deg)}
.card3d .fr,.card3d .bk{position:absolute;inset:0;border-radius:10px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 40px 70px -34px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.05)}
.card3d .fr{background:#f7f4ef;display:grid;place-items:center}
.card3d .fr img{width:58%;height:auto}
.card3d .bk{background:#1c1a18;color:#f3efe7;transform:rotateY(180deg);padding:8% 8% 0;display:flex;flex-direction:column;text-align:left;container-type:inline-size}
.card3d .bk b{font:700 6cqw/1.1 Archivo,sans-serif;font-variation-settings:"wdth" 108}
.card3d .bk span{display:block;font:500 3.2cqw/1.7 "JetBrains Mono",monospace;color:#b9b5ad;letter-spacing:.04em}
.card3d .bk em{display:block;margin-top:auto;height:8%;margin-left:-8.7%;margin-right:-8.7%;background:linear-gradient(90deg,#e74a4f 0 25%,#e5a227 25% 50%,#00699d 50% 75%,#049c90 75%);border-radius:0 0 10px 10px}
.card-hint{margin-top:18px;text-align:center;font:500 11.5px "JetBrains Mono",monospace;letter-spacing:.08em;color:var(--line2)}
.palette{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:26px}
.swc{position:relative;border:0;border-radius:8px;aspect-ratio:1/1.25;background:var(--m);color:#fff;font:600 11px/1.3 "JetBrains Mono",monospace;letter-spacing:.04em;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:10px;cursor:pointer;text-align:left;transition:transform .25s,box-shadow .25s}
.swc:hover{transform:translateY(-5px);box-shadow:0 16px 30px -18px rgba(0,0,0,.6)}
.swc small{font-size:9.5px;opacity:.85;letter-spacing:.1em;text-transform:uppercase}
.swc.ok::after{content:"Copiato";position:absolute;left:8px;top:8px;font-size:10px;background:#fff;color:#1c1a18;padding:4px 6px;border-radius:3px}
.logo-vars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.logo-vars div{aspect-ratio:1.5;border-radius:8px;display:grid;place-items:center;border:1px solid var(--rule)}
.logo-vars img{width:70%;height:auto}
.logo-vars .lv1{background:#fff} .logo-vars .lv2{background:#1c1a18;border-color:#1c1a18} .logo-vars .lv3{background:#e5a227;border-color:#e5a227}
.logo-vars .lv3 img{filter:brightness(0) invert(1)}

/* 404 */
.nf{min-height:72vh;display:grid;place-items:center;text-align:center;padding:160px 0 80px}
.nf .big{font:800 clamp(110px,18vw,240px)/.8 Archivo,sans-serif;font-variation-settings:"wdth" 125;background:linear-gradient(90deg,#e74a4f,#e5a227,#00699d,#049c90);-webkit-background-clip:text;background-clip:text;color:transparent}
.nf h1{font:700 clamp(28px,3vw,44px)/1.1 Archivo,sans-serif;color:var(--ink);margin-top:20px}
.nf p{margin:14px auto 0;color:var(--text);max-width:46ch;font-size:17px;line-height:1.6}
.nf .cta-row{justify-content:center}

/* ---- responsive ---- */
@media (max-width:1020px){
  :root{--barh:80px}
  .bar{padding:0 18px} .brand{height:52px} .filmprog{left:18px;right:18px;height:5px;gap:5px}
  .menu{display:none} .menu-btn{display:flex}
}
@media (max-width:1100px){
  .two,.phero-grid,.how{grid-template-columns:1fr}
  .flow,.benefits,.inputs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .works,.works.three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .svc,.svc.wide{grid-column:span 1} .svc.wide:first-child{grid-column:span 2} .svc.tall .svc-img{flex:none;aspect-ratio:16/9;min-height:0}
  .foot-grid{grid-template-columns:1fr 1fr} .foot-grid > div:first-child{grid-column:span 2}
  .phero{padding-top:124px}
  .srow{grid-template-columns:1fr} .srow:nth-child(even) .srow-img{order:0}
  .msv{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact-grid,.demo,.bk-grid{grid-template-columns:1fr}
  .xpl{grid-template-columns:1fr} .xpl-bom{height:auto;min-height:0;border-left:0;border-top:1px solid var(--rule)} .xpl-list{max-height:400px}
  .facts{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr} .foot-grid > div:first-child{grid-column:span 2}
}
@media (max-width:640px){
  .wrap{width:calc(100% - 40px)}
  .svc-grid{grid-template-columns:1fr} .svc.wide:first-child{grid-column:span 1} .svc.wide .svc-img{aspect-ratio:16/10}
  .flow,.benefits,.inputs,.sect,.grid2{grid-template-columns:1fr}
  .works,.works.three{gap:12px} .works figcaption{padding:10px 12px 12px} .works figcaption span{font-size:13px}
  .foot-grid{grid-template-columns:1fr} .foot-grid > div:first-child{grid-column:span 1}
  .qf-nav [data-next],.qf-nav [data-send="mail"]{margin-left:0}
  .qf-nav .btn,.qf-nav .btn-wa,.qf-nav .btn-ghost{flex:1 1 100%;justify-content:center}
  .wa-float{right:14px;bottom:14px;padding:13px} .wa-float span{display:none}
  :root{--barh:72px} .brand{height:47px} .menu-btn{padding:10px 13px}
  .msv,.facts{grid-template-columns:1fr}
  .pf-grid{gap:12px} .pf-txt{padding:12px 12px 14px} .pf-txt h3{font-size:16px} .pf-txt p{display:none}
  .palette{gap:6px} .swc{padding:7px;font-size:9px} .swc small{font-size:8px}
  .journey{padding-left:50px} .jline{left:12px} .jstep::before{left:-46px;width:20px;height:20px}
  .lb{padding:8px 8px 14px} .lb-b{width:44px;height:44px;margin-top:-22px;font-size:20px}
  .xpl-tools span{display:none}
  .seg button,.cmp-tabs button{padding:11px 13px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){ .svc,.svc-img img,.wa-float,.leaf,.book,.card3d .in,.adv .e,.srow-img img,.pf-card{transition:none} body.page{scroll-behavior:auto} html.js .rv{opacity:1;transform:none;transition:none} .pf-card.pop{animation:none} }

/* ---- 2026-11-12: videos in the portfolio, client logos, studio photos and tools, social links ---- */
.pf-img .vid{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:8px;font:600 11px/1 "JetBrains Mono",monospace;letter-spacing:.04em;background:rgba(17,18,20,.8);color:#fff;padding:7px 9px 7px 8px;border-radius:4px}
.pf-img .vid::before{content:"";border-left:8px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent}
.lb-thumbs button{position:relative}
.lb-thumbs .v span{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:13px;background:rgba(0,0,0,.38)}

/* client logos: one ink colour, calm until hovered */
.logos{--n:7;--gx:clamp(20px,2.6vw,40px);list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:30px var(--gx);margin-top:48px}
.logos li{flex:0 0 calc((100% - (var(--n) - 1) * var(--gx)) / var(--n));display:flex;align-items:center;justify-content:center;min-height:72px}
.logos img{display:block;max-width:100%;height:auto;opacity:.58;transition:opacity .35s,transform .35s}
.logos li:hover img{opacity:1;transform:scale(1.04)}
.clients-home{margin-top:clamp(64px,8vw,104px);padding-top:clamp(40px,5vw,56px);border-top:1px solid var(--rule);text-align:center}
.clients-home .kick{justify-content:center;margin-bottom:0}
.clients-home .logos{margin-top:30px}

/* studio page: the work in four photos */
.atwork{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);margin-top:48px}
.atwork figure{margin:0}
.atwork img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:6px;border:1px solid var(--rule);box-shadow:0 26px 50px -36px rgba(0,0,0,.5)}
.atwork figcaption{margin-top:16px;padding-top:12px;border-top:3px solid var(--m)}
.atwork b{display:block;font:700 18px/1.2 Archivo,sans-serif;font-variation-settings:"wdth" 106;color:var(--ink)}
.atwork span{display:block;margin-top:6px;color:var(--text);font-size:15px;line-height:1.5}

/* studio page: programs */
.tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.tool{background:#fff;border:1px solid var(--rule);border-top:4px solid var(--m);border-radius:6px;padding:22px 22px 24px}
.tool h3{font:700 20px/1.2 Archivo,sans-serif;font-variation-settings:"wdth" 108;color:var(--ink)}
.tool ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tool li{font:500 12.5px/1 "JetBrains Mono",monospace;letter-spacing:.02em;padding:9px 11px;border:1px solid var(--rule);border-radius:99px;background:var(--bg);color:var(--ink)}
.notes{list-style:none;margin-top:26px;display:grid;gap:10px}
.notes li{display:flex;gap:12px;align-items:baseline;color:var(--text);font-size:16px;line-height:1.5}
.notes li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c-tea);flex:none;transform:translateY(-1px)}
.notes li:nth-child(2)::before{background:var(--c-yel)}

/* social links (footer on dark, contacts page on paper) */
.social{list-style:none;display:flex;gap:10px;margin-top:20px}
.social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--rule);color:var(--ink);transition:background .25s,color .25s,border-color .25s}
.social a:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.social svg{width:17px;height:17px}
.foot ul.social{display:flex;gap:10px;margin-top:20px}
.foot .social li{margin:0}
.foot .social a{border-color:#34363c;color:#d9d4cb;text-decoration:none}
.foot .social a:hover{background:#f3efe7;color:#111214;border-color:#f3efe7}
.c-social{display:flex;align-items:center;gap:16px;margin-top:22px}
.c-social span{font:500 11px "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--line2)}
.c-social .social{margin-top:0}

/* a work's own page: gallery */
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start}
.gallery figure.wide{grid-column:1 / -1}
.gallery figure.solo{grid-column:1 / -1;justify-self:center;width:min(100%,640px)}
.gallery figure{margin:0;border-radius:6px;overflow:hidden;border:1px solid var(--rule);background:#0d0e10}
.gallery figure.fit{background:#fff}
.gallery img,.gallery video{display:block;width:100%;height:auto}

@media (max-width:1020px){
  .atwork{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tools{grid-template-columns:1fr}
  .logos{--n:4}
}
@media (max-width:640px){
  .logos{--n:3;--gx:18px;row-gap:22px}
  .gallery{grid-template-columns:1fr} .gallery figure,.gallery figure.solo{grid-column:auto;width:auto}
  .atwork{gap:12px}
  .atwork b{font-size:16px} .atwork span{font-size:14px}
}
@media (prefers-reduced-motion:reduce){ .logos img{transition:none} }
/* lightbox: a flex stage gives the image a definite height, so wide pictures never cover the caption */
.lb-stage{display:flex;align-items:center;justify-content:center;overflow:hidden}

/* ---- top bar, right side: WhatsApp + quote request (client, 2026-11-12) ---- */
.bar-end{grid-column:3;justify-self:end;display:flex;align-items:center;gap:10px}
.bar-end .menu-btn{grid-column:auto}
.bar-wa,.bar-q{display:inline-flex;align-items:center;gap:9px;height:44px;border-radius:99px;text-decoration:none;white-space:nowrap;
     font:600 14px/1 "Instrument Sans",sans-serif;transition:background .25s,border-color .25s,filter .2s}
.bar-wa{padding:0 17px 0 14px;border:1.5px solid rgba(243,239,231,.3);color:inherit}
.bar-wa svg{width:19px;height:19px;flex:none;color:var(--c-tea)}
.bar-wa:hover{border-color:var(--c-tea);background:rgba(4,156,144,.14)}
.bar-q{padding:0 20px;background:var(--orange);color:#111214}
.bar-q:hover{filter:brightness(1.08)}
.bar-q .s{display:none}
body.onpaper .bar-wa,body.past .bar-wa{border-color:rgba(28,26,24,.22)}
@media (min-width:1021px){ .wa-float{display:none} }
@media (max-width:1279px){
  .bar-wa{width:44px;padding:0;justify-content:center} .bar-wa span{display:none}
  .bar-q .l{display:none} .bar-q .s{display:inline}
}
@media (max-width:1020px){ .bar-wa{display:none} .bar-q{height:40px;padding:0 15px;font-size:13.5px} }
@media (max-width:380px){ .bar-end{gap:6px} .bar-q{padding:0 12px} }
.logos a{display:block}
.logos a:focus-visible img{opacity:1}