/* Architetto Patrizia Drudi Studio
   Palette taken from the logo: navy #375875, slate #A2BAC4, white.
   --deep and --mist are a darker and a lighter step of the same two blues. */

:root {
  --paper: #ffffff;
  --mist: #eef3f4;
  --slate: #a2bac4;
  --navy: #375875;
  --deep: #1e3346;
  --soft: #4f6b82;          /* secondary text on paper and mist */
  --on-dark-soft: #c9d7de;  /* secondary text on navy */

  --font: "Switzer", "Helvetica Neue", Arial, sans-serif;

  /* five sizes, no more */
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 0.9rem + 1.1vw, 1.875rem);
  --step-head: clamp(2.5rem, 1.2rem + 4.4vw, 5.5rem);
  --step-display: clamp(4rem, 13.4vw, 15rem);

  --m: clamp(16px, 2.2vw, 32px);   /* outer margin, used everywhere */
  --gap: 20px;
  --section: clamp(112px, 12vw, 200px);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --h-bg: transparent;
  --h-ink: #ffffff;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--navy);
  font-family: var(--font);
  font-size: var(--step-body);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, dl, dd, ol, figure { margin: 0; }
ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--slate); color: var(--deep); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.skip {
  position: absolute; left: var(--m); top: -100px; z-index: 200;
  background: var(--navy); color: #fff; padding: 12px 16px; text-decoration: none;
}
.skip:focus { top: var(--m); }

.wrap { padding-inline: var(--m); }

/* ───────── Buttons and links ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px;
  font-size: var(--step-body); font-weight: 500; text-decoration: none;
  border: 0; border-radius: 0; cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, transform 140ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn-light { background: #fff; color: var(--navy); }
.btn-dark { background: var(--navy); color: #fff; }
.btn-block { display: flex; width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .btn-light:hover { background: var(--mist); }
  .btn-dark:hover { background: var(--deep); }
}
.link {
  font-weight: 500; text-decoration: underline; text-underline-offset: 0.25em;
  text-decoration-thickness: 1px; transition: text-underline-offset 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .link:hover { text-underline-offset: 0.4em; } }

/* ───────── Intro ───────── */
.intro-screen { display: none; }
html.intro .intro-screen {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 100;
  background: var(--paper);
  transition: background-color 500ms ease;
}
html.intro.opening .intro-screen { background-color: transparent; pointer-events: none; }
html.intro:not(.unlocked) body { overflow: hidden; }
.intro-mark { display: grid; justify-items: center; gap: 28px; transition: opacity 300ms ease, transform 500ms var(--ease-out); }
.intro-mark img { width: clamp(96px, 11vw, 150px); }
html.opening .intro-mark { opacity: 0; transform: scale(0.96); }
.odometer {
  display: flex; height: 1em; overflow: hidden;
  font-size: var(--step-lead); line-height: 1; font-variant-numeric: tabular-nums; color: var(--navy);
}
.odo-col { display: block; width: 0.62em; text-align: center; }
.odo-strip { display: block; will-change: transform; }
/* digits drawn by CSS so the counter is ornament, not text */
.odo-strip::before { content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0"; white-space: pre; }
.odo-short::before { content: "0\A 1"; }
.intro-bar { width: 140px; height: 2px; background: var(--mist); }
.intro-bar span { display: block; height: 100%; background: var(--navy); transform-origin: left; transform: scaleX(0); }

/* ───────── Header ───────── */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: 40px;
  height: 72px; padding-inline: var(--m);
  background: var(--h-bg); color: var(--h-ink);
  transition: background-color 300ms ease, color 300ms ease, transform 450ms var(--ease-drawer);
}
.site-header.is-hidden { transform: translateY(-100%); }
html.intro .site-header { transform: translateY(-100%); }
html.intro.settled .site-header { transform: none; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 500; }
.brand img { width: 34px; height: 34px; }
.nav { display: flex; gap: 32px; margin-left: auto; }
.nav a, .nav-call { text-decoration: none; transition: opacity 200ms ease; }
@media (hover: hover) and (pointer: fine) {
  .nav:hover a { opacity: 0.5; }
  .nav a:hover { opacity: 1; }
}
.nav-call { font-weight: 500; }
.menu-toggle { display: none; margin-left: auto; background: none; border: 0; padding: 12px 0; cursor: pointer; font-weight: 500; }

