/* ==========================================================================
   Andrea Buglione — night blue & star gold
   Breakpoints: medium 740px · large 1080px · xlarge 1200px
   Fonts: Newsreader (stands in for Signifier), DM Sans (stands in for Matter)
   ========================================================================== */

:root {
  --brand: #0D1B3E;       /* night blue: background */
  --gold: #E8C468;        /* star gold: headings, lines, buttons */
  --gold-soft: #F1E2B5;   /* body text, easier on the eyes in long paragraphs */
  --panel: #17284F;       /* slightly lighter night blue: slide-in panels (menu, contacts) */
  --pale: #F6EFDD;        /* cream: photo / preview placeholders */
  /* keep in sync with the palette in _src/illustrations.py */
  --serif: "Newsreader", "Times New Roman", serif;
  --sans: "DM Sans", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Reset ---------- */
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }
html { scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin: 0; }
*, *::before, *::after { box-sizing: border-box; }
figure, h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { max-width: 100%; height: auto; border: 0; }
a { color: inherit; text-decoration: none; }
a:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
button { font: inherit; }

body {
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.38889;
  font-weight: 400;
  color: var(--gold-soft);
  background: var(--brand);
}
.l-header__logo a, .l-header__menu a, .btn--pill,
.block-intro__title, .block-intro__text, .block-lead__text, .block-text-image__title,
.block-list__title, .c-list__title, .block-slideshow__title, .block-cta__title, .block-project__title,
.block-text-image__text a, .block-slideshow__text a, .block-project__sub-title a { color: var(--gold); }
body.panel-is-active, body.nav-is-active { overflow: hidden; }

/* ---------- Grid (Foundation-style floats) ---------- */
.container { max-width: 1140px; padding: 0 3.50877%; margin: 0 auto; box-sizing: content-box !important; }
.row { max-width: 1140px; margin: 0 auto; }
.row::before, .row::after { display: table; content: " "; }
.row::after { clear: both; }
.row .row { max-width: none; margin: 0 -0.625rem; }
.columns { width: 100%; float: left; padding: 0 0.625rem; }
.small-centered { margin-left: auto; margin-right: auto; float: none; clear: both; }
.small-4 { width: 33.33333%; }
.small-6 { width: 50%; }
.small-11 { width: 91.66667%; }
.small-12 { width: 100%; }
.u-relative { position: relative; }

@media screen and (max-width: 74.99875em) { .container { padding: 0 50px; } }
@media screen and (max-width: 46.24875em) { .container { padding: 0 20px; } }

@media (min-width: 46.25em) {
  .columns { padding: 0 0.875rem; }
  .row .row { margin: 0 -0.875rem; }
  .medium-6 { width: 50%; }
  .medium-7 { width: 58.33333%; }
  .medium-5 { width: 41.66667%; }
  .medium-8 { width: 66.66667%; }
  .medium-offset-1 { margin-left: 8.33333%; }
  .medium-centered { margin-left: auto; margin-right: auto; float: none; clear: both; }
}

@media (min-width: 67.5em) {
  .large-8 { width: 66.66667%; }
}

@media (min-width: 75em) {
  .xlarge-4 { width: 33.33333%; }
  .xlarge-5 { width: 41.66667%; }
  .xlarge-6 { width: 50%; }
  .xlarge-8 { width: 66.66667%; }
  .xlarge-10 { width: 83.33333%; }
  .xlarge-offset-1 { margin-left: 8.33333%; }
  .xlarge-push-7 { position: relative; left: 58.33333%; }
  .xlarge-pull-3 { position: relative; left: -25%; }
  .xlarge-pull-4 { position: relative; left: -33.33333%; }
  .xlarge-uncentered { float: left; clear: none; margin-left: 0; margin-right: 0; }
  .xlarge-uncentered.xlarge-offset-1 { margin-left: 8.33333%; }
}

.table { display: table; width: 100%; height: 100%; }
.table__cell { display: table-cell; vertical-align: middle; width: 100%; height: 100%; }

@media (min-width: 46.25em) { .hide-for--medium { display: none !important; } }
@media screen and (max-width: 46.24875em) { .show-for--medium { display: none !important; } }

/* ---------- Typography helpers ---------- */
.serif { font-family: var(--serif); letter-spacing: -0.02em; font-weight: 300; font-optical-sizing: auto; }

/* ---------- Pill button ---------- */
.btn--pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: 53px; padding: 0 35px;
  border: 1px solid var(--gold); border-radius: 53px;
  transition: ease all 300ms;
}
.btn--pill:hover { background-color: var(--gold); color: var(--brand); }

/* ---------- Page transition + overlay ---------- */
.site-transition {
  position: fixed; inset: 0; z-index: 45;
  background-color: var(--brand); height: 0; opacity: 0;
  transition: ease opacity 400ms;
}
.is-exiting * { cursor: progress; }
.is-exiting .site-transition { opacity: 1; height: 100% !important; }

