/* Geometra — «tavola tecnica» (03/10/2026). Solo questa pagina, dopo style.css.
   Stessi testi, immagini e classi della home: la forma cambia con <main data-layout="tavola"> e gli id
   delle sezioni. Token, Lato, grana, trama, archi, piastrelle e segni sono quelli di style.css.
   Carta tecnica: quadretti di 12 px e maglia di 60 px in notte (#292F34) trasparente, crocini agli angoli.
   Nessuno stato nascosto qui: le entrate restano quelle di motion.js (.reveal / data-reveal). */

#contenuto[data-layout=tavola]{
  --carta:linear-gradient(rgba(41,47,52,.075) 1px,transparent 1px) -1px -1px/60px 60px,
    linear-gradient(90deg,rgba(41,47,52,.075) 1px,transparent 1px) -1px -1px/60px 60px,
    linear-gradient(rgba(41,47,52,.035) 1px,transparent 1px) -1px -1px/12px 12px,
    linear-gradient(90deg,rgba(41,47,52,.035) 1px,transparent 1px) -1px -1px/12px 12px;
  --crocino:var(--linea-scura);
  --crocini:linear-gradient(var(--crocino),var(--crocino)) 0 0/16px 1px no-repeat,linear-gradient(var(--crocino),var(--crocino)) 0 0/1px 16px no-repeat,
    linear-gradient(var(--crocino),var(--crocino)) 100% 0/16px 1px no-repeat,linear-gradient(var(--crocino),var(--crocino)) 100% 0/1px 16px no-repeat,
    linear-gradient(var(--crocino),var(--crocino)) 0 100%/16px 1px no-repeat,linear-gradient(var(--crocino),var(--crocino)) 0 100%/1px 16px no-repeat,
    linear-gradient(var(--crocino),var(--crocino)) 100% 100%/16px 1px no-repeat,linear-gradient(var(--crocino),var(--crocino)) 100% 100%/1px 16px no-repeat;
}

/* ═══ HERO: la foto a tutta larghezza, sotto la lastra chiara a cavallo, su carta tecnica ═══ */
#contenuto[data-layout=tavola]>.hero{max-width:none;margin:0;padding:0}
#contenuto[data-layout=tavola] .hero__scheda{display:block;min-height:0;overflow:visible;border-radius:0;background:none;color:var(--inchiostro)}
#contenuto[data-layout=tavola] .hero__scheda::before,#contenuto[data-layout=tavola] .hero__scheda::after,
#contenuto[data-layout=tavola] .hero__testo::after{content:none}
#contenuto[data-layout=tavola] .hero__foto{display:block;position:relative;overflow:hidden;overflow:clip}
#contenuto[data-layout=tavola] .hero__foto img{position:static;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
#contenuto[data-layout=tavola] .hero__testo{position:relative;z-index:2;margin:-56px 12px 0;padding:30px 20px 26px;background:var(--carta),var(--tela);border-radius:14px;box-shadow:var(--ombra-su),inset 0 0 0 1px rgba(41,47,52,.06)}
#contenuto[data-layout=tavola] .hero__testo::before{content:"";position:absolute;inset:10px;z-index:-1;pointer-events:none;background:var(--crocini);translate:none;animation:none}
#contenuto[data-layout=tavola] .hero .occhiello{color:#686D73}
#contenuto[data-layout=tavola] .hero .occhiello__linea{background:var(--grafite-medio)}
#contenuto[data-layout=tavola] .hero__titolo{margin-top:14px;color:var(--inchiostro)}
#contenuto[data-layout=tavola] .hero__sotto{color:var(--testo)}
#contenuto[data-layout=tavola] .hero__azioni .bottone--pietra{background:var(--grafite-medio);color:var(--bianco)}
#contenuto[data-layout=tavola] .hero__azioni .bottone--pietra:hover{background:var(--notte)}
#contenuto[data-layout=tavola] .hero__azioni .bottone--bordo{border-color:var(--grafite-medio);color:var(--grafite);background:var(--bianco)}
#contenuto[data-layout=tavola] .hero__azioni .bottone--bordo::before{background:rgba(41,47,52,.07)}
#contenuto[data-layout=tavola] .hero__scheda :focus-visible{outline-color:var(--grafite);box-shadow:0 0 0 5px rgba(220,215,207,.6)}
/* il compasso: da telefono non c'è un angolo libero dal testo */
#contenuto[data-layout=tavola] .hero__scheda>svg[data-segno]{display:none}