.menu {
  position: fixed; inset: 0; z-index: 45;
  background: var(--navy); color: #fff;
  padding: 112px var(--m) var(--m);
  display: flex; flex-direction: column; justify-content: space-between;
}
.menu[hidden] { display: none; }
.menu nav { display: grid; gap: 8px; }
.menu nav a { font-size: clamp(2.25rem, 10vw, 3.5rem); line-height: 1.1; letter-spacing: -0.03em; text-decoration: none; }
.menu-call { font-size: var(--step-lead); text-decoration: none; }

@media (max-width: 899px) {
  .nav, .nav-call { display: none; }
  .menu-toggle { display: block; }
}

/* ───────── Hero ───────── */
.hero {
  position: relative; height: 100svh; min-height: 600px;
  overflow: hidden; background: var(--paper); color: #fff;
}
.hero-media { position: absolute; inset: 0; background: var(--slate); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
html.intro .hero-media { clip-path: circle(0px at 50% 50%); }
html.intro .hero-media img { transform: scale(1.18); }
/* the logo's disc becomes the window onto the room, then opens to the full screen */
html.intro.opening .hero-media {
  clip-path: circle(var(--disc, 70px) at var(--cx, 50%) var(--cy, 50%));
  transition: clip-path 550ms var(--ease-out);
}
html.intro.open-wide .hero-media {
  clip-path: circle(150% at var(--cx, 50%) var(--cy, 50%));
  transition: clip-path 1300ms var(--ease-in-out);
}
html.intro.open-wide .hero-media img { transform: scale(1); transition: transform 2200ms var(--ease-out); }
.hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  /* neutral scrims under the nav and the name only */
  background:
    linear-gradient(to bottom, rgb(12 20 28 / 0.38), rgb(12 20 28 / 0) 160px), /* taste-skill-ignore */
    linear-gradient(to top, rgb(12 20 28 / 0.62), rgb(12 20 28 / 0) 58%); /* taste-skill-ignore */
}
html.intro .hero-scrim { opacity: 0; transition: opacity 900ms ease; }
html.intro.settled .hero-scrim { opacity: 1; }
.hero-content {
  position: absolute; inset: auto 0 0 0;
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap);
  padding-inline: var(--m); align-items: end;
}
.hero-lead { grid-column: 1 / span 5; display: grid; justify-items: start; gap: 28px; padding-bottom: 36px; }
.hero-sentence { font-size: var(--step-lead); line-height: 1.3; max-width: 30ch; letter-spacing: -0.02em; }
.hero-address { grid-column: 9 / span 4; justify-self: end; text-align: right; padding-bottom: 36px; }
.hero-title {
  grid-column: 1 / -1;
  font-size: var(--step-display); font-weight: 300; line-height: 0.86;
  letter-spacing: -0.05em; white-space: nowrap;
  margin: 0 0 -0.04em -0.05em;
}
.hero-title .word { display: inline-block; overflow: clip; padding-bottom: 0.08em; margin-bottom: -0.08em; vertical-align: bottom; }
.hero-title .ch { display: inline-block; }
html.intro .hero-title .ch { transform: translateY(105%); }
html.intro [data-hero-part] { opacity: 0; transform: translateY(20px); }
html.intro.settled .hero-title .ch,
html.intro.settled [data-hero-part] {
  opacity: 1; transform: none;
  transition: transform 1000ms var(--ease-out), opacity 800ms ease;
  transition-delay: var(--d, 0ms);
}

@media (max-width: 899px) {
  .hero-address { display: none; }
  /* narrow screens: the name first, then the sentence and the action */
  .hero-content { display: flex; flex-direction: column-reverse; align-items: stretch; }
  .hero-title { margin: 0 0 24px -0.05em; }
  .hero-lead { padding-bottom: 28px; }
}
@media (max-width: 699px) {
  .hero-lead { padding-bottom: 28px; gap: 22px; }
  .hero-title { font-size: 22vw; white-space: normal; line-height: 0.84; }
  .hero-title .word { display: block; }
}

/* ───────── Shared section bits ───────── */
section, .footer { position: relative; }
.split-head {
  display: grid; font-size: var(--step-head); font-weight: 400;
  line-height: 1; letter-spacing: -0.035em;
}
.split-head span { display: block; will-change: transform; }
.split-b { padding-left: 33%; }
.lead { font-size: var(--step-lead); line-height: 1.3; letter-spacing: -0.02em; max-width: 34ch; }
.img-wrap { overflow: hidden; }
.img-wrap img { width: 100%; height: 100%; object-fit: cover; }
figcaption, .contact-caption { font-size: var(--step-small); color: var(--soft); margin-top: 12px; }

/* entrances: only hidden once the script has started */
html.ready [data-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity 900ms ease, transform 1000ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
html.ready [data-reveal].is-in { opacity: 1; transform: none; }
html.ready [data-aperture] { clip-path: inset(12% 12% 12% 12%); transition: clip-path 1300ms var(--ease-in-out); transition-delay: var(--d, 0ms); }
html.ready [data-aperture] img { transform: scale(1.12); transition: transform 1600ms var(--ease-out); transition-delay: var(--d, 0ms); }
html.ready .is-in [data-aperture], html.ready [data-aperture].is-in { clip-path: inset(0 0 0 0); }
html.ready .is-in [data-aperture] img, html.ready [data-aperture].is-in img { transform: none; }

/* ───────── Studio ───────── */
.studio { background: var(--paper); padding-block: var(--section); overflow-x: clip; }
.studio .lead { margin-top: 48px; }
.mosaic {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px var(--gap);
  margin-top: 96px; align-items: start;
}
.mosaic-photo { grid-column: 1 / span 8; position: relative; }
.mosaic-photo .img-wrap { aspect-ratio: 16 / 10; }
.mosaic-note {
  position: absolute; top: 0; right: 0; width: min(340px, 45%);
  background: var(--paper); padding: 0 0 24px 24px;
}
.mosaic-note p { font-size: var(--step-body); color: var(--navy); }
.mosaic-side { grid-column: 9 / span 4; display: grid; align-self: stretch; padding-bottom: 34px; }
.mosaic-tile { background: #ffffff; border: 1px solid rgba(55, 88, 117, 0.12); height: 100%; min-height: 240px; display: grid; place-items: center; overflow: hidden; }
.tile-mark { width: 62%; transition: transform 1200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .mosaic-tile:hover .tile-mark { transform: rotate(-6deg) scale(1.04); } }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 28px var(--gap); }
.facts dt { font-size: var(--step-small); color: var(--soft); }
.facts dd { margin-top: 4px; }
.facts a { text-decoration: none; }

@media (max-width: 899px) {
  .split-b { padding-left: 12%; }
  .mosaic { grid-template-columns: 1fr; margin-top: 64px; }
  .mosaic-photo, .mosaic-side { grid-column: 1; }
  .mosaic-photo .img-wrap { aspect-ratio: 4 / 3; }
  .mosaic-note { position: static; width: auto; padding: 20px 0 0; }
  .mosaic-side { margin-top: 40px; }
  .mosaic-tile { aspect-ratio: 3 / 2; }
}

/* ───────── Patrizia: portrait sequence ───────── */
.portrait { background: var(--navy); color: #fff; }
/* the name gets its own column so it can never run into the portrait. The column's width is
   worked out from the name's size, not measured from the rotated text, because some browsers
   (Safari) measure vertical text in a grid too narrow and let the portrait slide under it. */
.portrait-stage {
  --pw: clamp(4rem, min(20vh, 12.5vw), 12rem);
  display: grid; grid-template-columns: calc(var(--pw) * 1.28) repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  align-items: center; padding: var(--section) var(--m);
  position: relative; overflow: hidden;
}
/* the name, set upright along the portrait's edge as one line in two sizes, so both words share
   a baseline: the first name large in a soft translucent white, the surname small in slate */
.portrait-word {
  grid-column: 1; grid-row: 1; align-self: center; justify-self: start;
  width: calc(var(--pw) * 1.28); min-width: 0;
  pointer-events: none; user-select: none;
}
.pw-line {
  display: block;
  writing-mode: vertical-rl; transform: rotate(180deg);
  text-orientation: sideways; /* aligns the two sizes on the alphabetic baseline, not the centre line */
  font-size: var(--pw);
  font-weight: 300; line-height: 1; white-space: nowrap;
  padding-block: 0.12em; /* vertical text: keeps the font's ascender and descender space inside the page margin */
}
.pw-first {
  letter-spacing: -0.03em;
  color: rgb(255 255 255 / 0.72);
}
.pw-surname {
  font-size: clamp(2rem, min(var(--step-head), 7vh), var(--step-head));
  letter-spacing: -0.02em; margin-inline-start: 0.12em;
  color: var(--slate);
}
.portrait-frame {
  grid-column: 2 / span 5; grid-row: 1;
  aspect-ratio: 4 / 5; overflow: hidden; background: var(--slate);
  max-height: 78svh; width: 100%; justify-self: start;
}
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform-origin: 50% 30%; will-change: transform; }
.portrait-text { grid-column: 8 / span 6; grid-row: 1; }
.portrait-title { font-size: var(--step-lead); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.portrait-intro { margin-top: 12px; max-width: 40ch; color: var(--on-dark-soft); }
.credentials { margin-top: clamp(32px, 5vh, 56px); display: grid; gap: clamp(20px, 3.4vh, 36px); }
.cred { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); column-gap: var(--gap); align-items: end; }
.cred-figure {
  font-size: var(--step-head); font-weight: 300; line-height: 0.85; letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.cred-figure-text { font-size: var(--step-lead); font-weight: 400; line-height: 1.15; letter-spacing: -0.02em; }
.cred-label { font-weight: 500; line-height: 1.3; }
.cred-label span { display: block; font-weight: 400; color: var(--on-dark-soft); margin-top: 2px; }

/* pinned mode (wide screens, motion allowed): the stage holds while the portrait opens and the figures arrive */
.portrait.is-pinned { height: 340svh; }
.portrait.is-pinned .portrait-stage {
  position: sticky; top: 0; height: 100svh; padding-block: 72px 32px;
}
.portrait.is-pinned .portrait-frame { clip-path: circle(var(--r, 0%) at 50% 50%); }
.portrait.is-pinned .portrait-frame img { transform: scale(var(--s, 1.25)); }
.portrait.is-pinned [data-portrait-step] {
  opacity: 0; transform: translateY(36px);
  transition: opacity 700ms ease, transform 900ms var(--ease-out);
}
.portrait.is-pinned [data-portrait-step].is-on { opacity: 1; transform: none; }
.portrait.is-pinned .portrait-intro.is-on { transition-delay: 90ms; }

/* phones: the same story in the flow of the page */
.portrait.is-flow .portrait-frame { clip-path: circle(var(--r, 0%) at 50% 50%); }
.portrait.is-flow .portrait-frame img { transform: scale(var(--s, 1.25)); }
.portrait.is-flow [data-portrait-step], .portrait.is-flow .portrait-word {
  opacity: 0; transform: translateY(32px);
  transition: opacity 700ms ease, transform 900ms var(--ease-out);
}
.portrait.is-flow [data-portrait-step].is-on, .portrait.is-flow .portrait-word.is-on { opacity: 1; transform: none; }

@media (max-width: 899px) {
  .portrait-stage { grid-template-columns: 1fr; row-gap: 32px; }
  /* the name reads across on phones: "Patrizia" large, "Drudi" small, on one baseline */
  .portrait-word { grid-column: 1; grid-row: auto; width: auto; justify-self: start; }
  .pw-line {
    writing-mode: horizontal-tb; transform: none;
    font-size: clamp(3.5rem, 17vw, 7rem); line-height: 0.9; padding-block: 0;
  }
  .pw-surname { font-size: clamp(1.5rem, 6.5vw, 2.75rem); }
  .portrait-frame, .portrait-text { grid-column: 1; grid-row: auto; }
  .portrait-frame { max-height: none; }
  .cred { grid-template-columns: 1fr; row-gap: 8px; }
}

/* ───────── Servizi: sticky picture, active list ───────── */
.services { background: var(--mist); padding-block: var(--section); }
.services-head {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: end;
}
.services-title {
  grid-column: 1 / span 6;
  font-size: var(--step-head); font-weight: 400; line-height: 0.98; letter-spacing: -0.035em;
}
.services-title span { display: block; }
.services-title span:last-child { padding-left: 1.1em; }
.services-sub { grid-column: 7 / span 5; max-width: 36ch; padding: 0 0 0.5em 24px; }

.services-body {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap);
  margin-top: clamp(64px, 7vw, 112px); align-items: start;
}
.svc-visual { grid-column: 1 / span 5; position: sticky; top: calc(72px + 3vh); }
.svc-frame {
  position: relative; overflow: hidden; background: var(--navy);
  aspect-ratio: 4 / 5; width: min(100%, calc((100svh - 230px) * 0.8));
}
.svc-frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.06); opacity: 0;
}
.svc-frame img.is-prev { opacity: 1; z-index: 1; }
.svc-frame img.is-current { opacity: 1; z-index: 2; }
/* one treatment for every picture here: the logo's navy laid over a monochrome print */
.svc-frame::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: var(--navy); mix-blend-mode: color;
}
.svc-under {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  margin-top: 16px; width: min(100%, calc((100svh - 230px) * 0.8));
}
.svc-caption { font-size: var(--step-small); color: var(--soft); }
.svc-phases { display: flex; gap: 16px; font-size: var(--step-small); color: var(--soft); white-space: nowrap; }
.svc-phases span { transition: color 300ms ease; }
.svc-phases .is-on { color: var(--navy); font-weight: 500; }