.site-overlay {
  position: fixed; inset: 0; z-index: 125;
  background-color: rgba(13, 27, 62, 0.6); backdrop-filter: blur(5px);
  display: none; opacity: 0; transition: opacity 400ms ease;
}
.site-overlay.is-visible { opacity: 1; }

/* ---------- Layout ---------- */
.l-main { position: relative; z-index: 10; }
@media screen and (max-width: 74.99875em) { .l-main { max-width: 740px; margin: 0 auto; } }
@media screen and (max-width: 46.24875em) { .l-main { max-width: 375px; } }

.l-header { position: absolute; top: 0; left: 0; right: 0; padding-top: 55px; z-index: 100; }
@media screen and (max-width: 74.99875em) { .l-header { padding-top: 30px; } }
@media screen and (max-width: 46.24875em) { .l-header { padding-top: 40px; z-index: 200; } }
.l-header .row { display: flex; align-items: center; }
.l-header__logo a {
  display: block; font-family: var(--serif); font-weight: 300; letter-spacing: -0.02em;
  font-size: 2.125rem; line-height: 43px; white-space: nowrap; transition: ease color 250ms;
}
@media screen and (max-width: 46.24875em) { .l-header__logo a { font-size: 1.75rem; line-height: 34px; } }
.l-header__right { display: flex; align-items: center; justify-content: flex-end; text-align: right; }
.l-header__right svg { display: block; margin-left: auto; }
.l-header__menu { margin: 0 30px 0 0; display: flex; list-style: none; padding: 0; }
@media screen and (max-width: 46.24875em) { .l-header__menu { display: none; } }

.l-header__burger { position: fixed; top: 25px; right: 30px; z-index: 100; }
/* visible only near the top of the page, or while a panel is open (then it is the X that closes it) */
.l-header__burger { transition: opacity 250ms ease, visibility 250ms; }
.is-scrolled:not(.nav-is-active):not(.panel-is-active) .l-header__burger { opacity: 0; visibility: hidden; pointer-events: none; }
.l-header__burger path { transition: ease all 250ms; }
.l-header__burger .burger-cls-3 { transform-box: fill-box; transform-origin: center; }
@media screen and (max-width: 46.24875em) {
  .nav-is-active .l-header__logo a { color: var(--gold); }
}
/* the burger becomes an X whenever a panel is open (menu or contacts) */
.nav-is-active .l-header__burger .burger-cls-3:nth-of-type(1),
.panel-is-active .l-header__burger .burger-cls-3:nth-of-type(1) { transform: translateY(8.4px) rotate(45deg); }
.nav-is-active .l-header__burger .burger-cls-3:nth-of-type(2),
.panel-is-active .l-header__burger .burger-cls-3:nth-of-type(2) { opacity: 0; }
.nav-is-active .l-header__burger .burger-cls-3:nth-of-type(3),
.panel-is-active .l-header__burger .burger-cls-3:nth-of-type(3) { transform: translateY(-8.4px) rotate(-45deg); }

.l-footer { padding-bottom: 25px; text-align: center; line-height: 1.42857; font-size: 0.625rem; }
.l-footer { z-index: 20; }
.l-footer a { color: var(--gold-soft); transition: color 200ms ease; }
.l-footer a:hover { color: var(--gold); }
@media screen and (min-width: 75em) { .l-footer { padding-bottom: 50px; } }

/* Slide-in panels: mobile nav + contact panel */
.l-nav, .c-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 150;
  width: 100%; height: 100%; overflow: auto; padding-top: 80px;
  background: var(--panel); color: var(--gold-soft);
  box-shadow: -1px 0 0 rgba(232, 196, 104, 0.25);
  transform: translateX(100%);
  transition: cubic-bezier(0.23, 1, 0.32, 1) 600ms transform;
}
@media (min-width: 46.25em) { .l-nav, .c-panel { width: 570px; } }
@media (min-width: 75em) { .l-nav, .c-panel { width: 625px; } }
.nav-is-active .l-nav, .panel-is-active .c-panel { transform: translateX(0); }

.l-nav__inner, .c-panel__inner { height: 100%; margin: 0 auto; padding: 0 70px; }
@media screen and (max-width: 74.99875em) { .l-nav__inner, .c-panel__inner { padding: 0 55px; } }
@media screen and (max-width: 46.24875em) { .l-nav__inner, .c-panel__inner { padding-left: 30px; padding-right: 30px; } }

.l-nav__menu { margin: 0; list-style: none; font-family: var(--serif); letter-spacing: -0.02em; font-weight: 300; line-height: 1.3125; font-size: 2rem; }
@media screen and (min-width: 75em) { .l-nav__menu { line-height: 1.28846; font-size: 3.25rem; } }
@media screen and (max-width: 74.99875em) { .l-nav__menu { line-height: 1.37705; font-size: 3.8125rem; } }
@media screen and (min-width: 75em) { .l-nav__menu { line-height: 1.29231; font-size: 4.0625rem; } }