/* ═══ #ape: la foto ad arco tondo, grande, a sinistra; il testo a destra; sotto, la scala grafica ═══ */
#contenuto[data-layout=tavola] #ape .studio__foto{order:-1;border-radius:50% 50% 14px 14px/42% 42% 14px 14px}
#contenuto[data-layout=tavola] #ape .studio__foto img{aspect-ratio:1/1}
/* scala grafica delle tavole: dieci tratti alterni, come le dieci classi */
#contenuto[data-layout=tavola] #ape .studio__testo::after{content:"";display:block;width:min(100%,300px);height:9px;margin-top:24px;border:1px solid var(--notte);background:repeating-linear-gradient(90deg,var(--notte) 0 10%,var(--bianco) 10% 20%)}

/* ═══ #obbligo: quattro tessere, l'icona grande sulla piastrella ═══ */
#contenuto[data-layout=tavola] #obbligo .ambiti{display:grid;gap:10px;margin:22px 0 0;padding:0;background:none;box-shadow:none;border-radius:0}
#contenuto[data-layout=tavola] #obbligo .ambiti li{background:var(--superficie);border-radius:14px;box-shadow:var(--ombra-scheda),inset 0 0 0 1px rgba(41,47,52,.05)}
#contenuto[data-layout=tavola] #obbligo .ambiti li+li{border-top:0}
#contenuto[data-layout=tavola] #obbligo .ambiti li::before{content:none}
#contenuto[data-layout=tavola] #obbligo .ambiti__voce{padding:14px 16px}
#contenuto[data-layout=tavola] #obbligo .ambiti__voce svg{width:52px;height:52px;padding:11px}
#contenuto[data-layout=tavola] #obbligo>.servizi__intro{margin-top:16px;padding:2px 0 2px 16px;border-left:2px solid var(--pietra-linea);font-size:15.5px}

/* ═══ #durata: il callout dei «10 anni» su carta tecnica, accanto il resto ═══ */
#contenuto[data-layout=tavola] #durata{background:none;padding:0 4px;gap:18px}
#contenuto[data-layout=tavola] #durata .domande__lista{gap:12px}
#contenuto[data-layout=tavola] #durata .domande__lista>p:first-child{position:relative;padding:22px 22px 24px;background:var(--carta),var(--pietra-chiara);border-radius:14px;box-shadow:inset 0 0 0 1px rgba(41,47,52,.08);color:var(--testo)}
#contenuto[data-layout=tavola] #durata .domande__lista>p:first-child strong{display:inline-block;margin-top:4px;font-size:84px;line-height:.95;font-weight:300;letter-spacing:-.03em;color:var(--inchiostro);background:none;font-variant-numeric:lining-nums}
#contenuto[data-layout=tavola] #durata>svg[data-segno]{top:-6px;right:0}

/* ═══ #come-si-fa: stepper verticale, numeri grandi sulla linea ═══ */
#contenuto[data-layout=tavola] #come-si-fa .passi__lista{display:block;margin-top:22px;padding-top:6px;border-top:0}
#contenuto[data-layout=tavola] #come-si-fa .passi__lista::after{content:none}
#contenuto[data-layout=tavola] #come-si-fa .passo{position:relative;padding:0 0 26px 28px}
#contenuto[data-layout=tavola] #come-si-fa .passo:last-child{padding-bottom:0}
#contenuto[data-layout=tavola] #come-si-fa .passo::before{content:"";position:absolute;left:4px;top:22px;bottom:-22px;width:1px;background:var(--linea-scura)}
#contenuto[data-layout=tavola] #come-si-fa .passo:last-child::before{content:none}
#contenuto[data-layout=tavola] #come-si-fa .passo::after{content:"";position:absolute;left:0;top:17px;width:9px;height:9px;border-radius:50%;background:var(--pietra);box-shadow:0 0 0 4px rgba(220,215,207,.14)}
#contenuto[data-layout=tavola] #come-si-fa .passo .numero{font-size:42px}
#contenuto[data-layout=tavola] #come-si-fa .passo .numero__linea{display:none}
#contenuto[data-layout=tavola] #come-si-fa .passo__titolo{margin-top:8px;font-size:17.5px}

