/* =========================================================
   Giacomo Guerrini — style.css
   Colors, fonts and spacing live in :root — change them there.
   ========================================================= */

/* Loubag (logo font) — used for all titles */
@font-face { font-family: "Loubag"; font-weight: 100 600; src: url("../fonts/Loubag-Medium.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Junicode"; font-style: italic; src: url("../fonts/Junicode-ItalicCondensed.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Loubag"; font-weight: 700 900; src: url("../fonts/Loubag-Bold.woff2") format("woff2"); font-display: swap; }

:root {
  --cream: #fcfaf6;      /* background */
  --hand: "Homemade Apple", "Caveat", cursive;   /* handwritten notes */
  --plum: #2a1a1f;       /* text, borders */
  --line: rgba(42, 26, 31, 0.22);
  --border: 2px solid var(--plum);

  --logo: "Loubag", Georgia, serif;
  --display: "Jost", "Helvetica Neue", Arial, sans-serif;           /* titles, menu, buttons */
  --italic: "Bodoni Moda", "Didot", Georgia, serif;               /* italic accents */
  --text: "Arimo", "Helvetica Neue", Arial, sans-serif;             /* body */

  --gutter: clamp(16px, 4vw, 64px);
  --max: 1320px;
  --section: clamp(96px, 13vw, 200px);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--cream); color: var(--plum);
  font-family: var(--text); font-weight: 400; font-size: 14px; line-height: 1.8; letter-spacing: 0;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 1px solid var(--plum); outline-offset: 4px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--plum); color: var(--cream); padding: 8px 14px; z-index: 100; }

/* ---------- Type ---------- */
.eyebrow, .italic, .lead {
  font-family: var(--italic); font-style: italic; font-weight: 400; letter-spacing: 0; text-transform: none;
}
.eyebrow { font-size: 21px; display: block; margin-bottom: 8px; }
.lead { font-size: clamp(20px, 2vw, 24px); line-height: 1.45; }
.title {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  letter-spacing: .08em; line-height: 1.25; font-size: clamp(24px, 2.8vw, 36px); margin: 0;
}
.title--xl { font-size: clamp(28px, 4.2vw, 54px); letter-spacing: .06em; }
.label {
  font-family: var(--display); font-weight: 500; text-transform: uppercase;
  letter-spacing: .12em; font-size: 12px; line-height: 1.6;
}
p { margin: 0 0 1.1em; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: 760px; }
.section { padding: var(--section) 0 0; }
.section--tint { background: transparent; }
.center { text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  height: 33px; padding: 0 36px; line-height: 1; border: 1px solid #2b161d; color: #2b161d; background: transparent; cursor: pointer;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.btn:hover, .btn:focus-visible { background: transparent; border-color: transparent; }
.btn--solid { background: var(--plum); color: var(--cream); }
.btn--solid:hover, .btn--solid:focus-visible { background: transparent; border-color: transparent; color: var(--plum); }
.btn--white { background: var(--cream); border-color: var(--cream); color: var(--plum); }
.btn--white:hover, .btn--white:focus-visible { background: transparent; border-color: transparent; color: var(--cream); }
.btn--light { border-color: var(--cream); color: var(--cream); }
.btn--light:hover, .btn--light:focus-visible { background: transparent; border-color: transparent; color: var(--cream); }
.link-line { font-family: var(--display); font-weight: 500; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 3px; }

/* ---------- Photo frames: 2px border, no gap, no rounding ---------- */
.frame { border: var(--border); padding: 0; overflow: hidden; background: var(--cream); }
.frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
a:hover .frame img, .frame:hover img { transform: scale(1.03); }
.ratio-45 { aspect-ratio: 4 / 5; }

/* ---------- Hand-drawn SVGs ---------- */
.draw { overflow: visible; }
.draw path { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.draw path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease) .2s; }
.draw.is-drawn path, .is-in .draw path { stroke-dashoffset: 0; }
.draw path + path { transition-delay: .9s; }
.flourish { display: block; width: 200px; max-width: 70%; height: auto; margin-top: 8px; }

/* ---------- Header ---------- */
.topbar {
  display: flex; justify-content: space-between; align-items: center; padding: 10px var(--gutter);
  font-family: var(--display); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
}
.lang { margin-left: auto; }
.lang a { opacity: .45; padding: 4px 2px; }
.lang a[aria-current="true"] { opacity: 1; border-bottom: 1px solid currentColor; }
.lang span { opacity: .35; margin: 0 4px; }

.header { padding: 4px var(--gutter) 0; text-align: center; position: relative; }
.wordmark { display: inline-flex; align-items: flex-end; gap: clamp(9px, .94vw, 14px); line-height: 0; }
.wordmark img { width: clamp(220px, 24vw, 360px); height: auto; }
/* "Photo" next to the name: narrow italic, as tall as the name */
.wordmark-photo { font-family: "Junicode", var(--italic); font-style: italic; font-weight: 400; font-size: clamp(37px, 4.02vw, 60px); line-height: .8; color: #2b161d; transform: translateY(.12em); white-space: nowrap; }
.nav { margin-top: 14px; }
.nav ul { list-style: none; display: flex; justify-content: center; align-items: center; gap: clamp(18px, 2.8vw, 40px); margin: 0; padding: 0; }
.nav a {
  font-family: var(--display); font-weight: 600; font-style: normal;
  font-size: 11px; line-height: 1.8; letter-spacing: .05em; text-transform: uppercase; text-align: center;
  color: #2b161d; padding: 6px 0; position: relative;
  text-decoration: underline transparent; text-underline-offset: 5px; text-decoration-thickness: 1px;
  transition-property: text-decoration; transition-duration: .5s;
}
.nav a:not(.nav-cta):hover, .nav a:not(.nav-cta)[aria-current="page"] { text-decoration-color: currentColor; }
.nav-cta { padding: 6px 4px !important; }
.nav-cta .scribble { position: absolute; left: -16px; top: -6px; width: calc(100% + 32px); height: calc(100% + 12px); pointer-events: none; }
.nav-cta .scribble path { stroke-dashoffset: 0; }
.menu-toggle { display: none; }

@media (max-width: 820px) {
  .header { display: flex; justify-content: space-between; align-items: center; text-align: left; padding: 4px var(--gutter) 8px; }
  .wordmark img { width: 190px; }
  .wordmark { gap: 7px; }
  .wordmark-photo { font-size: 32px; }
  .menu-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 6px; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; padding: 10px; }
  .menu-toggle span { display: block; height: 1.5px; background: var(--plum); }
  .nav { position: fixed; inset: 0; background: var(--cream); z-index: 50; margin: 0; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s; }
  .nav.is-open { opacity: 1; visibility: visible; }
  .nav ul { flex-direction: column; gap: 26px; }
  .nav a { font-size: 15px; }
  .nav-close { position: absolute; top: 18px; right: var(--gutter); width: 44px; height: 44px; background: none; border: 0; font-size: 30px; line-height: 1; cursor: pointer; color: var(--plum); }
}
@media (max-width: 360px) {
  .wordmark img { width: 160px; }
  .wordmark { gap: 6px; }
  .wordmark-photo { font-size: 27px; }
}
@media (min-width: 821px) { .nav-close { display: none; } }

/* ---------- Hero ---------- */
.hero { padding: clamp(40px, 4.4vw, 72px) var(--gutter) 0; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.15vw, 22px); width: min(100%, 72vw, 1240px); margin: 0 auto; }
.hero-grid .frame { aspect-ratio: 7 / 8; }
@media (max-width: 820px) { .hero { padding-top: 18px; } }
.hero-slides { position: relative; }
.hero-slides img { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--ease); }
.hero-slides img.is-active { opacity: 1; }
.hero-caption { width: min(100%, 72vw, 1240px); margin: 0 auto; padding: clamp(48px, 4.5vw, 80px) 0 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 20px; }
.hero-caption .italic { font-size: 21px; padding-top: 2px; }
.hero-caption .italic:last-child { text-align: right; }
.hero-caption h1 { font-size: clamp(18px, 2vw, 26px); text-align: center; }
@media (max-width: 1000px) {
  .hero-caption { grid-template-columns: 1fr; text-align: center; gap: 8px; }
  .hero-caption .italic:last-child { text-align: center; }
}
@media (max-width: 700px) {
  .hero-grid, .hero-caption { width: 100%; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-grid .frame:first-child { display: none; }
  .hero-caption { grid-template-columns: 1fr; text-align: center; gap: 10px; }
  .hero-caption .italic:last-child { text-align: center; }
}

/* ---------- Scattered photos with depth (approach + collection) ---------- */
/* the pinned "approach" section only stays pinned inside .curtain, i.e. until the big photo has passed */
.curtain { position: relative; }
.scatter, .collection { position: relative; max-width: 1440px; margin: 0 auto; }
.scatter { height: clamp(1080px, 98vw, 1420px); margin-top: clamp(40px, 6vw, 100px); position: sticky; top: var(--stick, 0px); z-index: 0; }
.packages { position: relative; z-index: 1; background: var(--cream); padding-top: 0; margin-top: clamp(40px, 5vw, 80px); }
.float { position: absolute; will-change: transform; }
.float .frame { width: 100%; height: 100%; }
.float[data-depth="far"] .frame { filter: blur(2.5px); opacity: .85; }
.float[data-depth="far"] .frame img { transform: none !important; }
.float[data-depth="mid"] .frame { filter: blur(.4px); }
/* "My approach" photos: gentler blur levels chosen by Giacomo */
.scatter .float[data-depth="far"] .frame { filter: blur(1.6px); opacity: .92; }
.scatter .float[data-depth="mid"] .frame { filter: blur(1.1px); }
/* approach collage positions (percent of section) */
.s1 { left: 15%; top: 1%;  width: 13%; aspect-ratio: 4/5; }
.s2 { left: 2%;  top: 40%; width: 15%; aspect-ratio: 4/5; }
.s3 { left: 55%; top: 5%;  width: 26%; aspect-ratio: 3/4; }
.s4 { left: 33%; top: 22%; width: 13%; aspect-ratio: 4/5; }
.s5 { left: 85%; top: 2%;  width: 12%; aspect-ratio: 4/5; }
.s6 { left: 21%; top: 56%; width: 20%; aspect-ratio: 4/3; }
.s7 { left: 47%; top: 45%; width: 18%; aspect-ratio: 4/5; }
.s8 { left: 78%; top: 40%; width: 20%; aspect-ratio: 3/4; }
.s9 { left: 88%; top: 72%; width: 11%; aspect-ratio: 4/5; }
.scatter-text {
  position: absolute; left: 6%; right: 18%; bottom: clamp(40px, 6vw, 100px);
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 6%; align-items: start;
}
.scatter-text p { max-width: 460px; }

/* collection positions */
.collection { height: clamp(900px, 78vw, 1150px); margin-top: var(--section); }
.k1 { left: 3%;  top: 0;   width: 12%; aspect-ratio: 4/5; }
.k2 { left: 30%; top: 3%;  width: 16%; aspect-ratio: 4/5; }
.k3 { left: 78%; top: 0;   width: 20%; aspect-ratio: 4/5; }
.k4 { left: 3%;  top: 58%; width: 21%; aspect-ratio: 4/5; }
.k5 { left: 28%; top: 72%; width: 10%; aspect-ratio: 3/4; }
.k6 { left: 61%; top: 56%; width: 12%; aspect-ratio: 3/4; }
.collection-text { position: absolute; left: 0; right: 0; top: 40%; text-align: center; }
.collection-text .italic { font-size: clamp(22px, 2.4vw, 30px); margin: 4px 0 24px; }

@media (max-width: 760px) {
  .scatter, .collection { height: auto; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; padding: 0 var(--gutter); }
  .float { position: static; width: auto !important; transform: none !important; }
  .float[data-depth="far"] { display: none; }
  .float .frame { filter: none !important; opacity: 1 !important; }
  .scatter-text, .collection-text { position: static; grid-column: span 2; grid-template-columns: 1fr; gap: 18px; padding-top: 40px; text-align: left; }
  .collection-text { order: -1; text-align: center; padding: 0 0 24px; }
}

/* ---------- Packages ---------- */
.bleed { padding: 0 var(--gutter); }
.bleed .frame { max-width: var(--max); margin: 0 auto; aspect-ratio: 16 / 7.5; }
.wide-slides { position: relative; }
.wide-slides img { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s var(--ease), transform .6s var(--ease); }
.wide-slides img.is-active { opacity: 1; }
.packages-row { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: start; padding-top: clamp(48px, 6vw, 90px); }
.packages-row .btn { margin-top: 28px; }
/* full-width line between the packages and the about section */
.page-divider { border: 0; border-top: 1px solid var(--plum); width: 100%; margin: clamp(80px, 9vw, 140px) 0 0; }
.page-divider + .about-home { padding-top: clamp(80px, 9vw, 140px); }
.pk-list { list-style: none; margin: 0; padding: 0; min-width: 300px; }
.pk-list li { display: flex; align-items: baseline; gap: 22px; padding: 4px 0 18px; }
.svc-num { font-family: var(--display); font-size: 12px; font-weight: 500; letter-spacing: .08em; min-width: 26px; }
.svc-name { font-family: var(--italic); font-style: italic; font-size: clamp(28px, 2.8vw, 38px); line-height: 1.1; transition: opacity .3s; }
.svc-name:hover { opacity: .6; }
@media (max-width: 760px) {
  .bleed .frame { aspect-ratio: 4 / 3; }
  .packages-row { grid-template-columns: 1fr; }
  .pk-list { min-width: 0; }
}

/* ---------- About (home) ---------- */
.about-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 7vw, 120px); align-items: center; }
.about-big { aspect-ratio: 1 / 1.08; }
.about-text { text-align: center; max-width: 500px; margin: 0 auto; }
.about-portrait { position: relative; width: 44%; margin: 0 auto 40px; }
.about-portrait .frame { aspect-ratio: 7 / 8; }
.squiggle { position: absolute; right: -24%; top: 6%; width: 40%; height: auto; z-index: 2; pointer-events: none; }
.about-text .title { margin-bottom: 18px; }
.about-text .lead { margin-bottom: 20px; }
.about-text .btn { margin-top: 14px; }
@media (max-width: 820px) { .about-grid { grid-template-columns: 1fr; } .about-big { aspect-ratio: 4 / 3; } }