.l-nav__bottom, .c-panel__bottom {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 60px 70px;
  line-height: 1.33333; font-size: 0.75rem;
}
@media screen and (max-width: 74.99875em) { .l-nav__bottom, .c-panel__bottom { padding: 40px 55px; } }
@media screen and (max-width: 46.24875em) { .l-nav__bottom, .c-panel__bottom { padding: 35px 30px; } }
/* same closing line everywhere (footer, menu, contact panel): the email, plain */
.l-nav__bottom a, .c-panel__bottom a { color: var(--gold-soft); transition: color 200ms ease; }
.l-nav__bottom a:hover, .c-panel__bottom a:hover { color: var(--gold); }
/* same legal line as the site footer, centred */
.l-nav__bottom, .c-panel__bottom { text-align: center; text-wrap: balance; }

.l-nav__menu, .c-panel__title, .c-panel__text a { color: var(--gold); }
.c-panel__title { position: relative; margin-bottom: 25px; font-family: var(--serif); letter-spacing: -0.02em; font-weight: 300; line-height: 1.29231; font-size: 4.0625rem; }
@media screen and (max-width: 74.99875em) { .c-panel__title { line-height: 1.37705; font-size: 3.8125rem; } }
.c-panel__title svg { width: 129.09px; height: 101.41px; position: absolute; top: -125px; left: -10px; }
.c-panel__text { line-height: 1.38889; font-size: 1.125rem; }
@media screen and (max-width: 74.99875em) { .c-panel__text { line-height: 1.625; font-size: 1rem; } }
.c-panel__text a { border-bottom: 1px solid; }
/* The contact panel holds a form: it is a column that can grow and scroll, with the legal line at its end
   (the menu panel keeps the original fixed layout). */
.c-panel { display: flex; flex-direction: column; }
.c-panel__inner { flex: 1 0 auto; width: 100%; height: auto; display: flex; align-items: center; }
.c-panel__inner .table { height: auto; }
.c-panel__inner .table__cell { padding: 70px 0 10px; }       /* room for the arrow drawn above the title */
.c-panel__bottom { position: static; padding-top: 30px; }
.c-panel__text { font-size: 0.875rem; line-height: 1.7; }
@media screen and (max-width: 46.24875em) {
  .c-panel__title { margin-bottom: 15px; line-height: 1.2; font-size: 3rem; }
  .c-panel__title svg { display: none; }            /* no room for the arrow: the logo sits right above */
  .c-panel__inner { align-items: flex-start; }
  .c-panel__inner .table__cell { padding-top: 25px; }
}

