.content-width { width: min(820px, calc(100% - 48px)); margin-inline: auto; }
.catalogue-width { width: min(1248px, calc(100% - 48px)); margin-inline: auto; padding-block: 104px; }
.page-hero { position: relative; isolation: isolate; min-height: 560px; display: flex; align-items: center; background: #003D34; color: white; padding-block: 72px; }
.services-page .page-hero { min-height: 500px; }
/* Hero image and overlay (Figma, every inner hero): the image at full strength under a
   top-to-bottom gradient of rgb(14,41,31) — .9 → .6 by default, .86 → .5 on Art Care, Area
   Stampa and Privacy (.page-hero--soft). The Homepage keeps its own horizontal gradient. */
.page-hero__image { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.page-hero:not(.page-hero--home)::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(14, 41, 31, .9), rgba(14, 41, 31, .6)); }
.page-hero--soft:not(.page-hero--home)::after { background: linear-gradient(to bottom, rgba(14, 41, 31, .86), rgba(14, 41, 31, .5)); }
.page-hero .eyebrow { color: #D4C59C; }
.page-hero .lead { color: #F2F0E9; }
.service-page .page-content { padding-block: 104px 0; }
.content-section { margin-block: 0 56px; overflow-wrap: anywhere; }
.content-section > :first-child { margin-top: 0; }
.content-section > :last-child { margin-bottom: 0; }
.page-content h2, .page-content h3, .catalogue-width h2, .catalogue-width h3 { color: #00594B; }
.page-content .eyebrow, .catalogue-width .eyebrow, .related-services .eyebrow { color: #7C6C34; }
.service-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; margin-block: 48px 104px; }
.service-card { min-width: 0; background: white; border: 1px solid #E3DCCB; border-radius: 8px; overflow: hidden; }
.service-card > a { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.service-card__image { position: relative; aspect-ratio: 395 / 232; }
.service-card__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.service-card__body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.service-card__title { margin: 0 0 16px; }
.service-card__description { margin: 0 0 24px; }
.service-card__action { color: #7C6C34; margin-top: auto; padding-top: 12px; }
.service-card a:hover .service-card__action { text-decoration: underline; }
.service-card a:focus-visible, .related-services a:focus-visible { outline: 3px solid #003D34; outline-offset: -4px; }
.related-services { padding-block: 72px; }
.rule-b { width: min(820px,100%); height: 1px; background: var(--artesicura-gold-rule); margin-bottom: 48px; }
.rule-a { border-top: 1px solid var(--artesicura-gold-rule); padding-top: 56px; }
.related-services h2 { font-size: 30px; font-weight: 600; color: #00594B; }
.related-services__links { display: flex; flex-wrap: wrap; gap: 12px; padding: 0; margin: 32px 0 0; list-style: none; }
.related-services__links li { max-width: 100%; }
.related-services__links a { display: block; border: 1px solid #00594B; border-radius: 999px; padding: 12px 20px; color: #00594B; text-decoration: none; overflow-wrap: anywhere; font-size: 14px; }
.related-services__links a:hover { text-decoration: underline; }
.page-content .pull-quote { margin: 40px 0 56px; padding-left: 28px; border-left: 4px solid var(--artesicura-gold-rule); color: #00594B; }
.pull-quote p { margin: 0; }
.content-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px; margin-block: 32px; }
.content-card, .numbered-card { position: relative; padding: 28px; border-radius: 8px; overflow-wrap: anywhere; min-width: 0; }
.content-card { background: white; }
.numbered-card { isolation: isolate; overflow: hidden; background: #00594B; color: #F2F0E9; }
/* Feedback v5 (Silvia, 13/10): titles inside the green boxes in gold, set apart from the text (tokens.css). */
.page-content .numbered-card h3 { color: var(--artesicura-gold-on-green); }
/* Handoff §1.6 and Figma (485:445): number anchored top-right, overflowing 62px up and 5px right, clipped. */
.numbered-card .decorative-number { position: absolute; z-index: -1; top: -62px; right: -5px; line-height: 1.2; text-align: right; opacity: .16; color: #D4C59C; }
.wp-block-image { margin: 40px 0 56px; }
.wp-block-image img { display: block; max-width: 100%; height: auto; }
.content-card .wp-block-image { margin: 0 0 24px; }
.content-card .wp-block-image img { width: 100%; aspect-ratio: 341 / 180; object-fit: cover; }
.page-content a { color: #7C6C34; text-decoration: underline; }
@media (max-width: 64rem) { .service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 48rem) {
  .catalogue-width { padding-block: 56px; }
  .page-hero, .services-page .page-hero { min-height: 420px; padding-block: 56px; }
  .service-page .page-content { padding-block: 56px 0; }
  .service-grid, .content-grid { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .service-grid { margin-block: 28px 56px; }
  .service-card__image { position: relative; aspect-ratio: 342 / 188; }
  .content-section { margin-bottom: 28px; }
  .related-services { padding-block: 48px; }
  .rule-b { width: min(342px,100%); margin-bottom: 28px; }
  .rule-a { padding-top: 28px; }
}

.content-card img[src$="logo-noicompriamoquadri.svg"] { aspect-ratio: auto; object-fit: contain; }

.page-hero__layout { width: min(1248px, calc(100% - 48px)); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,380px); gap: 64px; align-items: center; }
.hero-quote { background: #00594B; padding: 32px; border-radius: 8px; overflow-wrap: anywhere; }
.hero-quote p { font-size: 16px; }
/* Fill, radius, padding and label typography are the Figma primary button, in buttons.css. */
.hero-quote__action { display: inline-block; text-decoration: none; }
.hero-quote__action:focus-visible { outline: 2px solid white; outline-offset: 4px; }
/* Original button fill; final D03 choice remains pending. */
@media (max-width: 48rem) { .page-hero__layout { grid-template-columns: minmax(0,1fr); gap: 28px; } }

.service-page .page-content { width: min(1248px, calc(100% - 48px)); }
.service-page .page-content > * { max-width: 820px; margin-inline: auto; }
.service-page .page-content > .content-section--wide { max-width: none; }
.rule-a--mobile { border-top: 0; padding-top: 0; }
@media (max-width: 48rem) {
  .rule-a--mobile { border-top: 1px solid var(--artesicura-gold-rule); padding-top: 28px; }
  .rule-a--desktop { border-top: 0; padding-top: 0; }
}

.experts-list { display: grid; gap: 72px; }
.expert-card { min-width: 0; overflow-wrap: anywhere; }
.expert-card > :is(a, .expert-card__body) { display: grid; grid-template-columns: minmax(0,440px) minmax(0,1fr); align-items: center; gap: 64px; color: inherit; text-decoration: none; }
/* Feedback v4 (Silvia, 07/10): back to the prototype's 440/500 portrait, rounded (Jp's 440/600 of 05/10 superseded). */
.expert-card__portrait { width: 100%; aspect-ratio: 440 / 500; height: auto; object-fit: cover; display: block; border-radius: var(--artesicura-radius); object-position: 50% var(--portrait-y, 50%); }
.expert-card .expert-name { color: #00594B; text-decoration: underline; text-underline-offset: .15em; margin-block: var(--artesicura-eyebrow-gap) 24px; }
.expert-card .eyebrow { color: #7C6C34; }
.expert-card__bio { font-size: var(--artesicura-text); line-height: var(--artesicura-text-line); }
.expert-card a:focus-visible { outline: 3px solid #003D34; outline-offset: 6px; }
.service-experts { margin-block: 56px 0; }
.service-experts .expert-card { padding: 32px; background: white; border: 1px solid #E1DAC8; border-radius: 8px; }
.service-experts .expert-card > :is(a, .expert-card__body) { grid-template-columns: 136px minmax(0,1fr); gap: 28px; }
.service-experts .expert-card__portrait { aspect-ratio: 1; border-radius: 50%; }
.service-experts .expert-card__bio { font-size: 18px; }
@media (max-width: 48rem) {
  .experts-list { gap: 48px; }
  .expert-card > :is(a, .expert-card__body) { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .expert-card__portrait { aspect-ratio: 342 / 300; }
  .service-experts .expert-card > :is(a, .expert-card__body) { grid-template-columns: minmax(0,1fr); }
  .service-experts .expert-card__portrait { width: 88px; }
}

.quote-banner { display: grid; grid-template-columns: minmax(0,636fr) minmax(0,732fr); column-gap: 72px; background: #003D34; color: #F2F0E9; }
/* Visual column: photo only; the prototype's abstract column form is not used. */
.quote-banner__visual { background: url('../images/banner-image.png') center / cover no-repeat; min-height: 500px; }
.quote-banner__content { padding: 84px 96px 84px 0; overflow-wrap: anywhere; }
.quote-banner__link, .quote-banner__content { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }
.quote-banner__content > *, .quote-banner__link > * { margin: 0; }
.quote-banner__link { color: inherit; text-decoration: none; }
.quote-banner h2 { color: white; margin: 0; }
.quote-banner .eyebrow { color: #D4C59C; }
.quote-banner__paragraph--desktop, .quote-banner__paragraph--mobile { font-size: 20px; line-height: 1.6; }
.quote-banner__paragraph--mobile { display: none; }
.quote-banner strong { font-weight: 700; font-synthesis: none; }
/* Fill, radius, padding and label typography are the Figma primary button, in buttons.css. */
.quote-banner__button { display: inline-block; }
.quote-banner__offer { align-self: stretch; display: flex; flex-direction: column; gap: 6px; padding: 18px 22px; background: #00594B; border-radius: 4px; }
.quote-banner__offer p { margin: 0; }
.quote-banner__link:focus-visible { outline: 2px solid white; outline-offset: 6px; }
.quote-banner__note { font-size: 14px; line-height: 1.56; color: #F2F0E9; }
.quote-banner__expiry { font-size: 13px; line-height: 1.5; color: #D4C59C; }
/* Baseline button fill retained; D03 approval is a separate checkpoint. */
@media (max-width: 48rem) {
  .quote-banner { grid-template-columns: minmax(0,1fr); }
  .quote-banner__visual { display: none; }
  .quote-banner__content { padding: 48px 24px; }
  .quote-banner__link, .quote-banner__content { gap: 16px; }
  .quote-banner h2 { font-size: 28px; }
  .quote-banner__paragraph--mobile { font-size: 16px; line-height: 1.62; }
  .quote-banner__offer { padding: 16px 18px; }
  .quote-banner__paragraph--desktop { display: none; }
  .quote-banner__paragraph--mobile { display: block; }
}

/* Homepage (fase 03). The hero reuses .page-hero; sections follow the approved vertical
   rhythm (handoff §1.3: 104px desktop, 56px mobile). Article cards mirror service cards
   deliberately: the manifest gives them the same anatomy. */
.home-section { padding-block: 104px 0; }
.home-section:last-child { padding-bottom: 104px; }
.home-section--why > p { max-width: 820px; }
.home-section--why .button-secondary { margin-top: 32px; }

.article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.article-card { min-width: 0; background: #FFFFFF; border: 1px solid #E3DCCB; border-radius: 8px; overflow: hidden; }
.article-card > a { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.article-card .service-card__title { margin: 0 0 12px; }
.eyebrow--date { color: #8C8F8A; font-size: 11px; margin: 0 0 12px; }

/* An incomplete or empty selection is an editorial state, so it is stated, not hidden. */
.empty-state { margin-block: 24px 0; padding: 16px 20px; border: 1px dashed #D4C59C; border-radius: 4px; background: #FFFFFF; color: #5B6360; font-size: 14px; max-width: 820px; }

@media (max-width: 64rem) {
  .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 48rem) {
  .home-section { padding-block: 56px 0; }
  .home-section:last-child { padding-bottom: 56px; }
  .article-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* Art Care (fase 03): listing, search, article and sidebar. Values from handoff §1.2–1.5 and the
   asset slots in ASSET-MANIFEST.csv (hero 1440×420, article hero 1440×560, body images 856×300). */
.listing { padding-block: 72px 104px; }
.article-search { position: relative; width: min(400px, 100%); margin: 0 0 48px; }
.article-search__input { width: 100%; height: 44px; padding: 0 20px; background: #FFFFFF; border: 1px solid #E3DCCB; border-radius: 4px; color: #23282A; font-size: 16px; }
.article-search__input::placeholder { color: #5B6360; opacity: 1; }
.article-search__input:focus-visible { outline: 2px solid #00594B; outline-offset: 2px; }
.search-status { margin: -24px 0 40px; font-size: 16px; }
.search-status p { margin: 0 0 8px; }
.search-status a { color: #7C6C34; text-decoration: underline; }
.listing .service-card__title, .article-grid h2.service-card__title { font-size: 24px; }

.article-layout { display: grid; grid-template-columns: minmax(0, 856px) minmax(0, 1fr); gap: 72px; align-items: start; }
.article-body { min-width: 0; overflow-wrap: anywhere; }
.article-date { margin: 0 0 24px; color: #8C8F8A; font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: .14em; text-transform: uppercase; }
/* V7 r.612: article title and paragraph headings in gold. Body headings sit on cream (#F2F0E9):
   #7C6C34, the gold for text on light (≈4.7:1, AA even for normal text). The H1 sits on the dark
   green hero overlay: #D4C59C, the gold for text on dark (7.14:1 on #003D34). */
.article-body h2 { margin: 48px 0 16px; color: #7C6C34; font-size: 26px; font-weight: 500; line-height: 1.2; }
.page-hero--article h1 { color: #D4C59C; }
/* Feedback Jp 08/10: the next section's heading touched the picture (0px); the space under it matches the 56px above. */
.article-body .wp-block-image { margin: 32px 0 56px; }
.article-body .wp-block-image img { width: 100%; aspect-ratio: 856 / 300; object-fit: cover; border-radius: 8px; }
/* The two screen titles («RADIOGRAFIA», «TOMOGRAFIA») stay inside the 856/300 crop. */
.article-body img[src*="radiografia_tomografia"] { object-position: 50% 40%; }
.article-sidebar { min-width: 0; }
.article-search--sidebar { margin-bottom: 40px; }
.article-sidebar__title { margin: 0 0 16px; color: #00594B; font-family: "Inter", sans-serif; font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: .14em; text-transform: uppercase; }
.article-sidebar__list { list-style: none; margin: 0; padding: 0; }
.article-sidebar__list li { border-top: 1px solid #E3DCCB; }
.article-sidebar__list a { display: block; padding: 16px 0; color: inherit; text-decoration: none; }
.article-sidebar__list a:hover .article-sidebar__name { text-decoration: underline; }
.article-sidebar__list a:focus-visible { outline: 3px solid #003D34; outline-offset: 2px; }
.article-sidebar__list .eyebrow--date { display: block; margin: 0 0 8px; }
.article-sidebar__name { display: block; color: #00594B; font-family: "Cormorant Garamond", serif; font-size: 19px; font-weight: 600; line-height: 1.24; }

/* Service page → article links (Restauro «per tipologia», Diagnostica). Card link style, §1.4. */
.card-link { display: inline-block; margin-top: 16px; color: #7C6C34; font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.card-link:hover { text-decoration: underline; }
.card-link:focus-visible { outline: 3px solid #003D34; outline-offset: 4px; }
.page-content .card-link { text-decoration: none; }
/* The whole card is the link (handoff §1.5, «link esteso»), without nesting the card in <a>. */
.card-link--stretched::before { content: ""; position: absolute; inset: 0; }
.article-card a:focus-visible { outline: 3px solid #003D34; outline-offset: -4px; }
.article-card a:hover .service-card__action { text-decoration: underline; }

@media (max-width: 64rem) {
  .article-layout { grid-template-columns: minmax(0, 1fr); gap: 56px; }
}
@media (max-width: 48rem) {
  .listing { padding-block: 40px 56px; }
  .article-search { margin-bottom: 28px; }
  .article-body .wp-block-image { margin-bottom: 40px; }
  .article-body .wp-block-image img { aspect-ratio: 342 / 200; }
  .card-link { font-size: 12px; }
}

/* Chi siamo — Figma 86:2 (desktop) / 92:2 (mobile). */
.about-section { width: min(1248px, calc(100% - 48px)); margin-inline: auto; padding-block: 104px; }
.about-intro { display: flex; flex-direction: column; gap: var(--artesicura-eyebrow-gap); }
.about-intro > * { margin: 0; }
.about-intro > .eyebrow { color: #7C6C34; }
.about-intro.section-centered { align-items: center; max-width: 880px; margin-inline: auto; }
.about-mission .about-intro .lead { color: #5B6360; }
/* Feedback v4: Chi siamo body text at the service-page size, not the 20px lead. */
.about-intro .lead, .about-network__text .lead { font-size: var(--artesicura-text); line-height: var(--artesicura-text-line); }
.about-pillars { list-style: none; margin: 72px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.about-pillar { min-width: 0; display: flex; flex-direction: column; gap: 16px; overflow-wrap: anywhere; }
.about-pillar::before { content: ""; display: block; width: 48px; height: 3px; background: var(--artesicura-gold-rule); }
.about-pillar h3 { margin: 0; color: #00594B; }
.about-pillar p { margin: 0; }
.about-band { background: #003D34; color: #F2F0E9; }
.about-band__inner { width: min(1248px, calc(100% - 48px)); margin-inline: auto; padding-block: 104px; display: flex; flex-direction: column; gap: 56px; }
.about-intro--band.section-centered { max-width: 900px; }
.about-intro--band > .eyebrow { color: #D4C59C; }
.about-animation { margin: 0; width: 100%; }
.about-animation img { display: block; width: 100%; max-width: 900px; height: auto; margin-inline: auto; }
.about-statement { font-family: "Cormorant Garamond", serif; font-size: 28px; line-height: 1.4; letter-spacing: -.005em; color: #F2F0E9; opacity: .9; }
.about-band__text { font-size: var(--artesicura-text); line-height: var(--artesicura-text-line); color: #F2F0E9; opacity: .9; }
.about-intro--band .about-band__text, .about-intro--band .about-statement + .about-band__text { margin-top: 14px; }
.collaboration-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 28px; }
.collaboration-card { min-width: 0; display: flex; flex-direction: column; gap: 10px; overflow-wrap: anywhere; }
.collaboration-card > * { margin: 0; }
.collaboration-card__media { aspect-ratio: 291 / 364; background: #00594B; overflow: hidden; }
.collaboration-card__image { display: block; width: 100%; height: 100%; object-fit: cover; }
.collaboration-card__place { color: #D4C59C; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; }
.collaboration-card__title { font-family: "Inter", sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; letter-spacing: 0; color: #FFFFFF; }
.collaboration-card__meta { font-size: 12px; line-height: 1.5; color: #FFFFFF; }
/* Feedback v4 (Silvia, 07/10; her «release 3» screenshot): artists and dates set apart from the title,
   smaller and muted, the date last and lightest. */
.collaboration-card__title + .collaboration-card__meta { margin-top: 2px; color: rgba(242, 240, 233, .78); }
.collaboration-card__meta + .collaboration-card__meta { font-size: 11px; color: rgba(242, 240, 233, .6); }
.about-network { display: flex; align-items: center; gap: 80px; }
.about-network__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--artesicura-eyebrow-gap); }
.about-network__text > * { margin: 0; }
.about-network__text > .eyebrow { color: #7C6C34; }
.about-network__text .lead { color: #5B6360; }
.about-network__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.about-network__image { flex: 0 0 540px; width: 540px; height: 460px; object-fit: cover; border-radius: 8px; }
@media (max-width: 64rem) {
  .collaboration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-network__image { flex-basis: 40%; width: 40%; height: auto; aspect-ratio: 540 / 460; }
  .about-network { gap: 48px; }
}
@media (max-width: 48rem) {
  .about-section, .about-band__inner { padding-block: 56px; }
  .about-band__inner { gap: 32px; }
  .about-pillars { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 40px; }
  .about-statement { font-size: 22px; }
  .about-band__text { font-size: 16px; line-height: 1.62; }
  .collaboration-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .about-network { display: block; }
  .about-network__image { display: none; }
}

/* Area Stampa (manifest 10). The search sits in the hero (1242:323); card images 373×220. */
.press-grid { column-gap: 64px; row-gap: 48px; }
.press-card__image { aspect-ratio: 373 / 220; }
/* Jp 08/10 (Silvia v4 p.31): press titles are the testata's real headlines, cut at three lines with «…»
   and always three lines tall, so every card in a row starts its summary at the same height. The full
   title stays in the markup for screen readers. A word longer than the column still breaks. */
.press-card .service-card__title, .press-card .service-card__description { overflow-wrap: anywhere; hyphens: auto; }
.press-card .service-card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	min-height: calc(3em * 1.24);
	min-height: 3lh;
}
.search-status:first-child { margin-top: 0; }
@media (max-width: 64rem) { .press-grid { column-gap: 32px; } }
@media (max-width: 48rem) { .press-grid { row-gap: 24px; } .press-card__image { aspect-ratio: 342 / 202; } }

/* Legal pages (manifest 11): H2 38, subtitle 20, section titles Cormorant SemiBold 30, body 16. */
.legal-content { padding-block: 104px; }
.legal-content h2 { margin: 0 0 16px; }
.legal-content h3 { margin: 0 0 16px; font-weight: 600; }
.legal-content p, .legal-content li { font-size: 16px; line-height: 1.62; }
.legal-content .lead { font-size: 20px; line-height: 1.6; margin-bottom: 56px; }
@media (max-width: 48rem) { .legal-content { padding-block: 56px; } }

/* Footer (handoff §1.11): cream like the page, separated by the gold top rule; text #003D34;
   the copyright divider is #003D34 at 18%, deliberately lighter than the gold rule. */
.site-footer { border-top: 1px solid var(--artesicura-gold-rule); background: #F2F0E9; color: #003D34; padding: 84px 96px 36px; }
.site-footer__columns { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 44px; }
.site-footer__brand img { display: block; width: 196px; height: 32px; }
.site-footer__brand p { margin: 20px 0 0; font-size: 14px; line-height: 1.56; max-width: 300px; }
.site-footer__stack { display: grid; gap: 36px; align-content: start; }
.site-footer .eyebrow { margin: 0 0 16px; color: #003D34; font-family: "Inter", sans-serif; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li + li { margin-top: 10px; }
.site-footer a { color: inherit; text-decoration: none; font-size: 14px; }
.site-footer a:hover, .site-footer a[aria-current="page"] { text-decoration: underline; text-underline-offset: .2em; }
.site-footer a:focus-visible { outline: 2px solid #003D34; outline-offset: 3px; }
.site-footer .eyebrow a { font-size: inherit; }
.site-footer address { font-style: normal; font-size: 14px; line-height: 1.7; }
.site-footer__copyright { margin: 56px 0 0; padding-top: 24px; border-top: 1px solid rgba(0, 61, 52, .18); font-size: 13px; line-height: 1.5; }
@media (max-width: 64rem) { .site-footer__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 48rem) {
  .site-footer { padding: 48px 24px 28px; }
  .site-footer__columns { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .site-footer__copyright { margin-top: 36px; }
}

/* Homepage «Perché Artesicura»: two columns, text and image (handoff §3). */
.home-section--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.home-section__text > .eyebrow { color: #7C6C34; }
.home-section__text > h2 { margin-block: 8px 16px; }
.home-section__image { display: block; width: 100%; height: auto; border-radius: 8px; object-fit: cover; }
.home-section--why .home-section__text .button-secondary { margin-top: 32px; }
@media (max-width: 48rem) { .home-section--split { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* Homepage hero (Figma 37:2 desktop, 79:9 mobile). The text shares the 1248px content
   container, so it lines up with the sections below; the block itself is 720px, the lead 620px.
   Full-strength image under the Figma gradient, instead of the dimmed image of inner heroes. */
.page-hero--home { min-height: 760px; padding-block: 72px; }
.page-hero--home .page-hero__picture { position: absolute; inset: 0; z-index: -1; }
.page-hero--home .page-hero__image { z-index: auto; }
.page-hero--home::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to right, rgba(14, 41, 31, .76), rgba(14, 41, 31, .15)); pointer-events: none; }
.page-hero--home .page-hero__content { gap: 26px; }
.page-hero--home .page-hero__content > * { max-width: 720px; }
.page-hero--home h1 { font-size: 64px; line-height: 1.06; letter-spacing: -.015em; }
.page-hero--home .lead { max-width: 620px; }
.page-hero--home .hero-quote__action { margin-top: 14px; }
.hero-eyebrow--mobile { display: none; }
@media (max-width: 48rem) {
  .page-hero--home { min-height: 560px; align-items: flex-end; padding-block: 40px; }
  .page-hero--home::after { background: linear-gradient(to bottom, rgba(14, 41, 31, .81), rgba(14, 41, 31, .54)); }
  .page-hero--home .page-hero__content { gap: 18px; }
  .page-hero--home h1 { font-size: 38px; line-height: 1.16; letter-spacing: -.005em; }
  .page-hero--home .lead { font-size: 16px; line-height: 1.62; }
  .page-hero--home .hero-quote__action { margin-top: 0; padding-inline: 32px; }
  .hero-eyebrow--desktop { display: none; }
  .hero-eyebrow--mobile { display: inline; }
}

/* Shared section header (template-parts/section-intro.php). Figma decides the alignment per
   section; centred headers are 780px wide (Homepage 67:3; Art Care 75:3 is 760) with 16px
   between eyebrow, heading and lead, and 56px before the section content. */
.section-intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--artesicura-eyebrow-gap); max-width: 820px; margin-bottom: 56px; }
.section-intro > * { margin: 0; }
.section-intro > .eyebrow { color: #7C6C34; }
.section-intro--center { align-items: center; text-align: center; max-width: 780px; margin-inline: auto; }
.home-section .service-grid, .home-section .article-grid { margin-top: 0; }
.home-section .service-grid { margin-bottom: 0; }
.section-actions { display: flex; margin-top: 48px; }
.section-actions--center { justify-content: center; }
/* «Perché Artesicura» (74:2): text 608px at the grid edge, image 560×480 at the far edge. */
.home-section--split { grid-template-columns: minmax(0, 608px) minmax(0, 560px); justify-content: space-between; }
.home-section--why .home-section__image { aspect-ratio: 560 / 480; }
@media (max-width: 48rem) {
  .section-intro { margin-bottom: 28px; }
  .section-actions { margin-top: 24px; }
  .home-section--split { grid-template-columns: minmax(0, 1fr); }
}

/* Shared hero text container (template-parts/page-hero.php; the Homepage uses it too).
   Start: on the 1248px content grid, so the text lines up with the content below.
   Center: a centred column of the Figma width for that page (--hero-width). Height is the
   Figma frame height (--hero-height) on desktop; on mobile the content sets it. */
@media (min-width: 48.0625rem) { .page-hero[style*="--hero-height"] { min-height: var(--hero-height); } }
.page-hero__content { width: min(1248px, calc(100% - 48px)); margin-inline: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.page-hero__content > * { margin: 0; }
.page-hero--center .page-hero__content { width: min(var(--hero-width, 880px), calc(100% - 48px)); align-items: center; text-align: center; }
.page-hero--start .page-hero__content { gap: var(--artesicura-eyebrow-gap); }
.page-hero__content .hero-quote__action { margin-top: 16px; }

/* Centred sections (Figma: Chi siamo 87:3/88:3, Lavora con noi 147:3/148:3/151:3, Preventivi
   141:3). Header and paragraphs are centred; cards, grids and forms inside keep their own
   left alignment, as in Figma. */
.section-centered { text-align: center; }
.section-centered > p, .section-centered .lead { margin-inline: auto; }
.section-centered :is(.numbered-cards, .content-grid, .form-block__layout, .about-boxes, .collaboration-grid) { text-align: left; }
.form-block--centered .form-block__layout { grid-template-columns: minmax(0, 720px); justify-content: center; }

/* Section headings on cream are green #00594B in Figma (handoff §1.2 «H2 di sezione»).
   Without this, the templates below inherited the body grey. Dark bands set their own colour. */
.section-intro h2, .about-intro:not(.about-intro--band) h2, .about-network__text h2, .form-section h2, .form-block > h2 { color: #00594B; }

/* Category tiles (image + title, no text): Figma Sec/Valutiamo 141:7 and Servizi Sec/Categorie.
   373px tiles, 260px image with radius 8, centred 24px green title, no card; grid gap 40/32. */
.content-grid--tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px 32px; }
.content-card:not(:has(p)) { flex: 0 1 373px; padding: 0; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.content-card:not(:has(p)) .wp-block-image { margin: 0; width: 100%; }
.content-card:not(:has(p)) .wp-block-image img { width: 100%; aspect-ratio: 373 / 260; object-fit: cover; border-radius: 8px; }
.content-card:not(:has(p)) h3 { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.24; color: #00594B; }
.shared-block > p:last-child, .shared-block .content-section > p:last-child { font-size: 14px; line-height: 1.56; }

/* WordPress wraps every group block's children in .wp-block-group__inner-container (classic
   theme, no layout support). The wrapper made grids like .content-grid lay out one wrapper
   instead of the cards, so the grid rules above never applied. It carries no semantics, so it
   is made transparent to layout and the group's own rules act on the real children. */
.wp-block-group__inner-container { display: contents; }

/* Service bodies (Figma Sec/Cosa, e.g. Expertise 122:2, Restauro 324:313): the section header —
   an eyebrow, its H2 and the paragraph right after — is centred at 840px; blocks stay left. */
.service-page .page-content .eyebrow,
.service-page .page-content .eyebrow + h2,
.service-page .page-content .eyebrow + h2 + p { text-align: center; }
/* Feedback v4: the whole opening section is centred, every paragraph of it (Tutela Legale had two). */
.service-page .page-content .eyebrow + h2 ~ p { text-align: center; }
/* Numbered cards (122:7): 373px, gap 28, on the 1248px grid, last row centred. */
.page-content .content-grid:has(.numbered-card) { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; width: min(1248px, calc(100vw - 48px)); margin-inline: calc((100% - min(1248px, 100vw - 48px)) / 2); }
.page-content .content-grid .numbered-card { flex: 0 1 373px; padding: 72px 30px 30px; }
/* Tile grid breaks out to the grid width too (373 × 3 + 32 × 2). */
.page-content .content-grid--tiles { width: min(1183px, calc(100vw - 48px)); margin-inline: calc((100% - min(1183px, 100vw - 48px)) / 2); }
/* Full-width white band without horizontal overflow: the background extends via box-shadow. */
.tile-band { position: relative; background: #FFFFFF; box-shadow: 0 0 0 100vmax #FFFFFF; clip-path: inset(0 -100vmax); padding-block: 96px 104px; margin-block: 104px 0 !important; }
/* Feedback v4 (Silvia, 07/10): «Cosa valutiamo» on the page's cream, as on Servizi, so the gold rule
   below it sits on one colour. */
.service-page .tile-band { background: transparent; box-shadow: none; clip-path: none; padding-block: 0; margin-block: 104px 0 !important; }
@media (max-width: 48rem) { .service-page .tile-band { margin-block: 56px 0 !important; } }
.tile-band > p:last-child { font-size: 14px; line-height: 1.56; text-align: center; }
/* «Continua a esplorare» (124:2): centred; eight equal pills in a 1200px 4 × 2 grid. */
.related-services { text-align: center; }
.related-services .rule-b { margin-inline: auto; }
.related-services h2 { margin-block: var(--artesicura-eyebrow-gap) 0; }
.related-services__links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: min(1200px, calc(100vw - 48px)); margin-inline: calc((100% - min(1200px, 100vw - 48px)) / 2); margin-top: 24px; }
.related-services__links a { padding: 11px 20px; font-size: 14px; line-height: 1.56; text-align: center; }
@media (max-width: 64rem) { .related-services__links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 48rem) {
  .tile-band { padding-block: 56px; margin-block: 56px 0 !important; }
  .related-services__links { grid-template-columns: minmax(0, 1fr); }
  .page-content .content-grid .numbered-card { flex-basis: 100%; }
}
/* Servizi catalogue (Figma 97:3, 98:3): the same centred section header pattern. */
.services-page .catalogue-width .eyebrow,
.services-page .catalogue-width .eyebrow + h2,
.services-page .catalogue-width .eyebrow + h2 + p { text-align: center; margin-inline: auto; max-width: 820px; }

/* Jp review 2026-09-24. */
/* Home: space between the last row of service cards and the banner (104 / 56). */
.home-section:has(+ .quote-banner) { padding-bottom: 104px; }
/* Links inside body copy: gold #7C6C34, underlined (handoff §1.9 a), everywhere on the site. */
main p a:not([class]), .page-content li a:not([class]), .gform_wrapper .gfield_consent_label a { color: #7C6C34; text-decoration: underline; text-underline-offset: .15em; }
main p a:not([class]):hover, .page-content li a:not([class]):hover { color: #00594B; }
.related-services__links a { text-decoration: none; }
/* Restauro «per tipologia» and other wide card rows: three columns (Figma 327:302, gap 28). */
.content-section--wide .content-grid:not(.content-grid--tiles) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
/* Service pills: green fill, white text on hover (not an underline). */
.related-services__links a { transition: background-color 150ms ease, color 150ms ease; }
.related-services__links a:is(:hover, :focus-visible) { background: #00594B; color: #FFFFFF; text-decoration: none; }
/* No widows in titles: balanced line breaks (e.g. Restauro «… / delle Opere d’Arte»). */
h1, h2 { text-wrap: balance; }
/* Footer: e-mail set apart from the address; social icons. */
.site-footer address a { display: inline-block; margin-top: 12px; }
/* V7 r.624: the two phone numbers and the e-mail follow the address as one contact block. */
.site-footer address a + br + a { margin-top: 4px; }
/* Specificity beats `.site-footer ul { margin: 0 }`, which silently cancelled the earlier margin (Jp, 28/09). */
.site-footer .site-footer__social { display: flex; gap: 14px; margin-top: 28px; list-style: none; padding: 0; }
.site-footer__social li + li { margin-top: 0; }
.site-footer__social img { display: block; width: 20px; height: 20px; }
/* Contatti: the Mirabilia line set apart from the Milan address. */
/* Feedback v4: «In collaborazione con Mirabilia» sits right under the Milan address it belongs to. */
.info-note { margin: -8px 0 0; font-size: 16px; line-height: 1.62; }
/* Contatti map (Jp, 08/10 sera): the Google Maps embed, 4:3, rounded like the other pictures, set by
   Complianz only with consent. Until then (iframe still blocked: data-src-cmplz without cmplz-activated)
   the static OSM map stands in its place with the notice; once active the stand-in disappears. */
.contact-map { margin: 8px 0 0; }
.contact-map__embed { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border: 0; border-radius: var(--artesicura-radius); background: #E3DCCB; }
.contact-map__embed[data-src-cmplz]:not(.cmplz-activated) { display: none; }
.contact-map__frame:has(.contact-map__embed.cmplz-activated) .contact-map__fallback,
.contact-map__frame:has(.contact-map__embed:not([data-src-cmplz])) .contact-map__fallback { display: none; }
.contact-map__fallback { max-width: 400px; } /* native size: the street labels stay at 10–11 px */
.contact-map__link { display: block; border-radius: var(--artesicura-radius); }
.contact-map__link:focus-visible { outline: 2px solid #00594B; outline-offset: 3px; }
.contact-map img { display: block; width: 100%; height: auto; border-radius: var(--artesicura-radius); background: #E3DCCB; }
.contact-map__notice { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: #23282A; }
.contact-map__notice a { color: #00594B; }
.contact-map__accept { padding: 0; border: 0; background: none; font: inherit; color: #00594B; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.contact-map__accept:focus-visible { outline: 2px solid #00594B; outline-offset: 2px; }
.contact-map__credit { margin-top: 6px; font-size: 11px; line-height: 1.4; color: #5B6361; }

/* Phone and e-mail icons (Figma Contatti 131:12, 18px handset), shared by Contatti and the footer.
   Drawn with a mask so they take the link colour. */
.contact-icon { display: inline-flex; align-items: center; gap: 8px; }
.contact-icon::before { content: ""; flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--contact-icon) center / contain no-repeat; mask: var(--contact-icon) center / contain no-repeat; }
.contact-icon--phone { --contact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E"); }
.contact-icon--mail { --contact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='14' rx='1.5'/%3E%3Cpath d='m3.5 6 8.5 7 8.5-7'/%3E%3C/svg%3E"); }
.site-footer__office { display: block; margin-top: 8px; }
.site-footer address a.contact-icon { display: inline-flex; }
.site-footer__logo { display: inline-block; }
@media (max-width: 48rem) {
  .home-section:has(+ .quote-banner) { padding-bottom: 56px; }
  .content-section--wide .content-grid:not(.content-grid--tiles) { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .related-services__links a { transition: none; } }

/* Diagnostica experts block (Figma 336:311): heading 30px green link, card, outline button; the
   portrait is a 136px circle cropped to keep the face (was centred, cutting the head). */
.service-experts h2 { font-size: 30px; }
.service-experts h2 a { color: #00594B; text-decoration: none; }
.service-experts h2 a:hover { text-decoration: underline; }
.service-experts .expert-card__portrait { width: 136px; height: 136px; object-position: 50% var(--avatar-y, 18%); }
.service-experts__actions { margin-top: 24px; }
.page-content--after-experts { padding-top: 56px; }
@media (max-width: 48rem) { .service-experts .expert-card__portrait { width: 120px; height: 120px; } }

/* Service body images run the full 1248px grid (Figma: Diagnostica 492:300 / 335:527 / 492:301,
   1248×420; Tutela Legale 1248×697). */
.service-page .page-content > .wp-block-image { max-width: none; width: min(1248px, calc(100vw - 48px)); margin-inline: calc((100% - min(1248px, 100vw - 48px)) / 2); }
.service-page .page-content > .wp-block-image img { width: 100%; object-fit: cover; }
/* Figma slots per service (desktop / mobile). Keyed on the record, not the slug: the slug class
   stopped matching when the V7 slugs arrived, and Diagnostica showed its portraits uncropped. */
.service-page--key-grafologia .page-content > .wp-block-image img,
.service-page--key-restauro .page-content > .wp-block-image img,
.service-page--key-vendita .page-content > .wp-block-image img,
.service-page--key-custodia .page-content > .wp-block-image img { aspect-ratio: 1248 / 420; }
/* Diagnostica (feedback v6 slide 11; Jp 22/10): Silvia's final photos are close-ups, cut too low by the
   1248×420 band; 2:1, like the Protezione Danni and NFT slots, keeps the subjects whole. */
.service-page--key-diagnostica .page-content > .wp-block-image img { aspect-ratio: 2 / 1; }
.service-page--key-protezione-danni .page-content > .wp-block-image img { aspect-ratio: 1248 / 608; }
.service-page--key-nft .page-content > .wp-block-image img { aspect-ratio: 1248 / 620; }
/* Restauro, Vendita, Custodia (feedback v5 slide 13, Noemi 13/10): the photos of 07/10 sit in the body
   in the Diagnostica slot. The faces are in the upper half of each photo, so the band is anchored high. */
.service-page--key-restauro .page-content > .wp-block-image img { object-position: 50% 12%; }
.service-page--key-vendita .page-content > .wp-block-image img { object-position: 50% 15%; }
.service-page--key-custodia .page-content > .wp-block-image img { object-position: 50% 18%; }
@media (max-width: 48rem) {
  .service-page--key-diagnostica .page-content > .wp-block-image img,
  .service-page--key-grafologia .page-content > .wp-block-image img,
  .service-page--key-restauro .page-content > .wp-block-image img,
  .service-page--key-vendita .page-content > .wp-block-image img,
  .service-page--key-custodia .page-content > .wp-block-image img,
  .service-page--key-protezione-danni .page-content > .wp-block-image img { aspect-ratio: 342 / 220; }
  .service-page--key-nft .page-content > .wp-block-image img { aspect-ratio: 342 / 183; }
}
/* «Preferenze cookie» sits among the legal links and reads like them. */
.site-footer .site-footer__consent { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 14px; cursor: pointer; text-align: left; }
.site-footer .site-footer__consent:hover { text-decoration: underline; text-underline-offset: .2em; }
.site-footer .site-footer__consent:focus-visible { outline: 2px solid #003D34; outline-offset: 3px; }

/* Chi siamo V7 blocks: centred intro sections; the second follows the first without a double gap. */
.about-prose + .about-prose { padding-top: 0; }
.about-prose .button-secondary { margin-top: 8px; }

/* Wide sections centre their title (Figma: Restauro «per tipologia» 327:302, Protezione «I danni
   tutelati» 321:302). */
.service-page .page-content > .content-section--wide > .wp-block-heading:first-child,
.service-page .page-content > .content-section--wide > .wp-block-group__inner-container > .wp-block-heading:first-child { text-align: center; }

/* Protezione Danni «I danni tutelati» (Figma Card/Danni 321:302 / 330:311): one white panel,
   3×2 on desktop, 40px icons above centred text; one column with left-aligned icons on mobile. */
.content-section--wide .content-grid.content-grid--icons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 48px; padding: 56px 48px; background: #FFFFFF; border-radius: 8px; }
.content-grid--icons .content-card { padding: 0; background: transparent; text-align: center; }
.content-grid--icons .content-card .wp-block-image { margin: 0 auto 12px; width: 60px; }
.content-grid--icons .content-card .wp-block-image img { width: 60px; height: 60px; aspect-ratio: auto; object-fit: contain; }
.content-grid--icons .content-card p { margin-bottom: 0; }
@media (max-width: 48rem) {
  .content-section--wide .content-grid.content-grid--icons { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 28px 24px; }
  .content-grid--icons .content-card { text-align: left; }
  .content-grid--icons .content-card .wp-block-image { margin: 0 0 12px; }
}

/* Vendita «3 modalità» (Figma Box/ModalitaVendita 1929:322 / 1930:322): dark green panel with the
   three cards in a row. PDF v3 point 7: the intro runs the full panel width, no empty right side. */
.service-page .page-content > .content-section--panel { padding: 56px; background: #003D34; border-radius: 8px; color: #F2F0E9; }
.content-section--panel > p { max-width: none; margin-top: 0; color: #F2F0E9; }
.content-section--wide.content-section--panel .content-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-bottom: 0; }
.content-section--panel .content-card { background: #00594B; }
.content-section--panel .content-card h3 { color: var(--artesicura-gold-on-green); text-transform: uppercase; letter-spacing: .02em; }
.content-section--panel .content-card p { color: #F2F0E9; }
.content-section--panel .content-card .wp-block-image { margin-bottom: 16px; }
/* The logo file is drawn for a light ground; Figma shows it light on the green (decisioni-aperte 13). */
.content-section--panel .content-card img[src$="logo-noicompriamoquadri.svg"] { width: 259px; max-width: 100%; height: auto; filter: brightness(0) invert(1); opacity: .92; }
@media (max-width: 48rem) {
  .service-page .page-content > .content-section--panel { padding: 24px; }
  .content-section--wide.content-section--panel .content-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* I nostri esperti (Figma 115:2): portraits alternate left / right on desktop. */
@media (min-width: 48.0625rem) {
  .experts-list > .expert-card:nth-child(even) > a { grid-template-columns: minmax(0,1fr) minmax(0,440px); }
  .experts-list > .expert-card:nth-child(even) .expert-card__portrait { order: 2; }
}
/* Grafologia (Figma 337:301): the expert avatar is 88px; the head stays whole (PDF v3 point 12). */
.service-page--key-grafologia .service-experts .expert-card > :is(a, .expert-card__body) { grid-template-columns: 88px minmax(0,1fr); }
.service-page--key-grafologia .service-experts .expert-card__portrait { width: 88px; height: 88px; }

/* Card details as in Figma (Home 36:2, Art Care 157:2, Area Stampa 1242:313, article 346:301):
   the card action ends with «→»; article and press cards sit on a soft shadow, no border; dates
   are grey, not gold; the recent-articles list has no rules; search fields carry a lens icon. */
.service-card__action::after, .card-link::after { content: "\00a0→"; }
.article-card { border: 0; box-shadow: 0 8px 24px rgba(0, 61, 52, .08); }
.article-card .eyebrow--date, .article-sidebar__list .eyebrow--date, .catalogue-width .article-card .eyebrow--date { color: #8C8F8A; }
.article-sidebar__list .eyebrow--date { font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 12px; }
.article-sidebar__list li { border-top: 0; }
.article-search__input { padding-left: 44px; background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%235B6360' stroke-width='1.5'%3E%3Ccircle cx='7' cy='7' r='5.25'/%3E%3Cpath d='m11 11 3.5 3.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 16px center; }
/* Art Care listing (Figma 157:2): three 373px columns from the left, gap 32. */
@media (min-width: 64.0625rem) { .listing .article-grid:not(.press-grid) { grid-template-columns: repeat(3, 373px); column-gap: 32px; row-gap: 40px; } }

/* Footer (Figma 201:2): the nine services run in two columns (5 + 4). */
@media (min-width: 64.0625rem) {
  .site-footer__columns { grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr) repeat(2, minmax(0, 1fr)); }
  .site-footer__group--services ul { columns: 2; column-gap: 32px; }
  .site-footer__group--services li { break-inside: avoid; }
  .site-footer__group--services li + li { margin-top: 0; }
  .site-footer__group--services li { padding-bottom: 10px; }
}

/* Mobile, service pages (Figma 125:2, 317:360 …): the hero is 360px with the title at its foot, and
   the «Vuoi …?» box follows as a full-width band, not a card floating over the picture. */
@media (max-width: 48rem) {
  .service-page .page-hero { display: block; min-height: 0; padding: 0; }
  /* The picture still covers the whole header: the opaque band hides it below the title. */
  .service-page .page-hero__layout { width: 100%; display: block; }
  .service-page .page-hero__layout > div:first-child { box-sizing: border-box; min-height: 360px; display: flex; flex-direction: column; justify-content: flex-end; padding: 56px 24px 32px; }
  .service-page .hero-quote { border-radius: 0; padding: 28px 24px; }
  /* «Tutti i servizi»: two columns of pills (Figma 166×40). */
  .related-services__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .related-services__links a { padding: 10px 12px; text-align: center; font-size: 13px; }
  /* «Cosa valutiamo» tiles: two columns, 163×150 images (Figma 125:2 / 143:2). */
  .page-content .content-grid--tiles, .content-grid--tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 15px; width: auto; margin-inline: 0; }
  .content-grid--tiles .content-card:not(:has(p)) .wp-block-image img { aspect-ratio: 163 / 150; }
  .content-grid--tiles .content-card:not(:has(p)) h3 { font-size: 20px; }
}

/* Feedback v4 (Silvia, 07/10) — shared rules for every page, not per-page fixes. */
/* Section rhythm: WordPress wraps group children in .wp-block-group__inner-container (display:
   contents), so `.content-section > :first-child` never reached the first heading: its 30px margin
   added to the 56px under each gold rule. */
.content-section > .wp-block-group__inner-container > :first-child { margin-top: 0; }
.content-section > .wp-block-group__inner-container > :last-child { margin-bottom: 0; }
/* «Continua a esplorare» (feedback v5, Silvia 13/10): the gold rule sits at the same distance from the end
   of every service body — 72px after the last block, whatever it is (section, quote, cards, experts button) —
   and 32px before the label, closer to «Continua a esplorare» than before (was 0–56 / 48). */
.service-page .related-services { padding-top: var(--artesicura-divider-gap); }
.service-page .page-content > :last-child, .service-page .service-experts__actions { margin-bottom: 0; }
.service-page .related-services .rule-b { margin-bottom: 32px; }
@media (max-width: 48rem) {
  .service-page .related-services .rule-b { margin-bottom: 24px; }
}
/* A centred opening followed by left-aligned text: a gold rule marks the change (Custodia, Grafologia). */
.service-page .page-content > .content-section:first-child + .content-section:not(.rule-a, .tile-band, .content-section--wide) { border-top: 1px solid var(--artesicura-gold-rule); padding-top: 56px; }
@media (max-width: 48rem) { .service-page .page-content > .content-section:first-child + .content-section:not(.rule-a, .tile-band, .content-section--wide) { padding-top: 28px; } }
/* Content images keep the prototype's rounded corners. */
.service-page .page-content > .wp-block-image img { border-radius: var(--artesicura-radius); }
/* Tutela Legale (and Home): the frame breaks out of a dark ground drawn inside a transparent webp.
   The ground's corners are rounded with a mask (rounded ground ∪ the frame's column), the file is
   untouched. Ground: x 121–1678, y 67–937 of 1800×1005; frame: x 440–1375 (mask positions are
   percentages of the free space: offset / (100% − size)). */
img[src*="tutela-legale_cornice-dorata"] {
  -webkit-mask: linear-gradient(#000 0 0) 50.9% 0 / 52.1% 100% no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1557 870' preserveAspectRatio='none'%3E%3Crect width='1557' height='870' rx='12'/%3E%3C/svg%3E") 49.8% 49.8% / 86.5% 86.6% no-repeat;
  mask: linear-gradient(#000 0 0) 50.9% 0 / 52.1% 100% no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1557 870' preserveAspectRatio='none'%3E%3Crect width='1557' height='870' rx='12'/%3E%3C/svg%3E") 49.8% 49.8% / 86.5% 86.6% no-repeat;
}

/* Feedback v4 (Silvia, 07/10) — service pages. */
/* On a service page the expert card is not a link: the name reads as a title, not as a link. */
.expert-card__body .expert-name { text-decoration: none; }
/* Grafologia: the head starts 3px from the top of the portrait, so the crop starts at the top and
   10px of the photo's own near-white ground (#FDFDFD) sit above it; nothing is scaled or deformed. */
.service-page--key-grafologia .service-experts .expert-card__portrait { box-sizing: border-box; padding-top: 10px; background: #FDFDFD; object-position: 50% 0; }
/* Protezione Danni «I danni tutelati»: the title sits inside the white panel with its six icons,
   as in the other pages' panels. */
.service-page .page-content > .content-section--icons { padding: 56px 48px; background: #FFFFFF; border-radius: var(--artesicura-radius); }
.content-section--icons .content-grid.content-grid--icons { padding: 0; background: transparent; border-radius: 0; }
.content-section--icons > .wp-block-group__inner-container > .wp-block-heading:first-child { margin-bottom: 40px; }
@media (max-width: 48rem) { .service-page .page-content > .content-section--icons { padding: 28px 24px; } }
/* Protezione Danni 01-02-03: the short texts wrap on three lines as in the prototype. */
.service-page--key-protezione-danni .numbered-card p { max-width: 250px; }
/* Cards with «Leggi l'articolo» (Restauro per tipologia): the link sits at the foot of every card. */
.content-card:has(.card-link) { display: flex; flex-direction: column; }
.content-card:has(.card-link) .card-link { align-self: flex-start; margin-top: auto; padding-top: 16px; }
/* NFT: the hero starts from the top of the picture, so «TOKEN» reads; the body image shows its whole
   frame, slightly narrower than the grid instead of cropped. */
.service-page--key-nft .page-hero__image { object-position: 50% 0; }
.service-page--key-nft .page-content > .wp-block-image { width: min(1040px, calc(100vw - 48px)); margin-inline: calc((100% - min(1040px, 100vw - 48px)) / 2); }
.service-page--key-nft .page-content > .wp-block-image img { aspect-ratio: auto; }
@media (max-width: 48rem) { .service-page--key-nft .page-content > .wp-block-image img { aspect-ratio: auto; } }

/* Feedback v4 (Silvia, 07/10) — Art Care articles: a heading standing alone in its section (e.g.
   «Dipinti su tela» before «Interventi sulla struttura di sostegno») keeps close to what follows. */
.article-body .content-section:has(> .wp-block-group__inner-container > .wp-block-heading:only-child) { margin-bottom: 16px; }

/* Portrait framing per expert record (Jp, 08/10, feedback v4): the 440/500 rounded frame of release 3
   with the current photos; the vertical position keeps each head whole with room above it, on the
   Esperti page (440/500, mobile 342/300) and in the round service avatars. Head top in the source:
   Baboni 23%, Matteuzzi 2% (no room in the photo itself), Barausse 8%, Tutela legale 27%;
   Restauratori shows a hand, centred. */
.expert-card[data-expert-id="539"] { --portrait-y: 30%; }
.expert-card[data-expert-id="541"] { --portrait-y: 0%; }
.expert-card[data-expert-id="543"] { --portrait-y: 6%; --avatar-y: 0%; }
.expert-card[data-expert-id="545"] { --portrait-y: 50%; }
.expert-card[data-expert-id="547"] { --portrait-y: 30%; }

/* Feedback v5 (Silvia, 13/10) — shared rules for every page, not per-page fixes. */
/* Labels above titles (eyebrows): one distance to the title under them, the token in tokens.css. In prose the
   label loses its bottom margin and the title takes the gap; the flex and grid headers listed below space their
   children with the same token as their gap, so the title must not add the margin a second time. The Home hero
   (26px, Figma 37:2) and the Preventivi banner keep their own rhythm. */
.eyebrow:has(+ :is(h1, h2, h3)) { margin-bottom: 0; }
p.eyebrow + :is(h1, h2, h3) { margin-top: var(--artesicura-eyebrow-gap); }
:is(.section-intro, .about-intro, .about-network__text, .form-side, .page-hero__content, .form-band__inner, .quote-banner__content, .landing__aside, .info-group) > p.eyebrow + :is(h1, h2, h3) { margin-top: 0; }
.landing__eyebrow { margin-bottom: var(--artesicura-eyebrow-gap); }
/* Titles inside the green boxes (Expertise, Protezione Danni, Vendita, Lavora con noi, Preventivi «Perché
   Artesicura»): the gold for text on green, tokens.css. */
.callout h3 { color: var(--artesicura-gold-on-green); }
/* Protezione Danni «I danni tutelati» (slide 8): the six items in thin bordered boxes inside the white panel. */
.content-grid--icons .content-card { padding: 24px 20px; border: 1px solid #00594B; border-radius: var(--artesicura-radius); }
.content-section--wide .content-grid.content-grid--icons { gap: 24px; }
/* Art Care articles: a sub-heading (H3, e.g. «Interventi sulla struttura di sostegno» under «Dipinti su tela»)
   smaller than the section title and closer to its text, so it reads as part of the section. */
.article-body h3 { margin: 32px 0 8px; color: #7C6C34; font-size: 22px; font-weight: 500; line-height: 1.2; }
.article-body .content-section:has(> .wp-block-group__inner-container > h3:first-child) { margin-bottom: 40px; }
/* Home «Perché Artesicura»: the gold frame alone (assets/home_cornice-dorata.webp, cut out from the Tutela Legale
   picture, transparent ground), whole, on the page's cream: no crop and no mask. */
.home-section--why .home-section__image[src*="home_cornice-dorata"] { object-fit: contain; border-radius: 0; background: transparent; }
@media (max-width: 48rem) {
  .content-grid--icons .content-card { padding: 20px 16px; }
  .content-section--wide .content-grid.content-grid--icons { gap: 16px; }
  .article-body h3 { margin: 24px 0 8px; font-size: 20px; }
}

/* Feedback v6 (Silvia, 20/10) — shared rules, not per-page fixes. */
/* Article and press cards (Area Stampa, Art Care, Home): the date sits 12px above the title again, as before
   the v5 eyebrow rule (it set the label's bottom margin to 0 and the card title keeps its own top margin of 0). */
.article-card p.eyebrow--date { margin-bottom: 12px; }
/* The footer's top rule (Jp, 21/10): the same distance above it, from the last block of a page on cream, as
   below it to the footer columns — tokens.css. Pages ending on a full-width band (the quote banner, the green
   landings) meet the rule with the band itself. */
.site-footer { padding-top: var(--artesicura-divider-gap); }
.home-section:last-child, .legal-content { padding-bottom: var(--artesicura-divider-gap); }
.legal-content > :last-child, .contact-map__credit { margin-bottom: 0; }
/* Diagnostica: «Scopri di più» after a section's list is a block of its own, so the line box around it
   adds nothing under the button and the rule below sits at the same distance as on the other pages. */
.content-section .card-link:not(.card-link--stretched) { display: block; width: fit-content; }
/* Art Care articles: the text ends 104px above the «Preventivo gratuito» band (the section rhythm), without
   the last section's own bottom margin on top of it. Desktop only: on mobile the sidebar follows the text. */
@media (min-width: 64.0625rem) {
  .article-body > :last-child,
  .article-body > .content-section:last-child:has(> .wp-block-group__inner-container > h3:first-child) { margin-bottom: 0; }
}
/* Diagnostica: the body after the experts block starts at the body rhythm (56 / 40), not a whole section
   below «I nostri esperti». */
.service-page .page-content--after-experts { padding-top: 56px; }
.page-content--after-experts > :first-child { margin-top: 0; }
/* Protezione Danni has no gold rules between its blocks, unlike the other service pages, so they read as one:
   a little more air between blocks, and more around «I danni tutelati», a block of its own. */
.service-page--key-protezione-danni .page-content > :not(:last-child) { margin-bottom: 80px; }
.service-page--key-protezione-danni .page-content > .content-section--icons { margin-block: 104px; }
/* Restauro: a little more space between the text and «Restauro per tipologia di opera». */
.service-page .page-content > .content-section--wide:not(.content-section--icons, .content-section--panel) { margin-top: 88px; }
@media (max-width: 48rem) {
  .service-page .page-content--after-experts { padding-top: 40px; }
  .service-page--key-protezione-danni .page-content > :not(:last-child) { margin-bottom: 48px; }
  .service-page--key-protezione-danni .page-content > .content-section--icons { margin-block: 64px; }
  .service-page .page-content > .content-section--wide:not(.content-section--icons, .content-section--panel) { margin-top: 48px; }
}