/* ═══ #progetti: la planimetria larga, il testo su un pannello sovrapposto ═══ */
#contenuto[data-layout=tavola] #progetti .studio__foto{order:-1;border-radius:50% 50% 14px 14px/16% 16% 14px 14px}
#contenuto[data-layout=tavola] #progetti .studio__foto img{aspect-ratio:16/10}
#contenuto[data-layout=tavola] #progetti .studio__testo{z-index:2;margin:-74px 8px 0;padding:24px 20px 26px;background:var(--carta),var(--tela);border-radius:14px;box-shadow:var(--ombra-su),inset 0 0 0 1px rgba(41,47,52,.06)}
#contenuto[data-layout=tavola] #progetti .studio__testo::before{content:"";position:absolute;inset:10px;z-index:-1;pointer-events:none;background:var(--crocini)}
#contenuto[data-layout=tavola] #progetti .studio__testo>svg[data-segno="planimetria"]{display:none}

/* ═══ #privati-aziende: due colonne, un filetto in mezzo ═══ */
#contenuto[data-layout=tavola] #privati-aziende .servizi__griglia{gap:0;margin-top:20px;border-top:1px solid var(--filetto);border-bottom:1px solid var(--filetto)}
#contenuto[data-layout=tavola] #privati-aziende .scheda{background:none;box-shadow:none;border-radius:0}
#contenuto[data-layout=tavola] #privati-aziende .scheda+.scheda{border-top:1px solid var(--filetto)}
#contenuto[data-layout=tavola] #privati-aziende .scheda__testo{padding:22px 4px}
#contenuto[data-layout=tavola] #privati-aziende .servizi__testa .servizi__intro:empty{display:none}

/* ═══ #chi-firma: il cartiglio della tavola ═══ */
#contenuto[data-layout=tavola] #chi-firma{gap:0;padding:0;background:var(--tela);border:1px solid var(--grafite-medio);border-radius:8px}
#contenuto[data-layout=tavola] #chi-firma .domande__testa{padding:22px 18px 18px;border-bottom:1px solid var(--grafite-medio)}
#contenuto[data-layout=tavola] #chi-firma .domande__lista{gap:0}
#contenuto[data-layout=tavola] #chi-firma .domande__lista>p{padding:14px 18px}
#contenuto[data-layout=tavola] #chi-firma .domande__lista>p+p{border-top:1px solid var(--filetto)}
#contenuto[data-layout=tavola] #chi-firma>svg[data-segno]{top:14px;right:14px;left:auto;bottom:auto;width:44px}

/* ═══ #contatti: la tavola scura, con la cornice interna ═══ */
#contenuto[data-layout=tavola] #contatti{outline:1px solid rgba(255,255,255,.22);outline-offset:-8px}

/* ═════════════════════ DA 768 PX ═════════════════════ */
@media (min-width:768px){
  /* hero */
  #contenuto[data-layout=tavola] .hero__foto img{height:clamp(320px,calc(540 * var(--k)),62vh);aspect-ratio:auto}
  #contenuto[data-layout=tavola] .hero__testo{max-width:calc(752 * var(--c));margin:calc(-170 * var(--k)) auto 0;padding:calc(46 * var(--k)) calc(48 * var(--k)) calc(46 * var(--k));border-radius:calc(16 * var(--k))}
  #contenuto[data-layout=tavola] .hero__testo::before{inset:calc(14 * var(--k))}
  #contenuto[data-layout=tavola] .hero__titolo{margin-top:calc(18 * var(--k));font-size:max(38px,calc(58 * var(--k)))}
  #contenuto[data-layout=tavola] .hero__azioni .bottone--bordo{padding:0 calc(32 * var(--k))}

  /* #ape: arco a sinistra, testo a destra */
  #contenuto[data-layout=tavola] #ape{grid-template-columns:calc(320 * var(--c)) 1fr;gap:calc(64 * var(--k));align-items:center;margin-top:calc(96 * var(--k));padding:0 calc(18 * var(--c))}
  #contenuto[data-layout=tavola] #ape .studio__foto{height:calc(360 * var(--c));border-radius:50% 50% calc(16 * var(--k)) calc(16 * var(--k))/40% 40% calc(16 * var(--k)) calc(16 * var(--k))}
  #contenuto[data-layout=tavola] #ape .studio__testo{padding:0}
  #contenuto[data-layout=tavola] #ape .studio__testo::after{width:calc(360 * var(--k));height:calc(11 * var(--k));margin-top:calc(34 * var(--k))}

  /* #obbligo: titolo a sinistra, tessere 2 × 2 a destra, la nota sotto le tessere */
  #contenuto[data-layout=tavola] #obbligo{display:grid;grid-template-columns:calc(250 * var(--c)) 1fr;column-gap:calc(48 * var(--k));align-items:start;padding-top:calc(110 * var(--k))}
  #contenuto[data-layout=tavola] #obbligo .servizi__testa{grid-column:1;grid-row:1 / span 2;display:block;padding:0 0 0 calc(18 * var(--c))}
  #contenuto[data-layout=tavola] #obbligo .servizi__testa .servizi__intro{width:auto;margin-top:calc(18 * var(--k))}
  #contenuto[data-layout=tavola] #obbligo .ambiti{grid-column:2;grid-template-columns:repeat(2,1fr);gap:calc(18 * var(--k));width:auto;height:auto;margin:0;padding:0}
  #contenuto[data-layout=tavola] #obbligo .ambiti li{border-radius:calc(16 * var(--k))}
  #contenuto[data-layout=tavola] #obbligo .ambiti__voce{flex-direction:column;align-items:flex-start;justify-content:space-between;gap:calc(30 * var(--k));min-height:calc(230 * var(--k));padding:calc(30 * var(--k)) calc(32 * var(--k)) calc(32 * var(--k))}
  #contenuto[data-layout=tavola] #obbligo .ambiti__voce svg{width:calc(92 * var(--k));height:calc(92 * var(--k));padding:calc(20 * var(--k))}
  #contenuto[data-layout=tavola] #obbligo .ambiti__voce>span{font-size:max(17px,calc(21 * var(--k)));line-height:1.35;max-width:calc(420 * var(--k))}
  #contenuto[data-layout=tavola] #obbligo>.servizi__intro{grid-column:2;margin:calc(22 * var(--k)) 0 0;padding:calc(2 * var(--k)) 0 calc(2 * var(--k)) calc(20 * var(--k));font-size:max(15px,calc(16.5 * var(--k)))}

  /* #durata: titolo sopra; callout a sinistra, il resto a destra */
  #contenuto[data-layout=tavola] #durata{grid-template-columns:1fr;gap:calc(30 * var(--k));margin-top:calc(110 * var(--k));padding:0 calc(19 * var(--c)) 0 calc(18 * var(--c));border-radius:0}
  #contenuto[data-layout=tavola] #durata .domande__testa{padding:0}
  #contenuto[data-layout=tavola] #durata .domande__lista{grid-template-columns:calc(330 * var(--c)) 1fr;gap:calc(14 * var(--k)) calc(56 * var(--k));align-items:start}
  #contenuto[data-layout=tavola] #durata .domande__lista>*{grid-column:2}
  #contenuto[data-layout=tavola] #durata .domande__lista>p:first-child{grid-column:1;grid-row:1 / span 4;align-self:stretch;padding:calc(40 * var(--k)) calc(44 * var(--k)) calc(36 * var(--k));border-radius:calc(16 * var(--k));font-size:max(17px,calc(20 * var(--k)))}
  #contenuto[data-layout=tavola] #durata .domande__lista>p:first-child::before{content:"";position:absolute;inset:calc(14 * var(--k));pointer-events:none;background:var(--crocini)}
  #contenuto[data-layout=tavola] #durata .domande__lista>p:first-child strong{margin-top:calc(14 * var(--k));font-size:calc(150 * var(--k))}
  #contenuto[data-layout=tavola] #durata .domande__lista>p:not(:first-child),#contenuto[data-layout=tavola] #durata .domande__lista>ul{font-size:max(16px,calc(19 * var(--k)))}
  #contenuto[data-layout=tavola] #durata .domande__lista>p:nth-child(2){padding-top:calc(10 * var(--k));font-weight:700;color:var(--inchiostro)}
  #contenuto[data-layout=tavola] #durata .domande__lista>p:last-child{padding-top:calc(16 * var(--k));border-top:1px solid var(--filetto)}
  #contenuto[data-layout=tavola] #durata>svg[data-segno]{top:calc(-8 * var(--k));bottom:auto;right:0;width:calc(110 * var(--k))}

  /* #come-si-fa: titolo a sinistra (fermo), stepper verticale a destra */
  #contenuto[data-layout=tavola] #come-si-fa{margin-top:calc(110 * var(--k))}
  #contenuto[data-layout=tavola] #come-si-fa .passi__in{display:grid;grid-template-columns:calc(250 * var(--c)) 1fr;column-gap:calc(48 * var(--k));align-items:start;padding-top:calc(80 * var(--k));padding-bottom:calc(84 * var(--k))}
  #contenuto[data-layout=tavola] #come-si-fa .passi__titolo{position:sticky;top:calc(130 * var(--k))}
  #contenuto[data-layout=tavola] #come-si-fa .passi__lista{margin:calc(14 * var(--k)) 0 0;padding:0}
  #contenuto[data-layout=tavola] #come-si-fa .passo{display:grid;grid-template-columns:calc(150 * var(--k)) 1fr;column-gap:calc(64 * var(--k));align-items:center;padding:0 0 calc(56 * var(--k))}
  #contenuto[data-layout=tavola] #come-si-fa .passo:last-child{padding-bottom:0}
  #contenuto[data-layout=tavola] #come-si-fa .passo::before{left:calc(182 * var(--k));top:calc(50% + 10px);bottom:calc(-50% - 10px + 56 * var(--k))}
  #contenuto[data-layout=tavola] #come-si-fa .passo::after{left:calc(182 * var(--k) - 4px);top:calc(50% - 4.5px)}
  #contenuto[data-layout=tavola] #come-si-fa .passo .numero{justify-content:flex-end;font-size:max(64px,calc(104 * var(--k)));line-height:.9;letter-spacing:-.02em}
  #contenuto[data-layout=tavola] #come-si-fa .passo__titolo{margin:0;max-width:calc(560 * var(--k));font-size:max(18px,calc(23 * var(--k)))}

  /* #progetti: foto panoramica larga, pannello sovrapposto (sotto i 1024 px a cavallo del bordo) */
  #contenuto[data-layout=tavola] #progetti{grid-template-columns:1fr;gap:0;margin-top:calc(110 * var(--k));padding:0}
  #contenuto[data-layout=tavola] #progetti .studio__foto{height:calc(300 * var(--c));border-radius:50% 50% calc(16 * var(--k)) calc(16 * var(--k))/14% 14% calc(16 * var(--k)) calc(16 * var(--k))}
  #contenuto[data-layout=tavola] #progetti .studio__testo{margin:calc(-90 * var(--k)) calc(40 * var(--k)) 0;padding:calc(36 * var(--k)) calc(40 * var(--k)) calc(38 * var(--k));border-radius:calc(16 * var(--k))}
  #contenuto[data-layout=tavola] #progetti .studio__testo::before{inset:calc(14 * var(--k))}
  #contenuto[data-layout=tavola] #progetti .studio__titolo{margin-top:0;font-size:max(30px,calc(40 * var(--k)))}

  /* #privati-aziende: due colonne col filetto verticale */
  #contenuto[data-layout=tavola] #privati-aziende{padding-top:calc(110 * var(--k))}
  #contenuto[data-layout=tavola] #privati-aziende .servizi__testa{grid-template-columns:1fr}
  #contenuto[data-layout=tavola] #privati-aziende .servizi__griglia{grid-template-columns:1fr 1fr;margin-top:calc(34 * var(--k))}
  #contenuto[data-layout=tavola] #privati-aziende .scheda+.scheda{border-top:0;border-left:1px solid var(--filetto)}
  #contenuto[data-layout=tavola] #privati-aziende .scheda__testo{padding:calc(40 * var(--k)) calc(48 * var(--k)) calc(44 * var(--k)) calc(18 * var(--c))}
  #contenuto[data-layout=tavola] #privati-aziende .scheda+.scheda .scheda__testo{padding-left:calc(48 * var(--k))}
  #contenuto[data-layout=tavola] #privati-aziende .scheda__testo>svg:not([data-segno]){width:calc(72 * var(--k));height:calc(72 * var(--k));padding:calc(16 * var(--k));margin-bottom:calc(22 * var(--k));background-color:var(--piastrella);box-shadow:none}
  #contenuto[data-layout=tavola] #privati-aziende .scheda .studio__par{font-size:max(16px,calc(19 * var(--k)));max-width:calc(480 * var(--k))}

  /* #chi-firma: cartiglio a due celle */
  #contenuto[data-layout=tavola] #chi-firma{grid-template-columns:calc(300 * var(--c)) 1fr;margin-top:calc(110 * var(--k));padding:0;border-radius:calc(8 * var(--k))}
  #contenuto[data-layout=tavola] #chi-firma .domande__testa{padding:calc(36 * var(--k)) calc(36 * var(--k)) calc(96 * var(--k));border-bottom:0;border-right:1px solid var(--grafite-medio)}
  #contenuto[data-layout=tavola] #chi-firma .domande__lista{align-self:stretch;grid-template-rows:repeat(3,1fr)}
  #contenuto[data-layout=tavola] #chi-firma .domande__lista>p{display:flex;align-items:center;padding:calc(22 * var(--k)) calc(40 * var(--k))}
  #contenuto[data-layout=tavola] #chi-firma>svg[data-segno]{top:auto;right:auto;left:calc(36 * var(--k));bottom:calc(30 * var(--k));width:calc(64 * var(--k))}

  /* #contatti: titolo e testo su una riga, azioni sotto il filetto */
  #contenuto[data-layout=tavola] #contatti{grid-template-columns:1fr;align-items:start;margin-top:calc(24 * var(--k));padding:calc(56 * var(--k)) calc(56 * var(--k)) calc(52 * var(--k));outline-offset:calc(-14 * var(--k))}
  #contenuto[data-layout=tavola] #contatti .contatto__sx{display:grid;grid-template-columns:calc(300 * var(--c)) 1fr;column-gap:calc(48 * var(--k));padding:0;border:0}
  #contenuto[data-layout=tavola] #contatti .contatto__sx::after{content:none}
  #contenuto[data-layout=tavola] #contatti .contatto__titolo{grid-row:1 / span 2}
  #contenuto[data-layout=tavola] #contatti .contatto__sotto{grid-column:2;margin:0;max-width:calc(620 * var(--k))}
  #contenuto[data-layout=tavola] #contatti .contatto__sotto+.contatto__sotto{margin-top:calc(8 * var(--k))}
  #contenuto[data-layout=tavola] #contatti .contatto__dx{flex-direction:row;flex-wrap:wrap;align-items:center;gap:calc(18 * var(--k)) calc(40 * var(--k));margin-top:calc(36 * var(--k));padding:calc(32 * var(--k)) 0 0}
  #contenuto[data-layout=tavola] #contatti .contatto__dx::before{display:block}
  #contenuto[data-layout=tavola] #contatti .contatto__azioni{width:auto}
  #contenuto[data-layout=tavola] #contatti .contatto__tel,#contenuto[data-layout=tavola] #contatti .contatto__sede{margin:0}
}