.svc-list { grid-column: 7 / span 6; padding-bottom: 34svh; }
.svc-list ul { list-style: none; margin: 0; padding: 0; }
.svc-phase {
  font-size: var(--step-body); font-weight: 500; color: var(--navy);
  padding: 0 24px; margin: 96px 0 12px;
}
.svc-phase:first-child { margin-top: 0; }
.svc-item { transition: background-color 400ms ease; }
.svc-item.is-active { background: var(--paper); }
.svc-row {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 24px;
  width: 100%; min-height: 72px; padding: 26px 24px;
  background: none; border: 0; text-align: left; cursor: pointer; color: inherit;
}
.svc-row:focus-visible { outline: 2px solid var(--navy); outline-offset: -4px; }
.svc-name {
  font-size: var(--step-lead); line-height: 1.15; letter-spacing: -0.02em; color: var(--soft);
  transition: color 300ms ease, transform 500ms var(--ease-out);
}
.svc-meta { font-size: var(--step-small); color: var(--soft); text-align: right; }
.svc-item.is-active .svc-name { color: var(--navy); transform: translateX(6px); }
.svc-row:active .svc-name { transform: translateX(10px); transition-duration: 160ms; }
@media (hover: hover) and (pointer: fine) {
  .svc-row:hover .svc-name { color: var(--navy); }
}
.svc-desc { display: grid; grid-template-rows: 1fr; }
.svc-desc-inner { overflow: hidden; min-height: 0; }
.svc-desc-img { display: none; }
.svc-desc p { max-width: 46ch; padding: 0 24px 0 30px; color: var(--navy); }
.svc-item.is-active .svc-desc p { padding-bottom: 24px; }
/* with the script running, only the active row is open */
html.ready .svc-desc {
  grid-template-rows: 0fr;
  transition: grid-template-rows 550ms var(--ease-out);
}
html.ready .svc-desc-inner {
  opacity: 0; transform: translateY(8px);
  transition: opacity 300ms ease, transform 500ms var(--ease-out);
}
html.ready .svc-desc p { transition: padding-bottom 550ms var(--ease-out); }
html.ready .svc-item.is-active .svc-desc { grid-template-rows: 1fr; }
html.ready .svc-item.is-active .svc-desc-inner { opacity: 1; transform: none; transition-delay: 120ms; }

@media (max-width: 899px) {
  .services-body { grid-template-columns: 1fr; margin-top: 48px; }
  .svc-list { grid-column: 1; padding-bottom: 0; }
  /* narrow screens: no pinned picture over the list; each open row carries its own picture */
  .svc-visual { display: none; }
  .svc-desc-img {
    display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    /* close to the navy treatment of the desktop frame */
    filter: grayscale(1) sepia(0.3) hue-rotate(170deg) saturate(1.6) contrast(1.04); margin-bottom: 16px;
  }
  .svc-phase { padding: 0 16px; margin-top: 56px; }
  .svc-row { padding: 20px 16px; }
  .svc-desc p { padding: 0 16px; }
  .svc-item.is-active .svc-desc p { padding-bottom: 20px; }
  .svc-item.is-active .svc-name { transform: none; }
}
@media (max-width: 699px) {
  .services-head { grid-template-columns: 1fr; row-gap: 20px; }
  .services-title, .services-sub { grid-column: 1; }
  .services-sub { padding-left: 0; }
  .svc-row { grid-template-columns: 1fr; row-gap: 4px; min-height: 56px; }
  .svc-meta { text-align: left; }
  .svc-name { font-size: clamp(1.25rem, 5.4vw, 1.5rem); }
}

/* ───────── Progetti ───────── */
.work { background: var(--paper); padding-block: var(--section); overflow-x: clip; }
.work .split-head { margin-bottom: 96px; }
.project + .project { margin-top: clamp(96px, 11vw, 180px); }
.strip {
  --slide: 73vw;
  display: flex; gap: var(--gap);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding-inline: calc((100vw - var(--slide)) / 2);
  scrollbar-width: none;
}
.strip::-webkit-scrollbar { display: none; }
.strip > img, .strip > .compare {
  flex: 0 0 var(--slide); width: var(--slide); aspect-ratio: 1046 / 600;
  object-fit: cover; scroll-snap-align: center;
}
.strip:focus-visible { outline-offset: -6px; outline-color: var(--navy); }
html.ready .strip > img { clip-path: inset(100% 0 0 0); transition: clip-path 1100ms var(--ease-in-out); }
html.ready .strip > :nth-child(2) { transition-delay: 90ms; }
html.ready .strip > :nth-child(3) { transition-delay: 180ms; }
html.ready .strip.is-in > img { clip-path: inset(0 0 0 0); }

.project-facts {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap);
  margin-top: 26px; align-items: baseline;
}
.project-facts h3 { grid-column: 1 / span 4; font-size: var(--step-body); font-weight: 500; }
.project-facts h3 span { font-weight: 400; color: var(--soft); margin-left: 8px; }
.project-facts p:nth-of-type(1) { grid-column: 5 / span 3; }
.project-facts p:nth-of-type(2) { grid-column: 8 / span 1; }
.project-facts p:nth-of-type(3) { grid-column: 9 / span 2; }
.strip-nav { grid-column: 11 / span 2; justify-self: end; display: flex; gap: 8px; }
.strip-nav button {
  width: 48px; height: 48px; border: 0; border-radius: 0; cursor: pointer;
  background: var(--mist); color: var(--navy); font-size: 1.125rem;
  transition: background-color 200ms ease, transform 140ms var(--ease-out);
}
.strip-nav button:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .strip-nav button:hover { background: var(--slate); color: var(--deep); } }

@media (max-width: 899px) {
  .strip { --slide: 78vw; gap: 10px; }
  .strip > img, .strip > .compare { aspect-ratio: 4 / 5; }
  .project-facts { grid-template-columns: 1fr 1fr; row-gap: 6px; }
  .project-facts h3 { grid-column: 1 / -1; }
  .project-facts h3 span { display: block; margin-left: 0; }
  .project-facts p:nth-of-type(n) { grid-column: auto; }
  .strip-nav { display: none; }
}

/* ───────── Before / after: the "after" photo lies over the "before" and is clipped at the handle ───────── */
.compare {
  position: relative; margin: 0; overflow: hidden;
  aspect-ratio: 16 / 9; background: var(--mist);
  touch-action: pan-y;            /* the page still scrolls vertically; sideways drags move the handle */
  user-select: none; -webkit-user-select: none;
  cursor: ew-resize;
}
.compare img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  pointer-events: none; -webkit-user-drag: none;
}
.compare-after { clip-path: inset(0 0 0 50%); will-change: clip-path; }

