:root {
  --ink: #132d2c;
  --deep: #0c403f;
  --deep-2: #082f2f;
  --paper: #f7f4ee;
  --cream: #eee8dc;
  --gold: #c99f52;
  --white: #fffdf8;
  --muted: #5f6f6d;
  --line: rgba(19,45,44,.17);
  --sans: "DM Sans", system-ui, sans-serif;
  --serif: "Newsreader", Georgia, serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper) url("assets/carta-beige-utente.jpg") center / 760px auto repeat; font-family: var(--sans); font-size: 1rem; line-height: 1.65; font-weight: 500; }
a { color: inherit; }
.site-header { height: 92px; padding: 0 clamp(22px,5vw,76px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(247,244,238,.94); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(14px); }
.brand { display: flex; gap: 14px; align-items: center; text-decoration: none; line-height: 1.15; }
.brand-mark { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--deep); border-radius: 50%; font-family: var(--serif); font-size: 1.1rem; }
.brand strong { display: block; font-size: .94rem; letter-spacing: .01em; font-weight: 700; }
.brand small { display: block; margin-top: 5px; color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; }
nav { display: flex; align-items: center; gap: 30px; }
nav a { text-decoration: none; font-size: .88rem; font-weight: 500; }
.nav-cta { padding: 11px 18px; border: 1px solid var(--deep); border-radius: 999px; }
.menu-button { display: none; border: 0; background: transparent; font: inherit; }
main { overflow: hidden; }
.hero { min-height: calc(100vh - 92px); display: grid; grid-template-columns: 1.12fr .88fr; position: relative; background: var(--paper); }
.hero::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: -1px; height: 82px; background: var(--paper); clip-path: polygon(0 68%,18% 48%,39% 66%,62% 36%,82% 57%,100% 43%,100% 100%,0 100%); pointer-events: none; }
.hero-copy { padding: clamp(70px,10vw,150px) clamp(34px,7vw,110px) calc(clamp(70px,10vw,150px) + 45px); align-self: stretch; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; background: var(--paper) url("assets/carta-beige-utente.jpg") center / cover no-repeat; color: var(--ink); }
.hero-copy::after { content: ""; position: absolute; z-index: 0; left: 0; right: 0; bottom: -8%; height: 34%; background: url("assets/kintsugi-oro.png") center 62% / cover no-repeat; pointer-events: none; }
.hero-copy > * { position: relative; z-index: 1; }
.eyebrow { margin: 0 0 20px; color: var(--deep); font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; }
h1,h2 { margin: 0; font-family: var(--serif); font-weight: 600; line-height: .98; letter-spacing: -.025em; }
h1 { max-width: 840px; font-size: clamp(3.3rem,6.5vw,7rem); }
h2 { font-size: clamp(2.6rem,5vw,5rem); }
.lead { max-width: 680px; margin: 34px 0 0; font-size: clamp(1.08rem,1.45vw,1.26rem); color: #304845; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 28px; margin-top: 42px; }
.button { display: inline-flex; min-height: 54px; padding: 0 24px; align-items: center; justify-content: center; border-radius: 999px; font-weight: 600; text-decoration: none; }
.button.primary { background: var(--deep); color: var(--white); }
.button.primary:hover { background: var(--deep-2); }
.text-link { display: inline-block; text-underline-offset: 5px; font-weight: 600; }
.availability { margin-top: 40px; color: var(--muted); font-size: .88rem; }
.portrait { min-height: 680px; position: relative; background: var(--deep); overflow: hidden; }
.portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 58%,rgba(6,31,32,.3)); pointer-events: none; }
.portrait img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: 50% 42%; filter: saturate(.82) contrast(1.02); }
.recognition { padding: 145px clamp(28px,7vw,110px) 150px; display: grid; grid-template-columns: 60px 1.15fr .85fr; gap: clamp(30px,5vw,90px); border-bottom: 0; background-color: var(--paper); background-image: linear-gradient(90deg,rgba(247,244,238,.98) 0%,rgba(247,244,238,.9) 60%,rgba(247,244,238,.34) 100%), url("assets/muro-pianta.webp"); background-size: cover; background-repeat: no-repeat; background-position: center, calc(100% + 120px) center; }
.section-number { margin: 4px 0; color: var(--gold); font-family: var(--serif); font-size: 1.3rem; }
.recognition > p:last-child { margin: 34px 0 0; max-width: 560px; font-size: 1.08rem; color: #415653; }
.pathways { padding: 175px clamp(28px,7vw,110px) 150px; position: relative; overflow: hidden; background: var(--deep) url("assets/carta-petrolio.png") center / cover no-repeat; color: var(--white); }
.pathways::after { content: ""; position: absolute; z-index: 0; inset: 72px 0 0; background: url("assets/kintsugi-oro.png") center / cover no-repeat; pointer-events: none; }
.pathways::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 84px; background: var(--paper); clip-path: polygon(0 0,100% 0,100% 43%,83% 66%,63% 45%,42% 76%,20% 54%,0 72%); }
.pathways > * { position: relative; z-index: 1; }
.pathways .eyebrow { color: #f2c774; }
.section-heading { max-width: 760px; margin-bottom: 72px; }
.cards { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
.cards article { min-height: 330px; padding: 42px; border: 1px solid rgba(255,255,255,.28); border-radius: 28px; background: rgba(6,31,32,.76); box-shadow: 0 18px 44px rgba(4,25,25,.13); }
.cards span { color: #f2c774; font-family: var(--serif); }
.cards h3,.practical h3,.contact-panel h3 { margin: 46px 0 16px; font-family: var(--serif); font-size: clamp(1.7rem,2.4vw,2.45rem); font-weight: 600; line-height: 1.05; }
.cards p { max-width: 570px; color: rgba(255,255,255,.8); font-size: 1rem; line-height: 1.7; }
.method { padding: 165px clamp(28px,7vw,110px) 150px; display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(70px,10vw,170px); position: relative; overflow: hidden; background: var(--paper) url("assets/carta-beige-utente.jpg") center / cover no-repeat; }
.method::before,.method::after { content: ""; position: absolute; z-index: 0; pointer-events: none; }
.method::before { left: 0; right: 0; bottom: -7%; height: 30%; background: url("assets/kintsugi-oro.png") center 70% / cover no-repeat; }
.method::after { right: -5%; top: -8%; width: 22%; height: 25%; background: url("assets/kintsugi-oro.png") right top / cover no-repeat; }
.method > * { position: relative; z-index: 1; }
.method-statement h2 { font-size: clamp(3rem,5.8vw,6.2rem); }
.method-statement { position: sticky; top: 145px; align-self: start; }
.method-copy { max-width: 630px; font-size: 1.12rem; }
.method-copy p { margin: 0 0 28px; }
.principles { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 46px; }
.principles span { padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(247,244,238,.94); font-size: .82rem; }
.encounter-image { min-height: min(82vh,920px); margin: 0; position: relative; overflow: hidden; background: #cfd8df; }
.encounter-image img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: center 30%; filter: saturate(.72) contrast(1.06); }
.encounter-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 55%,rgba(6,31,32,.62)); }
.encounter-image figcaption { position: absolute; z-index: 1; left: clamp(28px,7vw,110px); bottom: clamp(34px,6vw,84px); max-width: 720px; color: var(--white); font-family: var(--serif); font-size: clamp(2.2rem,4vw,4.6rem); line-height: 1; }
.profile { display: grid; grid-template-columns: .85fr 1.15fr; min-height: 700px; background: var(--cream); }
.profile-visual { padding: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; background: var(--gold); color: var(--deep-2); font-family: var(--serif); font-size: clamp(2.6rem,5vw,5.5rem); font-style: italic; }
.profile-visual span:nth-child(2) { color: var(--white); transform: translateX(9%); }
.profile-copy { padding: clamp(70px,9vw,140px); align-self: stretch; display: flex; flex-direction: column; justify-content: center; background: var(--cream) url("assets/carta-beige-utente.jpg") center / cover no-repeat; }
.profile-role { margin: 15px 0 38px; color: var(--gold); text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; }
.profile-copy > p:not(.eyebrow):not(.profile-role) { max-width: 650px; }
.profile-copy .text-link { margin-top: 22px; }
.practical { padding: 150px clamp(28px,7vw,110px); background-color: var(--paper); background-image: linear-gradient(90deg,rgba(247,244,238,.98) 0%,rgba(247,244,238,.9) 60%,rgba(247,244,238,.4) 100%), url("assets/muro-pianta.webp"); background-size: cover; background-repeat: no-repeat; background-position: center, calc(100% + 120px) 60%; }
.practical-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.practical article { min-height: 230px; padding: 32px; border: 1px solid rgba(19,45,44,.15); border-radius: 24px; background: rgba(255,253,248,.78); backdrop-filter: blur(5px); }
.practical article + article { padding-left: 32px; }
.practical h3 { margin: 0 0 12px; }
.practical p { color: var(--muted); }
.student-note { max-width: 900px; margin: 52px 0 0; padding-left: 24px; border-left: 2px solid var(--gold); color: #415653; font-size: 1.05rem; }
.closing-landscape { min-height: min(54vw,680px); background: linear-gradient(180deg,rgba(6,31,32,.03),rgba(6,31,32,.12)), url("assets/tramonto.webp") center 72% / cover no-repeat; }
.contact { padding: 155px clamp(28px,7vw,110px) 120px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 10vw; position: relative; background: #d8b872; }
.contact::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 74px; background: transparent; border-radius: 0 0 50% 50% / 0 0 100% 100%; box-shadow: 0 -38px 0 38px rgba(6,31,32,.11); pointer-events: none; }
.contact > div:first-child > p:last-child { max-width: 700px; font-size: 1.08rem; }
.contact-panel { padding: 38px; align-self: center; background: var(--paper) url("assets/carta-beige-utente.jpg") center / cover no-repeat; border-radius: 2px; box-shadow: 0 20px 55px rgba(23,43,41,.15); }
.contact-panel h3 { margin: 18px 0; }
.contact-email { overflow-wrap: anywhere; font-weight: 600; text-underline-offset: 4px; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.button.secondary { border: 1px solid var(--deep); color: var(--deep); }
.test-label { display: inline-block; margin: 0; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }
.disabled { margin-top: 20px; background: #d8ddda; color: #687572; cursor: not-allowed; }
footer { padding: 56px clamp(28px,7vw,110px); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; background: #061f20; color: rgba(255,255,255,.78); font-size: .82rem; }
footer strong { color: white; font-family: var(--serif); font-size: 1.35rem; font-weight: 400; }
footer p { margin: 7px 0; }
.legal { max-width: 380px; }
@media (max-width: 900px) {
  .site-header { height: 76px; }
  .menu-button { display: block; }
  nav { display: none; position: absolute; top: 76px; left: 0; right: 0; padding: 24px; flex-direction: column; align-items: stretch; background: var(--paper); border-bottom: 1px solid var(--line); }
  nav.open { display: flex; }
  .nav-cta { text-align: center; }
  .hero { min-height: auto; grid-template-columns: 1fr; }
  .hero-copy { padding: 82px 26px 110px; }
  .portrait { min-height: 520px; order: -1; }
  .encounter-image { min-height: 680px; }
  .recognition { grid-template-columns: 42px 1fr; padding: 85px 26px; }
  .recognition > p:last-child { grid-column: 2; margin-top: 0; }
  .method { grid-template-columns: 1fr; padding: 95px 26px; }
  .method-statement { position: static; }
  .profile { grid-template-columns: 1fr; }
  .profile-visual { min-height: 470px; }
  .practical-grid { grid-template-columns: 1fr; }
  .practical article,.practical article + article { padding: 28px; border-right: 1px solid rgba(19,45,44,.15); border-bottom: 1px solid rgba(19,45,44,.15); }
  .contact { grid-template-columns: 1fr; }
  .pathways { background-attachment: scroll; }
  .closing-landscape { min-height: 420px; }
  footer { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .brand small { display: none; }
  .brand-mark { width: 38px; height: 38px; }
  h1 { font-size: clamp(3rem,15vw,4.7rem); }
  h2 { font-size: clamp(2.5rem,12vw,4rem); }
  .portrait { min-height: 390px; }
  .portrait img { object-position: 50% 35%; }
  .encounter-image { min-height: 560px; }
  .cards { grid-template-columns: 1fr; }
  .cards article { min-height: 300px; padding: 32px 26px; }
  .pathways,.practical,.contact { padding: 88px 26px; }
  .closing-landscape { min-height: 330px; }
  .profile-copy { padding: 80px 26px; }
  .profile-visual { min-height: 390px; padding: 34px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }