/* KINT / grafica tradizionale svizzera.
   A common 12-column measure and an 8px spacing unit; the Mac UI is excluded. */
:root{--sw-page-width:100vw;--sw-margin:clamp(24px,calc(var(--sw-page-width)*.04),80px);--sw-gap:clamp(12px,calc(var(--sw-page-width)*.016),24px);--sw-column:calc((var(--sw-page-width) - 2*var(--sw-margin) - 11*var(--sw-gap))/12);--sw-step:calc(var(--sw-column) + var(--sw-gap));--sw-body:16px;--sw-leading:24px;--sw-label:10px;--sw-title:clamp(48px,7.2vw,128px);--sw-row-title:clamp(32px,4.5vw,72px);--sw-section-space:clamp(64px,7vw,112px)}
#studio,#servizi,#contatto{padding-left:var(--sw-margin);padding-right:var(--sw-margin)}
#studio>.section-meta,#servizi>.section-meta,#contatto>.section-meta,#metodo .section-meta{font:400 var(--sw-label)/16px 'Geist Mono',monospace;letter-spacing:.04em;padding-bottom:32px}
.header:not(.is-desktop){padding-left:var(--sw-margin);padding-right:var(--sw-margin)}
#hero .eyebrow{left:var(--sw-margin);font-size:var(--sw-label);line-height:16px}
#hero .hero-copy{right:var(--sw-margin);bottom:112px;width:calc(4*var(--sw-column) + 3*var(--sw-gap));text-align:left}
#hero .hero-copy h1{font:600 clamp(34px,3vw,52px)/1.02 'Geist',Arial,sans-serif;letter-spacing:-.035em;margin:0 0 24px}
#hero .hero-copy p{font:400 14px/24px 'Geist',Arial,sans-serif;max-width:32ch;margin:0;text-align:left}
#hero .bottom-caption{left:var(--sw-margin);right:var(--sw-margin);bottom:24px;font-size:var(--sw-label);line-height:16px}
#hero .center-mark{right:auto}
#studio .manifesto-grid{padding-top:24px;padding-bottom:64px;gap:24px}
#studio .manifesto-title,.scroll-active #studio .manifesto-title{width:100%;max-width:calc(10*var(--sw-column) + 9*var(--sw-gap));font-size:clamp(56px,min(10vw,15svh),164px);line-height:.96;letter-spacing:-.045em;text-wrap:balance}
#studio .studio-copy,.scroll-active #studio .studio-copy{max-width:min(60ch,calc(6*var(--sw-column) + 5*var(--sw-gap)));margin:40px auto 0;text-align:center}
#studio .studio-copy p:first-child{font-size:var(--sw-body);line-height:var(--sw-leading);margin:0}
#studio .studio-bottom{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--sw-gap);align-items:start;padding:32px 0 0}
#studio .studio-bottom>.kappa-type{grid-column:1/3;font-size:80px;line-height:.9}
#studio .studio-bottom>div{grid-column:3/10;max-width:60ch}
#studio .studio-bottom h3{font-size:24px;line-height:32px;letter-spacing:-.025em;margin:0 0 16px}
#studio .studio-bottom p{font-size:var(--sw-body);line-height:var(--sw-leading);max-width:60ch;text-align:left}
#studio .studio-bottom>.text-link{grid-column:10/13;justify-self:end;align-self:start;font-size:12px;line-height:24px;padding:0 0 8px;gap:16px}
#servizi{padding-top:40px;padding-bottom:var(--sw-section-space)}
#servizi .section-heading{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--sw-gap);align-items:end;margin:32px 0 64px}
#servizi .section-heading>.display{grid-column:1/9;font-size:var(--sw-title);line-height:.96;letter-spacing:-.04em;text-align:left}
#servizi .section-heading>p{grid-column:9/13;font-size:var(--sw-body);line-height:var(--sw-leading);padding:0;max-width:40ch}
#servizi .services-intro{font-size:var(--sw-body);line-height:var(--sw-leading);max-width:60ch;margin:0 0 40px}
#servizi .service summary{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--sw-gap);padding:32px 0;align-items:baseline}
#servizi .service-index{grid-column:1/2;font-size:11px;line-height:16px;font-variant-numeric:tabular-nums}
#servizi .service summary h3{grid-column:2/12;font-size:var(--sw-row-title);line-height:1.08;letter-spacing:-.035em;text-align:left}
#servizi .service-toggle{grid-column:12/13;font-size:40px;line-height:1;justify-self:end}
#servizi .service-content{margin-left:var(--sw-step);grid-template-columns:repeat(11,minmax(0,1fr));gap:24px var(--sw-gap);padding:0 0 40px}
#servizi .service-content>p{grid-column:1/7;font-size:var(--sw-body);line-height:var(--sw-leading);max-width:58ch;text-align:left}
#servizi .service-tags{grid-column:8/12;font-size:12px;line-height:20px;gap:16px var(--sw-gap)}
#servizi .service-content>.service-result{grid-column:1/-1;padding-top:24px;max-width:none}
#servizi .service-result>span{font-size:var(--sw-label);line-height:16px;margin-bottom:8px;letter-spacing:.04em}
#servizi .services-foot{margin-top:32px;gap:24px}
#servizi .services-foot .text-link{font-size:12px;line-height:24px}
#metodo .section-meta{left:var(--sw-margin);right:var(--sw-margin)}
#metodo .method-grid{left:var(--sw-margin);right:var(--sw-margin);grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--sw-gap)}
#metodo .method-title{grid-column:1/6}
#metodo .method-grid>div:last-child{grid-column:7/13}
#metodo .method-title .display{font-size:clamp(44px,5.4vw,82px);line-height:.98;letter-spacing:-.04em}
#metodo .method-title>p{font-size:14px;line-height:24px;margin-top:24px;max-width:40ch}
#metodo .method-steps>li{padding:8px 0 16px}
#metodo .method-steps>li>span{font-size:var(--sw-label);line-height:16px;letter-spacing:.025em}
#metodo .method-steps h3{font-size:clamp(24px,2.4vw,32px);line-height:1.08;letter-spacing:-.025em;margin:8px 0}
#metodo .method-steps p{font-size:14px;line-height:22px;max-width:54ch}
#metodo .sectors{left:var(--sw-margin);right:var(--sw-margin)}
#metodo .sectors>h3{font-size:clamp(32px,4.3vw,64px);line-height:1.04;letter-spacing:-.03em}
#metodo .sectors>p{font-size:14px;line-height:24px;margin-top:24px;max-width:60ch}
#metodo .sector-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(2*var(--sw-gap));margin-top:40px}
#metodo .sector-list h4{font-size:24px;line-height:28px;letter-spacing:-.025em;margin-bottom:16px}
#metodo .sector-list p{font-size:14px;line-height:24px;max-width:42ch}
#contatto{padding-top:40px;padding-bottom:32px}
#contatto .coffee-heading{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--sw-gap);align-items:end;margin:40px 0 64px}
#contatto .coffee-heading .display{grid-column:1/12;font-size:clamp(56px,11vw,176px);line-height:.96;letter-spacing:-.04em}
#contatto .coffee-mark{grid-column:12/13;justify-self:end;font-size:clamp(48px,7vw,112px)}
#contatto .contact-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--sw-gap);padding:0 0 var(--sw-section-space)}
#contatto .contact-grid>div:first-child{grid-column:1/7}
#contatto .contact-actions{grid-column:9/13;gap:24px;align-items:flex-start}
#contatto .contact-intro{font-size:24px;line-height:32px;letter-spacing:-.025em}
#contatto .contact-note{font-size:var(--sw-body);line-height:var(--sw-leading);max-width:56ch;margin-top:24px;text-align:left}
#contatto .tiny-binary{margin-top:32px;font-size:var(--sw-label);line-height:16px}
#contatto .email-link{font-size:20px;line-height:24px}
#contatto .footer{padding-top:32px}
#contatto .footer-wordmark{font-size:calc((var(--sw-page-width) - 2*var(--sw-margin))/2);line-height:.9;letter-spacing:-.045em}
#contatto .footer-bottom{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--sw-gap);align-items:start;margin-top:32px;padding-top:24px;font-size:var(--sw-label);line-height:16px}
#contatto .footer-bottom>span:first-child{grid-column:1/5}
#contatto .footer-bottom>a:nth-child(2){grid-column:5/7}
#contatto .footer-bottom>a:nth-child(3){grid-column:7/8}
#contatto .footer-bottom>a:nth-child(4){grid-column:8/9}
#contatto .footer-bottom>a:nth-child(5){grid-column:9/11}
#contatto .footer-bottom>span:last-child{grid-column:11/13;text-align:right;margin:0}
@media(min-width:1280px){#hero .hero-copy{width:calc(3*var(--sw-column) + 2*var(--sw-gap))}}
@media(max-width:1023px){#studio .studio-bottom>div{grid-column:3/11}#studio .studio-bottom>.text-link{grid-column:3/11;justify-self:start}#contatto .contact-actions{grid-column:8/13}#servizi .section-heading>.display{grid-column:1/8}#servizi .section-heading>p{grid-column:8/13}}
@media(max-width:759px){
:root{--sw-margin:24px;--sw-gap:16px;--sw-body:15px;--sw-title:clamp(42px,10vw,68px);--sw-row-title:clamp(27px,6.5vw,42px);--sw-column:calc((var(--sw-page-width) - 2*var(--sw-margin) - 3*var(--sw-gap))/4)}
#hero .hero-copy{left:var(--sw-margin);right:var(--sw-margin);bottom:80px;width:auto;display:block}
#hero .hero-copy h1{font-size:clamp(27px,6.6vw,40px);line-height:1.06;max-width:24ch;margin-bottom:16px}
#hero .hero-copy p{font-size:13px;line-height:20px}
#hero .center-mark{right:var(--sw-margin);left:auto;transform:none}
#hero .eyebrow{font-size:9px}
#hero .bottom-caption{font-size:9px}
#studio .manifesto-title,.scroll-active #studio .manifesto-title{max-width:100%;font-size:clamp(40px,10.8vw,78px);line-height:1.02;letter-spacing:-.04em}
#studio .studio-copy,.scroll-active #studio .studio-copy{max-width:100%;margin-top:32px}
#studio .manifesto-grid{padding-bottom:48px}
#studio .studio-bottom{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 16px}
#studio .studio-bottom>.kappa-type{grid-column:1/2;font-size:48px}
#studio .studio-bottom>div,#studio .studio-bottom>.text-link{grid-column:2/5}
#studio .studio-bottom h3{font-size:22px;line-height:28px}
#studio .studio-bottom p{font-size:14px;line-height:24px}
#servizi .section-heading{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 16px;margin:24px 0 48px}
#servizi .section-heading>.display,#servizi .section-heading>p{grid-column:1/-1}
#servizi .section-heading>p{max-width:44ch}
#servizi .service summary{grid-template-columns:24px minmax(0,1fr) 24px;gap:16px;padding:24px 0}
#servizi .service-index{grid-column:1}#servizi .service summary h3{grid-column:2}#servizi .service-toggle{grid-column:3;font-size:30px}
#servizi .service-content{margin-left:40px;grid-template-columns:minmax(0,1fr);gap:24px}
#servizi .service-content>p,#servizi .service-tags,#servizi .service-content>.service-result{grid-column:1/-1}
#servizi .service-tags{grid-template-columns:1fr 1fr}
#servizi .services-foot{align-items:start;flex-direction:column}
#metodo .method-grid{display:block;left:var(--sw-margin);right:var(--sw-margin)}
#metodo .method-title .display{font-size:clamp(44px,11.8vw,68px)}
#metodo .method-title>p{font-size:14px;line-height:24px}
#metodo .method-steps>li{border:0;padding:8px 0}
#metodo .method-steps h3{font-size:32px;line-height:1.08;margin:24px 0}
#metodo .method-steps p{font-size:16px;line-height:24px}
#metodo .sectors>h3{font-size:30px}
#metodo .sector-list{display:block;margin-top:0}
#metodo .sector-list h4{font-size:26px;line-height:28px}
#metodo .sector-list p{font-size:15px;line-height:24px}
#contatto .coffee-heading,#contatto .contact-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 16px}
#contatto .coffee-heading{margin:32px 0 48px}
#contatto .coffee-heading .display{grid-column:1/4;font-size:clamp(40px,9.5vw,68px)}
#contatto .coffee-mark{grid-column:4;font-size:38px}
#contatto .contact-grid>div:first-child,#contatto .contact-actions{grid-column:1/-1}
#contatto .contact-intro{font-size:22px;line-height:28px}
#contatto .footer-bottom{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;font-size:9px}
#contatto .footer-bottom>span:first-child,#contatto .footer-bottom>span:last-child{grid-column:1/-1;text-align:left}
#contatto .footer-bottom>a:nth-child(n){grid-column:span 2}
}
@media(min-width:760px) and (max-height:699px){#metodo .method-grid{display:block}#metodo .method-title .display{font-size:clamp(44px,5.4vw,68px)}#metodo .method-steps h3{font-size:32px;margin:16px 0}#metodo .method-steps p{font-size:15px;line-height:24px}#metodo .sector-list{display:block;margin-top:0}#metodo .sector-list p{font-size:15px;line-height:24px}}
@media(max-width:400px){.header:not(.is-desktop) .contact{font-size:14px;padding:12px;gap:10px}.header:not(.is-desktop) .contact>span{font-size:17px}.header:not(.is-desktop) .menu-toggle{width:42px;height:42px}.header:not(.is-desktop) .brand>span{font-size:34px}}
@media(min-width:760px) and (max-width:900px){#hero .hero-copy h1{font-size:32px}}
@media(min-width:760px) and (min-height:700px) and (max-height:780px){#metodo .method-steps>li{padding:8px 0}#metodo .method-steps h3{font-size:22px;line-height:24px}#metodo .method-steps p{font-size:13px;line-height:20px}#metodo .sector-list{margin-top:24px}#metodo .sector-list h4{font-size:22px;line-height:24px}#metodo .sector-list p{font-size:13px;line-height:20px}}

/* Audit corrections: classic scrollbars, legacy mobile captions, short viewports. */
@media(max-width:759px){
#hero .bottom-caption{bottom:64px;gap:16px;align-items:end}
#hero .bottom-caption>a{font-size:9px;line-height:16px;max-width:52%;gap:8px}
#hero .bottom-caption button{font-size:9px;line-height:16px;max-width:44%;padding:0}
#hero .bottom-caption a>span{font-size:12px}
#hero .hero-copy{bottom:112px}
#hero .desktop-break{display:none}
#hero .mobile-break{display:block}
#metodo .sector-list{position:relative;top:auto;left:auto;right:auto;min-height:240px;margin-top:32px}
}
@media(max-height:699px){
#metodo .section-meta{top:64px}
#metodo .method-grid,#metodo .sectors{top:104px}
#metodo .sector-list{position:absolute;top:0;left:0;right:0;margin-top:0}
#metodo .sectors>h3{font-size:28px;line-height:32px}
#metodo .sectors>p{font-size:14px;line-height:24px;margin-top:16px}
#metodo .sector-list h4{font-size:24px;line-height:28px}
#metodo .sector-list p{font-size:14px;line-height:22px}
#metodo .method-steps h3{font-size:28px;line-height:32px;margin:16px 0}
#metodo .method-steps p{font-size:14px;line-height:22px}
}
@media(max-height:480px){
#metodo .section-meta{top:48px}
#metodo .method-grid,#metodo .sectors{top:80px}
#metodo .method-title .display{font-size:clamp(32px,5vw,42px);line-height:1.04}
#metodo .method-title .display br{display:none}
#metodo .method-title .display>.gold-text{display:block}
#metodo .method-title>p{font-size:13px;line-height:20px;margin-top:16px;max-width:54ch}
#metodo .method-steps h3{font-size:24px;line-height:28px;margin:12px 0}
#metodo .method-steps p{font-size:13px;line-height:20px}
#metodo .sectors>h3{font-size:24px;line-height:28px}
#metodo .sectors>p{font-size:13px;line-height:20px}
#metodo .sector-list h4{font-size:22px;line-height:24px}
#metodo .sector-list p{font-size:13px;line-height:20px}
}
/* Small informational copy needs stronger ink than the large muted headlines. */
#hero .hero-copy p,#hero .eyebrow,#hero .bottom-caption,#studio .studio-copy p:first-child,#studio .studio-aside>.micro{color:#626b5b}
#studio>.section-meta,#metodo .section-meta{color:#656d5d}

/* Fit visible glyph ink after fonts load; CSS remains a safe fallback. */
#contatto .footer-wordmark{width:100%;max-width:100%}
#contatto .footer-wordmark>.footer-wordmark-type{display:inline-block;white-space:nowrap;color:var(--paper);transform-origin:left center}
#contatto .footer-wordmark .footer-wordmark-dot{color:var(--gold)}
@media(max-width:360px){#servizi .service summary h3{font-size:24px}}