/* Layout: one cinematic shot. The dessert assembles itself, then quiet labels name the Frulatti products inside each layer. */
:root {
  --bg: #f4f0e8;
  --ink: #2a211d;
  --ink-soft: #6b5b51;
  --caramel: #a27758;
  --blue: #8dc8d7;
  --sage: #b5c19a;
  --line: rgba(42, 33, 29, 0.35);
  --serif: "Noto Serif Display", Georgia, serif;
  --sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --gut: max(16px, env(safe-area-inset-left, 0px));
  --gut-r: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1,
p {
  margin: 0;
}
a {
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--caramel);
  outline-offset: 3px;
}
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(18px + env(safe-area-inset-top, 0px)) var(--gut-r) 18px var(--gut);
}
.brand {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: 0.32em;
  font-size: 15px;
  text-decoration: none;
}
.brand i {
  font-style: normal;
  color: #5fafc4;
}
.menu {
  display: flex;
  gap: 26px;
  font-size: 14px;
  font-weight: 500;
}
.menu a {
  text-decoration: none;
  opacity: 0.8;
}
.menu a:hover {
  opacity: 1;
}
.cta-s {
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}
@media (max-width: 820px) {
  .menu {
    display: none;
  }
}

#hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--bg);
}
.stage {
  position: absolute;
  inset: 0;
}
.stage video,
.stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}
.scene {
  position: absolute;
  left: 0;
  top: 0;
  width: 1364px;
  height: 768px;
  transform-origin: 0 0;
}
.scene .plate {
  position: absolute;
  left: 0;
  top: 0;
  width: 1364px;
  height: 768px;
  inset: auto;
  object-fit: fill;
}
.scene .ly {
  position: absolute;
  inset: auto;
  object-fit: fill;
  transform-origin: 50% 100%;
  will-change: transform;
}
.scene canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 1364px;
  height: 768px;
  pointer-events: none;
}
.cshadow {
  position: absolute;
  left: 700px;
  top: 676px;
  width: 622px;
  height: 62px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(60, 32, 16, 0.5), rgba(60, 32, 16, 0));
  opacity: 0.3;
}
/* contact shadow: the dark rim where the base meets the floor, only once it has landed */
.cao {
  position: absolute;
  left: 728px;
  top: 636px;
  width: 566px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(28, 14, 6, 0.85) 70%, rgba(28, 14, 6, 0));
  opacity: 0;
  filter: blur(3px);
}
.copy {
  position: absolute;
  z-index: 3;
  left: var(--gut);
  top: clamp(100px, 15vh, 150px);
  max-width: min(560px, 36vw);
}
.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--caramel);
}
h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 4.45vw, 70px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin-top: 14px;
  text-wrap: balance;
}
h1 .hero-accent {
  font-family: inherit;
  font-style: normal;
  color: var(--caramel);
}
.lead {
  margin-top: 16px;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 440px;
}
.actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 24px;
}
.btn {
  font: 600 15px var(--sans);
  text-decoration: none;
  background: var(--ink);
  color: var(--bg);
  padding: 15px 24px;
  border-radius: 999px;
}
.btn-outline {
  font: 600 15px var(--sans);
  text-decoration: none;
  color: var(--ink);
  padding: 14px 23px;
  border: 1px solid var(--ink);
  border-radius: 999px;
}
.since {
  position: absolute;
  z-index: 3;
  right: var(--gut-r);
  bottom: calc(36px + env(safe-area-inset-bottom, 0px));
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-soft);
}

.tags {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.tag {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translateY(-50%);
  opacity: 0;
}
.tag .txt {
  flex: 0 0 clamp(150px, 16vw, 220px);
  text-align: right;
  white-space: nowrap;
}
.tag b {
  display: block;
  font: 700 14px var(--sans);
  letter-spacing: 0.06em;
  color: var(--ink);
}
.tag span {
  display: block;
  font: 500 14px var(--sans);
  color: #4f4038;
}
.tag .ln {
  height: 1.5px;
  background: var(--ink);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6),
    0 -1px 0 rgba(255, 255, 255, 0.6);
  transform-origin: left center;
}
/* the dot lands ON the layer: white with an ink ring so it reads on chocolate and on cream alike */
.tag .dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
  flex: none;
}
.replay {
  position: absolute;
  z-index: 3;
  right: calc(var(--gut-r) + 46px);
  top: calc(76px + env(safe-area-inset-top, 0px));
  font: 500 13px var(--sans);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.sound {
  position: absolute;
  z-index: 3;
  right: var(--gut-r);
  top: calc(76px + env(safe-area-inset-top, 0px));
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
}
.sound svg {
  width: 16px;
  height: 16px;
}
.sound .lbl {
  display: none;
  font: 600 12px var(--sans);
  letter-spacing: 0.04em;
}
.sound.ask {
  width: auto;
  padding: 0 13px 0 11px;
  grid-auto-flow: column;
  gap: 6px;
  border-radius: 999px;
  border-color: var(--ink);
  background: rgba(255, 255, 255, 0.55);
  animation: ask 1.8s ease-in-out infinite;
}
.sound.ask .lbl {
  display: block;
}
#hero:has(.sound.ask) .replay {
  right: calc(var(--gut-r) + 100px);
}
@keyframes ask {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(36, 23, 15, 0.25);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(36, 23, 15, 0);
  }
}
.sound .off {
  display: none;
}
.sound[aria-pressed="true"] .on {
  display: none;
}
.sound[aria-pressed="true"] .off {
  display: block;
}
@media (max-width: 820px) {
  .copy {
    max-width: none;
    right: var(--gut-r);
    top: 84px;
  }
  /* On phones the cake builds right under the title: a soft light band keeps the text readable. */
  .copy::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -96px calc(-1 * var(--gut-r)) -56px calc(-1 * var(--gut));
    background: linear-gradient(
      to bottom,
      rgba(244, 240, 232, 0.98) 0,
      rgba(244, 240, 232, 0.96) 82%,
      rgba(244, 240, 232, 0) 100%
    );
    pointer-events: none;
  }
  h1 {
    font-size: clamp(34px, 9.5vw, 52px);
  }
  .eyebrow {
    display: none;
  }
  .lead {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.45;
  }
  .actions {
    gap: 8px;
    margin-top: 18px;
  }
  .actions .btn,
  .actions .btn-outline {
    padding: 12px 15px;
    font-size: 14px;
  }
  .stage video,
  .stage img {
    object-position: 80% 50%;
  }
  .tags {
    display: none;
  }
  .since {
    display: none;
  }
  .replay,
  .sound {
    top: auto;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  } /* above the call-to-action row */
}