/* ---------- Testimonials ---------- */
.reviews-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 8vw, 140px); align-items: center; }
.review-nav { display: flex; gap: 22px; margin: 26px 0 50px; }
.review-nav button { position: relative; background: none; border: 0; cursor: pointer; padding: 10px 6px; min-width: 44px; min-height: 44px; font-family: var(--display); font-size: 13px; font-weight: 500; letter-spacing: .06em; }
.tab-circle { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; transform: translate(-50%, -50%); pointer-events: none; }
.review-nav button .tab-circle path { stroke-dashoffset: 1; }
.review-nav button[aria-selected="true"] .tab-circle path { stroke-dashoffset: 0; }
.review-track { position: relative; }
.review { display: none; }
.review.is-active { display: block; animation: fadeUp .7s var(--ease); }
.review blockquote { margin: 0; }
.review .quote { font-family: var(--italic); font-style: italic; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.3; margin-bottom: 26px; max-width: 460px; }
.review .body { max-width: 520px; }
.rv-photos { position: relative; aspect-ratio: 16 / 10; }
.rv-photo { position: absolute; inset: 0; opacity: 0; transition: opacity .8s var(--ease); }
.rv-photo.is-active { opacity: 1; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 820px) { .reviews-grid { grid-template-columns: 1fr; } .rv-photos { order: -1; } }

/* ---------- Journal ---------- */
.journal-sub { font-size: clamp(20px, 2vw, 24px); margin: 8px auto 0; display: inline-block; }
.journal-sub .flourish { margin: 2px 0 0 auto; width: 150px; }
.posts { display: grid; grid-template-columns: 1fr 1.45fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: start; margin: clamp(48px, 6vw, 90px) auto; }
.post { display: block; text-align: center; }
.post .frame { aspect-ratio: 4 / 5; }
.post--2 { margin-top: -60px; }
.post--2 .frame { aspect-ratio: 4 / 4.9; }
.post--1, .post--3 { margin-top: 60px; }
.post h3 { margin: 26px auto 0; max-width: 320px; font-size: 12.5px; }
@media (max-width: 760px) {
  .posts { grid-template-columns: 1fr; }
  .post--1, .post--2, .post--3 { margin-top: 0; }
}

/* ---------- CTA banner ---------- */
.cta { position: relative; margin: var(--section) var(--gutter) 0; }
.cta-inner { position: relative; max-width: var(--max); margin: 0 auto; aspect-ratio: 16 / 7.8; overflow: hidden; border: var(--border); }
.cta-inner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-inner::after { content: ""; position: absolute; inset: 0; background: rgba(20, 14, 16, .45); }
.cta-text { position: absolute; z-index: 1; left: 0; right: 0; top: 0; padding: clamp(28px, 5vw, 80px); color: var(--cream); }
.cta-text .title { max-width: 680px; margin-bottom: 34px; font-size: clamp(24px, 3vw, 40px); }
.cta-text .eyebrow { color: var(--cream); }
.circled { position: relative; display: inline-block; }
.circled .scribble { position: absolute; left: -12%; top: -18%; width: 124%; height: 140%; color: var(--cream); }
@media (max-width: 700px) { .cta-inner { aspect-ratio: 4 / 5; } }

/* ---------- Footer ---------- */
.footer { margin-top: var(--section); border-top: 1px solid var(--plum); }
.footer-main { display: grid; grid-template-columns: 1fr auto 1fr; gap: 40px; align-items: center; padding: 56px var(--gutter); max-width: var(--max); margin: 0 auto; }
.footer h3 { font-family: var(--italic); font-style: italic; font-weight: 400; font-size: 22px; margin: 0 0 14px; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer-links { display: grid; grid-template-columns: repeat(2, max-content); column-gap: 40px; row-gap: 8px; }
.footer-links a, .footer-social a { font-family: var(--display); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.footer-links a:hover, .footer-social a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-social { text-align: right; }
.footer-social li { padding: 4px 0; }
.footer-logo { display: block; line-height: 0; }
.footer-logo img { width: clamp(150px, 14vw, 210px); height: auto; }
.footer-strip, .footer-legal { border-top: 1px solid var(--plum); padding: 14px var(--gutter); text-align: center; font-family: var(--display); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 40px; font-size: 10px; }
@media (max-width: 760px) {
  .footer-main { grid-template-columns: 1fr; text-align: center; }
  .footer-links { justify-content: center; }
  .footer-social { text-align: center; }
  .footer-logo { order: -1; margin: 0 auto; }
}

/* ---------- Inner pages ---------- */
.page-head { text-align: center; padding: clamp(48px, 7vw, 110px) var(--gutter) clamp(36px, 5vw, 70px); }
.page-head .title { margin-bottom: 18px; }
.page-head p { max-width: 620px; margin: 0 auto; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 7vw, 110px); align-items: center; }
.split--rev > :first-child { order: 2; }
.split-photos { position: relative; }
.split-photos .small { position: absolute; width: 42%; right: -8%; bottom: -10%; }
@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; }
  .split--rev > :first-child { order: 0; }
  .split-photos { margin-bottom: 40px; }
  .split-photos .small { right: 0; bottom: -30px; width: 40%; }
}

.pkg { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 7vw, 110px); align-items: center; padding: clamp(48px, 7vw, 100px) 0; border-top: 1px solid var(--line); }
.pkg:nth-of-type(even) .pkg-photo { order: 2; }
.pkg-num { font-family: var(--display); font-size: 12px; font-weight: 500; letter-spacing: .14em; display: block; margin-bottom: 12px; }
.pkg h2 { font-family: var(--italic); font-style: italic; font-weight: 400; font-size: clamp(36px, 4vw, 56px); line-height: 1.05; margin: 0 0 18px; }
.pkg ul { list-style: none; padding: 0; margin: 20px 0 26px; border-top: 1px solid var(--line); }
.pkg ul li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.price { font-family: var(--display); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; font-size: 15px; margin-bottom: 24px; }
.price em { font-family: var(--italic); text-transform: none; letter-spacing: 0; font-size: 20px; margin-right: 6px; }
@media (max-width: 820px) { .pkg { grid-template-columns: 1fr; } .pkg:nth-of-type(even) .pkg-photo { order: 0; } }

.steps { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.steps li { border-top: 1.5px solid var(--plum); padding-top: 18px; }
.steps .svc-num { display: block; margin-bottom: 10px; }
.steps h3 { font-family: var(--italic); font-style: italic; font-weight: 400; font-size: 26px; margin: 0 0 8px; line-height: 1.2; }
.steps p { font-size: 14px; }
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

.faq { border-top: 1px solid var(--line); margin-top: 40px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative; font-family: var(--italic); font-style: italic; font-size: clamp(21px, 2vw, 25px); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--display); font-style: normal; font-size: 20px; transition: transform .3s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details > div { padding: 0 0 22px; max-width: 680px; }

.values { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); }
.values li { border-top: 1.5px solid var(--plum); padding-top: 18px; }
.values h3 { font-family: var(--italic); font-style: italic; font-weight: 400; font-size: 28px; margin: 8px 0 10px; }
@media (max-width: 820px) { .values { grid-template-columns: 1fr; } }
.facts { list-style: none; padding: 0; margin: 24px 0 0; border-top: 1px solid var(--line); }
.facts li { display: flex; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.facts li .svc-num { padding-top: 5px; }

.gallery { columns: 3 280px; column-gap: clamp(10px, 1.4vw, 18px); padding: 0 var(--gutter); max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; }
.gallery a { display: block; margin-bottom: clamp(10px, 1.4vw, 18px); break-inside: avoid; overflow: hidden; cursor: zoom-in; border: var(--border); }
.gallery img { width: 100%; transition: transform .6s var(--ease); }
.gallery a:hover img { transform: scale(1.03); }
.lightbox { position: fixed; inset: 0; background: rgba(252, 250, 246, .97); z-index: 90; display: none; align-items: center; justify-content: center; padding: 60px 70px; }
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox button { position: absolute; background: none; border: 0; cursor: pointer; color: var(--plum); font-family: var(--display); font-size: 26px; width: 48px; height: 48px; }
.lb-close { top: 12px; right: 12px; }
.lb-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 10px; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) { .lightbox { padding: 60px 8px; } .lb-prev, .lb-next { top: auto; bottom: 8px; transform: none; } }

