/* BOZ Design — behaviour layer for the Elementor pages, from the prototype's boz.css.
   Layout and type of page content live in Elementor global classes/variables;
   this file adds what Elementor cannot express: the overlay header and footer,
   keyframes, state classes toggled by boz.js, page transitions and text-wrap. */

/* Geist 500, served from this site (no request to Google Fonts) */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/geist-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/geist-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --c-bg: #ffffff;
  --c-ink: #000000;
  --c-blend: #ffffff;
  --c-overlay: #ffffff;
  --c-media: #efefef;
  --c-shadow: rgba(0, 0, 0, 0.08);

  --f-sans: "Geist", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  --fw: 500;

  --fs-display: clamp(28px, 5vw, 72px);
  --fs-title: clamp(20px, 2.2vw, 34px);
  --fs-body: 18px;
  --fs-small: 13px;
  --lh-display: 0.94;
  --lh-title: 1.1;
  --lh-body: 1.4;
  --tr-display: -0.035em;
  --tr-small: 0.02em;

  --zero: 0px;
  --full: 100%;
  --vh-full: 100svh;
  --pad: clamp(16px, 2vw, 36px);
  --gap-grid: 4px;
  --sp-s: 8px;
  --sp-m: 24px;
  --sp-l: 64px;
  --sp-xl: 160px;
  --hit: 44px;
  --col-min: 180px;
  --measure-display: 1180px;
  --head-space: calc(var(--fs-display) * var(--lh-display) * 2 + var(--pad) * 3);
  --w-col-1: 100%;
  --w-col-2: calc((100% - var(--gap-grid)) / 2);
  --w-col-3: calc((100% - var(--gap-grid) * 2) / 3);
  --rise: 60px;
  --shadow-soft: 0 var(--sp-s) var(--sp-m) var(--c-shadow);
  --shadow-none: 0 0 0 transparent;
  --z-header: 10;
  --o-dim: 0.4;

  --t-zero: 0s;
  --t-step: 0.2s;
  --t-fade: 0.8s;
  --t-wipe: 1s;
  --t-page: 0.75s;
  --t-out: 0.5s;
  --t-in: 0.75s;
  --t-stagger: 0.09s;
  --t-hover: 0.6s;
  --t-leave: 0.45s;
  --t-flip: 0.9s;
  --t-reveal: 0.9s;
  --t-reveal-text: 0.7s;
  --ease-soft: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-wipe: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-flip: cubic-bezier(0.65, 0, 0.15, 1);
}

@media (max-width: 640px) {
  :root {
    --fs-body: 16px;
    --sp-l: 40px;
    --sp-xl: 96px;
    --rise: 24px;
    --t-stagger: 0.05s;
    /* the nav shows all three items stacked (no Menu toggle), so clear three lines */
    --head-space: calc(var(--fs-display) * var(--lh-display) * 3 + var(--pad) * 2.5);
  }
}

@keyframes wipe-up { from { clip-path: inset(var(--full) 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes page-in { from { transform: translateY(var(--vh-full)); } to { transform: translateY(var(--zero)); } }

/* Base */
html, body {
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-sans);
  font-weight: var(--fw);
  -webkit-font-smoothing: antialiased;
}
.elementor .display { text-wrap: balance; }
.elementor .body { text-wrap: pretty; }
.elementor .img-tag, .elementor .caption { pointer-events: none; }
.elementor a.card-tile, .elementor a.slide { cursor: pointer; }

/* Home is a single, fixed screen: the slideshow runs, the page does not scroll, no footer */
html:has(body.home:not(.elementor-editor-active)), body.home:not(.elementor-editor-active) { height: 100%; overflow: hidden; overscroll-behavior: none; }
body.home .site-footer { display: none; }

/* Project description: justified, never hyphenated */
.elementor .project-info > .body {
  text-align: justify;
  text-wrap: wrap;
  -webkit-hyphens: none;
  hyphens: none;
}

/* Mobile only: gallery photos (projects, About) are shown whole, full width, at their own
   proportion, instead of the desktop 16:9 / 8:9 crops. Desktop is untouched. */
@media (max-width: 640px) {
  .elementor :is(.project-media, .about-media) .figure { aspect-ratio: auto; }
  .elementor :is(.project-media, .about-media) .figure .media { height: auto; object-fit: contain; }
}

/* Project names on tiles: solid colour, no difference blend, so every name is as thin as Paralumen's.
   White where the tile's bottom-left corner is dark, black elsewhere. */
.elementor .card-tile .img-tag { mix-blend-mode: normal; color: var(--c-ink); }
.elementor .card-tile:is([href*="/wine-eye/"], [href*="/flip/"], [href*="/fungus/"]) .img-tag { color: var(--c-blend); }

/* Contatti: a little more leading than the display default, so the descenders of the email
   (g, p) clear the capitals of the address line below */
body .elementor .contact-big > * { line-height: 1.08; }

/* Contatti opens on the form: its rule sits just under the three-line nav, and the email and address
   follow the form, ending with the same bottom space as the other pages */
body:is(.page-id-111, .page-id-553) .elementor .elementor-element-2192e8f { --head-space: calc(var(--fs-display) * var(--lh-display) * 3 + var(--pad) * 2.5); }
body:is(.page-id-111, .page-id-553) .elementor .contact-big.elementor-element-10f5b58 { padding-top: var(--sp-l); padding-bottom: var(--sp-l); }
/* phones: the email and address follow the Invia button at the same distance as the footer line follows
   them, and the footer keeps only its last column (the address and email are already on the page) */
@media (max-width: 640px) {
  body:is(.page-id-111, .page-id-553) .elementor .elementor-element-4a57445 { padding-bottom: 0; }
  body:is(.page-id-111, .page-id-553) .elementor .elementor-element-4a57445 .wpforms-container { margin-bottom: 0; }
  body:is(.page-id-111, .page-id-553) .site-footer .footer-col:not(:last-child) { display: none; }
}
/* desktop: the email and address sit right under the form at half the display size, so they are
   readable as soon as the page opens */
@media (min-width: 641px) {
  body:is(.page-id-111, .page-id-553) .elementor .elementor-element-2192e8f { --head-space: calc(var(--fs-head) * var(--lh-display) * 3 + var(--pad) * 1.5); }
  /* the same space as between the address and the footer line below it */
  body:is(.page-id-111, .page-id-553) .elementor .elementor-element-4a57445 { padding-bottom: var(--sp-l); }
  body:is(.page-id-111, .page-id-553) .elementor .elementor-element-4a57445 .wpforms-container { margin-bottom: 0; }
  body:is(.page-id-111, .page-id-553) .elementor .contact-big.elementor-element-10f5b58 { padding-top: 0; }
  body:is(.page-id-111, .page-id-553) .elementor .contact-big.elementor-element-10f5b58 > * { font-size: clamp(28px, 2.4vw, 40px); }
  /* they open low in the window, under the reveal trigger line, so they skip the scroll reveal */
  html.boz-js body:is(.page-id-111, .page-id-553) .elementor .contact-big.elementor-element-10f5b58 > * { opacity: 1; transform: none; }
}

/* Desktop, every page: the studio name and the nav take the size first made for About, where they fit the
   margins beside the 840px text column ("Design Studio" is about 7.2em wide). The space content leaves
   above itself for the header follows the same size. */
@media (min-width: 641px) {
  :root {
    --fs-head: clamp(20px, calc(7.2vw - 66px), 72px);
    --head-space: calc(var(--fs-head) * var(--lh-display) * 2 + var(--pad) * 3);
  }
  .site-header { --fs-display: var(--fs-head); }
}
/* Touch tablets (iPad and the like, portrait and landscape): the About size would drop to 20px there,
   too small to read at arm's length, so the name and the nav scale with the screen instead */
@media (min-width: 641px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  :root { --fs-head: clamp(32px, 4vw, 56px); }
}

/* Home slideshow fills the whole visible screen: the dynamic viewport height follows Safari's toolbars
   (the small one, 100svh, left a white band under the slides once the toolbars shrink) */
body .elementor .slideshow { height: 100vh; height: 100dvh; }

/* About (after sommella.com/about): one centred reading column of large text, a portrait,
   then short sections (awards, contacts); the project grid follows. b0a1c01 is the column's Elementor id. */
body .elementor .elementor-element-b0a1c01 {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: var(--full);
  max-width: 840px;
  margin: 0 auto;
  padding: 0 var(--pad) var(--sp-l);
  font-size: clamp(20px, 2.2vw, 32px);
  line-height: var(--lh-body);
  letter-spacing: -0.01em;
}
.elementor .elementor-element-b0a1c01 :is(p, h2) {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  color: var(--c-ink);
  text-wrap: pretty;
}
.elementor .elementor-element-b0a1c01 > p { margin-bottom: 1.5em; }
.elementor .elementor-element-b0a1c01 > .figure { margin: 0.25em 0 1.5em; }
.elementor .elementor-element-b0a1c01 > h2 { font-size: 0.8125em; margin: 1.6em 0 0.6em; }
.elementor .elementor-element-b0a1c01 > .e-con:not(.figure) { flex-direction: column; gap: 0; padding: 0; }
.elementor .elementor-element-b0a1c01 a { color: inherit; text-decoration: none; transition: opacity var(--t-fade) var(--ease-soft); }
.elementor .elementor-element-b0a1c01 a:hover { opacity: var(--o-dim); }
.boz-js .elementor .elementor-element-b0a1c01 > :not(.figure) {
  opacity: 0;
  transform: translateY(var(--rise));
  transition: opacity var(--t-reveal-text) var(--ease-soft), transform var(--t-reveal-text) var(--ease-soft);
}
.boz-js .elementor .elementor-element-b0a1c01 > .is-in:not(.figure), .boz-reveal-all .elementor .elementor-element-b0a1c01 > :not(.figure) { opacity: 1; transform: translateY(var(--zero)); }
@media (prefers-reduced-motion: reduce) {
  .boz-js .elementor .elementor-element-b0a1c01 > :not(.figure) { opacity: 1; transform: none; transition: none; }
}

/* About portrait: the square shot, whole and square on every device, so it never fills the window and
   white page shows above and below it while scrolling (the vertical shot stays in the page, unused) */
/* as wide as the text column, whole (hair to the hands and the top of the legs) */
body .elementor .figure.elementor-element-b0a1c14 { aspect-ratio: 1 / 1; }
body .elementor .elementor-element-b0a1c14 > .media:nth-child(2) { display: none; }

/* About bio: justified like the project descriptions, never hyphenated */
body .elementor [data-interaction-id="b0a1c11"] { text-align: justify; text-wrap: wrap; -webkit-hyphens: none; hyphens: none; }

/* Paralumen: photos and clips side by side, all square (photo | sheet-metal clip, then candle clip | photo) */
body .elementor .figure:is(.elementor-element-c7fdde4, .elementor-element-b0a2f05, .elementor-element-b0a2f02, .elementor-element-a469796, .elementor-element-b0a2f09, .elementor-element-b0a2f0c) { aspect-ratio: 1 / 1; }
/* phones: these square frames are filled edge to edge (no white side bands from the phone "whole photo"
   rule); photo 1 becomes 3:4 and keeps its right side, so the candle holder sits in the middle */
@media (max-width: 640px) {
  body .elementor .figure:is(.elementor-element-c7fdde4, .elementor-element-b0a2f05, .elementor-element-b0a2f02, .elementor-element-a469796, .elementor-element-b0a2f09, .elementor-element-b0a2f0c) .media { height: 100%; object-fit: cover; }
  body .elementor .figure.elementor-element-c7fdde4 { aspect-ratio: 3 / 4; }
  body .elementor .figure.elementor-element-c7fdde4 .media { object-position: 100% 50%; }
}

/* Home slideshow: no "01 / 07" counter, on any device (the caption keeps only the project name) */
body .elementor .slideshow .caption > span:last-child { visibility: hidden; }
/* in its place, the language switch: same type as the caption, the current language dimmed */
body .elementor .slideshow .caption > span.lang-switch { visibility: visible; pointer-events: auto; position: relative; z-index: 2; }
body .elementor .slideshow .caption > span.lang-switch a { color: inherit; text-decoration: none; transition: opacity var(--t-fade) var(--ease-soft); }
body .elementor .slideshow .caption > span.lang-switch a[aria-current] { opacity: var(--o-dim); }
@media (hover: hover) { body .elementor .slideshow .caption > span.lang-switch a:hover { opacity: var(--o-dim); } }

/* Home, portrait slideshow: the Fungus slide shows the mushroom render, the pot centred */
body .elementor .slideshow .elementor-element-65c5a30 .media-tall { object-position: 47% 50%; }

/* Nothing parfum: the lab and the funnels renders were widened to 16:9 with their own background, so the
   desktop frame shows them whole; on mobile the added side bands are cropped back to the original 2041:1440 */
@media (max-width: 640px) {
  body .elementor .figure:is(.elementor-element-398ae67, .elementor-element-a409e32) .media { aspect-ratio: 2041 / 1440; object-fit: cover; }
}

/* Clips lie over their still frame and fade in only once they play (boz.js adds .is-playing):
   a phone holding autoplay back shows the still frame, never a blank box */
body .elementor :is(.slide, .hero-media, .figure) > video.media.clip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
body .elementor :is(.slide, .hero-media, .figure) > video.media.clip.is-playing { opacity: 1; }
/* and no controls: hide the start button iOS draws over a video it holds back (Low Power Mode) */
.elementor video.media::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.elementor video.media::-webkit-media-controls-overlay-play-button { display: none !important; }
.elementor video.media::-webkit-media-controls { display: none !important; }

/* About: the 8th tile of the project grid closes the last row, a "Coming soon" placeholder
   (c0f1a90 is its Elementor id). Grey as the backdrop of the Urban Nomadism cover; on hover it turns
   white and "Coming soon" fades in. Touch screens, with no hover, show the words on the grey. */
body .elementor .card-tile.elementor-element-c0f1a90 {
  aspect-ratio: 1 / 1;
  align-items: center;
  justify-content: center;
  background: #e2e2e2;
  cursor: default;
  transition: background-color var(--t-hover) var(--ease-soft);
}
body .elementor .elementor-element-c0f1a90 .img-tag {
  position: static;
  padding: 0;
  background: none !important;
  box-shadow: none;
  color: var(--c-ink);
  mix-blend-mode: normal;
  font-size: var(--fs-title);
  letter-spacing: var(--tr-display);
  text-transform: none;
}
/* the next project, blurred, under the tile; on hover it dissolves into white */
body .elementor .card-tile.elementor-element-c0f1a90 { position: relative; overflow: hidden; }
body .elementor .card-tile.elementor-element-c0f1a90::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("boz-coming-soon-blur.webp") center / cover no-repeat;
  transition: opacity 0.9s cubic-bezier(0.45, 0, 0.25, 1);
}
body .elementor .elementor-element-c0f1a90 .img-tag { position: relative; z-index: 1; }
@media (hover: none) {
  body .elementor .elementor-element-c0f1a90 .img-tag { color: var(--c-blend); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }
}
@media (hover: hover) {
  body .elementor .grid .card-tile.elementor-element-c0f1a90:hover::before { opacity: 0; }
  /* same slow dissolve as the project overlays: grey to white and the words, together */
  .boz-js body .elementor .grid .card-tile.elementor-element-c0f1a90 {
    transition: opacity var(--t-in) var(--ease-soft), background-color 0.9s cubic-bezier(0.45, 0, 0.25, 1), box-shadow 0.9s cubic-bezier(0.45, 0, 0.25, 1);
  }
  body .elementor .elementor-element-c0f1a90 .img-tag { opacity: 0; transition: opacity 0.9s cubic-bezier(0.45, 0, 0.25, 1); }
  body .elementor .grid .card-tile.elementor-element-c0f1a90:hover { background: var(--c-bg); box-shadow: var(--shadow-none); }
  body .elementor .card-tile.elementor-element-c0f1a90:hover .img-tag { opacity: 1; }
}

/* Client name in the project sheet links to the client's site */
.elementor .meta-val a { color: inherit; transition: opacity var(--t-fade) var(--ease-soft); }
.elementor .meta-val a:hover { opacity: var(--o-dim); }

/* Content that is not built in Elementor (blog, posts) clears the overlay header */
body:not(.elementor-page) #page { padding-top: var(--head-space); }

/* Header (Header.dc.html) */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-m);
  padding: var(--pad);
  color: var(--c-blend);
  mix-blend-mode: difference;
  pointer-events: none;
  font-family: var(--f-sans);
  font-weight: var(--fw);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  view-transition-name: boz-header;
}
body.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }
.site-header a, .site-header button { color: var(--c-blend); pointer-events: auto; text-decoration: none; }
.site-header a:hover, .site-header a:focus { color: var(--c-blend); }
.site-header .brand { display: flex; flex-direction: column; transition: opacity var(--t-fade) var(--ease-soft); }
/* the studio name links to Home: same hover feedback as the nav links (pointer devices only) */
@media (hover: hover) { .site-header .brand:hover { opacity: var(--o-dim); } }
.site-header .nav-wrap { display: flex; flex-direction: column; align-items: flex-end; }
.site-header .nav { display: flex; flex-direction: column; align-items: flex-end; }
.site-header .nav-link { display: flex; transition: opacity var(--t-fade) var(--ease-soft); }
.site-header .nav-link:hover, .site-header .nav-link.is-active { opacity: var(--o-dim); }
.site-header .menu-toggle {
  display: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  cursor: pointer;
}
.site-header .menu-toggle:hover, .site-header .menu-toggle:focus { background: none; color: var(--c-blend); }
.site-header.is-intro .nav-link, .site-header.is-intro .menu-toggle { opacity: 0; animation: fade-in var(--t-fade) var(--ease-soft) forwards; }
.site-header.is-intro .nav-link:nth-child(1), .site-header.is-intro .menu-toggle { animation-delay: calc(var(--t-step) * 1); }
.site-header.is-intro .nav-link:nth-child(2) { animation-delay: calc(var(--t-step) * 2); }
.site-header.is-intro .nav-link:nth-child(3) { animation-delay: calc(var(--t-step) * 3); }
.site-header.is-intro .nav-link:nth-child(4) { animation-delay: calc(var(--t-step) * 4); }

/* Footer (Footer.dc.html) */
.site-footer {
  display: flex;
  flex-direction: column;
  gap: var(--sp-l);
  /* no top padding: the last section's own bottom space (--sp-l) is the gap above the three columns */
  padding: 0 var(--pad) var(--pad);
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-sans);
  font-weight: var(--fw);
  line-height: var(--lh-body);
}
.site-footer .footer-row { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--sp-m); }
.site-footer .footer-col {
  display: flex;
  flex-direction: column;
  flex: 1 1 var(--col-min);
  font-size: var(--fs-small);
  letter-spacing: var(--tr-small);
  text-transform: uppercase;
}
.site-footer a { color: var(--c-ink); text-decoration: none; transition: opacity var(--t-fade) var(--ease-soft); }
.site-footer a:hover { color: var(--c-ink); opacity: var(--o-dim); }
@media (max-width: 640px) { .site-footer .footer-col { flex: 1 1 40%; } }
/* Desktop: first column on the left margin, last on the right margin (right-aligned), the middle one
   centred in the space between them */
@media (min-width: 641px) {
  .site-footer .footer-row { justify-content: space-between; }
  .site-footer .footer-col { flex: 0 0 auto; }
  .site-footer .footer-col:last-child { text-align: right; }
}

/* Page transition (Sito.dc.html slot slide-up), cross-document */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: page-in var(--t-page) var(--ease-soft) both; }
::view-transition-group(boz-header) { animation: none; z-index: var(--z-header); }

/* Home slideshow (Home.dc.html) */
.boz-js .elementor .slideshow .slide { visibility: hidden; }
.boz-js .elementor .slideshow .slide.is-prev { visibility: visible; z-index: 1; }
.boz-js .elementor .slideshow .slide.is-current { visibility: visible; z-index: 2; animation: wipe-up var(--t-wipe) var(--ease-wipe) both; }
.boz-js .elementor .slideshow .caption { opacity: 0; transition: opacity var(--t-fade) var(--ease-soft); }
.boz-js .elementor .slideshow .caption.is-ready { opacity: 1; }

/* Project grid (Progetti.dc.html) */
.boz-js .elementor .grid .card-tile {
  box-shadow: var(--shadow-none);
  transition: opacity var(--t-in) var(--ease-soft), box-shadow var(--t-hover) var(--ease-soft);
}
.elementor .grid.is-dense .card-tile { flex-basis: var(--w-col-3); }
@media (max-width: 640px) { .elementor .grid.is-dense .card-tile { flex-basis: var(--w-col-2); } }
@media (hover: hover) { .elementor .grid .card-tile:hover { box-shadow: var(--shadow-soft); } }
/* the white overlay with the project name dissolves in and out slowly, on every project grid */
.elementor .tile-overlay { transition: opacity 0.9s cubic-bezier(0.45, 0, 0.25, 1); }
.elementor .grid .d-0 { transition-delay: var(--t-zero), var(--t-zero); }
.elementor .grid .d-1 { transition-delay: calc(var(--t-stagger) * 1), var(--t-zero); }
.elementor .grid .d-2 { transition-delay: calc(var(--t-stagger) * 2), var(--t-zero); }
.elementor .grid .d-3 { transition-delay: calc(var(--t-stagger) * 3), var(--t-zero); }
.elementor .grid .d-4 { transition-delay: calc(var(--t-stagger) * 4), var(--t-zero); }
.elementor .grid .d-5 { transition-delay: calc(var(--t-stagger) * 5), var(--t-zero); }
.elementor .grid .d-6 { transition-delay: calc(var(--t-stagger) * 6), var(--t-zero); }
.elementor .grid .d-7 { transition-delay: calc(var(--t-stagger) * 7), var(--t-zero); }
.elementor .grid.is-out .card-tile { opacity: 0; transition: opacity var(--t-out) var(--ease-soft); transition-delay: var(--t-zero); }
.elementor .grid.is-pre .card-tile { opacity: 0; transition: none; }
.elementor .grid.is-leaving .card-tile { opacity: 0; transition: opacity var(--t-leave) var(--ease-soft); transition-delay: var(--t-zero); }
.elementor .grid.is-leaving .card-tile.is-chosen { opacity: 1; box-shadow: var(--shadow-none); }
.elementor .grid.is-leaving .card-tile.is-chosen .tile-overlay { opacity: 0; transition: none; }
.grid-controls {
  position: sticky;
  bottom: 0;
  align-self: flex-end;
  z-index: 3;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-s);
  padding: var(--pad);
  color: var(--c-blend);
  mix-blend-mode: difference;
  font-size: var(--fs-small);
  letter-spacing: var(--tr-small);
  text-transform: uppercase;
}
.grid-controls .grid-option {
  display: flex;
  align-items: center;
  min-height: var(--hit);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--c-blend);
  opacity: var(--o-dim);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: opacity var(--t-hover) var(--ease-soft);
}
.grid-controls .grid-option:hover, .grid-controls .grid-option:focus, .grid-controls .grid-option.is-active { opacity: 1; background: none; color: var(--c-blend); }
.boz-sentinel { display: flex; height: 1px; }