/* ===== homepage sections ===== */
.sec {
  padding: clamp(72px, 11vw, 150px) var(--gut-r) clamp(72px, 11vw, 150px) var(--gut);
}
.wrap {
  max-width: 1320px;
  margin: 0 auto;
}
.kicker {
  font: 700 12px var(--sans);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--caramel);
}
.h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 4.6vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 16px 0 0;
  text-wrap: balance;
}
.h2 em {
  font-style: italic;
  color: var(--caramel);
}
.body {
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 520px;
}
.link {
  font: 600 15px var(--sans);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.line {
  display: block;
  overflow: hidden;
}
.line > span {
  display: block;
}
.ph {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.ph img,
.ph video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 03 · find what you need: the catalogue's families open like drawers of a professional catalogue; the scroll lights
   them one by one with their photograph, then three products from the catalogue take the frame, each with its sample
   request, and the section closes on the request itself. On a computer it holds still while that plays (site.js). */
.fd {
  position: relative;
  height: calc(3.8 * var(--fd-vh, 100svh));
  background: #efe9de;
}
.fd-stage {
  position: sticky;
  top: 0;
  height: var(--fd-vh, 100svh);
  max-width: 1420px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
  padding: 84px calc(var(--gut-r) + 3vw) 28px calc(var(--gut) + 3vw);
}
.fd-left {
  min-width: 0;
}
/* the list has to fit a laptop screen whole, so its sizes follow the screen's height as well as its width */
.fd .h2 {
  font-size: clamp(30px, min(4.2vw, 7.4vh), 62px);
}
.fd-list {
  list-style: none;
  margin: clamp(18px, 3.4vh, 32px) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.fd-list li {
  padding: clamp(7px, 1.45vh, 13px) 0;
  border-bottom: 1px solid var(--line);
  color: rgba(42, 33, 29, 0.34);
  transition: color 0.45s ease;
}
.fd-list li.on {
  color: var(--ink);
}
.fd-list li.lit {
  color: var(--ink);
}
.fd-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
}
.fd-row b {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, min(2.4vw, 4.3vh), 38px);
  line-height: 1.1;
}
.fd-row small {
  font: 600 13px var(--sans);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fd-list p {
  margin: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
  transition:
    max-height 0.45s ease,
    opacity 0.45s ease,
    margin 0.45s ease;
}
.fd-list li.on p {
  max-height: 3em;
  margin-top: 6px;
  opacity: 1;
}
.fd-right {
  position: relative;
  justify-self: center;
  height: min(72vh, 660px);
  aspect-ratio: 4 / 5;
  max-width: 100%;
}
.fd-media,
.fd-prods,
.fd-end {
  position: absolute;
  inset: 0;
}
.fd-media img {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.fd-prod {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  opacity: 0;
}
.fd-prod .ph {
  border-radius: 0;
}
.fd-prod .ph img {
  object-fit: contain;
  padding: 5% 8%;
}
.fd-prod .fd-photo img {
  object-fit: cover;
  padding: 0;
}
.fd-copy {
  padding: clamp(12px, 2.2vh, 18px) 22px clamp(14px, 2.6vh, 22px);
  border-top: 1px solid rgba(42, 33, 29, 0.12);
}
.fd-copy .pbrand {
  font: 700 12px var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--caramel);
}
.fd-copy h3 {
  margin: 8px 0 6px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 1.8vw, 28px);
  line-height: 1.2;
}
.fd-copy p {
  margin: 0 0 clamp(8px, 1.6vh, 14px);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.fd-end {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 26px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
}
.fd-end p {
  margin: 0;
  max-width: 16ch;
  font-family: var(--serif);
  font-size: clamp(30px, 3vw, 46px);
  line-height: 1.1;
  text-wrap: balance;
}
.fd-end em {
  font-style: italic;
  color: var(--caramel);
}
.fd-end .fd-sub {
  max-width: 30ch;
  margin-top: -10px;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
}
/* phones, and anyone who asked for less motion: the same content, one block after the other, nothing held still */
.fd.fd-flow {
  height: auto;
}
.fd-flow .fd-stage {
  position: relative;
  height: auto;
  max-width: calc(1320px + var(--gut) + var(--gut-r));
  grid-template-columns: 1fr;
  gap: 40px;
  padding: clamp(72px, 11vw, 150px) var(--gut-r) clamp(72px, 11vw, 150px) var(--gut);
}
.fd-flow .fd-left {
  max-width: 760px;
}
.fd-flow .fd-list li {
  color: var(--ink);
}
.fd-flow .fd-list p {
  max-height: none;
  margin-top: 6px;
  opacity: 1;
}
.fd-flow .fd-right {
  height: auto;
  aspect-ratio: auto;
  width: 100%;
  display: grid;
  gap: 28px;
}
.fd-flow .fd-media {
  display: none;
}
.fd-flow .fd-prods {
  position: relative;
  display: grid;
  gap: 28px;
}
.fd-flow .fd-prod {
  position: relative;
  opacity: 1;
}
.fd-flow .fd-prod .ph {
  aspect-ratio: 1 / 1;
}
.fd-flow .fd-end {
  position: relative;
  opacity: 1;
  pointer-events: auto;
  padding: 12px 0 0;
}
.fd-flow.fd-rise .fd-r,
.fd-flow.fd-rise .fd-list li,
.fd-flow.fd-rise .fd-prod,
.fd-flow.fd-rise .fd-end {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.fd-flow.fd-rise .in,
.fd-flow.fd-rise .fd-list li.in {
  opacity: 1;
  transform: none;
}
/* the three products: side by side on a wide screen, a row to swipe on a phone */
@media (min-width: 861px) {
  .fd-flow .fd-prods {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  .fd-flow .fd-prods {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin: 0 calc(-1 * var(--gut-r)) 0 calc(-1 * var(--gut));
    padding: 0 var(--gut-r) 4px var(--gut);
    scroll-padding: 0 var(--gut);
  }
  .fd-flow .fd-prods::-webkit-scrollbar {
    display: none;
  }
  .fd-flow .fd-prod {
    flex: 0 0 80%;
    scroll-snap-align: start;
  }
}
/* 04 · our professionals: the five sectors Frulatti serves, as five narrow windows. On a computer the section holds
   still while the windows open one after another, each showing its sector and what Frulatti brings to it, then
   close ranks into one composition with the request to become a customer beside the title (site.js). */
.pk {
  position: relative;
  height: calc(2.8 * var(--pk-vh, 100svh));
}
.pk-stage {
  position: sticky;
  top: 0;
  height: var(--pk-vh, 100svh);
  max-width: 1420px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "head cta"
    "row row";
  column-gap: 32px;
  row-gap: clamp(18px, 3.4vh, 34px);
  padding: 84px calc(var(--gut-r) + 3vw) 26px calc(var(--gut) + 3vw);
}
.pk-head {
  grid-area: head;
  min-width: 0;
}
.pk .h2 {
  font-size: clamp(30px, min(4.2vw, 7.4vh), 62px);
}
.pk-cta {
  grid-area: cta;
  align-self: end;
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: 6px;
}
.pk-row {
  grid-area: row;
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr) auto;
  column-gap: var(--pk-gap, 14px);
}
.pk-p {
  grid-row: span 2;
  display: grid;
  grid-template-rows: subgrid;
  min-width: 0;
  min-height: 0;
}
.pk-ph {
  position: relative;
  overflow: hidden;
  min-height: 0;
  border-radius: 4px;
  background: #e7dfd2;
}
.pk-ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pk-t {
  padding: clamp(10px, 1.8vh, 16px) 2px 0;
}
.pk-t small {
  font: 700 12px var(--sans);
  letter-spacing: 0.18em;
  color: var(--caramel);
}
.pk-t h3 {
  margin: 4px 0 6px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(19px, min(1.55vw, 3.3vh), 25px);
  line-height: 1.15;
  text-wrap: balance;
}
.pk-t p {
  margin: 0;
  font-size: clamp(13px, min(1vw, 2.2vh), 15px);
  line-height: 1.5;
  color: var(--ink-soft);
}
/* phones, short screens and reduced motion: the five sectors one under the other, the request at the end */
.pk.pk-flow {
  height: auto;
}
.pk-flow .pk-stage {
  position: relative;
  height: auto;
  max-width: calc(1320px + var(--gut) + var(--gut-r));
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: clamp(72px, 11vw, 150px) var(--gut-r) clamp(72px, 11vw, 150px) var(--gut);
}
.pk-flow .pk-row {
  margin-top: 36px;
  grid-template-columns: 1fr;
  grid-template-rows: none;
  row-gap: 34px;
}
.pk-flow .pk-p {
  grid-row: auto;
  display: block;
}
.pk-flow .pk-ph {
  aspect-ratio: 4 / 5;
}
.pk-flow .pk-cta {
  order: 3;
  margin-top: 40px;
}
@media (min-width: 861px) {
  .pk-flow .pk-row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 14px;
  }
  .pk-flow .pk-ph {
    aspect-ratio: 9 / 16;
  }
}
.pk-flow.pk-rise .pk-r,
.pk-flow.pk-rise .pk-t,
.pk-flow.pk-rise .pk-cta {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.8s ease 0.25s,
    transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s;
}
.pk-flow.pk-rise .pk-ph {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.1s cubic-bezier(0.6, 0, 0.2, 1);
}
.pk-flow.pk-rise .pk-ph img {
  transform: scale(1.12);
  transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pk-flow.pk-rise .in .pk-ph,
.pk-flow.pk-rise .pk-p.in .pk-ph {
  clip-path: inset(0 0 0 0);
}
.pk-flow.pk-rise .pk-p.in .pk-ph img {
  transform: none;
}
.pk-flow.pk-rise .pk-r.in,
.pk-flow.pk-rise .pk-p.in .pk-t,
.pk-flow.pk-rise .pk-cta.in {
  opacity: 1;
  transform: none;
}
/* 05 · recipes & applications: a pastry chef's notebook on the bench. On a computer the section holds still while the
   scroll turns its pages (the contents, then gelato with pistachio paste, then a praline tart, each with the catalogue
   products it uses), then closes it, and the request for recipes takes the place of its left half (site.js). */
.nb {
  position: relative;
  height: calc(4 * var(--nb-vh, 100svh));
  background: #e9e1d4;
}
.nb-stage {
  position: sticky;
  top: 0;
  height: var(--nb-vh, 100svh);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  justify-items: center;
  align-items: center;
  row-gap: clamp(10px, 2vh, 22px);
  padding: 84px var(--gut-r) 4vh var(--gut);
}
.nb-bench {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transform-origin: 50% 60%;
}
.nb-head {
  position: relative;
  z-index: 50; /* a page or the cover lifting toward the viewer passes under the title */
  text-align: center;
}
/* a soft light behind the title, so it reads over the nuts and the chocolate on the bench */
.nb-head::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -40px -90px -34px;
  background: radial-gradient(
    closest-side,
    rgba(246, 241, 232, 0.92),
    rgba(246, 241, 232, 0.6) 55%,
    rgba(246, 241, 232, 0)
  );
}
.nb .h2 {
  font-size: clamp(28px, min(3.3vw, 5.8vh), 48px);
}
.nb-book {
  --nb-w: min(1060px, 86vw, calc((100svh - 84px - 4vh - 128px) * 1.42));
  --cl: 0;
  position: relative;
  width: var(--nb-w);
  aspect-ratio: 1.42;
}
/* the notebook's shadow on the marble; once closed, only the right half casts one */
.nb-book::before {
  content: "";
  position: absolute;
  top: 3%;
  bottom: -3%;
  left: calc(-1% + var(--cl) * 51%);
  right: -1%;
  border-radius: 12px;
  background: rgba(58, 38, 24, 0.42);
  filter: blur(20px);
}
.nb-pg {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(rgba(42, 33, 29, 0.13) 0.9px, transparent 1.3px) 0 0 / 18px 18px,
    #fbf7ef;
}
.nb-l {
  left: 0;
  border-radius: 7px 0 0 7px;
}
.nb-r {
  left: 50%;
  border-radius: 0 7px 7px 0;
}
/* the gutter */
.nb-l::after,
.nb-r::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 16%;
  pointer-events: none;
}
.nb-l::after {
  right: 0;
  background: linear-gradient(90deg, rgba(70, 46, 28, 0), rgba(70, 46, 28, 0.16));
}
.nb-r::after {
  left: 0;
  background: linear-gradient(270deg, rgba(70, 46, 28, 0), rgba(70, 46, 28, 0.16));
}
/* the paper under the open pages */
.nb-l0 {
  box-shadow:
    -2px 1px 0 #efe8da,
    -4px 2px 0 #e4d9c6;
}
.nb-r3 {
  box-shadow:
    2px 1px 0 #efe8da,
    4px 2px 0 #e4d9c6;
}
.nb-leaf,
.nb-cover {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  transform-style: preserve-3d;
}
.nb-leaf {
  left: 50%;
  transform-origin: 0 50%;
}
.nb-cover {
  left: 0;
  z-index: 30;
  visibility: hidden;
  transform-origin: 100% 50%;
}
.nb-leaf .nb-pg,
.nb-cover .nb-pg {
  left: 0;
  width: 100%;
  backface-visibility: hidden;
}
.nb-leaf .nb-b,
.nb-cover .nb-b {
  transform: rotateY(180deg);
}
/* a page in the air darkens a little */
.nb-leaf .nb-pg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(40, 26, 16, 0.22), rgba(40, 26, 16, 0) 70%);
  opacity: var(--sh, 0);
}
.nb-in {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 9% 10% 9%;
}
.nb-in small {
  font: 700 11px var(--sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--caramel);
}
.nb-no {
  position: absolute;
  bottom: 5%;
  font: 500 11px var(--sans);
  color: #a8988a;
}
.nb-l .nb-no {
  left: 10%;
}
.nb-r .nb-no {
  right: 10%;
}
.nb-hand {
  margin: auto 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, min(2.4vw, 4.2vh), 34px);
  line-height: 1.25;
  color: var(--ink);
  text-wrap: balance;
}
.nb-index ol {
  list-style: none;
  counter-reset: nb;
  margin: auto 0;
  padding: 0;
  display: grid;
  gap: clamp(16px, 3vh, 28px);
}
.nb-index li {
  counter-increment: nb;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  align-items: baseline;
}
.nb-index li::before {
  content: "0" counter(nb);
  grid-row: span 2;
  font-family: var(--serif);
  font-size: clamp(24px, min(2.4vw, 4.4vh), 34px);
  line-height: 1;
  color: var(--caramel);
}
.nb-index li b {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(20px, min(2vw, 3.6vh), 28px);
  line-height: 1.15;
  color: var(--ink);
}
.nb-index li span {
  margin-top: 4px;
  font-size: clamp(13px, min(1.05vw, 2vh), 15px);
  line-height: 1.45;
  color: var(--ink-soft);
}
.nb-notes h3 {
  margin: clamp(8px, 1.6vh, 14px) 0 clamp(14px, 3vh, 26px);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(26px, min(2.8vw, 5vh), 40px);
  line-height: 1.1;
  color: var(--ink);
}
.nb-notes ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(10px, 2.2vh, 18px);
}
.nb-notes li {
  position: relative;
  padding-left: 20px;
  font-size: clamp(14px, min(1.15vw, 2.2vh), 17px);
  line-height: 1.5;
  color: var(--ink-soft);
}
.nb-notes li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--caramel);
}
.nb-notes li b {
  display: block;
  font-weight: 600;
  color: var(--ink);
}
.nb-photo figure {
  position: relative;
  width: 80%;
  margin: auto;
  padding: 3.5% 3.5% 11%;
  background: #fff;
  box-shadow: 0 10px 24px rgba(60, 40, 25, 0.22);
  transform: rotate(-2.2deg);
}
/* a strip of tape holds the photo */
.nb-photo figure::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -11px;
  left: 50%;
  width: 34%;
  height: 24px;
  transform: translateX(-50%) rotate(3deg);
  background: rgba(233, 222, 199, 0.8);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.nb-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