.contact { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 7vw, 110px); align-items: start; }
.contact-aside .frame { margin-bottom: 30px; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 24px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: span 2; }
.field label { font-family: var(--display); font-weight: 500; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.field input, .field select, .field textarea { border: 0; border-bottom: 1px solid var(--plum); background: transparent; padding: 10px 2px; font-size: 16px; border-radius: 0; min-height: 44px; }
.field textarea { min-height: 140px; resize: vertical; border: 1px solid var(--plum); padding: 12px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; box-shadow: 0 1px 0 var(--plum); }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--plum) 50%), linear-gradient(135deg, var(--plum) 50%, transparent 50%); background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.choice { display: flex; flex-wrap: wrap; gap: 8px; }
.choice label { cursor: pointer; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { display: inline-block; border: 1px solid var(--plum); border-radius: 999px; padding: 4px 14px; font-family: var(--italic); font-style: italic; font-size: 15px; transition: background .3s, color .3s; }
.choice input:checked + span { background: var(--plum); color: var(--cream); }
.choice input:focus-visible + span { outline: 1px solid var(--plum); outline-offset: 3px; }
.hp { position: absolute; left: -9999px; }
@media (max-width: 820px) { .contact { grid-template-columns: 1fr; } .form { grid-template-columns: 1fr; } .field--full { grid-column: auto; } }

/* ---------- About page ----------
   Desktop mirrors the reference layout measured at 1108px wide:
   every distance is "N * var(--s)", so the whole page scales with the window. */
:root {
  --s: calc(min(100vw, 1200px) / 1108);   /* layout unit: 1px of the 1108px measurement */
  --fs: calc(min(100vw, 1200px) / 1200);  /* type unit: fonts are full size from 1200px up, like the reference */
}

/* shared type */
.ab-intro .title, .peek-text .title, .ab-col .title, .travel .title {
  font-family: var(--display); font-weight: 500; font-style: normal;
  line-height: 1.4; letter-spacing: .03em; text-transform: uppercase; color: #2b161d; margin: 0;
}
.ab-intro .title { font-size: 33px; line-height: 35px; text-align: center; }
.peek-text .title, .ab-col .title, .travel .title { font-size: 25px; text-align: left; }
.peek-text .eyebrow { font-family: var(--italic); font-style: italic; font-weight: 400; font-size: 20px; line-height: 1.3; letter-spacing: 0; text-transform: capitalize; color: #2b161d; margin: 0 0 8px; }
:lang(it) .peek-text .eyebrow { text-transform: none; } /* Italian uses sentence case */
.ab-intro .lead { font-family: var(--italic); font-style: italic; font-size: 20px; line-height: 1.3; color: #2b161d; }
.ab-canvas figcaption { font-family: var(--italic); font-style: italic; font-size: 17px; line-height: 1.3; color: #2b161d; margin-top: 9px; }
.ab-cols p, .peek-text p, .ab-col > p, .travel p { font-size: 14px; line-height: 1.8; color: #2b161d; margin: 0; }
.ab-col > p { line-height: 1.7; }
.ab-col > p + p { margin-top: 1.1em; }
.value-tabs { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.value-tabs button {
  position: relative; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--italic); font-style: italic; font-weight: 400; font-size: 30px; line-height: 39px; letter-spacing: 0;
  color: #2b161d; text-align: left;
}
.value-tabs .scribble { position: absolute; left: -28px; top: -12px; width: calc(100% + 62px); height: calc(100% + 24px); pointer-events: none; }
.value-tabs .scribble path { stroke-dashoffset: 1 !important; transition: stroke-dashoffset .9s var(--ease); }
.value-tabs button[aria-selected="true"] .scribble path { stroke-dashoffset: 0 !important; }
.value-texts { display: grid; }
.value-text { grid-area: 1 / 1; margin: 0; font-size: 14px; line-height: 1.7; color: #2b161d; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease); }
.value-text.is-active { opacity: 1; visibility: visible; }
.travel-bl { display: block; font-family: var(--display); font-weight: 500; font-size: 12px; letter-spacing: .05em; line-height: 1.3; }
.bucketlist { text-transform: capitalize; transition: color .5s, font-size .5s; }
:lang(it) .bucketlist { text-transform: none; } /* "Lago di Como", not "Lago Di Como" */
.trips { list-style: none; margin: 0; padding: 0; }
.trips li { display: flex; flex-direction: column; }
.trips .label { font-family: var(--display); font-weight: 500; font-size: 12px; letter-spacing: .05em; line-height: 1.3; }
.trip-place { font-family: var(--italic); font-style: italic; font-size: 30px; line-height: 1.3; color: #2b161d; }
.ab-canvas .float { margin: 0; }
.ab-canvas .float .frame { filter: none; }
.cv8 img { object-position: 100% 100%; } /* crop anchored bottom-right */

@media (min-width: 761px) {
  /* type scales with the window below 1200px, exactly like the reference */
  .ab-intro .title { font-size: calc(33 * var(--fs)); line-height: calc(35 * var(--fs)); }
  .peek-text .title, .ab-col .title, .travel .title { font-size: calc(25 * var(--fs)); }
  .peek-text .eyebrow, .ab-intro .lead { font-size: calc(20 * var(--fs)); }
  .ab-canvas figcaption { font-size: calc(17 * var(--fs)); }
  .ab-cols p, .peek-text p, .ab-col > p, .travel p, .value-text { font-size: calc(14 * var(--fs)); }
  .value-tabs button { font-size: calc(30 * var(--fs)); line-height: calc(39 * var(--fs)); }
  .value-tabs { gap: calc(57 * var(--s) - 39 * var(--fs)); }
  .trip-place { font-size: calc(30 * var(--fs)); }
  .travel-bl, .trips .label { font-size: calc(12 * var(--fs)); }
  .ab-hero { padding-top: calc(74 * var(--s)); }
  .ab-portrait { width: calc(355 * var(--s)); height: calc(411 * var(--s)); margin: 0 auto; }
  .ab-intro { width: calc(1108 * var(--s)); margin: 0 auto; padding: calc(63 * var(--s)) 0 calc(20 * var(--s)); text-align: center; }
  .ab-intro .lead { width: calc(457 * var(--s)); margin: calc(25 * var(--s)) auto 0; }
  .ab-cols { width: calc(606 * var(--s)); margin: calc(29 * var(--s)) auto 0; columns: 2; column-gap: calc(40 * var(--s)); text-align: left; }
  .ab-intro .btn { margin-top: calc(34 * var(--s)); }

  .ab-canvas { position: relative; width: 100%; height: calc(1760 * var(--s)); overflow-x: clip; }
  .ab-canvas .float { position: absolute; }
  .cv2, .cv4 { z-index: 2; }
  .cv1 { left: calc(50 * var(--s)); top: calc(58 * var(--s)); width: calc(410 * var(--s)); }
  .cv1 .frame { height: calc(537 * var(--s)); }
  .cv2 { left: calc(405 * var(--s)); top: calc(538 * var(--s)); width: calc(192 * var(--s)); }
  .cv2 .frame { height: calc(240 * var(--s)); }
  .cv4 { left: calc((100% - 1108 * var(--s)) / 2 + 831 * var(--s)); top: calc(912 * var(--s)); width: calc(144 * var(--s)); }
  .cv4 .frame { height: calc(169 * var(--s)); }
  .cv4 figcaption { position: absolute; left: 100%; bottom: 0; width: calc(120 * var(--s)); margin: 0 0 0 calc(12 * var(--s)); } /* beside the photo: below it would sit on top of .cv5 */
  .cv5 { left: calc((100% - 1108 * var(--s)) / 2 + 571 * var(--s)); top: calc(1043 * var(--s)); width: calc(294 * var(--s)); }
  .cv5 .frame { height: calc(369 * var(--s)); }
  .cv6 { left: calc(-13 * var(--s)); top: calc(1090 * var(--s)); width: calc(299 * var(--s)); }
  .cv6 .frame { height: calc(380 * var(--s)); }
  .cv6 figcaption { padding-left: calc(63 * var(--s)); } /* the photo bleeds off the left edge; line the caption up with the column */
  .cv7 { left: calc((100% - 1108 * var(--s)) / 2 + 300 * var(--s)); top: calc(1478 * var(--s)); width: calc(260 * var(--s)); }
  .cv7 .frame { height: calc(202 * var(--s)); }
  .cv8 { left: calc((100% - 1108 * var(--s)) / 2 + 953 * var(--s)); top: calc(1343 * var(--s)); width: calc(198 * var(--s)); }
  .cv8 .frame { height: calc(230 * var(--s)); }
  .cv3 { left: calc((100% - 1108 * var(--s)) / 2 + 701 * var(--s)); right: calc(73 * var(--s)); top: calc(187 * var(--s)); }   /* grows towards the right edge on wide screens */
  .cv3 .frame { height: calc(452 * var(--s)); }
  .peek-text { position: absolute; left: calc(78 * var(--s)); top: calc(712 * var(--s)); width: calc(290 * var(--s)); }
  .peek-text .title { margin-bottom: calc(16 * var(--s)); }

  .ab-split { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 100%; min-height: calc(523 * var(--s)); border-top: 1px solid var(--plum); }
  .ab-split::after { content: ""; position: absolute; left: 50%; top: 0; height: calc(564 * var(--s)); border-left: 1px solid var(--plum); }
  .ab-col:first-child { padding: calc(87 * var(--s)) calc(40 * var(--s)) calc(60 * var(--s)) calc(73 * var(--s)); }
  .ab-col:last-child { padding: calc(97 * var(--s)) calc(76 * var(--s)) calc(60 * var(--s)) calc(78 * var(--s)); }
  .ab-col:first-child .title { margin-bottom: calc(46 * var(--s)); }
  .ab-col:last-child .title { margin-bottom: calc(28 * var(--s)); }
  .value-texts { width: calc(315 * var(--s)); margin-top: calc(30 * var(--s)); }
  .ab-col > p { max-width: calc(333 * var(--s)); }

  .ab-wide { width: 100%; padding: calc(41 * var(--s)) calc(39 * var(--s)) calc(41 * var(--s)) calc(40 * var(--s)); }
  .ab-wide .frame { height: calc(550 * var(--s)); }

  .travel { position: relative; width: 100%; min-height: calc(403 * var(--s)); padding: calc(60 * var(--s)) 0 calc(50 * var(--s)) calc(73 * var(--s)); border-bottom: 1px solid var(--plum); }
  .travel > div { width: calc(400 * var(--s)); }
  .travel .title { margin-bottom: calc(10 * var(--s)); }
  .travel .btn { margin: calc(48 * var(--s)) 0 calc(61 * var(--s)); }
  .travel-bl { margin-bottom: calc(11 * var(--s)); }
  .bucketlist { max-width: calc(309 * var(--s)); }
  .trips { position: absolute; top: calc(60 * var(--s)); left: calc(100% - 570 * var(--s)); right: 0; display: grid; grid-template-columns: calc(304 * var(--s)) 1fr; grid-auto-rows: calc(117 * var(--s)); }   /* glued to the right edge */
  .trips li { gap: calc(10 * var(--s)); }

  .ab-cta { width: 100%; margin: 0 !important; padding: calc(41 * var(--s)) calc(39 * var(--s)) calc(41 * var(--s)) calc(40 * var(--s)); }
  .ab-cta .cta-inner { max-width: none; aspect-ratio: auto; height: calc(612 * var(--s)); }
  .ab-cta .cta-text { padding: calc(53 * var(--s)) calc(46 * var(--s)); }
  .ab-cta .cta-text .title { font-family: var(--display); font-weight: 500; font-size: calc(25 * var(--fs)); line-height: 1.4; letter-spacing: .03em; max-width: calc(380 * var(--s)); margin-bottom: calc(30 * var(--s)); }
}

/* phone: one column, scattered photos become a simple grid */
@media (max-width: 760px) {
  .ab-hero { padding: 32px var(--gutter) 0; }
  .ab-portrait { width: 100%; aspect-ratio: 355 / 411; }
  .ab-intro { padding: 48px var(--gutter) 0; text-align: center; }
  .ab-intro .title { font-size: 26px; }
  .ab-intro .lead { margin: 18px auto 24px; }
  .ab-cols { text-align: left; margin-bottom: 32px; }
  .ab-canvas { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px 12px; padding: 0 var(--gutter); margin-top: 72px; }
  .ab-canvas .float { transform: none !important; }
  .ab-canvas .float .frame { aspect-ratio: 4 / 5; height: auto; }
  .cv1, .cv6 { grid-column: span 2; }
  .cv1, .cv2, .cv3 { order: -2; }
  .peek-text { grid-column: span 2; order: -1; padding: 32px 0 8px; }
  .peek-text .title { margin-bottom: 16px; }
  .ab-split { display: block; border-top: 1px solid var(--plum); margin-top: 64px; }
  .ab-col { padding: 48px var(--gutter); }
  .ab-col + .ab-col { border-top: 1px solid var(--plum); }
  .ab-col .title { margin-bottom: 28px; }
  .value-texts { margin-top: 28px; }
  .ab-wide { padding: 0 var(--gutter); }
  .ab-wide .frame { aspect-ratio: 4 / 3; }
  .travel { padding: 64px var(--gutter) 0; }
  .travel .title { margin-bottom: 10px; }
  .travel .btn { margin: 28px 0 40px; }
  .travel-bl { margin-bottom: 10px; }
  .trips { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 20px; margin-top: 48px; }
  .trips li { gap: 8px; }
  .trip-place { font-size: 24px; }
}

/* ---------- About: story sections (little things, path, travel, good life) ---------- */
.ab-little .title, .ab-path .title, .ab-life .title {
  font-family: var(--display); font-weight: 500; font-style: normal;
  font-size: 25px; line-height: 1.4; letter-spacing: .03em; text-transform: uppercase; color: #2b161d; margin: 0;
}
.ab-path-head .eyebrow, .ab-life .eyebrow { font-family: var(--italic); font-style: italic; font-size: 20px; line-height: 1.3; color: #2b161d; margin: 0 0 8px; }
.ab-little p, .ab-path p, .ab-life p, .travel-quote figcaption { font-size: 14px; line-height: 1.8; color: #2b161d; margin: 0; }
.ab-sign, .thing, .step-title, .ab-life .lead { font-family: var(--italic); font-style: italic; font-weight: 400; color: #2b161d; letter-spacing: 0; text-transform: none; }
.ab-little p.ab-sign { font-size: 20px; line-height: 1.3; margin-top: 24px; }
.things, .steps { list-style: none; margin: 0; padding: 0; }
.things li { display: flex; flex-direction: column; gap: 8px; }
.things .label, .steps .label { font-family: var(--display); font-weight: 500; font-size: 12px; letter-spacing: .05em; line-height: 1.3; }
.thing { font-size: 24px; line-height: 1.25; }
.ab-little, .ab-path { border-top: 1px solid var(--plum); }
.steps li { position: relative; border-top: 1px solid var(--plum); padding-top: 22px; }
.steps li::before { content: ""; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--plum); }
.step-title { font-size: 26px; line-height: 1.2; margin: 10px 0 14px; }
.travel-quote { margin: 0; }
.travel-quote blockquote { margin: 0; }
.travel-quote blockquote p { font-size: 28px; line-height: 1.3; margin: 0; }
.travel-quote figcaption { margin-top: 16px; }
.travel .bucketlist { margin-top: 0; }
.ab-life { text-align: center; }
.ab-life .ab-faith { margin: 0 auto; }
.ab-life .lead { font-size: 22px; line-height: 1.35; }

@media (min-width: 761px) {
  .ab-split::after { height: auto; bottom: calc(-41 * var(--s)); }   /* line follows the column, touches the photo */

  .ab-little { display: grid; grid-template-columns: calc(400 * var(--s)) 1fr; column-gap: calc(110 * var(--s)); padding: calc(87 * var(--s)) calc(76 * var(--s)) calc(90 * var(--s)) calc(73 * var(--s)); }
  .ab-little .title { font-size: calc(25 * var(--fs)); margin-bottom: calc(22 * var(--s)); }
  .ab-little p { font-size: calc(14 * var(--fs)); }
  .ab-little p.ab-sign { font-size: calc(20 * var(--fs)); margin-top: calc(28 * var(--s)); }
  .things { display: grid; grid-template-columns: 1fr 1fr; gap: calc(46 * var(--s)) calc(40 * var(--s)); align-content: start; padding-top: calc(6 * var(--s)); }
  .things .label, .steps .label { font-size: calc(12 * var(--fs)); }
  .thing { font-size: calc(24 * var(--fs)); }

  .ab-path { padding: calc(87 * var(--s)) calc(76 * var(--s)) calc(100 * var(--s)) calc(73 * var(--s)); }
  .ab-path-head { margin-bottom: calc(60 * var(--s)); }
  .ab-path-head .eyebrow, .ab-life .eyebrow { font-size: calc(20 * var(--fs)); }
  .ab-path .title, .ab-life .title { font-size: calc(25 * var(--fs)); }
  .steps { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: calc(40 * var(--s)); }
  .steps li { padding-top: calc(24 * var(--s)); }
  .step-title { font-size: calc(26 * var(--fs)); margin: calc(10 * var(--s)) 0 calc(14 * var(--s)); }
  .ab-path p { font-size: calc(14 * var(--fs)); line-height: 1.7; }

  .travel { display: grid; grid-template-columns: calc(420 * var(--s)) 1fr; column-gap: calc(110 * var(--s)); min-height: 0; padding: calc(60 * var(--s)) calc(76 * var(--s)) calc(70 * var(--s)) calc(73 * var(--s)); }
  .travel > div { width: auto; }
  .travel .title { margin-bottom: calc(16 * var(--s)); }
  .travel-bl { margin: calc(30 * var(--s)) 0 calc(8 * var(--s)); }
  .travel .btn { margin: calc(44 * var(--s)) 0 0; }
  .travel-side { padding-top: calc(6 * var(--s)); }
  .travel-quote blockquote p { font-size: calc(28 * var(--fs)); }
  .travel-quote figcaption { font-size: calc(14 * var(--fs)); max-width: calc(380 * var(--s)); margin-top: calc(18 * var(--s)); }
  .travel .trips { position: static; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: auto; column-gap: calc(40 * var(--s)); margin-top: calc(56 * var(--s)); padding-top: calc(28 * var(--s)); border-top: 1px solid var(--line); }
  .trip-place { font-size: calc(26 * var(--fs)); line-height: 1.25; }

  .ab-life { width: calc(600 * var(--s)); margin: 0 auto; padding: calc(110 * var(--s)) 0 calc(100 * var(--s)); }
  .ab-life p { font-size: calc(14 * var(--fs)); }
  .ab-life .ab-faith { max-width: calc(470 * var(--s)); margin: 0 auto; }
  .ab-life .title { margin-bottom: calc(24 * var(--s)); }
  .ab-life .lead { font-size: calc(22 * var(--fs)); max-width: calc(480 * var(--s)); margin: calc(30 * var(--s)) auto 0; }
}

@media (max-width: 760px) {
  .ab-little { padding: 48px var(--gutter); margin-top: 64px; }
  .ab-little .title { margin-bottom: 18px; }
  .things { display: grid; gap: 28px; margin-top: 40px; }
  .thing { font-size: 22px; }
  .ab-path { padding: 48px var(--gutter) 56px; }
  .ab-path-head { margin-bottom: 40px; }
  .steps { display: grid; gap: 40px; }
  .ab-split { margin-top: 0; }
  .travel { padding: 64px var(--gutter) 56px; }
  .travel-bl { margin: 28px 0 8px; }
  .travel .btn { margin: 32px 0 0; }
  .travel-side { margin-top: 48px; }
  .travel-quote blockquote p { font-size: 24px; }
  .travel .trips { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); gap: 28px 20px; }
  .ab-life { padding: 72px var(--gutter) 64px; }
  .ab-life .ab-faith { margin: 0 auto; }
  .ab-life .title { font-size: 22px; margin-bottom: 18px; }
  .ab-life .lead { margin-top: 24px; font-size: 20px; }
}

/* ---------- Experience page ----------
   Desktop mirrors the reference layout measured at 1438px wide. Unit --u = 1px from 1200px up,
   shrinking with the window below. Elements are glued to the left edge (L), the centred grid (C)
   or the right edge (R) exactly as in the reference. */
:root { --u: calc(min(100vw, 1200px) / 1200); }
.ex-hero .title, .ex-approach .title, .ex-packages .title, .ex-process .title, .ex-faq .title,
.ex-reviews .title, .ex-galleries .title, .ex-cta .title, .pk-name {
  font-family: var(--display); font-weight: 500; text-transform: uppercase;
  letter-spacing: .03em; line-height: 1.4; color: #2b161d; margin: 0;
}
.ex-hero .title, .ex-cta .title { color: var(--cream); }
.ex-hero .title, .ex-process .title, .ex-faq .title, .ex-reviews .title, .ex-galleries .title, .pk-name { font-size: 33px; }
.ex-approach .title, .ex-packages .title, .ex-cta .title, .ex-gal-t { font-size: 25px; }
.ex-hero-sub, .ex-approach .eyebrow, .ex-style p, .pk-text .pk-price { font-family: var(--italic); font-style: italic; font-size: 20px; line-height: 1.3; margin: 0; text-transform: none; }
.ex-approach .eyebrow { text-transform: capitalize; }
:lang(it) .ex-approach .eyebrow { text-transform: none; }
.ex-page .label, .ex-style .label, .pk-text .label, .ex-process .label, .ex-reviews .label { font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
.ex-approach p, .pk-text p, .ex-process p, .ex-fq-answer p { font-size: 14px; line-height: 1.8; margin: 0; }
.pk-incl { margin-top: 10px !important; font-size: 13px !important; opacity: .85; }
.js-panel { display: none; }
.js-panel.is-active { display: block; }
.ex-pk-panels .js-panel.is-active { display: block; }
.js-tab { position: relative; background: none; border: 0; padding: 0; cursor: pointer; color: #2b161d; text-align: left; }
.js-tab .scribble, .js-tab .tab-circle { position: absolute; pointer-events: none; }
.js-tab .scribble path, .js-tab .tab-circle path { stroke-dashoffset: 1 !important; transition: stroke-dashoffset .9s var(--ease); }
.js-tab[aria-selected="true"] .scribble path, .js-tab[aria-selected="true"] .tab-circle path { stroke-dashoffset: 0 !important; }
.ex-ch-tabs .js-tab { font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
.ex-ch-tabs .scribble { left: -22px; top: -16px; width: calc(100% + 44px); height: calc(100% + 32px); }
.ex-fq-list .js-tab { display: flex; gap: 10px; align-items: center; font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.6; }
.fq-num { position: relative; display: inline-block; min-width: 24px; }
.fq-num .tab-circle { left: 40%; top: 50%; width: 34px; height: 36px; }
.ex-rv-tabs .js-tab { font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .05em; }
.ex-rv-tabs .tab-circle { left: 45%; top: 50%; width: 34px; height: 36px; }
.rv-quote { font-family: var(--italic); font-style: italic; font-size: 24px; line-height: 1.3; margin: 0 0 22px; }
.rv-body { font-size: 13px; line-height: 1.8; margin: 0 0 18px; }
.ex-reviews blockquote { margin: 0; }
.ex-reviews footer { font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: .1em; }
.ex-gal { display: block; position: relative; }
.ex-gal .frame { position: relative; }
.ex-gal .frame::after { content: ""; position: absolute; inset: 0; background: rgba(20, 14, 16, .25); }
.ex-gal-t { position: absolute; z-index: 1; color: #fff; font-family: var(--display); font-weight: 500; text-transform: uppercase; letter-spacing: .03em; }
.ex-hero-frame, .ex-cta .cta-inner { position: relative; overflow: hidden; max-width: none; margin: 0; }
.ex-hero-frame > img, .ex-cta .cta-inner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ex-hero-frame::after, .ex-cta .cta-inner::after { content: ""; position: absolute; inset: 0; background: rgba(20, 14, 16, .45); }
.ex-hero-text, .ex-cta-text { position: absolute; z-index: 1; left: 0; right: 0; text-align: center; color: var(--cream); }
.ex-hero-text .flourish { color: var(--cream); margin: 4px auto 0; }
.ex-cta .circled .scribble { color: var(--cream); }
.ex-canvas .float .frame { filter: none; }

@media (min-width: 761px) {
  .ex-hero .title, .ex-process .title, .ex-faq .title, .ex-reviews .title, .ex-galleries .title, .pk-name { font-size: calc(33 * var(--u)); }
  .ex-approach .title, .ex-packages .title, .ex-cta .title, .ex-gal-t { font-size: calc(25 * var(--u)); }
  .ex-hero-sub, .ex-approach .eyebrow, .ex-style p, .pk-text .pk-price { font-size: calc(20 * var(--u)); }
  .ex-approach p, .pk-text p, .ex-process p, .ex-fq-answer p { font-size: calc(14 * var(--u)); }
  .rv-quote { font-size: calc(24 * var(--u)); }

  /* hero: framed photo, 43px from both edges */
  .ex-hero { position: relative; height: calc(699 * var(--u)); }
  .ex-hero-frame { position: absolute; left: calc(43 * var(--u)); right: calc(43 * var(--u)); top: calc(44 * var(--u)); height: calc(612 * var(--u)); }
  .ex-hero-text { top: calc(252 * var(--u)); }
  .ex-hero-sub { margin-top: calc(16 * var(--u)); }
  .ex-hero-text .flourish { width: calc(77 * var(--u)); }

  /* my approach */
  .ex-approach { position: relative; height: calc(230 * var(--u)); }
  .ex-ap-head { position: absolute; left: calc((100% - 1200 * var(--u)) / 2 + 70 * var(--u)); top: calc(40 * var(--u)); width: calc(297 * var(--u)); }
  .ex-ap-head .eyebrow { margin-bottom: calc(15 * var(--u)); }
  .ex-ap-head .swoosh { display: block; width: calc(153 * var(--u)); margin: calc(4 * var(--u)) 0 0 calc(93 * var(--u)); }
  .ex-ap-text { position: absolute; left: calc((100% - 1200 * var(--u)) / 2 + 418 * var(--u)); top: calc(78 * var(--u)); width: calc(713 * var(--u)); columns: 2; column-gap: calc(40 * var(--u));}
  .ex-ap-text p + p { margin-top: 1.1em; }

  /* photo canvas */
  .ex-canvas { position: relative; height: calc(702 * var(--u)); overflow-x: clip; }
  .ex-canvas .float { position: absolute; }
  .ex-canvas .float .frame { height: 100%; }
  .ex-c1 { position: absolute; left: calc((100% - 1200 * var(--u)) / 2 + 106 * var(--u)); top: calc(78 * var(--u)); width: calc(404 * var(--u)); height: calc(484 * var(--u)); }
  .ex-c2 { position: absolute; left: calc((100% - 1200 * var(--u)) / 2 + 489 * var(--u)); top: calc(131 * var(--u)); width: calc(166 * var(--u)); height: calc(180 * var(--u)); z-index: 2;}
  .ex-c3 { position: absolute; left: calc((100% - 1200 * var(--u)) / 2 + 691 * var(--u)); top: calc(214 * var(--u)); width: calc(346 * var(--u)); height: calc(434 * var(--u)); }
  .ex-c4 { position: absolute; left: calc((100% - 1200 * var(--u)) / 2 + 1071 * var(--u)); top: calc(35 * var(--u)); width: calc(166 * var(--u)); height: calc(183 * var(--u)); }
  .ex-c5 { position: absolute; left: calc((100% - 1200 * var(--u)) / 2 + -170 * var(--u)); top: calc(472 * var(--u)); width: calc(240 * var(--u)); height: calc(260 * var(--u)); }
  .ex-c6 { position: absolute; right: calc(17 * var(--u)); top: calc(532 * var(--u)); width: calc(191 * var(--u)); height: calc(200 * var(--u)); }
  .ex-style { position: absolute; left: calc((100% - 1200 * var(--u)) / 2 + 691 * var(--u)); top: calc(136 * var(--u)); width: calc(403 * var(--u)); }
  .ex-style .label { display: block; margin-bottom: calc(12 * var(--u)); }

  /* choose the occasion + packages */
  .ex-packages { position: relative; height: calc(724 * var(--u)); }
  .ex-ch-t { position: absolute; left: 0; right: 0; top: calc(37 * var(--u)); text-align: center; }
  .ex-ch-tabs { position: absolute; left: 0; right: 0; top: calc(118 * var(--u)); display: flex; justify-content: center; gap: calc(51 * var(--u)); }
  .ex-pk-panels { position: absolute; left: 0; right: 0; top: calc(180 * var(--u)); height: calc(544 * var(--u)); }
  .pk-photo { position: absolute; left: calc(134 * var(--u)); top: calc(37 * var(--u)); width: calc(541 * var(--u)); height: calc(470 * var(--u)); }
  .pk-text { position: absolute; left: calc((100% - 1200 * var(--u)) / 2 + 663 * var(--u)); top: calc(90 * var(--u)); width: calc(403 * var(--u)); }
  .pk-text .label { display: block; }
  .pk-name { margin: calc(12 * var(--u)) 0 calc(26 * var(--u)); }
  .pk-price { margin-top: calc(22 * var(--u)) !important; }
  .pk-text .btn { margin-top: calc(36 * var(--u)); }

  /* process */
  .ex-process { position: relative; height: calc(684 * var(--u)); }
  .ex-pr-text { position: absolute; left: calc(77 * var(--u)); top: calc(130 * var(--u)); width: calc(590 * var(--u)); }
  .ex-pr-text .title { margin-bottom: calc(54 * var(--u)); }
  .ex-pr-text ol { list-style: none; margin: 0; padding: 0; }
  .ex-pr-text li { display: grid; grid-template-columns: calc(289 * var(--u)) calc(283 * var(--u)); min-height: calc(121 * var(--u)); }
  .ex-pr-big { position: absolute; left: calc((100% - 1200 * var(--u)) / 2 + 799 * var(--u)); right: calc(63 * var(--u)); top: calc(43 * var(--u)); height: calc(535 * var(--u)); }
  .ex-pr-small { position: absolute; left: calc((100% - 1200 * var(--u)) / 2 + 702 * var(--u)); top: calc(120 * var(--u)); width: calc(118 * var(--u)); height: calc(130 * var(--u)); z-index: 2;}

  /* faq */
  .ex-faq { position: relative; height: calc(490 * var(--u)); }
  .ex-fq-photo { position: absolute; left: calc(55 * var(--u)); top: calc(82 * var(--u)); width: calc(245 * var(--u)); height: calc(305 * var(--u)); }
  .ex-fq-list { position: absolute; left: calc((100% - 1200 * var(--u)) / 2 + 397 * var(--u)); top: calc(82 * var(--u)); width: calc(330 * var(--u)); }
  .ex-fq-list .title { margin-bottom: calc(38 * var(--u)); }
  .ex-fq-list [role="tablist"] { display: flex; flex-direction: column; gap: calc(29 * var(--u)); padding-left: calc(9 * var(--u)); }
  .ex-fq-answer { position: absolute; left: calc((100% - 1200 * var(--u)) / 2 + 805 * var(--u)); top: calc(169 * var(--u)); width: calc(340 * var(--u)); }

  /* love notes */
  .ex-reviews { position: relative; height: calc(548 * var(--u)); }
  .ex-rv-text { position: absolute; left: calc(58 * var(--u)); top: calc(75 * var(--u)); width: calc(440 * var(--u)); }
  .ex-rv-text .title { margin-left: calc(9 * var(--u)); }
  .ex-rv-tabs { display: flex; gap: calc(36 * var(--u)); margin: calc(23 * var(--u)) 0 calc(67 * var(--u)) calc(20 * var(--u)); }
  .ex-rv-photo { position: absolute; left: calc((100% - 1200 * var(--u)) / 2 + 590 * var(--u)); right: calc(66 * var(--u)); top: calc(65 * var(--u)); height: calc(419 * var(--u)); }

  /* galleries: each banner sticks near the top and the next one slides over it */
  .ex-galleries { position: relative; padding: calc(51 * var(--u)) 0 calc(138 * var(--u)); }
  .ex-galleries > .title { text-align: center; margin-bottom: calc(62 * var(--u)); }
  .ex-gal { position: sticky; top: calc(43 * var(--u)); height: calc(417 * var(--u)); margin: 0 calc(43 * var(--u)); }
  .ex-gal + .ex-gal { margin-top: calc(138 * var(--u)); }
  /* each gallery stops a little lower than the one before, so a strip of the earlier ones stays visible */
  /* bottom margins line up the three cards' bottoms, so they leave together instead of the last one sliding over the others */
  .ex-gal1 { margin-bottom: calc(125 * var(--u)); }
  .ex-gal2 { top: calc(98 * var(--u)); margin-bottom: calc(70 * var(--u)); }
  .ex-gal3 { top: calc(168 * var(--u)); }
  /* room after the last gallery so the three stay stacked for a moment before scrolling away together */
  .ex-galleries::after { content: ""; display: block; height: calc(220 * var(--u)); }
  .ex-galleries { padding-bottom: calc(40 * var(--u)); }
  .ex-gal .frame { height: 100%; }
  .ex-gal-t { left: calc(56 * var(--u)); bottom: calc(32 * var(--u)); }

  /* closing */
  .ex-cta { position: relative; height: calc(752 * var(--u)); }
  .ex-cta .cta-inner { position: absolute; left: calc(43 * var(--u)); right: calc(43 * var(--u)); top: calc(0 * var(--u)); height: calc(663 * var(--u)); border: var(--border);}
  .ex-cta-text { top: calc(280 * var(--u)); }
  .ex-cta .title { max-width: calc(400 * var(--u)); margin: 0 auto calc(21 * var(--u)); }
}

@media (max-width: 760px) {
  .ex-hero { padding: 16px var(--gutter) 0; }
  .ex-hero-frame { aspect-ratio: 4 / 5; }
  .ex-hero-text { top: 42%; padding: 0 16px; }
  .ex-hero .title { font-size: 28px; }
  .ex-hero-text .flourish { width: 77px; }
  .ex-approach { padding: 64px var(--gutter) 0; display: grid; gap: 24px; }
  .ex-approach .title { font-size: 22px; margin-top: 8px; }
  .ex-ap-head .swoosh { width: 140px; display: block; margin: 0 0 0 60px; }
  .ex-ap-text p + p { margin-top: 1.1em; }
  .ex-canvas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 48px var(--gutter) 0; }
  .ex-canvas .float { transform: none !important; }
  .ex-canvas .float .frame { aspect-ratio: 4 / 5; }
  .ex-c1, .ex-c3 { grid-column: span 2; }
  .ex-style { grid-column: span 2; order: -1; padding-bottom: 8px; }
  .ex-style .label { display: block; margin-bottom: 6px; }
  .ex-packages { padding: 72px var(--gutter) 0; text-align: center; }
  .ex-ch-t { font-size: 22px !important; }
  .ex-ch-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 28px; margin: 28px 0 36px; }
  .pk-photo { aspect-ratio: 4 / 3; }
  .pk-text { text-align: left; padding-top: 24px; }
  .pk-name { font-size: 26px; margin: 8px 0 14px; }
  .pk-price { margin-top: 16px !important; }
  .pk-text .btn { margin-top: 22px; }
  .ex-process { padding: 72px var(--gutter) 0; display: grid; gap: 24px; }
  .ex-pr-text .title { font-size: 26px; margin-bottom: 24px; }
  .ex-pr-text ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
  .ex-pr-text li .label { display: block; margin-bottom: 6px; }
  .ex-pr-big { aspect-ratio: 4 / 5; }
  .ex-pr-small { display: none; }
  .ex-faq { padding: 72px var(--gutter) 0; display: grid; gap: 24px; }
  .ex-fq-photo { display: none; }
  .ex-faq .title { font-size: 26px; margin-bottom: 22px; }
  .ex-fq-list [role="tablist"] { display: grid; gap: 18px; padding-left: 9px; }
  .ex-reviews { padding: 72px var(--gutter) 0; display: grid; gap: 28px; }
  .ex-reviews .title { font-size: 26px; }
  .ex-rv-tabs { display: flex; gap: 32px; margin: 24px 0 32px 12px; }
  .rv-quote { font-size: 21px; }
  .ex-rv-photo { aspect-ratio: 4 / 3; position: relative; }
  .ex-galleries { padding: 72px var(--gutter) 48px; }
  .ex-gal { position: sticky; top: 16px; }
  .ex-gal + .ex-gal { margin-top: 48px; }
  .ex-gal1 { margin-bottom: 76px; }
  .ex-gal2 { top: 52px; margin-bottom: 40px; }
  .ex-gal3 { top: 92px; }
  .ex-galleries::after { content: ""; display: block; height: 120px; }
  .ex-galleries > .title { font-size: 26px; text-align: center; margin-bottom: 12px; }
  .ex-gal .frame { aspect-ratio: 4 / 3; }
  .ex-gal-t { left: 18px; bottom: 16px; font-size: 18px; }
  .ex-cta { padding: 72px var(--gutter) 0; }
  .ex-cta .cta-inner { aspect-ratio: 4 / 5; border: var(--border); }
  .ex-cta-text { top: 34%; padding: 0 20px; }
  .ex-cta .title { font-size: 24px; margin-bottom: 22px; }
}

/* ---------- Portfolio page (cards measured on the reference at 1438px) ---------- */
.pf-hero .title, .st-hero .title { font-family: var(--display); font-weight: 500; font-size: 33px; line-height: 1.4; letter-spacing: .03em; text-transform: uppercase; color: #2b161d; margin: 0; }
.pf-sub { font-family: var(--italic); font-style: italic; font-size: 20px; line-height: 1.3; color: #2b161d; margin: 0 auto; }
.pf-hero, .st-hero { text-align: center; }
.pf-card { display: block; }
.pf-card .frame img { height: 100%; }
.pf-cap { display: block; font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: .1em; line-height: 1.55; text-transform: uppercase; color: #2b161d; }
.pf-card:hover .pf-cap { text-decoration: underline; text-underline-offset: 4px; }
.st-back { display: inline-block; margin-bottom: 28px; font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: .1em; }
.st-back:hover { text-decoration: underline; text-underline-offset: 4px; }
.st-hero { padding: 64px var(--gutter) 56px; }
.st-hero .pf-sub { margin-top: 12px; }
.st-gallery { columns: 3 300px; }
.st-next { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; max-width: var(--max); margin: 64px auto 0; padding: 0 var(--gutter); }
.st-next-link { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.st-next-link .label { font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: .1em; }
.st-next-name { font-family: var(--italic); font-style: italic; font-size: 26px; }
.st-next-link:hover .st-next-name { text-decoration: underline; text-underline-offset: 5px; }
.st-part { text-align: center; padding: 96px var(--gutter) 48px; }
.st-part .title { font-family: var(--display); font-weight: 500; font-size: 26px; line-height: 1.4; letter-spacing: .03em; text-transform: uppercase; color: #2b161d; margin: 0; }
.st-part .pf-sub { margin-top: 10px; }

@media (min-width: 761px) {
  .pf-hero { height: calc(211 * var(--u)); padding-top: calc(73 * var(--u)); }
  .pf-hero .title { font-size: calc(33 * var(--u)); }
  .pf-hero .pf-sub { width: calc(360 * var(--u)); margin-top: calc(20 * var(--u)); font-size: calc(20 * var(--u)); }
  .pf-cards { position: relative; height: calc(2930 * var(--u)); }
  .pf-card { position: absolute; }
  .pf-cap { font-size: calc(11 * var(--u)); }
  .pf-k1 { top: calc(92 * var(--u)); left: calc(99 * var(--u)); right: calc(50% + 71 * var(--u)); }
  .pf-k1 .frame { height: calc(622 * var(--u)); }
  .pf-k1 .pf-cap { margin-top: calc(25 * var(--u)); }
  .pf-k2 { top: calc(198 * var(--u)); right: calc(99 * var(--u)); width: calc(430 * var(--u)); }
  .pf-k2 .frame { height: calc(585 * var(--u)); }
  .pf-k2 .pf-cap { margin-top: calc(16 * var(--u)); }
  .pf-k3 { top: calc(881 * var(--u)); left: calc(99 * var(--u)); width: calc(328 * var(--u)); }
  .pf-k3 .frame { height: calc(392 * var(--u)); }
  .pf-k3 .pf-cap { margin-top: calc(25 * var(--u)); }
  .pf-k4 { top: calc(962 * var(--u)); left: calc(50% + 71 * var(--u)); right: calc(99 * var(--u)); }
  .pf-k4 .frame { height: calc(481 * var(--u)); }
  .pf-k4 .pf-cap { margin-top: calc(16 * var(--u)); }
  .pf-k5 { top: calc(1437 * var(--u)); left: calc(99 * var(--u)); width: calc(430 * var(--u)); }
  .pf-k5 .frame { height: calc(506 * var(--u)); }
  .pf-k5 .pf-cap { margin-top: calc(30 * var(--u)); }
  .pf-k6 { top: calc(1634 * var(--u)); right: calc(99 * var(--u)); width: calc(328 * var(--u)); }
  .pf-k6 .frame { height: calc(392 * var(--u)); }
  .pf-k6 .pf-cap { margin-top: calc(25 * var(--u)); }
  .pf-k7 { top: calc(2110 * var(--u)); left: calc(99 * var(--u)); right: calc(50% + 71 * var(--u)); }
  .pf-k7 .frame { height: calc(481 * var(--u)); }
  .pf-k7 .pf-cap { margin-top: calc(16 * var(--u)); }
  .pf-k8 { top: calc(2210 * var(--u)); right: calc(99 * var(--u)); width: calc(430 * var(--u)); }
  .pf-k8 .frame { height: calc(585 * var(--u)); }
  .pf-k8 .pf-cap { margin-top: calc(16 * var(--u)); }
}

@media (max-width: 760px) {
  .pf-hero { padding: 48px var(--gutter) 40px; }
  .pf-hero .title, .st-hero .title { font-size: 28px; }
  .pf-sub { font-size: 18px; max-width: 320px; margin-top: 12px; }
  .pf-cards { display: grid; gap: 40px; padding: 0 var(--gutter); }
  .pf-card .frame { aspect-ratio: 4 / 5; }
  .pf-k4 .frame { aspect-ratio: 1 / 1; }
  .pf-cap { margin-top: 14px; }
  .st-hero { padding: 40px var(--gutter) 32px; }
  .st-part { padding: 56px var(--gutter) 32px; }
  .st-part .title { font-size: 22px; }
  .st-gallery { columns: 1; }
  .st-next { margin-top: 40px; }
}

/* phone: the 7th collection photo fills the last row */
@media (max-width: 760px) { .collection .k7 { grid-column: span 2; } .collection .k7 .frame { aspect-ratio: 4 / 3; } }

/* ---------- Home: desktop layout mirrors the reference measured at 1438px (unit --u, see Experience) ---------- */
@media (min-width: 761px) {
  /* hero */
  .hero { position: relative; height: calc(800 * var(--u)); padding: 0; }
  .hero-grid { position: absolute; inset: 0; width: auto; display: block; margin: 0; }
  .hero-grid .frame { position: absolute; top: calc(59 * var(--u)); width: calc(500 * var(--u)); height: calc(573 * var(--u)); aspect-ratio: auto; }
  .hero-grid .frame:first-child { left: calc((100% - 1200 * var(--u)) / 2 + 93 * var(--u)); }
  .hero-grid .hero-slides { left: calc((100% - 1200 * var(--u)) / 2 + 608 * var(--u)); }
  .hero-caption { position: absolute; left: calc((100% - 1200 * var(--u)) / 2 + 93 * var(--u)); top: calc(682 * var(--u)); width: calc(1015 * var(--u)); margin: 0; padding: 0; display: grid; grid-template-columns: calc(217 * var(--u)) 1fr calc(161 * var(--u)); gap: 0; }
  .hero-caption .italic { font-family: var(--italic); font-size: calc(20 * var(--u)); line-height: 1.3; padding: 0; }
  .hero-caption h1 { font-family: var(--display); font-weight: 500; font-size: calc(22 * var(--u)); line-height: 1.4; letter-spacing: .03em; }

  /* my approach (stays pinned while the packages photo slides over it) */
  .scatter { height: calc(1530 * var(--u)); max-width: none; margin: 0; overflow-x: clip; }
  .s1 { position: absolute; left: calc(222 * var(--u)); top: calc(66 * var(--u)); width: calc(186 * var(--u)); }
  .s1 .frame { height: calc(209 * var(--u)); aspect-ratio: auto; }
  .s3 { position: absolute; left: calc((100% - 1200 * var(--u)) / 2 + 701 * var(--u)); top: calc(55 * var(--u)); width: calc(384 * var(--u)); }
  .s3 .frame { height: calc(511 * var(--u)); aspect-ratio: auto; }
  .s4 { position: absolute; left: calc((100% - 1200 * var(--u)) / 2 + 397 * var(--u)); top: calc(374 * var(--u)); width: calc(186 * var(--u)); }
  .s4 .frame { height: calc(212 * var(--u)); aspect-ratio: auto; }
  .s2 { position: absolute; left: calc(0 * var(--u)); top: calc(364 * var(--u)); width: calc(230 * var(--u)); }
  .s2 .frame { height: calc(310 * var(--u)); aspect-ratio: auto; }
  .s5 { position: absolute; right: calc(23 * var(--u)); left: auto; top: calc(539 * var(--u)); width: calc(172 * var(--u)); }
  .s5 .frame { height: calc(190 * var(--u)); aspect-ratio: auto; }
  .s7 { position: absolute; left: calc(300 * var(--u)); top: calc(678 * var(--u)); width: calc(194 * var(--u)); }
  .s7 .frame { height: calc(250 * var(--u)); aspect-ratio: auto; }
  .s8 { position: absolute; left: calc((100% - 1200 * var(--u)) / 2 + 561 * var(--u)); top: calc(767 * var(--u)); width: calc(268 * var(--u)); }
  .s8 .frame { height: calc(348 * var(--u)); aspect-ratio: auto; }
  .s6 { position: absolute; left: calc(37 * var(--u)); top: calc(846 * var(--u)); width: calc(167 * var(--u)); }
  .s6 .frame { height: calc(226 * var(--u)); aspect-ratio: auto; }
  .s9 { position: absolute; right: calc(-16 * var(--u)); left: auto; top: calc(928 * var(--u)); width: calc(314 * var(--u)); }
  .s9 .frame { height: calc(386 * var(--u)); aspect-ratio: auto; }
  .scatter-text { position: absolute; inset: 0; display: block; }
  .scatter-text > div { position: absolute; }
  .scatter-text > div:first-child { left: calc(95 * var(--u)); top: calc(1219 * var(--u)); width: calc(297 * var(--u)); }
  .scatter-text > div:last-child { left: calc(434 * var(--u)); top: calc(1257 * var(--u)); width: calc(329 * var(--u)); }
  .scatter-text .eyebrow { font-family: var(--italic); font-size: calc(20 * var(--u)); line-height: 1.3; margin: 0 0 calc(15 * var(--u)); text-transform: capitalize; }
  :lang(it) .scatter-text .eyebrow { text-transform: none; }
  .scatter-text .title { font-family: var(--display); font-weight: 500; font-size: calc(25 * var(--u)); line-height: 1.3; letter-spacing: .03em; }
  .scatter-text .flourish { width: calc(153 * var(--u)); max-width: none; margin: calc(-4 * var(--u)) 0 0 calc(105 * var(--u)); }
  .scatter-text p { font-size: calc(14 * var(--u)); max-width: none; margin: 0; }
  .scatter-text .btn { margin-top: calc(27 * var(--u)); }

  /* packages */
  /* the photo (RANNY-79) is shown big and almost whole: 3:2 like the original, but never taller than the screen */
  .packages { --pkh: min(calc((100vw - 48 * var(--u)) * 2 / 3), 92vh); height: calc(var(--pkh) + 340 * var(--u)); margin-top: 0; padding: 0; }
  .packages .bleed { padding: 0 calc(24 * var(--u)); }
  .packages .bleed .frame { max-width: none; height: var(--pkh); aspect-ratio: auto; }
  .packages-row { position: absolute; inset: 0; display: block; padding: 0; max-width: none; }
  .packages-row > div { position: absolute; left: calc(99 * var(--u)); top: calc(var(--pkh) + 70 * var(--u)); }
  .packages-row .title { font-family: var(--display); font-weight: 500; font-size: calc(33 * var(--u)); line-height: 1.4; letter-spacing: .03em; }
  .packages-row .btn { margin-top: calc(23 * var(--u)); }
  .pk-list { position: absolute; left: calc(100% - 345 * var(--u)); top: calc(var(--pkh) + 74 * var(--u)); min-width: 0; }
  .pk-list li { display: flex; align-items: baseline; gap: calc(10 * var(--u)); padding: 0; margin-bottom: calc(38 * var(--u)); }
  .pk-list .svc-num { font-family: var(--display); font-weight: 600; font-size: calc(12 * var(--u)); min-width: calc(24 * var(--u)); }
  .pk-list .svc-name { font-family: var(--italic); font-size: calc(30 * var(--u)); line-height: calc(34 * var(--u)); }

  /* about */
  .about-home { position: relative; height: calc(885 * var(--u)); padding: 0; }
  .about-grid { position: absolute; inset: 0; display: block; max-width: none; padding: 0; }
  .about-big { position: absolute; left: calc(100 * var(--u)); top: calc(105 * var(--u)); width: calc(50% - 100 * var(--u)); height: calc(676 * var(--u)); aspect-ratio: auto; }
  .about-text { position: absolute; left: calc((100% - 1200 * var(--u)) / 2 + 743 * var(--u)); top: calc(158 * var(--u)); width: calc(337 * var(--u)); max-width: none; margin: 0; text-align: center; }
  .about-portrait { width: calc(165 * var(--u)); margin: 0 auto; }
  .about-portrait .frame { height: calc(190 * var(--u)); aspect-ratio: auto; }
  .about-portrait .squiggle { right: calc(-57 * var(--u)); top: calc(25 * var(--u)); width: calc(79 * var(--u)); }
  .about-text .title { font-family: var(--display); font-weight: 500; font-size: calc(33 * var(--u)); line-height: 1.15; letter-spacing: .03em; margin: calc(43 * var(--u)) 0 0; }
  .about-text .lead { font-family: var(--italic); font-size: calc(20 * var(--u)); line-height: 1.3; margin: calc(29 * var(--u)) calc(9 * var(--u)) 0; }
  .about-text p:not(.lead) { font-size: calc(14 * var(--u)); margin: calc(18 * var(--u)) 0 0; }
  .about-text .btn { margin-top: calc(27 * var(--u)); }

  /* curated collection */
  .collection { height: calc(1035 * var(--u)); max-width: none; margin: 0; overflow-x: clip; }
  .k1 { position: absolute; left: calc(36 * var(--u)); top: calc(32 * var(--u)); width: calc(147 * var(--u)); }
  .k1 .frame { height: calc(171 * var(--u)); aspect-ratio: auto; }
  .k2 { position: absolute; left: calc(399 * var(--u)); top: calc(717 * var(--u)); width: calc(136 * var(--u)); }
  .k2 .frame { height: calc(155 * var(--u)); aspect-ratio: auto; }
  .k3 { position: absolute; left: calc((100% - 1200 * var(--u)) / 2 + 311 * var(--u)); top: calc(108 * var(--u)); width: calc(224 * var(--u)); }
  .k3 .frame { height: calc(255 * var(--u)); aspect-ratio: auto; }
  .k4 { position: absolute; left: calc(36 * var(--u)); top: calc(574 * var(--u)); width: calc(301 * var(--u)); }
  .k4 .frame { height: calc(360 * var(--u)); aspect-ratio: auto; }
  .k5 { position: absolute; left: calc((100% - 1200 * var(--u)) / 2 + 755 * var(--u)); top: calc(572 * var(--u)); width: calc(156 * var(--u)); }
  .k5 .frame { height: calc(184 * var(--u)); aspect-ratio: auto; }
  .k6 { position: absolute; right: calc(18 * var(--u)); left: auto; top: calc(24 * var(--u)); width: calc(288 * var(--u)); }
  .k6 .frame { height: calc(358 * var(--u)); aspect-ratio: auto; }
  .k7 { position: absolute; left: calc((100% - 1200 * var(--u)) / 2 + 1001 * var(--u)); top: calc(709 * var(--u)); width: calc(214 * var(--u)); }
  .k7 .frame { height: calc(249 * var(--u)); aspect-ratio: auto; }
  .collection-text { top: calc(418 * var(--u)); }
  .collection-text .title { font-family: var(--display); font-weight: 500; font-size: calc(33 * var(--u)); line-height: 1.3; letter-spacing: .03em; }
  .collection-text .italic { font-family: var(--italic); font-size: calc(30 * var(--u)); line-height: 1.3; margin: calc(8 * var(--u)) 0 calc(24 * var(--u)); }

  /* love notes */
  .reviews { position: relative; height: calc(548 * var(--u)); padding: 0; }
  .reviews-grid { position: absolute; inset: 0; display: block; max-width: none; padding: 0; }
  .reviews-grid > div:first-child { position: absolute; left: calc(58 * var(--u)); top: calc(75 * var(--u)); width: calc(440 * var(--u)); }
  .reviews .title { font-family: var(--display); font-weight: 500; font-size: calc(33 * var(--u)); line-height: 1.15; letter-spacing: .03em; margin-left: calc(9 * var(--u)); }
  .review-nav { margin: calc(20 * var(--u)) 0 calc(58 * var(--u)) calc(10 * var(--u)); gap: calc(10 * var(--u)); }
  .review-nav button { font-family: var(--display); font-weight: 600; font-size: calc(12 * var(--u)); }
  .review .quote { font-family: var(--italic); font-size: calc(24 * var(--u)); max-width: calc(384 * var(--u)); margin-bottom: calc(22 * var(--u)); }
  .review .body { font-size: calc(13 * var(--u)); max-width: calc(429 * var(--u)); }
  .review footer { font-family: var(--display); font-weight: 600; font-size: calc(11 * var(--u)); letter-spacing: .1em; }
  .rv-photos { position: absolute; left: calc((100% - 1200 * var(--u)) / 2 + 590 * var(--u)); right: calc(66 * var(--u)); top: calc(65 * var(--u)); height: calc(419 * var(--u)); aspect-ratio: auto; }

  /* on the journal */
  .journal { position: relative; height: calc(991 * var(--u)); padding: 0; }
  .journal > .wrap.center { position: absolute; left: 0; right: 0; top: calc(87 * var(--u)); max-width: none; }
  .journal .title { font-family: var(--display); font-weight: 500; font-size: calc(33 * var(--u)); line-height: 1.15; letter-spacing: .03em; }
  .journal-sub { font-family: var(--italic); font-size: calc(20 * var(--u)); margin: calc(17 * var(--u)) auto 0; }
  .journal-sub .flourish { width: calc(115 * var(--u)); margin: calc(-4 * var(--u)) 0 0 auto; }
  .posts { position: absolute; inset: 0; display: block; margin: 0; max-width: none; padding: 0; }
  .post { position: absolute; margin: 0 !important; }
  .post--1 { left: calc((100% - 1200 * var(--u)) / 2 + 68 * var(--u)); top: calc(321 * var(--u)); width: calc(268 * var(--u)); }
  .post--1 .frame { height: calc(325 * var(--u)); aspect-ratio: auto; }
  .post--1 h3 { margin: calc(22 * var(--u)) auto 0; max-width: calc(249 * var(--u)); font-family: var(--display); font-weight: 500; font-size: calc(12 * var(--u)); line-height: 1.8; }
  .post--2 { left: calc((100% - 1200 * var(--u)) / 2 + 393 * var(--u)); top: calc(242 * var(--u)); width: calc(415 * var(--u)); }
  .post--2 .frame { height: calc(505 * var(--u)); aspect-ratio: auto; }
  .post--2 h3 { margin: calc(25 * var(--u)) auto 0; max-width: calc(396 * var(--u)); font-family: var(--display); font-weight: 500; font-size: calc(12 * var(--u)); line-height: 1.8; }
  .post--3 { left: calc((100% - 1200 * var(--u)) / 2 + 865 * var(--u)); top: calc(321 * var(--u)); width: calc(268 * var(--u)); }
  .post--3 .frame { height: calc(325 * var(--u)); aspect-ratio: auto; }
  .post--3 h3 { margin: calc(22 * var(--u)) auto 0; max-width: calc(249 * var(--u)); font-family: var(--display); font-weight: 500; font-size: calc(12 * var(--u)); line-height: 1.8; }
  .journal > p.center { position: absolute; left: 0; right: 0; top: calc(868 * var(--u)); margin: 0; }

  /* closing */
  .cta { height: calc(752 * var(--u)); margin: 0 !important; }
  .cta-inner { position: absolute; left: calc(43 * var(--u)); right: calc(43 * var(--u)); top: calc(44 * var(--u)); height: calc(663 * var(--u)); max-width: none; aspect-ratio: auto; margin: 0; }
  .cta-text { padding: calc(58 * var(--u)) calc(50 * var(--u)); }
  .cta-text .title { font-family: var(--display); font-weight: 500; font-size: calc(25 * var(--u)); line-height: 1.4; letter-spacing: .03em; max-width: calc(370 * var(--u)); margin-bottom: calc(23 * var(--u)); }
}

/* ---------- Reveal on scroll (once) ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .draw path { stroke-dashoffset: 0 !important; transition: none; }
  .review-nav button .tab-circle path { stroke-dashoffset: 1 !important; }
  .review-nav button[aria-selected="true"] .tab-circle path { stroke-dashoffset: 0 !important; }
  .float { transform: none !important; }
  .scatter { position: relative; top: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Home packages: one fixed photo (RANNY-79), framed to keep the couple's heads in view */
.wide-fixed img { object-position: 50% 40%; }

/* Experience hero: Edo & Chiara picnic (_DSF5003), framed to keep their faces in view */
.ex-hero-frame img { object-position: 50% 25%; }

/* Experience galleries 03: couple walking on the white road, framed low so their feet and the road show */
.ex-gal3 img { object-position: 50% 88%; }

/* Experience packages, Weddings: Ben & Alex walking past the tables (alexben-94), framed on their heads and the veil */
#pk-0 img { object-position: 50% 35%; }

/* About: the wide photo stays still while the page scrolls past it (the frame is a window onto it) */
.ab-wide .frame { position: relative; clip-path: inset(0); }
.ab-wide .frame img { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; transition: none; }
/* on phones (portrait screen) and with reduced motion it stays a normal photo */
@media (prefers-reduced-motion: reduce), (max-width: 760px) {
  .ab-wide .frame { clip-path: none; }
  .ab-wide .frame img { position: static; width: 100%; height: 100%; }
}

/* Home "about": a little extra room so the two-line title (e.g. "Ricordi intensi di / un amore eterno") doesn't break into three */
@media (min-width: 761px) { .about-text .title { margin-left: calc(-24 * var(--u)); margin-right: calc(-24 * var(--u)); } }

/* ---------- Titles: Loubag across the whole site ---------- */
.title, .hero-caption h1, .ex-gal-t, .pk-name { font-family: "Loubag", var(--display) !important; font-weight: 500; }

/* ---------- About: archive photo at the top — always fully visible on first load ---------- */
.ab-hero--archive { display: flex; justify-content: center; padding: 28px var(--gutter) 0 !important; }
.ab-hero--archive img { width: auto; max-width: 100%; height: calc(100vh - 200px); height: calc(100svh - 200px); min-height: 420px; max-height: 1000px; object-fit: contain; filter: drop-shadow(0 18px 28px rgba(42,26,31,.16)) drop-shadow(0 2px 3px rgba(42,26,31,.1)); }
@media (max-width: 760px) {
  .ab-hero--archive { padding: 20px var(--gutter) 0 !important; }
  .ab-hero--archive img { width: 100%; height: auto; min-height: 0; }
}

/* ---------- About: the nun's words, handwritten ---------- */
.travel-quote blockquote p { font-family: var(--hand); font-style: normal; font-weight: 400; color: #2b161d; letter-spacing: 0; text-transform: none; font-size: 19px; line-height: 2.05; }
@media (min-width: 761px) { .travel-quote blockquote p { font-size: calc(19 * var(--fs)); } }
@media (max-width: 760px) { .travel-quote blockquote p { font-size: 17px; } }

/* ---------- Buttons: on hover the border fades and a pencil circle draws around the label ---------- */
.btn { position: relative; }
.btn-scribble { position: absolute; left: -20px; top: -13px; width: calc(100% + 40px); height: calc(100% + 26px); overflow: visible; pointer-events: none; }
.btn-scribble path { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s var(--ease); }
.btn:hover .btn-scribble path, .btn:focus-visible .btn-scribble path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .btn-scribble path { transition: none; } }

/* ---------- About: "My story" as a strip of film — frames are negatives until you hover them ---------- */
.film { margin-bottom: 34px; }
.film-strip { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 30px 12px 34px; background: #1d1718; }
.film-strip::before, .film-strip::after { content: ""; position: absolute; left: 6px; right: 6px; height: 9px; background: linear-gradient(90deg, var(--cream) 0 11px, transparent 11px) 0 0 / 22px 100% repeat-x; opacity: .92; }
.film-strip::before { top: 10px; } .film-strip::after { bottom: 11px; }
.film-frame { position: relative; margin: 0; cursor: pointer; }
.film-frame img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; filter: invert(1) sepia(.45) saturate(1.6) hue-rotate(-12deg) contrast(.92); transition: filter 1.1s var(--ease); }
.film-frame.is-dev img { filter: none; }
.film-frame figcaption { position: absolute; left: 4px; bottom: -21px; font-family: "Loubag", var(--display); font-size: 9px; letter-spacing: .14em; color: #d9a441; }
.film-frame figcaption span { margin-left: 12px; }
.ab-path .steps li { border-top: 0; padding-top: 0; transition: opacity .5s var(--ease); }
.ab-path .steps li::before { display: none; }
.ab-path .steps.has-active li:not(.is-active) { opacity: .4; }
.ab-path .step-title { margin-top: 6px; }
@media (max-width: 760px) {
  .film { overflow-x: auto; margin: 0 calc(-1 * var(--gutter)) 28px; padding: 0 var(--gutter); scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .film::-webkit-scrollbar { display: none; }
  .film-strip { display: flex; width: max-content; }
  .film-frame { width: 70vw; scroll-snap-align: center; }
}

/* ---------- About: travel — hover a place, its photo appears ---------- */
.places { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 18px; }
.places button { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--italic); font-style: italic; font-size: 24px; line-height: 1.45; color: #b9adb0; transition: color .35s var(--ease); }
.places button[aria-pressed="true"], .places button:hover, .places button:focus-visible { color: #2b161d; }
.places-view { position: relative; aspect-ratio: 4 / 5; margin-bottom: 40px; }
.places-view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease); }
.places-view img.is-on { opacity: 1; }
@media (min-width: 761px) {
  .places button { font-size: calc(24 * var(--fs)); }
  .places-view { width: calc(330 * var(--s)); }
}
@media (max-width: 760px) {   /* phone: the photo sits right under the names */
  .travel { display: flex; flex-direction: column; }
  .travel > div { display: contents; }
  .travel .places ~ * { order: 2; }
  .places-view { order: 1; margin: 18px 0 8px; }
  .travel-quote, .travel .trips { order: 3; }
  .travel-quote { margin-top: 40px; }
}

/* ---------- About: travel, layout B — names | small photo | handwritten quote, then a quiet footer row ---------- */
.travel-places .travel-bl { margin-top: 0; }
.travel-next .trip-place { display: block; }
.travel-foot .bucketlist { margin: 0; }
@media (min-width: 761px) {
  .travel.travel--b { display: block; min-height: 0; padding: calc(70 * var(--s)) calc(76 * var(--s)) calc(56 * var(--s)) calc(73 * var(--s)); }
  .travel--b .travel-head { max-width: calc(560 * var(--s)); margin-bottom: calc(54 * var(--s)); }
  .travel-mid { display: grid; grid-template-columns: 1fr calc(290 * var(--s)) 1fr; gap: calc(64 * var(--s)); align-items: center; }
  .travel-places { text-align: right; }
  .travel--b .places { flex-direction: column; align-items: flex-end; gap: 0; }
  .travel--b .places-view { width: auto; margin: 0; }
  .travel--b .travel-quote figcaption { margin-top: calc(10 * var(--s)); }
  .travel-foot { display: grid; grid-template-columns: 1fr auto auto; gap: calc(64 * var(--s)); align-items: end; margin-top: calc(56 * var(--s)); padding-top: calc(26 * var(--s)); border-top: 1px solid var(--line); }
  .travel-foot .bucketlist { max-width: calc(430 * var(--s)); }
  .travel-foot .btn { margin: 0; }
  .travel-next .trip-place { font-size: calc(24 * var(--fs)); }
}
@media (max-width: 760px) {
  .travel.travel--b { display: block; }
  .travel--b > div { display: block; }
  .travel--b .travel-head { margin-bottom: 28px; }
  .travel-mid { display: flex; flex-direction: column; }
  .travel--b .places-view { margin: 18px 0 0; }
  .travel--b .travel-quote { margin-top: 32px; }
  .travel-foot { display: grid; gap: 24px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); justify-items: start; }
  .travel-next .trip-place { font-size: 22px; }
  .travel-foot .btn { margin: 4px 0 0; }
}

/* ---------- About: faith — a page of the Bible, verse 10 underlined in pencil ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bible { position: relative; margin: 26px auto 34px; padding: 14px 0 18px; border-top: 1px solid rgba(42,26,31,.35); border-bottom: 1px solid rgba(42,26,31,.35); text-align: left; }
.bible-head { display: flex; justify-content: space-between; font-family: "Loubag", var(--display); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #8a7b80; margin-bottom: 12px; }
.bible-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.bible blockquote { margin: 0; }
.ab-life .bible p { font-family: var(--italic); font-style: normal; font-size: 14px; line-height: 1.85; text-align: justify; hyphens: auto; color: #2b161d; margin: 0; }
.bible sup { font-family: "Loubag", var(--display); font-size: 9px; color: #8a7b80; margin-right: 3px; }
.ab-life .bible .bible-ctx { color: #a99ca0; }
.bible-verse { background: none; color: #2b161d; font-style: italic; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-bottom: 3px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5.2C30 3.6 60 6.4 95 4.6s70 1.6 104-.8' fill='none' stroke='%232b161d' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 7px; transition: background-size 2.4s var(--ease) .8s; }
.ab-life.is-in .bible-verse { background-size: 100% 7px; }
.bible-note { position: absolute; right: -6px; bottom: -40px; font-family: var(--hand); font-size: 13px; line-height: 1.6; transform: rotate(-5deg); color: #2b161d; }
@media (min-width: 761px) {
  .ab-life { width: calc(720 * var(--s)); }
  .ab-life .bible p { font-size: calc(14 * var(--fs)); }
  .bible-note { right: 0; }
}
@media (max-width: 760px) {
  .bible-cols { grid-template-columns: 1fr; gap: 10px; }
  .bible-cols > .bible-ctx { display: none; }   /* phone: just verse 10 */
  .bible-note { right: 4px; bottom: -34px; }
}
@media (prefers-reduced-motion: reduce) { .bible-verse { transition: none; background-size: 100% 7px; } }

/* ---------- About: travel as an index — one row per place, the photo slides out on hover (tap on phones) ---------- */
.travel.travel--idx { display: block; }
.trv-index { list-style: none; margin: 40px 0 0; padding: 0; border-top: 1px solid var(--plum); }
.trv-index li { border-bottom: 1px solid var(--line); }
.trv-index button { position: relative; display: grid; grid-template-columns: 70px 1fr auto; align-items: center; width: 100%; padding: 10px 0; background: none; border: 0; text-align: left; color: #2b161d; cursor: pointer; transition: padding .45s var(--ease); }
.ti-n { font-family: "Loubag", var(--display); font-size: 11px; letter-spacing: .12em; color: #8a7b80; }
.ti-p { font-family: var(--italic); font-style: italic; font-size: 30px; line-height: 1.3; transition: color .35s var(--ease); }
.ti-r { font-family: var(--display); font-weight: 500; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #8a7b80; }
.ti-th { position: absolute; z-index: 2; right: 150px; top: 50%; width: 150px; aspect-ratio: 4 / 5; object-fit: cover; border: var(--border); opacity: 0; pointer-events: none; transform: translateY(-50%) rotate(-3deg) scale(.9); transition: opacity .4s var(--ease), transform .5s var(--ease); }
@media (hover: hover) {
  .trv-index button:hover, .trv-index button:focus-visible { padding-left: 16px; }
  .trv-index button:hover .ti-th, .trv-index button:focus-visible .ti-th { opacity: 1; transform: translateY(-50%) rotate(-3deg) scale(1); }
  .trv-index:hover button:not(:hover) .ti-p { color: #b9adb0; }
}
.travel--idx .travel-foot { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: start; margin-top: 48px; padding-top: 0; border-top: 0; }
.travel--idx .travel-quote { margin: 0; }
.trv-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.trv-meta .travel-bl { margin: 0 0 6px; }
.trv-meta .btn { margin: 4px 0 0; }
@media (min-width: 761px) {
  .travel.travel--idx { padding: calc(70 * var(--s)) calc(76 * var(--s)) calc(60 * var(--s)) calc(73 * var(--s)); min-height: 0; }
  .travel--idx .travel-head { max-width: calc(560 * var(--s)); }
  .trv-index { margin-top: calc(44 * var(--s)); }
  .trv-index button { grid-template-columns: calc(80 * var(--s)) 1fr auto; padding: calc(10 * var(--s)) 0; }
  .ti-p { font-size: calc(30 * var(--fs)); }
  .ti-th { right: calc(170 * var(--s)); width: calc(160 * var(--s)); }
  .travel--idx .travel-foot { gap: calc(80 * var(--s)); margin-top: calc(52 * var(--s)); }
}
@media (max-width: 760px) {
  .travel.travel--idx { display: block; padding: 64px var(--gutter) 56px; }
  .travel--idx > div, .travel--idx > ol { display: block; }
  .trv-index button { grid-template-columns: 40px 1fr auto; }
  .ti-p { font-size: 24px; }
  .ti-th { position: static; grid-column: 2 / -1; width: 70%; max-height: 0; margin: 0; border-width: 0; opacity: 0; transform: none; transition: opacity .4s var(--ease), max-height .5s var(--ease), margin .5s var(--ease); }
  .trv-index li.is-open .ti-th { max-height: 420px; margin: 10px 0 6px; border-width: 2px; opacity: 1; }
  .travel--idx .travel-foot { grid-template-columns: 1fr; gap: 32px; margin-top: 36px; }
}

/* ---------- About: travel as a row of printed postcards — drag (desktop) or swipe (phone) sideways ---------- */
.travel.travel--cards { display: block; }
.trv-top { display: grid; grid-template-columns: 1.25fr 1fr; gap: 64px; align-items: end; }
.travel--cards .travel-quote { margin: 0; }
.trv-cards { display: flex; gap: 26px; overflow-x: auto; padding: 34px 6px 40px; margin-top: 24px; scrollbar-width: none; cursor: grab; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; outline: none; }
.trv-cards::-webkit-scrollbar { display: none; }
.trv-cards.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.trv-cards.is-dragging .pcard { pointer-events: none; }
.pcard { flex: 0 0 210px; margin: 0; padding: 10px 10px 46px; background: #fff; box-shadow: 0 1px 2px rgba(42,26,31,.08), 0 10px 24px rgba(42,26,31,.12); position: relative; scroll-snap-align: start; transform: rotate(-2deg); transition: transform .45s var(--ease); user-select: none; }
.pcard:nth-child(even) { transform: rotate(2deg) translateY(10px); }
.pcard:nth-child(3n) { transform: rotate(-1deg) translateY(4px); }
.pcard img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.pcard figcaption { position: absolute; left: 14px; bottom: 12px; font-family: var(--hand); font-size: 14px; line-height: 1.4; color: #2b161d; }
@media (hover: hover) { .pcard:hover { transform: rotate(0) translateY(-8px); } }
.trv-hint { display: block; text-align: right; font-family: var(--hand); font-size: 12px; color: #8a7b80; margin-top: -10px; }
.travel--cards .travel-foot { display: grid; grid-template-columns: 1fr auto auto; gap: 56px; align-items: end; margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line); }
.travel--cards .travel-foot .bucketlist { margin: 0; }
.travel--cards .travel-foot .btn { margin: 0; }
@media (min-width: 761px) {
  .travel.travel--cards { padding: calc(70 * var(--s)) 0 calc(60 * var(--s)) calc(73 * var(--s)); min-height: 0; }
  .trv-top, .trv-hint, .travel--cards .travel-foot { margin-right: calc(76 * var(--s)); }
  .trv-top { gap: calc(80 * var(--s)); }
  .trv-cards { gap: calc(28 * var(--s)); padding-right: calc(76 * var(--s)); }
  .pcard { flex-basis: calc(220 * var(--s)); }
  .pcard figcaption { font-size: calc(14 * var(--fs)); }
  .travel--cards .travel-foot { gap: calc(64 * var(--s)); }
  .travel-next .trip-place { font-size: calc(24 * var(--fs)); }
}
@media (max-width: 760px) {
  .travel.travel--cards { display: block; padding: 64px 0 56px; }
  .travel--cards > div:not(.trv-cards) { display: block; }
  .travel--cards .travel-quote { margin-top: 28px; }
  .trv-top, .trv-hint, .travel--cards .travel-foot { margin-left: var(--gutter); margin-right: var(--gutter); }
  .trv-top { grid-template-columns: 1fr; gap: 28px; }
  .travel--cards .trv-cards { display: flex; gap: 18px; padding: 28px var(--gutter) 34px; }
  .pcard { flex-basis: 62vw; scroll-snap-align: center; }
  .travel--cards .travel-foot { grid-template-columns: 1fr; gap: 24px; justify-items: start; }
}

/* ---------- Home on phones: layout like the reference (logo + menu with a line, two photos, labels left/right, staggered photos) ---------- */
@media (max-width: 760px) {
  .hide-sm { display: none; }
  .header { border-bottom: 1.5px solid var(--plum); padding-bottom: 12px; }
  .hero { padding-top: 32px; }
  .hero-grid { width: 100%; grid-template-columns: 1fr 1fr; gap: 6px; }
  .hero-grid .frame:first-child { display: block; }
  .hero-grid .frame { aspect-ratio: 4 / 5; }
  .hero-caption { width: 100%; padding-top: 24px; grid-template-columns: 1fr auto; grid-template-areas: "l r" "h h"; gap: 0; text-align: left; }
  .hero-caption .italic { font-size: 15px; padding: 0; }
  .hero-caption .italic:first-child { grid-area: l; }
  .hero-caption .italic:last-child { grid-area: r; text-align: right; }
  .hero-caption h1 { grid-area: h; font-size: 17.5px; line-height: 1.5; letter-spacing: .03em; white-space: nowrap; margin-top: 44px; }
  /* scattered photos, two of them blurred (positions measured on Giacomo's reference, in % of screen width) */
  .scatter { display: block; height: auto; margin-top: 72px; padding: 188vw var(--gutter) 32vh; overflow-x: clip; }
  .scatter .float { position: absolute; display: block; aspect-ratio: auto; }
  .scatter .float .frame { filter: none !important; opacity: 1 !important; }
  .scatter .s1 { left: 11.3%; top: 0;      width: 30.6% !important; height: 33.1vw; }
  .scatter .s2 { left: 53.5%; top: -8.6vw; width: 43.4% !important; height: 50vw; }
  .scatter .s3 { left: 1.5%;  top: 50.3vw; width: 26.4% !important; height: 36.7vw; }
  .scatter .s4 { left: 51.7%; top: 52.7vw; width: 30.4% !important; height: 33.3vw; }
  .scatter .s6 { left: 35.4%; top: 82.8vw; width: 20% !important;   height: 24.2vw; z-index: 1; }
  .scatter .s7 { left: 76.4%; top: 82.8vw; width: 21.8% !important; height: 29.5vw; }
  .scatter .s5 { left: 10.7%; top: 119.6vw; width: 34.8% !important; height: 42.5vw; }
  .scatter .s8 { left: 61.7%; top: 125vw;  width: 36.5% !important; height: 53.9vw; }
  .scatter .s9 { display: none; }
  .scatter .s4 .frame { filter: blur(2.2px) !important; }
  .scatter .s6 .frame { filter: blur(2.6px) !important; opacity: .9 !important; }
  .scatter-text { padding-top: 48px; }
  /* curated collection: soft-focus photos scattered around the centred title */
  .collection { display: block; height: 197vw; padding: 0; margin-top: 72px; overflow-x: clip; }
  .collection .float { position: absolute; display: block; aspect-ratio: auto; }
  .collection .float .frame { filter: blur(2px) !important; opacity: 1 !important; }
  .collection .k1 { left: 5.3%;  top: 2.6vw;   width: 29.7% !important; height: 36.9vw; }
  .collection .k2 { left: 66%;   top: 12.5vw;  width: 32.2% !important; height: 45.2vw; }
  .collection .k3 { left: 16.3%; top: 51.7vw;  width: 30.7% !important; height: 37.2vw; }
  .collection .k4 { left: 80.9%; top: 77.1vw;  width: 17.3% !important; height: 30.4vw; }
  .collection .k5 { left: 31.8%; top: 135.5vw; width: 22.1% !important; height: 25vw; }
  .collection .k6 { left: 1.5%;  top: 156.2vw; width: 24.8% !important; height: 37.3vw; }
  .collection .k7 { left: 59.5%; top: 148.3vw; width: 38.7% !important; height: 46.3vw; grid-column: auto; }
  .collection .k7 .frame { aspect-ratio: auto; }
  .collection-text { position: absolute; left: 0; right: 0; top: 86vw; z-index: 2; padding: 0; text-align: center; }
  .collection-text .title { font-size: 7vw; line-height: 1.2; }
  .collection-text .italic { font-size: 4.8vw; margin: 6px 0 18px; }
}
@media (max-width: 360px) { .hero-caption .italic { font-size: 13.5px; } .hero-caption h1 { font-size: 15.5px; } }

/* ---------- Phone menu: full-screen photo, white uppercase links bottom-left, thin X (Giacomo's reference) ---------- */
@media (max-width: 820px) {
  .nav { background: #1d1517 url("../img/a/k3.webp") center / cover no-repeat; align-items: flex-end; justify-content: flex-start; padding: 0 0 11vh 12.5vw; }
  .nav::before { content: ""; position: absolute; inset: 0; background: rgba(12, 9, 10, .6); }
  .nav ul { position: relative; align-items: flex-start; gap: 30px; }
  .nav a, .nav a:not(.nav-cta)[aria-current="page"] { font-family: var(--display); font-weight: 500; font-size: 26px; line-height: 1.2; letter-spacing: .02em; color: #fff; padding: 0; text-decoration-color: transparent; }
  .nav a:not(.nav-cta)[aria-current="page"] { text-decoration-color: rgba(255,255,255,.7); }
  .nav-cta { padding: 0 !important; }
  .nav-cta .scribble { left: -22px; top: -16px; width: calc(100% + 44px); height: calc(100% + 32px); }
  .nav-close { top: 30px; right: 18px; color: transparent; overflow: hidden; z-index: 1; }
  .nav-close::before, .nav-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 1.5px; background: #fff; }
  .nav-close::before { transform: translate(-50%, -50%) rotate(45deg); }
  .nav-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
}

/* ---------- About + Experience on phones: staggered photos of different sizes, like the desktop collage ---------- */
/* upper photos use top: Y vw; lower ones top: calc(100% - H + Y) so they follow the text whatever its length */
@media (max-width: 760px) {
  .ab-canvas { display: block; position: relative; padding: 126vw var(--gutter) 198vw; margin-top: 64px; overflow-x: clip; }
  .ab-canvas .float { position: absolute; }
  .ab-canvas .float .frame { aspect-ratio: auto; }
  .ab-canvas figcaption { font-size: 14px; margin-top: 6px; }
  .ab-canvas .cv1 { left: 4.3%; top: 0;    width: 58% !important; } .ab-canvas .cv1 .frame { height: 72vw; }
  .ab-canvas .cv3 { left: 64%;  top: 10vw; width: 32% !important; } .ab-canvas .cv3 .frame { height: 40vw; }
  .ab-canvas .cv2 { left: 46%;  top: 68vw; width: 31% !important; z-index: 2; } .ab-canvas .cv2 .frame { height: 38vw; }
  .peek-text { padding: 0; }
  .ab-canvas .cv4 { left: 64%;  top: calc(100% - 198vw + 10vw);  width: 27% !important; } .ab-canvas .cv4 .frame { height: 31vw; }
  .ab-canvas .cv5 { left: 16%;  top: calc(100% - 198vw + 28vw);  width: 41% !important; } .ab-canvas .cv5 .frame { height: 50vw; }
  .ab-canvas .cv8 { left: 58%;  top: calc(100% - 198vw + 82vw);  width: 36% !important; } .ab-canvas .cv8 .frame { height: 42vw; }
  .ab-canvas .cv6 { left: -3%;  top: calc(100% - 198vw + 96vw);  width: 41% !important; } .ab-canvas .cv6 .frame { height: 50vw; }
  .ab-canvas .cv6 figcaption { padding-left: 7vw; }
  .ab-canvas .cv7 { left: 46%;  top: calc(100% - 198vw + 140vw); width: 48% !important; } .ab-canvas .cv7 .frame { height: 37vw; }

  .ex-canvas { display: block; position: relative; padding: 48px var(--gutter) 154vw; overflow-x: clip; }
  .ex-canvas .float { position: absolute; }
  .ex-canvas .float .frame { aspect-ratio: auto; height: 100%; }
  .ex-style { padding-bottom: 0; }
  .ex-canvas .ex-c4 { left: 74%; top: calc(100% - 154vw + 0vw);   width: 30% !important; height: 31vw; }
  .ex-canvas .ex-c1 { left: 4%;  top: calc(100% - 154vw + 8vw);   width: 56% !important; height: 67vw; }
  .ex-canvas .ex-c2 { left: 50%; top: calc(100% - 154vw + 22vw);  width: 26% !important; height: 28vw; z-index: 2; }
  .ex-canvas .ex-c3 { left: 52%; top: calc(100% - 154vw + 56vw);  width: 44% !important; height: 55vw; }
  .ex-canvas .ex-c5 { left: -6%; top: calc(100% - 154vw + 84vw);  width: 34% !important; height: 37vw; }
  .ex-canvas .ex-c6 { left: 34%; top: calc(100% - 154vw + 116vw); width: 30% !important; height: 32vw; }
}
/* About: the one line kept from the removed "A few things that make me, me" section */
.peek-text .ab-sign { font-size: 20px; line-height: 1.3; margin-top: 18px; }
@media (min-width: 761px) { .peek-text .ab-sign { font-size: calc(20 * var(--fs)); margin-top: calc(18 * var(--s)); } }
/* Home "about": on phones only, drop the big villa photo (stays on desktop) */
@media (max-width: 760px) { .about-big { display: none; } }
/* Menu button: fixed size so Safari on iPhone can't squeeze the two lines to nothing */
@media (max-width: 820px) {
  .menu-toggle { -webkit-appearance: none; appearance: none; flex: 0 0 44px; min-width: 44px; align-items: flex-end; color: var(--plum); }
  .menu-toggle span { flex: 0 0 auto; width: 26px; height: 2px; background: var(--plum); border-radius: 0; }
  .header .wordmark { min-width: 0; flex: 0 1 auto; }
}

/* ---------- Floating "Inquire here" button: fixed bottom-right on every page (not on contact / thank-you), gently bobbing ---------- */
.inquire-float { position: fixed; z-index: 40; right: 24px; bottom: 24px; display: inline-flex; align-items: center; height: 42px; padding: 0 26px;
  background: var(--plum); color: var(--cream); border: 1px solid var(--plum);
  font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(42, 26, 31, .18); animation: inquire-float 3.2s ease-in-out infinite;
  transition: background .4s var(--ease), color .4s var(--ease); }
.inquire-float:hover, .inquire-float:focus-visible { background: var(--cream); color: var(--plum); animation-play-state: paused; }
@keyframes inquire-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (max-width: 760px) { .inquire-float { right: 14px; bottom: 16px; height: 38px; padding: 0 20px; font-size: 10.5px; } }
@media (prefers-reduced-motion: reduce) { .inquire-float { animation: none; } }
@media print { .inquire-float { display: none; } }
/* Netlify's free-plan "Powered by Netlify" badge sits in the bottom-right corner (about 202x64px):
   keep the Inquire button just above it. If the badge is ever turned off, delete these two lines. */
.inquire-float { bottom: 84px; }
@media (max-width: 760px) { .inquire-float { bottom: 76px; } }
/* About on phones: space above the travel "Inquire" button, and keep the hand-drawn value circles inside the screen */
@media (max-width: 760px) {
  .travel--cards .travel-foot .btn { margin-top: 28px; }
  .value-tabs { padding-left: 12px; }
  .value-tabs .scribble { left: -20px; width: calc(100% + 46px); }
}

/* ---------- Footer logo: hand-written signature "Giacomo" + small "PHOTO" ---------- */
.footer-sign { display: flex; flex-direction: column; align-items: center; line-height: 1; text-decoration: none; color: var(--plum); }
.footer-sig { font-family: var(--hand); font-size: clamp(38px, 3.3vw, 48px); line-height: 1.15; transform: rotate(-4deg); white-space: nowrap; }
.footer-sig-sub { margin-top: 14px; font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; padding-left: .3em; }

/* ---------- Footer: calm stacked bands divided by full-width lines (signature / menu / socials / tagline / legal) ---------- */
.footer { border-top: 1px solid var(--plum); padding-bottom: 0; }
.footer-band { border-top: 1px solid var(--plum); padding: 30px var(--gutter); text-align: center; }
.footer-band:first-child { border-top: 0; }
.footer-brand { padding: 44px var(--gutter) 40px; }
.footer-brand .footer-sign { margin: 0 auto; }
.footer .footer-links, .footer .footer-social { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 56px; }
.footer .footer-links a, .footer .footer-social a, .footer-strip, .footer-legal, .footer-legal a {
  font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--plum); }
.footer .footer-links a:hover, .footer .footer-social a:hover, .footer-legal a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-strip { line-height: 1.7; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 56px; font-size: 11px;
  padding-bottom: 110px; } /* room at the very bottom so the floating Inquire button and Netlify's badge never cover the last line */
@media (max-width: 760px) {
  .footer-band { padding: 26px var(--gutter); }
  .footer-brand { padding: 36px var(--gutter) 32px; }
  /* menu in two columns, filled top to bottom like the reference */
  .footer .footer-links { display: grid; grid-template-columns: repeat(2, max-content); grid-template-rows: repeat(3, auto); grid-auto-flow: column; justify-content: center; gap: 16px 64px; text-align: left; }
  .footer .footer-social { gap: 12px 44px; }
  .footer .footer-links a, .footer .footer-social a, .footer-strip { font-size: 13px; }
  .footer-legal, .footer-legal a { font-size: 12px; }
  .footer-legal { flex-direction: column; align-items: center; gap: 16px; padding-bottom: 130px; }
}

/* Footer headings + back-to-top arrow: PC only (the phone footer stays as the stacked reference) */
.footer-h, .footer-top { display: none; }
@media (min-width: 761px) {
  .footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; }
  .footer-brand, nav.footer-band, .footer-socials { grid-row: 1; border-top: 0; padding: 72px 0 64px; }
  nav.footer-band { grid-column: 1; justify-self: start; padding-left: 14.4vw; text-align: left; }
  .footer-brand { grid-column: 2; align-self: center; padding: 64px 40px; }
  .footer-socials { grid-column: 3; justify-self: end; padding-right: 21vw; text-align: left; }
  .footer-strip, .footer-legal { grid-column: 1 / -1; }
  .footer-h { display: block; font-family: var(--italic); font-style: italic; font-weight: 400; font-size: 26px; line-height: 1.2; margin: 0 0 26px; color: var(--plum); }
  .footer .footer-links { display: grid; grid-template-columns: repeat(2, max-content); grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: 26px 52px; justify-content: start; margin: 0; }
  .footer .footer-social { display: grid; gap: 26px; justify-content: start; justify-items: start; text-align: left; margin: 0; }
  .footer .footer-social li { padding: 0; }
  .footer-strip { position: relative; padding: 22px var(--gutter); }
  .footer-top { display: block; position: absolute; right: 40px; top: 50%; transform: translateY(-50%); font-family: var(--text); font-size: 24px; line-height: 1; letter-spacing: 0; color: var(--plum); text-decoration: none; padding: 6px; }
  .footer-top:hover { transform: translateY(calc(-50% - 3px)); }
  .footer-legal { padding-top: 22px; gap: 12px 60px; }
}
/* Home on phones: more breathing room above and below "Honest photographs of love, rooted in Tuscany" */
@media (max-width: 760px) {
  .hero-caption h1 { margin-top: 72px; }
  .scatter { margin-top: 112px; }
}

/* ---------- Header: slides away when you scroll down, comes back as soon as you scroll up (every page) ---------- */
.header { position: sticky; top: 0; z-index: 45; background: var(--cream); }
.header.is-ready { transition: transform .45s var(--ease), background-color .35s, padding .35s, border-color .35s; }
.header.is-hidden { transform: translateY(-100%); }
@media (min-width: 761px) { .header { padding-bottom: 10px; } }
@media (prefers-reduced-motion: reduce) { .header { transition: none; } }

/* ---------- Home on phones: one photo, full screen, with logo, menu and title over it ---------- */
@media (max-width: 760px) {
  .home .topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 46; color: var(--cream); }
  .home .lang a[aria-current="true"] { border-bottom-color: var(--cream); }
  .home .header { position: fixed; left: 0; right: 0; top: 0; }
  .home .header.is-top { background: transparent; border-bottom-color: transparent; padding-top: 38px; }
  .home .header.is-top .wordmark img { filter: brightness(0) invert(1); }
  .home .header.is-top .wordmark-photo { color: var(--cream); }
  .home .header.is-top .menu-toggle span { background: var(--cream); }

  .home .hero { position: relative; height: 100vh; height: 100svh; min-height: 520px; padding: 0; }
  .home .hero-grid { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .home .hero-grid .frame:first-child { display: none; }
  .home .hero-grid .hero-slides { width: 100%; height: 100%; aspect-ratio: auto; border: 0; }
  .home .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to bottom, rgba(20,14,16,.42) 0%, rgba(20,14,16,0) 26%, rgba(20,14,16,0) 52%, rgba(20,14,16,.58) 100%); }
  .home .hero-caption { position: absolute; z-index: 1; left: var(--gutter); right: var(--gutter); bottom: 136px; width: auto; padding: 0; color: var(--cream);
    grid-template-columns: 1fr auto; grid-template-areas: "h h" "l r"; row-gap: 18px; }
  .home .hero-caption h1 { margin: 0; color: var(--cream); text-align: center; }
  .home .hero-caption .italic { color: var(--cream); }
  .home .scatter { margin-top: 96px; }
}