/* 768-1023 px: la lastra e il #durata a una colonna, le tessere restano 2 × 2 */
@media (min-width:768px) and (max-width:1023px){
  #contenuto[data-layout=tavola] .hero__testo{margin-left:var(--margine);margin-right:var(--margine)}
  #contenuto[data-layout=tavola] #obbligo{grid-template-columns:1fr}
  #contenuto[data-layout=tavola] #obbligo .servizi__testa{grid-row:auto;padding:0 calc(18 * var(--c))}
  #contenuto[data-layout=tavola] #obbligo .ambiti{grid-column:1;margin-top:calc(26 * var(--k))}
  #contenuto[data-layout=tavola] #obbligo>.servizi__intro{grid-column:1}
  #contenuto[data-layout=tavola] #durata .domande__lista{grid-template-columns:1fr}
  #contenuto[data-layout=tavola] #durata .domande__lista>*{grid-column:1}
  #contenuto[data-layout=tavola] #durata .domande__lista>p:first-child{grid-row:auto;max-width:480px}
  #contenuto[data-layout=tavola] #come-si-fa .passi__in{grid-template-columns:1fr}
  #contenuto[data-layout=tavola] #come-si-fa .passi__titolo{position:static;margin-bottom:calc(30 * var(--k))}
  #contenuto[data-layout=tavola] #chi-firma{grid-template-columns:1fr}
  #contenuto[data-layout=tavola] #chi-firma .domande__testa{border-right:0;border-bottom:1px solid var(--grafite-medio);padding-bottom:calc(36 * var(--k))}
  #contenuto[data-layout=tavola] #chi-firma>svg[data-segno]{left:auto;right:calc(30 * var(--k));top:calc(28 * var(--k));bottom:auto}
  #contenuto[data-layout=tavola] #contatti .contatto__sx{grid-template-columns:1fr}
  #contenuto[data-layout=tavola] #contatti .contatto__titolo{grid-row:auto;margin-bottom:calc(14 * var(--k))}
  #contenuto[data-layout=tavola] #contatti .contatto__sotto{grid-column:1}
}