/* the cover, seen once the notebook closes */
.nb-out {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  border-radius: 0 9px 9px 0;
  background: linear-gradient(135deg, #4b372c, #2e211a);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  color: rgba(244, 240, 232, 0.78);
  backface-visibility: hidden;
}
.nb-out b {
  font: 700 clamp(15px, 1.5vw, 21px) var(--sans);
  letter-spacing: 0.32em;
}
.nb-out b i {
  font-style: normal;
  color: #5fafc4;
}
.nb-out small {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(14px, 1.3vw, 18px);
}
.nb-band {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 12%;
  width: 9px;
  background: linear-gradient(90deg, #8a6248, #a27758, #8a6248);
}
.nb-ribbon {
  position: absolute;
  z-index: 40;
  left: calc(50% + 6px);
  top: -1.5%;
  width: 11px;
  height: 108%;
  background: linear-gradient(90deg, #8f6447, #a87c5c, #8f6447);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 96.5%, 0 100%);
  pointer-events: none;
}
.nb-ask {
  position: absolute;
  z-index: 5;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  display: grid;
  place-content: center;
  justify-items: start;
  gap: 22px;
  padding: 0 9% 0 4%;
  visibility: hidden;
}
.nb-ask .btn {
  white-space: nowrap;
}
.nb-ask p {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(20px, min(2.3vw, 4vh), 34px);
  line-height: 1.2;
  color: var(--ink);
  text-wrap: balance;
}
/* phones, short screens and reduced motion: the pages as cards one under the other, on the same bench */
.nb.nb-flow {
  height: auto;
}
.nb-flow .nb-stage {
  position: relative;
  height: auto;
  display: block;
  padding: clamp(72px, 11vw, 150px) var(--gut-r) clamp(72px, 11vw, 150px) var(--gut);
}
.nb-flow .nb-head {
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
}
.nb-flow .nb-book {
  width: 100%;
  max-width: 560px;
  aspect-ratio: auto;
  margin: 34px auto 0;
  display: grid;
  gap: 20px;
}
.nb-flow .nb-book::before,
.nb-flow .nb-cover,
.nb-flow .nb-ribbon {
  display: none;
}
.nb-flow .nb-leaf {
  display: contents;
}
.nb-flow .nb-pg {
  position: relative;
  left: auto;
  width: auto;
  height: auto;
  min-height: 0;
  border-radius: 7px;
  transform: none;
  box-shadow: 0 10px 26px rgba(58, 38, 24, 0.18);
}
.nb-flow .nb-pg::after {
  display: none;
}
.nb-flow .nb-in {
  position: relative;
  inset: auto;
  padding: 30px 26px 40px;
}
.nb-flow .nb-hand {
  margin: 14px 0 0;
}
.nb-flow .nb-index ol {
  margin: 18px 0 0;
}
.nb-flow .nb-photo figure {
  margin: 8px auto 0;
}
.nb-flow .nb-l0 {
  order: 1;
}
.nb-flow .nb-leaf1 .nb-f {
  order: 2;
}
.nb-flow .nb-leaf1 .nb-b {
  order: 3;
}
.nb-flow .nb-leaf2 .nb-f {
  order: 4;
}
.nb-flow .nb-leaf2 .nb-b {
  order: 5;
}
.nb-flow .nb-r3 {
  order: 6;
}
.nb-flow .nb-ask {
  order: 7;
  position: relative;
  width: auto;
  height: auto;
  visibility: visible;
  padding: 18px 0 0;
}
.nb-flow.nb-rise .nb-pg,
.nb-flow.nb-rise .nb-ask {
  opacity: 0;
  transform: translateX(-26px);
  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.nb-flow.nb-rise .nb-pg.in,
.nb-flow.nb-rise .nb-ask.in {
  opacity: 1;
  transform: none;
}
/* 06 · support across Greece: the map lights up with the scroll, from the head office at Aspropyrgos, to the own fleet
   in Athens, then across the whole country with the partners' network; the map then steps back for the technical
   department, the training and the request to talk to a salesperson (site.js). */
.sp {
  position: relative;
  height: calc(3.4 * var(--sp-vh, 100svh));
}
.sp-stage {
  position: sticky;
  top: 0;
  height: var(--sp-vh, 100svh);
  max-width: 1420px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  padding: 84px calc(var(--gut-r) + 3vw) 24px calc(var(--gut) + 3vw);
}
.sp .h2 {
  font-size: clamp(28px, min(4vw, 6.2vh), 60px);
}
.sp-steps {
  list-style: none;
  counter-reset: sp;
  margin: clamp(12px, 2.6vh, 30px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(6px, 1.1vh, 14px);
}
.sp-steps li {
  counter-increment: sp;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 14px;
  padding-top: clamp(6px, 1.2vh, 14px);
  border-top: 1px solid var(--line);
  transition: opacity 0.4s ease;
}
.sp-steps li::before {
  content: "0" counter(sp);
  grid-row: span 2;
  font: 700 13px/1.9 var(--sans);
  letter-spacing: 0.12em;
  color: var(--caramel);
}
.sp-steps b {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(19px, min(1.9vw, 3.2vh), 28px);
  line-height: 1.15;
}
.sp-steps span {
  margin-top: 2px;
  font-size: clamp(13px, min(1.1vw, 2vh), 16px);
  line-height: 1.5;
  color: var(--ink-soft);
}
.sp-cta {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: clamp(12px, 2.4vh, 28px);
}
.sp-cta p {
  margin: 0;
  max-width: 30ch;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(17px, min(1.4vw, 2.6vh), 21px);
  line-height: 1.35;
}
.sp-map {
  justify-self: center;
  width: min(100%, calc((100svh - 140px) * 0.975));
  transform-origin: 50% 50%;
}
.sp-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  overflow: visible;
}
.sp-land {
  fill: #e4d9c6;
  stroke: #c9b79c;
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.sp-lit {
  fill: url(#sp-litg);
  stroke: #9e7552;
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.sp-ring {
  fill: none;
  stroke: #a27758;
  stroke-width: 2;
  opacity: 0;
}
.sp-fleet {
  opacity: 0;
}
.sp-fleet-ring {
  fill: none;
  stroke: #3d93ab;
  stroke-width: 2;
  stroke-dasharray: 6 7;
  opacity: 0;
}
.sp-hq-halo {
  fill: rgba(42, 33, 29, 0.14);
  opacity: 0;
}
.sp-hq {
  fill: var(--ink);
  stroke: #f4f0e8;
  stroke-width: 3;
  opacity: 0;
}
.sp-name {
  font: 600 22px var(--sans);
  letter-spacing: 0.04em;
  fill: var(--ink);
  paint-order: stroke;
  stroke: #f4f0e8;
  stroke-width: 6px;
  stroke-linejoin: round;
  opacity: 0;
}
/* phones, short screens and reduced motion: the map whole and lit, the five lines under it */
.sp.sp-flow {
  height: auto;
}
.sp-flow .sp-stage {
  position: relative;
  height: auto;
  max-width: calc(1320px + var(--gut) + var(--gut-r));
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding: clamp(72px, 11vw, 150px) var(--gut-r) clamp(72px, 11vw, 150px) var(--gut);
}
.sp-flow .sp-map {
  width: 100%;
}
.sp-flow .sp-fleet,
.sp-flow .sp-fleet-ring,
.sp-flow .sp-hq-halo,
.sp-flow .sp-hq,
.sp-flow .sp-name {
  opacity: 1;
}
@media (max-width: 860px) {
  /* the title first, then the map, then the list */
  .sp-flow .sp-stage {
    grid-template-columns: 1fr;
    row-gap: 0;
  }
  .sp-flow .sp-copy {
    display: contents;
  }
  .sp-flow .sp-map {
    order: 1;
    width: min(100%, 460px);
    margin: 26px auto 8px;
  }
  .sp-flow .sp-steps {
    order: 2;
  }
  .sp-flow .sp-cta {
    order: 3;
  }
}
.sp-flow.sp-rise .sp-r,
.sp-flow.sp-rise .sp-steps li,
.sp-flow.sp-rise .sp-cta {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sp-flow.sp-rise .sp-r.in,
.sp-flow.sp-rise .sp-steps li.in,
.sp-flow.sp-rise .sp-cta.in {
  opacity: 1;
  transform: none;
}
/* 07 · since 1979: the year fills the screen, then shrinks into its place as the story of the family business begins
   beside it; the brands Frulatti represents exclusively follow one by one with what each one brings; then the years
   count up, the customers' logos fill in and the request for the price list closes it (site.js). */
.hs {
  position: relative;
  height: calc(3.7 * var(--hs-vh, 100svh));
  background: #efe9de;
}
.hs-stage {
  position: sticky;
  top: 0;
  height: var(--hs-vh, 100svh);
  max-width: 1420px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  grid-template-areas:
    "intro brands"
    "trust trust";
  align-content: center;
  column-gap: clamp(28px, 5vw, 80px);
  row-gap: clamp(20px, 5vh, 56px);
  padding: 84px calc(var(--gut-r) + 3vw) 24px calc(var(--gut) + 3vw);
}
.hs-intro {
  grid-area: intro;
  align-self: start;
}
.hs-year {
  margin: clamp(8px, 1.6vh, 16px) 0 0;
  font-family: var(--serif);
  font-weight: 400;
}
/* the year keeps its own box; site.js only moves and scales it from the middle of the screen into that box */
.hs-big {
  position: relative;
  z-index: 2;
  display: block;
  width: max-content;
  font-size: clamp(84px, min(10vw, 16vh), 184px);
  line-height: 0.86;
  letter-spacing: -0.035em;
  transform-origin: 0 0;
}
.hs-year em {
  display: block;
  margin-top: clamp(6px, 1.2vh, 12px);
  font-style: italic;
  font-size: clamp(18px, min(1.7vw, 2.9vh), 26px);
  line-height: 1.2;
  color: var(--caramel);
}
.hs-story {
  display: grid;
  gap: clamp(6px, 1.2vh, 12px);
  max-width: 46ch;
  margin-top: clamp(12px, 2.6vh, 28px);
}
.hs-story p {
  margin: 0;
  font-size: clamp(14px, min(1.2vw, 2.3vh), 17px);
  line-height: 1.55;
  color: var(--ink-soft);
}
.hs-brands {
  grid-area: brands;
  align-self: start;
  padding-top: clamp(4px, 1vh, 10px);
}
.hs-names {
  list-style: none;
  margin: clamp(10px, 2vh, 20px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(16px, 2.4vw, 36px);
  row-gap: clamp(8px, 1.6vh, 16px);
}
.hs-names li {
  display: grid;
  align-content: start;
  gap: 2px;
  padding-top: clamp(6px, 1.2vh, 12px);
  border-top: 1px solid var(--line);
}
.hs-names b {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, min(2.6vw, 4.4vh), 40px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.hs-names span {
  font-size: clamp(12px, min(1vw, 1.9vh), 14px);
  line-height: 1.4;
  color: var(--ink-soft);
}
.hs-trust {
  grid-area: trust;
  position: relative;
  padding-top: clamp(10px, 1.8vh, 18px);
}
/* the line over the years, drawn from the left as they come in (site.js sets --ln) */
.hs-trust::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-top: 1px solid var(--line);
  transform: scaleX(var(--ln, 1));
  transform-origin: 0 0;
}
.hs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 28px;
}
.hs-years {
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.hs-years b {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, min(3vw, 5.4vh), 48px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hs-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.hs-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 22px;
}
.hs-cta p {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(17px, min(1.4vw, 2.6vh), 21px);
  line-height: 1.35;
}
.hs-cta .btn {
  white-space: nowrap;
}
/* the logos: one warm ink, each sized by its shape (--f, from its proportions) so wide and round marks weigh alike;
   rows that do not fill up stay centred */
.hs-logos {
  --cols: 10;
  --lg: clamp(10px, 1.4vw, 20px);
  --lh: clamp(34px, min(5vw, 7.8vh), 74px);
  list-style: none;
  margin: clamp(10px, 2vh, 22px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(8px, 1.6vh, 18px) var(--lg);
}
.hs-logos li {
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--lg)) / var(--cols));
  height: calc(var(--lh) * 0.94);
  display: grid;
  place-items: center;
}
.hs-logos img {
  display: block;
  width: auto;
  height: calc(var(--lh) * var(--f, 0.8));
  max-width: 100%;
  object-fit: contain;
  /* a shade darker than the text's soft ink: the thin marks need it to read at this size */
  filter: brightness(0.8);
}
/* phones, short screens and reduced motion: the same page, one block after the other, nothing held still */
.hs.hs-flow {
  height: auto;
}
.hs-flow .hs-stage {
  position: relative;
  height: auto;
  max-width: calc(1320px + var(--gut) + var(--gut-r));
  row-gap: clamp(40px, 6vw, 72px);
  padding: clamp(72px, 11vw, 150px) var(--gut-r) clamp(72px, 11vw, 150px) var(--gut);
}
.hs-flow .hs-logos {
  --lh: clamp(40px, 5vw, 64px);
}
@media (max-width: 860px) {
  .hs-flow .hs-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "intro" "brands" "trust";
  }
  .hs-flow .hs-big {
    font-size: clamp(96px, 30vw, 168px);
  }
  /* the request comes after the logos */
  .hs-flow .hs-trust {
    display: flex;
    flex-direction: column;
  }
  .hs-flow .hs-head {
    display: contents;
  }
  .hs-flow .hs-logos {
    --cols: 5;
    order: 1;
  }
  .hs-flow .hs-cta {
    order: 2;
    margin-top: 32px;
  }
}
@media (max-width: 560px) {
  .hs-names {
    grid-template-columns: minmax(0, 1fr);
  }
  .hs-flow .hs-logos {
    --cols: 3;
    --lh: 54px;
  }
}
.hs-flow.hs-rise .hs-k,
.hs-flow.hs-rise .hs-s,
.hs-flow.hs-rise .hs-bk,
.hs-flow.hs-rise .hs-names li,
.hs-flow.hs-rise .hs-years,
.hs-flow.hs-rise .hs-logos li,
.hs-flow.hs-rise .hs-cta {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hs-flow.hs-rise .hs-k.in,
.hs-flow.hs-rise .hs-s.in,
.hs-flow.hs-rise .hs-bk.in,
.hs-flow.hs-rise .hs-names li.in,
.hs-flow.hs-rise .hs-years.in,
.hs-flow.hs-rise .hs-logos li.in,
.hs-flow.hs-rise .hs-cta.in {
  opacity: 1;
  transform: none;
}
/* 08 brands */
.brands {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 28px);
  margin-top: 48px;
}
.bcard {
  position: relative;
  display: block;
  text-decoration: none;
  color: #f4f0e8;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 4/5;
}
.bcard img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.bcard:hover img {
  transform: scale(1.04);
}
.bcard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(20, 14, 10, 0.72), rgba(20, 14, 10, 0) 55%);
}
.bcard .bt {
  position: absolute;
  z-index: 2;
  left: clamp(20px, 3vw, 40px);
  right: clamp(20px, 3vw, 40px);
  bottom: clamp(20px, 3vw, 40px);
}
.bcard .bt b {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 3.4vw, 54px);
  line-height: 1;
}
.bcard .bt span {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: #e6dccf;
  max-width: 380px;
}
.badge {
  display: inline-block;
  margin-bottom: 14px;
  font: 700 11px var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: var(--blue);
  color: var(--ink);
  padding: 6px 10px;
  border-radius: 999px;
}
/* 09 join */
#join {
  background: var(--blue);
  color: var(--ink);
}
.join {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.join .kicker {
  color: var(--ink);
}
.join .body {
  color: #2e3a3d;
  margin-top: 22px;
}
.join-acts {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 32px;
}
.btn-light {
  font: 600 15px var(--sans);
  text-decoration: none;
  color: var(--ink);
  padding: 15px 24px;
  border-radius: 999px;
  border: 1px solid var(--ink);
}
.join .ph {
  aspect-ratio: 4/5;
}
.join .ph img {
  transform-origin: 60% 40%;
}
/* footer */
.foot {
  background: #1e1612;
  color: #cdbfae;
  padding: 72px var(--gut-r) 40px var(--gut);
}
.foot-in {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.foot .fbrand {
  font-weight: 700;
  letter-spacing: 0.32em;
  font-size: 22px;
  color: #f4f0e8;
}
.foot .fbrand i {
  font-style: normal;
  color: #5fafc4;
}
.foot h4 {
  margin: 0 0 12px;
  font: 700 12px var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #f4f0e8;
}
.foot a {
  display: block;
  color: #cdbfae;
  text-decoration: none;
  font-size: 14px;
  line-height: 2;
}
.foot small {
  display: block;
  max-width: 1320px;
  margin: 48px auto 0;
  font-size: 12px;
  color: #8e7f70;
}
@media (max-width: 860px) {
  .join {
    grid-template-columns: 1fr;
  }
  .brands {
    grid-template-columns: 1fr;
  }
  .foot-in {
    grid-template-columns: 1fr 1fr;
  }
}
.next {
  min-height: 60svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 80px var(--gut-r) 80px var(--gut);
}
.next p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(24px, 3vw, 40px);
  max-width: 760px;
  line-height: 1.25;
}
.next small {
  display: block;
  margin-top: 18px;
  font: 500 13px var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
@media (prefers-reduced-motion: reduce) {
  .tag {
    opacity: 1;
  }
}
/* ===== preloader: no buttons — it only holds the opening until the sound and hero media have downloaded ===== */
#pre {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: #f4f0e8;
  color: #2a211d;
  transition:
    opacity 0.8s ease,
    transform 0.9s cubic-bezier(0.7, 0, 0.2, 1);
}
#pre.out {
  opacity: 0;
  transform: translateY(-3%);
  pointer-events: none;
}
body:has(#pre:not(.out)) {
  overflow: hidden;
}
.pre-in {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
}
.pre-fr {
  font: 700 22px var(--sans);
  letter-spacing: 0.32em;
}
.pre-fr i {
  font-style: normal;
  color: #5fafc4;
}
.pre-gm {
  font: 600 40px var(--logo);
  letter-spacing: 0.01em;
}
.pre-bar {
  width: min(260px, 60vw);
  height: 2px;
  background: rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-top: 6px;
}
.pre-bar i {
  display: block;
  height: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}