/* Reveal (Sito.dc.html .reveal-img / .reveal-text) */
.boz-js .elementor :is(.statement, .info-label, .info-item, .info-body > .title, .gallery-caption, .contact-big > *, .project-title, .meta-list, .project-info > .body, .others .view-bar, .others .card-tile) {
  opacity: 0;
  transform: translateY(var(--rise));
  transition: opacity var(--t-reveal-text) var(--ease-soft), transform var(--t-reveal-text) var(--ease-soft);
}
.boz-js .elementor .figure {
  opacity: 0;
  transform: translateY(var(--rise));
  clip-path: inset(0 0 var(--full) 0);
  transition: opacity var(--t-reveal) var(--ease-soft), transform var(--t-reveal) var(--ease-soft), clip-path var(--t-reveal) var(--ease-soft);
}
.boz-js .elementor .is-in:is(.statement, .info-label, .info-item, .info-body > .title, .gallery-caption, .contact-big > *, .project-title, .meta-list, .project-info > .body, .others .view-bar, .others .card-tile, .figure),
.boz-reveal-all .elementor :is(.statement, .info-label, .info-item, .info-body > .title, .gallery-caption, .contact-big > *, .project-title, .meta-list, .project-info > .body, .others .view-bar, .others .card-tile, .figure) {
  opacity: 1;
  transform: translateY(var(--zero));
}
/* Only photos are clipped: on text the clip would cut descenders (the g of gmail) below the tight display line-height */
.boz-js .elementor .figure.is-in, .boz-reveal-all .elementor .figure { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-new(root) { animation: none; }
  .site-header.is-intro .nav-link, .site-header.is-intro .menu-toggle, .site-header.is-open .nav-link { animation: none !important; opacity: 1; }
  .boz-js .elementor .slideshow .slide.is-current { animation: none; }
  .boz-js .elementor .slideshow .caption { opacity: 1; }
  .boz-js .elementor :is(.statement, .info-label, .info-item, .info-body > .title, .gallery-caption, .contact-big > *, .project-title, .meta-list, .project-info > .body, .others .view-bar, .others .card-tile, .figure) { opacity: 1; transform: none; clip-path: none; transition: none; }
}