/* da 1024 px: la lastra della hero diventa una tavola con il cartiglio a destra; il pannello di #progetti entra nella foto */
@media (min-width:1024px){
  #contenuto[data-layout=tavola] .hero__testo{display:grid;grid-template-columns:1fr calc(330 * var(--k));grid-template-areas:"occ sot" "tit sot" "az sot";column-gap:calc(56 * var(--k))}
  #contenuto[data-layout=tavola] .hero .occhiello{grid-area:occ}
  #contenuto[data-layout=tavola] .hero__titolo{grid-area:tit}
  #contenuto[data-layout=tavola] .hero__azioni{grid-area:az}
  #contenuto[data-layout=tavola] .hero__sotto{grid-area:sot;display:flex;align-items:flex-end;margin:0;padding:0 0 calc(4 * var(--k)) calc(40 * var(--k));border-left:1px solid var(--filetto)}
  #contenuto[data-layout=tavola] .hero__scheda>svg[data-segno]{display:block;z-index:3;left:auto;right:calc((100% - 752 * var(--c)) / 2 + 48 * var(--k) + 170 * var(--k));top:calc(clamp(320px,calc(540 * var(--k)),62vh) - 170 * var(--k) + 50 * var(--k));bottom:auto;width:calc(120 * var(--k));color:var(--notte);stroke-width:.26;--intensita:.34}

  #contenuto[data-layout=tavola] #progetti .studio__foto{grid-column:1;grid-row:1;height:auto;min-height:calc(300 * var(--c))}
  #contenuto[data-layout=tavola] #progetti .studio__testo{grid-column:1;grid-row:1;align-self:center;justify-self:end;width:calc(520 * var(--k));margin:calc(56 * var(--k)) calc(56 * var(--k)) calc(56 * var(--k)) 0}
}