/* ---------- Contact form ---------- */
.c-form { margin: 0 0 28px; }
.c-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.c-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
@media screen and (max-width: 46.24875em) { .c-form__row { grid-template-columns: 1fr; } }
.c-field { display: block; margin-bottom: 18px; }
.c-field > span, .c-form__chips legend { display: block; margin-bottom: 4px; padding: 0; line-height: 1.4; font-size: 0.8125rem; color: var(--gold-soft); opacity: 0.8; }
.c-field input, .c-field textarea {
  display: block; width: 100%; padding: 6px 0 9px; margin: 0;
  border: 0; border-bottom: 1px solid rgba(232, 196, 104, 0.4); border-radius: 0;
  background: transparent; color: var(--gold-soft); font: inherit; font-size: 1rem; line-height: 1.4;
  -webkit-appearance: none; appearance: none; transition: border-color 200ms ease;
}
.c-field textarea { resize: vertical; min-height: 84px; }
.c-field input:focus, .c-field textarea:focus { outline: none; border-bottom-color: var(--gold); box-shadow: 0 1px 0 var(--gold); }
.c-field input:-webkit-autofill { -webkit-text-fill-color: var(--gold-soft); caret-color: var(--gold-soft); transition: background-color 99999s ease-in-out 0s; }
.c-form__chips { min-width: 0; margin: 4px 0 20px; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.c-form__chips legend { margin-bottom: 10px; }
.c-chip { position: relative; cursor: pointer; }
.c-chip input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.c-chip span {
  display: inline-flex; align-items: center; height: 38px; padding: 0 18px;
  border: 1px solid rgba(232, 196, 104, 0.55); border-radius: 38px; color: var(--gold);
  font-size: 0.9375rem; transition: ease all 200ms;
}
@media screen and (max-width: 46.24875em) { .c-form__chips { gap: 6px; } .c-chip span { padding: 0 13px; } }   /* four choices, one row */
.c-chip:hover span { border-color: var(--gold); }
.c-chip input:checked + span { background: var(--gold); border-color: var(--gold); color: var(--brand); }
.c-chip input:focus-visible + span { outline: 2px solid var(--gold-soft); outline-offset: 3px; }
.c-form__actions { display: flex; align-items: center; gap: 18px; margin-top: 6px; }
.c-form__send { background: transparent; color: var(--gold); cursor: pointer; height: 48px; padding: 0 32px; }
.c-form__send[disabled] { opacity: 0.5; cursor: default; }
.c-form__status { flex: 1; margin: 0; line-height: 1.4; font-size: 0.875rem; color: var(--gold-soft); }
.c-form__status a { color: var(--gold); border-bottom: 1px solid; }

.c-panel__close { position: fixed; top: 30px; right: 40px; }
@media screen and (min-width: 75em) { .c-panel__close { top: 55px; right: 75px; } }
@media screen and (max-width: 46.24875em) { .c-panel__close { display: none; } }

/* ---------- Intrinsic images ---------- */
.intrinsic-image { position: relative; background: var(--panel); overflow: hidden; }
.intrinsic-image--transparent { background-color: transparent; }
.intrinsic-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.intrinsic-image .lazy { will-change: opacity; transition: ease 500ms opacity; transition-delay: 150ms; opacity: 0; }
.intrinsic-image .lazy.lazyloaded { opacity: 1; }

/* ==========================================================================
   Home — fixed-height canvas, sections absolutely placed
   ========================================================================== */
/* total height of the page: it ends about 110px below the last button, then the footer line */
.site.home { position: relative; height: 6495px; }
@media screen and (min-width: 46.25em) { .site.home { height: 6535px; } }
@media screen and (min-width: 75em) { .site.home { height: 6085px; } }
.site.home .l-footer { position: absolute; bottom: 0; left: 0; right: 0; }

/* Intro */
.block-intro { text-align: center; padding-top: 175px; margin-bottom: 225px; }
@media (min-width: 46.25em) { .block-intro { padding-top: 200px; } }
@media (min-width: 75em) { .block-intro { padding-top: 270px; } }
.site.home .block-intro { position: absolute; left: 0; right: 0; }
.block-intro__title { margin-bottom: 20px; font-family: var(--serif); letter-spacing: -0.02em; font-weight: 300; line-height: 1.08197; font-size: 3.8125rem; }
@media (min-width: 75em) { .block-intro__title { line-height: 1.00833; font-size: 7.5rem; margin-bottom: 30px; } }
.block-intro__text { font-family: var(--serif); letter-spacing: -0.02em; font-weight: 300; line-height: 1.25; font-size: 1.25rem; }
@media (min-width: 75em) { .block-intro__text { line-height: 1.46429; font-size: 1.75rem; } }
/* Hand-drawn marks are anchored to the word they decorate, so they follow any copy */
.ring-word, .line-word { position: relative; white-space: nowrap; }
.ring-word svg { position: absolute; left: 50%; top: 50%; width: max(150%, 3.6em); height: auto; max-width: none; transform: translate(-50%, -50%); pointer-events: none; }
.line-word svg { position: absolute; left: 0; bottom: -5px; width: 100%; height: auto; max-width: none; pointer-events: none; }
.block-intro__arrow { position: absolute; left: -105px; bottom: -140px; width: 170.5px; }
@media screen and (max-width: 74.99875em) { .block-intro__arrow { display: none; } }

/* Intro — Work page variant */
.block-intro--alt .block-intro__arrow { position: absolute; left: calc(100% - 200px); bottom: -200px; width: 264px; }
.block-intro--alt .block-intro__arrow svg { display: block; }
.block-intro--alt .block-intro__text .line-word svg { bottom: -8px; }
.block-intro--alt .block-intro__title .ring-word svg { width: max(118%, 2.2em); }
@media screen and (max-width: 74.99875em) { .block-intro--alt .ring-word svg, .block-intro--alt .line-word svg { display: none; } }
@media screen and (max-width: 46.24875em) { .projects .block-intro { margin-bottom: 75px; } }

/* Lead statement */
.block-lead { position: absolute; top: 810px; left: 0; right: 0; text-align: center; }
@media (min-width: 75em) { .block-lead { top: 1180px; } }
.block-lead__text { font-family: var(--serif); letter-spacing: -0.02em; font-weight: 300; line-height: 1.3125; font-size: 2rem; }
@media (min-width: 75em) { .block-lead__text { line-height: 1.28846; font-size: 3.25rem; } }

/* Text + image (value, founder) */
.block-text-image { position: absolute; left: 0; right: 0; }
@media (min-width: 75em) { .block-text-image .row { display: flex; align-items: center; } }
.block-text-image--value { top: 1280px; }
@media (min-width: 75em) { .block-text-image--value { top: 1780px; } }
.block-text-image--founder { top: 4540px; }
@media (min-width: 75em) { .block-text-image--founder { top: 4575px; } }
.block-text-image__pre-title { margin-bottom: 12px; line-height: 1.375; font-size: 1rem; }
@media (min-width: 75em) { .block-text-image__pre-title { line-height: 1.38889; font-size: 1.125rem; margin-bottom: 10px; } }
.block-text-image__title { margin-bottom: 20px; font-family: var(--serif); letter-spacing: -0.02em; font-weight: 300; line-height: 1.3125; font-size: 2rem; }
@media (min-width: 75em) { .block-text-image__title { line-height: 1.30952; font-size: 2.625rem; margin-bottom: 30px; } }
.block-text-image__text { line-height: 1.375; font-size: 1rem; }
@media (min-width: 75em) { .block-text-image__text { line-height: 1.38889; font-size: 1.125rem; } }
.block-text-image__text p { margin-bottom: 25px; }
.block-text-image__text a { border-bottom: 1px solid; }
.block-text-image__image { position: relative; }
@media screen and (max-width: 74.99875em) { .block-text-image__image { margin-bottom: 55px; } }
.block-text-image__swipe { position: absolute; inset: 0; background: var(--brand); z-index: 1; }

/* Services list */
.block-list { position: absolute; top: 2500px; left: 0; right: 0; }
@media (min-width: 75em) { .block-list { top: 2700px; } }
.block-list__title { margin-bottom: 20px; font-family: var(--serif); letter-spacing: -0.02em; font-weight: 300; line-height: 1.3125; font-size: 2rem; }
@media (min-width: 75em) { .block-list__title { line-height: 1.30952; font-size: 2.625rem; margin-bottom: 30px; } }
.block-list__text { line-height: 1.375; font-size: 1rem; }
@media (min-width: 75em) { .block-list__text { line-height: 1.38889; font-size: 1.125rem; } }
@media screen and (max-width: 74.99875em) { .block-list__text { margin-bottom: 55px; } }
.block-list__text p { margin-bottom: 25px; }
.block-list__list { margin: 0; list-style: none; padding: 0; }
.block-list__list li { border-bottom: 1px solid rgba(232, 196, 104, 0.35); }
.block-list__list li:first-child { border-top: 1px solid rgba(232, 196, 104, 0.35); }
.c-list { padding-top: 25px; padding-bottom: 30px; }
@media (min-width: 75em) { .c-list { padding-bottom: 40px; } }
.c-list__pre-title { margin-bottom: 10px; line-height: 1.375; font-size: 1rem; }
@media (min-width: 75em) { .c-list__pre-title { line-height: 1.38889; font-size: 1.125rem; margin-bottom: 3px; } }
.c-list__title { margin-bottom: 10px; font-family: var(--serif); letter-spacing: -0.02em; font-weight: 300; line-height: 1.30769; font-size: 1.625rem; }
@media (min-width: 75em) { .c-list__title { line-height: 1.3125; font-size: 2rem; margin-bottom: 20px; } }
.c-list__text { line-height: 1.375; font-size: 1rem; }
@media (min-width: 75em) { .c-list__text { line-height: 1.38889; font-size: 1.125rem; } }

/* Work slideshow (fade) */
.block-slideshow { position: absolute; top: 4030px; left: 0; right: 0; text-align: center; }
@media (min-width: 75em) { .block-slideshow { top: 3730px; } }
.block-slideshow__pre-title { margin-bottom: 15px; line-height: 1.375; font-size: 1rem; }
@media (min-width: 75em) { .block-slideshow__pre-title { line-height: 1.38889; font-size: 1.125rem; } }
.block-slideshow__title { margin-bottom: 30px; font-family: var(--serif); letter-spacing: -0.02em; font-weight: 300; line-height: 1.3125; font-size: 2rem; }
@media (min-width: 75em) { .block-slideshow__title { line-height: 1.30769; font-size: 4.0625rem; } }
.block-slideshow__text { line-height: 1.375; font-size: 1rem; }
@media (min-width: 75em) { .block-slideshow__text { line-height: 1.38889; font-size: 1.125rem; } }
.block-slideshow__text p { margin-bottom: 25px; }
.block-slideshow__text a { border-bottom: 1px solid; }
.block-slideshow__text a.btn--pill { border: 1px solid var(--gold); }   /* a real button, like "Scrivimi" */

.slideshow--fade { position: relative; overflow: hidden; display: grid; }
.slideshow--fade .slideshow__slide {
  grid-area: 1 / 1; display: flex; align-items: flex-start; width: 100%;
  opacity: 0; pointer-events: none; transition: opacity 1s ease;
}
.slideshow--fade .slideshow__slide.is-selected { opacity: 1; pointer-events: auto; }
.slideshow--fade.has-gsap-complete .slideshow__slide .block-slideshow__pre-title,
.slideshow--fade.has-gsap-complete .slideshow__slide .block-slideshow__title,
.slideshow--fade.has-gsap-complete .slideshow__slide .block-slideshow__text {
  opacity: 0; transform: translateY(25px); transition: ease all 250ms; transition-delay: 0ms;
}
.slideshow--fade.has-gsap-complete .slideshow__slide.is-selected .block-slideshow__pre-title,
.slideshow--fade.has-gsap-complete .slideshow__slide.is-selected .block-slideshow__title,
.slideshow--fade.has-gsap-complete .slideshow__slide.is-selected .block-slideshow__text { opacity: 1; transform: translateY(0); }
.slideshow--fade.has-gsap-complete .slideshow__slide.is-selected .block-slideshow__pre-title { transition-delay: 400ms; }
.slideshow--fade.has-gsap-complete .slideshow__slide.is-selected .block-slideshow__title { transition-delay: 800ms; }
.slideshow--fade.has-gsap-complete .slideshow__slide.is-selected .block-slideshow__text { transition-delay: 1200ms; }
.slideshow--fade { touch-action: pan-y; cursor: grab; }
.slideshow--fade.is-dragging { cursor: grabbing; }
.slideshow--single { touch-action: auto; cursor: auto; overflow: visible; }
/* Three vertical clips (9:16) between the title and the link: same size, same gaps, always in a row */
/* under 1200px the block sits a little higher: the clips make it taller and the next section is fixed */
@media screen and (max-width: 74.99875em) { .block-slideshow--clips { top: 3800px; } }
@media screen and (max-width: 46.24875em) { .block-slideshow--clips { top: 3950px; } }
/* the row has its own width (up to 560px, 30px from the screen edges), whatever the text column is */
.block-slideshow__clips {
  display: flex; justify-content: center; gap: 12px; margin: 0 0 30px;
  position: relative; left: 50%; transform: translateX(-50%); width: min(560px, calc(100vw - 60px));
}
/* phones: the page is a fixed 375px column, so the row simply fills it (it must not be sized on the screen) */
@media screen and (max-width: 46.24875em) {
  .block-slideshow__clips { left: 0; transform: none; width: auto; margin: 0 -14px 30px; }
}
@media (min-width: 46.25em) { .block-slideshow__clips { gap: 20px; margin-bottom: 40px; } }
.c-clip { flex: 1 1 0; position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 6px; background: var(--panel); }
.c-clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.slideshow__btn {
  position: absolute; top: 34%; z-index: 2; width: 18px; height: 25px; margin-top: -12px;
  border: 0; padding: 0; font-size: 0; background: transparent center center / contain no-repeat; cursor: pointer;
}
.slideshow__btn--prev { left: 10px; transform: translateX(-50%); background-image: url("../img/arrow-left.svg"); }
.slideshow__btn--next { right: 10px; transform: translateX(50%); background-image: url("../img/arrow-right.svg"); }

/* Contact CTA */
.block-cta { text-align: center; margin-bottom: 110px; margin-top: 60px; }
@media (min-width: 46.25em) { .block-cta { margin-bottom: 225px; } }
.site.home .block-cta { position: absolute; left: 0; right: 0; top: 5710px; }
@media (min-width: 75em) { .site.home .block-cta { top: 5275px; } }
.block-cta__image { max-width: 260px; margin: 0 auto 50px; }
.block-cta__pre-title { margin-bottom: 20px; line-height: 1.375; font-size: 1rem; }
@media (min-width: 75em) { .block-cta__pre-title { line-height: 1.38889; font-size: 1.125rem; } }
.block-cta__title { margin-bottom: 60px; font-family: var(--serif); letter-spacing: -0.02em; font-weight: 300; line-height: 1.3125; font-size: 2rem; }
@media (min-width: 75em) { .block-cta__title { line-height: 1.30952; font-size: 2.625rem; margin-bottom: 30px; } }

/* Hand-drawn line that traces itself on scroll */
/* decorative: it must never catch taps meant for what lies under it (e.g. the footer link) */
.site-line { pointer-events: none; }
.site-line { position: absolute; top: 430px; left: 0; right: 0; max-width: 1140px; margin: 0 auto; text-align: center; overflow: hidden; }
@media (min-width: 75em) { .site-line { top: 680px; } }
@media screen and (max-width: 74.99875em) { .site-line__desktop { display: none !important; } }
/* phones & tablets: drawn by main.js from the real layout, spans the full width */
.site-line__tablet { position: absolute; top: 0; left: 0; right: 0; }
.site-line__tablet svg { display: block; width: 100%; }
@media (min-width: 75em) { .site-line__tablet { display: none !important; } }

/* ==========================================================================
   Work page
   ========================================================================== */
.block-project { position: relative; text-align: center; padding: 80px 0 0; }
@media (min-width: 46.25em) { .block-project { padding: 90px 0; } }
@media (min-width: 46.25em) { .block-project + .block-project { margin-top: 100px; } }
/* Square preview shown on hover, always beside the title and never under it: the title column is capped
   at --text-w, the photo fills the space between the page edge (where the logo and the "Contattaci"
   button sit) and the title, 40px away from it, up to 360px. */
.block-project { --text-w: 420px; --edge: max(64px, 50vw - 556px); }
@media (min-width: 75em) { .block-project { --text-w: 540px; } }
@media (min-width: 67.5em) { .block-project__text { max-width: var(--text-w); } }
.block-project__image {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: min(360px, calc(50vw - var(--text-w) / 2 - 40px - var(--edge))); right: calc(50% + var(--text-w) / 2 + 40px);
}
.block-project__image + .container { position: relative; z-index: 10; }
.block-project__image .intrinsic-image { transform: translateX(20px); opacity: 0; transition: ease all 500ms; }
.block-project--alt .block-project__image { right: auto; left: calc(50% + var(--text-w) / 2 + 40px); }
.block-project--alt .block-project__image .intrinsic-image { transform: translateX(-20px); }
.block-project:hover .block-project__image .intrinsic-image { opacity: 1; transform: translateX(0); }
/* Phones and tablets have no hover: the square photo is always shown, above the title */
@media screen and (max-width: 67.49875em) {
  .block-project__image, .block-project--alt .block-project__image {
    position: static; transform: none; display: block; width: calc(100% - 60px); max-width: 440px; margin: 0 auto 30px;
  }
  .block-project__image .intrinsic-image, .block-project--alt .block-project__image .intrinsic-image { opacity: 1; transform: none; }
}
.block-project__title { margin-bottom: 10px; font-family: var(--serif); letter-spacing: -0.02em; font-weight: 300; line-height: 1.3125; font-size: 2rem; }
@media (min-width: 46.25em) { .block-project__title { margin-bottom: 25px; } }
@media (min-width: 75em) { .block-project__title { line-height: 1.30769; font-size: 4.0625rem; } }
.block-project__sub-title { position: relative; line-height: 1.375; font-size: 1rem; }
@media (min-width: 75em) { .block-project__sub-title { line-height: 1.38889; font-size: 1.125rem; } }
.block-project__sub-title span { transition: ease opacity 250ms; }
.block-project__sub-title span + span { border-bottom: 1px solid; position: absolute; left: 50%; transform: translateX(-50%); opacity: 0; white-space: nowrap; }
.block-project:hover .block-project__sub-title span { opacity: 0; }
.block-project:hover .block-project__sub-title span + span { opacity: 1; }
.block-project__link { position: absolute; inset: 0; z-index: 15; }
@media screen and (max-width: 67.49875em) { .block-project__link { display: none; } }

/* Avoid orphan words at the end of headings */
.block-intro__title, .block-intro__text, .block-lead__text, .block-text-image__title,
.block-slideshow__title, .block-cta__title, .block-project__title, .c-list__title { text-wrap: balance; }

/* Respect the system "reduce motion" setting (the JS also skips the scroll reveals) */
@media (prefers-reduced-motion: reduce) {
  .l-nav, .c-panel, .site-transition, .site-overlay, .btn--pill,
  .slideshow--fade .slideshow__slide, .intrinsic-image .lazy { transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
  .c-project:hover .c-project__image img { transform: none; }
}

/* ==========================================================================
   Project page
   ========================================================================== */
/* Header: client, title, service tags, then the hand-drawn arrow pointing at the sub-title */
.block-header { padding-top: 195px; }
@media (min-width: 46.25em) { .block-header { padding-top: 240px; } }
.block-header__pre-title { margin-bottom: 10px; line-height: 1.375; font-size: 1rem; }
@media (min-width: 46.25em) { .block-header__pre-title { margin-bottom: 15px; } }
@media (min-width: 75em) { .block-header__pre-title { line-height: 1.38889; font-size: 1.125rem; } }
.block-header__title {
  font-family: var(--serif); letter-spacing: -0.02em; font-weight: 300; color: var(--gold);
  line-height: 1.17391; font-size: 2.875rem; text-wrap: balance;
}
@media (min-width: 46.25em) { .block-header__title { line-height: 1.08197; font-size: 3.8125rem; } }
@media (min-width: 75em) { .block-header__title { line-height: 1.12; font-size: 5.3125rem; } }
.block-header__tags { margin: 35px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; }
.block-header__tags li { margin: 10px 10px 0 0; }
@media (min-width: 46.25em) { .block-header__tags li { margin: 15px 15px 0 0; } }
.btn-fill {
  display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 19px;
  background: rgba(232, 196, 104, 0.1); border: 1px solid rgba(232, 196, 104, 0.45);
  color: var(--gold); font-size: 0.9375rem; white-space: nowrap;
}
.block-header__lower { margin-top: 50px; }
@media (min-width: 46.25em) { .block-header__lower { display: flex; align-items: flex-end; } }
.block-header__arrow svg { display: block; width: 100%; max-width: 420px; height: auto; }
@media screen and (max-width: 46.24875em) { .block-header__arrow svg { max-width: 190px; } }
.block-header__sub-title {
  font-family: var(--serif); letter-spacing: -0.02em; font-weight: 300; color: var(--gold);
  line-height: 1.3125; font-size: 2rem; text-wrap: balance;
}
@media (min-width: 75em) { .block-header__sub-title { line-height: 1.30952; font-size: 2.625rem; } }
@media screen and (max-width: 46.24875em) { .block-header__sub-title { margin-top: 20px; } }

/* Full-width image */
.block-image { margin: 80px 0; }
@media (min-width: 46.25em) { .block-image { margin: 150px 0; } }
.block-image__image { position: relative; }

/* Text, pushed to the right on larger screens (the left column stays as breathing room) */
.block-image-text { margin: 80px 0; }
@media (min-width: 46.25em) {
  .block-image-text { margin: 150px 0; }
  .block-image-text .row { display: flex; align-items: center; }
}
.block-image-text__image:empty { display: none; }
.block-image-text__text > h2, .block-image-text__text > h3 {
  margin-bottom: 15px; font-family: var(--serif); letter-spacing: -0.02em; font-weight: 300; color: var(--gold);
  line-height: 1.3125; font-size: 2rem;
}
@media (min-width: 75em) { .block-image-text__text > h2, .block-image-text__text > h3 { line-height: 1.30952; font-size: 2.625rem; } }
.block-image-text__text > p { line-height: 1.375; font-size: 1rem; }
@media (min-width: 75em) { .block-image-text__text > p { line-height: 1.38889; font-size: 1.125rem; } }
.block-image-text__text > p:not(:last-child) { margin-bottom: 15px; }
.block-image-text__text > p + h2, .block-image-text__text > p + h3 { margin-top: 40px; }
.block-image-text__text > p a { border-bottom: 1px solid; color: var(--gold); }

/* "Altri progetti": the heading sits above a thin gold rule, the two cards below it */
.block-items { padding: 0 0 80px; margin: 80px 0 0; }
@media (min-width: 46.25em) { .block-items { padding-bottom: 110px; margin-top: 150px; } }
.block-items__title { margin-bottom: 30px; text-align: center; line-height: 1.375; font-size: 1rem; }
@media (min-width: 75em) { .block-items__title { line-height: 1.38889; font-size: 1.125rem; } }
.block-items__list { padding-top: 60px; border-top: 1px solid rgba(232, 196, 104, 0.25); }
@media (min-width: 46.25em) { .block-items__list { padding-top: 80px; } }
.block-items__list .row { display: flex; align-items: flex-start; }
/* the closing band continues into the footer */
.single-project .l-footer, .projects .l-footer { padding-top: 25px; background: var(--panel); }

/* Project card: square photo always visible, then title and client */
.c-project { position: relative; text-align: center; }
.c-project__image { display: block; max-width: 440px; margin: 0 auto 30px; }
.c-project__image img { transition: transform 600ms ease; }
.c-project:hover .c-project__image img { transform: scale(1.03); }
.c-project__title {
  margin-bottom: 15px; font-family: var(--serif); letter-spacing: -0.02em; font-weight: 300; color: var(--gold);
  line-height: 1.3125; font-size: 2rem; text-wrap: balance;
}
@media (min-width: 75em) { .c-project__title { line-height: 1.30952; font-size: 2.625rem; } }
.c-project__sub-title { position: relative; line-height: 1.375; font-size: 1rem; }
@media (min-width: 75em) { .c-project__sub-title { line-height: 1.38889; font-size: 1.125rem; } }
.c-project__sub-title span { transition: ease opacity 250ms; }
/* Phones: the two cards stay side by side, smaller */
@media screen and (max-width: 46.24875em) {
  .c-project__image { margin-bottom: 16px; }
  .c-project__title { margin-bottom: 8px; line-height: 1.3; font-size: 1.25rem; }
  .c-project__sub-title { line-height: 1.4; font-size: 0.875rem; }
}
.c-project__sub-title span + span { border-bottom: 1px solid; position: absolute; left: 50%; transform: translateX(-50%); opacity: 0; white-space: nowrap; color: var(--gold); }
.c-project:hover .c-project__sub-title span, .c-project__sub-title a:focus-visible span { opacity: 0; }
.c-project:hover .c-project__sub-title span + span, .c-project__sub-title a:focus-visible span + span { opacity: 1; }

/* ==========================================================================
   Closing contact band (Lavori + every project page)
   Same lighter night blue as the contact panel it opens.
   ========================================================================== */
.block-cta-band {
  padding: 110px 0 90px; background: var(--panel); text-align: center;
  /* under 1200px the content sits in a narrower column: paint the band out to the screen edges
     without widening the page (no sideways scrolling) */
  box-shadow: 0 0 0 100vmax var(--panel); clip-path: inset(0 -100vmax);
}
@media (min-width: 46.25em) { .block-cta-band { padding: 170px 0 150px; } }
.projects .block-cta-band { margin-top: 110px; }
@media (min-width: 46.25em) { .projects .block-cta-band { margin-top: 180px; } }
.block-cta-band__star { width: 64px; margin: 0 auto 28px; }
.block-cta-band__star svg { display: block; width: 100%; height: auto; }
.block-cta-band__pre-title { margin-bottom: 18px; line-height: 1.375; font-size: 1rem; }
@media (min-width: 75em) { .block-cta-band__pre-title { line-height: 1.38889; font-size: 1.125rem; } }
.block-cta-band__title {
  margin-bottom: 40px; font-family: var(--serif); letter-spacing: -0.02em; font-weight: 300; color: var(--gold);
  line-height: 1.3125; font-size: 2rem; text-wrap: balance;
}
@media (min-width: 75em) { .block-cta-band__title { line-height: 1.30952; font-size: 2.625rem; margin-bottom: 36px; } }