/* Privacy and cookie policy (plain WordPress pages, IT 3 / EN 569): same top space as the other
   pages, a readable measure, the site's type */
body:is(.page-id-3, .page-id-569) .site-content { padding-top: clamp(24px, 3vw, 48px); }
body:is(.page-id-3, .page-id-569) #primary { margin-top: 0; }
body:is(.page-id-3, .page-id-569) :is(.entry-header, .entry-content) { max-width: 720px; }
body:is(.page-id-3, .page-id-569) .entry-title { font-size: clamp(28px, 2.4vw, 40px); letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 0.6em; }
body:is(.page-id-3, .page-id-569) .entry-content { font-size: 16px; line-height: 1.55; color: var(--c-ink); }
body:is(.page-id-3, .page-id-569) .entry-content h2 { font-size: 20px; line-height: 1.25; margin: 2em 0 0.5em; }
body:is(.page-id-3, .page-id-569) .entry-content :is(p, ul) { margin-bottom: 0.9em; }
body:is(.page-id-3, .page-id-569) .entry-content a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
body:is(.page-id-3, .page-id-569) .boz-legal-date { opacity: 0.6; }
/* footer link to the policy, and the note under the contact form */
.site-footer .footer-legal { opacity: 0.6; }
body .elementor .wpforms-container .boz-form-privacy, .boz-form-privacy { font-size: 13px; line-height: 1.4; opacity: 0.7; margin: 0 0 12px; }
.boz-form-privacy a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* About, phones only: no site footer at the bottom of the page */
@media (max-width: 640px) {
  body:is(.page-id-107, .page-id-552) .site-footer { display: none; }
}
/* contact form: sub-labels and the button text dark enough to read (WCAG AA contrast) */
body .elementor .wpforms-container .wpforms-field-sublabel { color: #595959; }
body .elementor div.wpforms-container-full .wpforms-form button[type=submit].wpforms-submit:not(:hover):not(:focus) { color: #333333; }