.compare-handle {
  position: absolute; top: 0; bottom: 0; width: 0;
  left: 50%; will-change: transform; /* the script moves it with transform from here on */
  outline: none;
}
.compare-handle::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: #fff;
}
.compare-knob {
  position: absolute; top: 50%; left: 0; width: 52px; height: 52px; margin: -26px 0 0 -26px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--navy); color: #fff;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.compare-knob svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) {
  .compare:hover .compare-knob { transform: scale(1.06); }
}
.compare.is-dragging .compare-knob { transform: scale(0.94); background: var(--deep); }
.compare-handle:focus-visible .compare-knob { outline: 2px solid #fff; outline-offset: 3px; }

.compare-label {
  position: absolute; top: 16px; padding: 6px 12px;
  background: rgb(255 255 255 / 0.92); color: var(--navy); font-size: var(--step-small); font-weight: 500;
  pointer-events: none; transition: opacity 200ms ease;
}
.compare-label.is-before { left: 16px; }
.compare-label.is-after { right: 16px; }
.compare-label.is-covered { opacity: 0; }

@media (max-width: 899px) {
  .compare { aspect-ratio: 4 / 5; }
  .compare-knob { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
  .compare-label { top: 12px; }
  .compare-label.is-before { left: 12px; }
  .compare-label.is-after { right: 12px; }
}

/* the comparison rises into place as it scrolls into view, the way the project photos always have */
html.ready .compare { clip-path: inset(100% 0 0 0); transition: clip-path 1100ms var(--ease-in-out); }
html.ready .compare.is-in { clip-path: inset(0 0 0 0); }
html.ready .compare img { transform: scale(1.08); transition: transform 1600ms var(--ease-out); }
html.ready .compare.is-in img { transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.ready .compare { clip-path: none; transition: none; }
  html.ready .compare img { transform: none; }
}

/* ───────── Il tuo progetto ───────── */
.brief { background: var(--slate); color: var(--deep); padding-block: var(--section); }
.brief-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: start; }
.brief-form { grid-column: 1 / span 6; }
.brief h2 { font-size: var(--step-head); font-weight: 400; line-height: 1; letter-spacing: -0.035em; }
.brief-sub { margin-top: 24px; font-size: var(--step-lead); line-height: 1.3; letter-spacing: -0.02em; max-width: 30ch; }
.brief form { margin-top: 56px; display: grid; gap: 32px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; margin-bottom: 12px; font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips span {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px;
  background: var(--mist); color: var(--deep);
  transition: background-color 200ms ease, color 200ms ease, transform 140ms var(--ease-out);
}
.chips label:active span { transform: scale(0.97); }
.chips input:checked + span { background: var(--deep); color: #fff; }
.chips input:focus-visible + span { outline: 2px solid var(--deep); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .chips input:not(:checked) + span:hover { background: #fff; } }

.range { display: flex; align-items: center; gap: 24px; }
.range input { flex: 1; accent-color: var(--deep); height: 48px; cursor: pointer; }
.range output { font-size: var(--step-lead); min-width: 5.5ch; text-align: right; font-variant-numeric: tabular-nums; }

.letter {
  grid-column: 8 / span 5; background: var(--paper); color: var(--deep);
  padding: clamp(28px, 3vw, 44px); position: sticky; top: 104px;
}
.letter-to { font-size: var(--step-small); color: var(--soft); }
.letter-body { margin-top: 20px; font-size: var(--step-lead); line-height: 1.32; letter-spacing: -0.02em; min-height: 7.9em; }
.letter-body.is-swap { animation: letterSwap 380ms var(--ease-out); }
@keyframes letterSwap { from { opacity: 0.35; } to { opacity: 1; } }
.letter-actions { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }

@media (max-width: 899px) {
  .brief-grid { grid-template-columns: 1fr; row-gap: 48px; }
  .brief-form, .letter { grid-column: 1; }
  .letter { position: static; }
  .letter-body { min-height: 0; }
}

/* ───────── Contatti: the form, and the map of where the studio is ───────── */
/* two columns share every edge: heading over form on the left, address over map on the right,
   and the map is exactly as tall as the form */
.contact { background: var(--paper); padding-block: var(--section); }
.contact-head, .contact-body {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap);
}
.contact-head { align-items: end; }
.contact-intro { grid-column: 1 / span 6; }
.contact-intro h2 {
  font-size: var(--step-head); font-weight: 400; line-height: 1; letter-spacing: -0.035em;
}
.contact-sub { margin-top: 20px; max-width: 40ch; }
.contact-info { grid-column: 8 / span 5; font-style: normal; display: grid; gap: 16px; }
.contact-address { font-size: var(--step-lead); line-height: 1.25; letter-spacing: -0.02em; }
.contact-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.contact-links a:not(.arrow-link) { text-decoration: none; font-weight: 500; }
@media (hover: hover) and (pointer: fine) {
  .contact-links a:not(.arrow-link):hover { text-decoration: underline; text-underline-offset: 0.25em; }
}
.contact-body { margin-top: clamp(48px, 5vw, 80px); align-items: stretch; }

/* form */
.contact-form { grid-column: 1 / span 6; display: grid; gap: 24px; align-content: start; }
.field { display: grid; gap: 8px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px var(--gap); }
.field label { font-weight: 500; }
.optional { font-weight: 400; color: var(--soft); margin-left: 6px; }
.field input:not([type="checkbox"]), .field textarea, .select select {
  width: 100%; min-height: 56px; padding: 14px 16px;
  font: inherit; color: var(--navy); background: var(--mist);
  border: 0; border-radius: 0; border-bottom: 2px solid transparent;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.field textarea { min-height: 168px; resize: vertical; line-height: 1.5; }
.field textarea::placeholder { color: var(--soft); opacity: 1; }
.field input:not([type="checkbox"]):focus, .field textarea:focus, .select select:focus {
  outline: none; background: #e3ebee; border-bottom-color: var(--navy);
}
.field input:not([type="checkbox"]):focus-visible, .field textarea:focus-visible, .select select:focus-visible {
  outline: 2px solid var(--navy); outline-offset: 2px;
}
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 48px; cursor: pointer; }
.select::after {
  content: ""; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.field [aria-invalid="true"] { border-bottom-color: #9b2c2c; }
.field-error { color: #9b2c2c; font-size: var(--step-small); }
.consent { grid-template-columns: 24px 1fr; align-items: start; column-gap: 12px; }
.consent input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--navy); cursor: pointer; }
.consent label { font-weight: 400; line-height: 1.45; cursor: pointer; }
.consent .field-error { grid-column: 2; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 8px; }
.form-status { background: var(--mist); padding: 16px 20px; }

/* map: the studio on a Google map, in the logo's navy until you reach for it */
.contact-map { grid-column: 8 / span 5; margin: 0; display: flex; }
.map-frame { position: relative; flex: 1; min-height: 420px; background: var(--mist); overflow: hidden; }
.map-frame iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  filter: grayscale(1) contrast(1.05);
  transition: filter 500ms ease;
}
.map-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--navy); mix-blend-mode: color;
  transition: opacity 500ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .map-frame:hover iframe { filter: none; }
  .map-frame:hover::after { opacity: 0; }
}
.map-frame:focus-within iframe { filter: none; }
.map-frame:focus-within::after { opacity: 0; }
.arrow-link {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; font-weight: 500; text-decoration: none;
}
.arrow-link span { transition: transform 300ms var(--ease-out); }
.arrow-link:active span { transform: translateX(8px); }
@media (hover: hover) and (pointer: fine) { .arrow-link:hover span { transform: translateX(6px); } }

@media (max-width: 899px) {
  .contact-head, .contact-body { grid-template-columns: 1fr; }
  .contact-intro, .contact-info, .contact-form, .contact-map { grid-column: 1; }
  .contact-info { margin-top: 32px; }
  .contact-body { row-gap: 40px; }
  .map-frame { aspect-ratio: 4 / 3; min-height: 0; }
}
@media (max-width: 599px) {
  .field-row { grid-template-columns: 1fr; }
  .form-actions .btn { width: 100%; min-height: 56px; }
  .contact-links { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .map-frame iframe, .map-frame::after { transition: none; }
}

/* ───────── Footer: the studio's name and three quiet icons ───────── */
.footer { background: var(--navy); color: #fff; }
.footer-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 40px var(--m) 28px;
}
.footer-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 500; }
.footer-brand img { width: 32px; height: 32px; }
.social { display: flex; gap: 4px; list-style: none; margin: 0 -10px 0 0; padding: 0; }
.social a {
  display: grid; place-items: center; width: 44px; height: 44px;
  color: var(--on-dark-soft);
  transition: color 200ms ease, transform 160ms var(--ease-out);
}
.social svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round;
}
.social .dot { fill: currentColor; stroke: none; }
.social a:active { transform: scale(0.9); }
.social a:focus-visible { outline: 2px solid #fff; outline-offset: 0; color: #fff; }
@media (hover: hover) and (pointer: fine) { .social a:hover { color: #fff; } }
.footer-legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px;
  padding: 0 var(--m) 32px; font-size: var(--step-small); color: var(--on-dark-soft);
}
.footer-legal a { color: inherit; }
.legal-links { display: flex; flex-wrap: wrap; gap: 4px 24px; list-style: none; margin: 0; padding: 0; }
.legal-links a { text-decoration: none; transition: color 200ms ease; }
.legal-links a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; color: #fff; }
@media (hover: hover) and (pointer: fine) { .legal-links a:hover { color: #fff; } }

@media (max-width: 599px) {
  .footer-bar { padding-top: 32px; }
  .footer-brand span { font-size: var(--step-small); }
}

/* ───────── Reduced motion: keep the fades, drop the travel ───────── */
@media (prefers-reduced-motion: reduce) {
  html.ready [data-reveal] { transform: none; transition: opacity 400ms ease; }
  html.ready [data-aperture], html.ready .strip > img { clip-path: none; }
  html.ready [data-aperture] img { transform: none; }
  html.ready .svc-desc, html.ready .svc-desc p, html.ready .svc-desc-inner { transition: none; transform: none; }
  .svc-name { transition: color 300ms ease; }
  .svc-item.is-active .svc-name { transform: none; }
  .split-head span { transform: none !important; }
  .site-header { transition: background-color 300ms ease, color 300ms ease; }
}