:root {
  --qr-source-width: 1086;
  --qr-source-height: 1448;
  --qr-header-source: 160;
  /* Shared desktop card column: single source of truth so the three paper
     cards keep one left edge and one width (right torn edge stays a column). */
  --qr-card-left: 54px;
  --qr-card-width: 996px;
  --tirrenia-ink: #2d231d;
  --tirrenia-muted: #746d68;
  --tirrenia-blue: #18628c;
  /* Eyebrow ("BENVENUTI A TIRRENIA") is a muted slate, lighter than the brand
     blue used for labels/links — keep it separate so it can't drag the palette. */
  --tirrenia-eyebrow: #6589a4;
  /* Card heading ink: a hair darker/warmer than the body sepia, shared so the
     desktop and mobile card titles stay in lockstep. */
  --tirrenia-heading-ink: #2e2117;
}

* {
  box-sizing: border-box;
}

html {
  background: #f8f1e7;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #f8f1e7;
  color: var(--tirrenia-ink);
  font-family: "Concept Bold", Georgia, "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body > .qr-stage {
  margin: 0 auto;
}

.qr-mobile-stage {
  display: none;
}

.qr-stage {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  height: 1448px;
  overflow: hidden;
  background: #f7f1e8;
  isolation: isolate;
}

.qr-stage::before,
.qr-stage::after {
  position: absolute;
  left: 0;
  width: 100%;
  content: "";
  pointer-events: none;
}

.qr-stage::before {
  z-index: 0;
  top: 0;
  height: calc(160px * var(--qr-scale, 1));
  background: #fff;
}

.qr-stage::after {
  z-index: 0;
  top: calc(160px * var(--qr-scale, 1));
  bottom: 0;
  background:
    linear-gradient(rgba(247, 240, 230, 0.72), rgba(247, 240, 230, 0.72)),
    url("generated/body-background.jpg") top center / max(1086px, 100%) auto repeat-y;
}

.qr-shell {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  width: 1086px;
  height: 1448px;
  overflow: hidden;
  transform: translateX(-50%) scale(var(--qr-scale, 1));
  transform-origin: top center;
  background: #f8f1e7;
}

.qr-shell tirrenia-header .desktop-nav {
  display: block !important;
}

.qr-shell tirrenia-header .mobile-nav {
  display: none !important;
}

.qr-shell tirrenia-header,
.qr-shell tirrenia-header .site-header,
.qr-shell tirrenia-header .site-header.is-compact {
  position: static !important;
  width: 1086px !important;
  height: 142px !important;
  min-height: 142px !important;
  transform: none !important;
}

.qr-shell tirrenia-header .site-header.is-compact .desktop-top-row,
.qr-shell tirrenia-header .desktop-top-row {
  top: 20px !important;
  height: 66px !important;
}

.qr-shell tirrenia-header .site-header.is-compact .social-links {
  top: 3px !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.qr-shell tirrenia-header .site-header.is-compact .brand-lockup,
.qr-shell tirrenia-header .brand-lockup {
  top: 1px !important;
}

.qr-shell tirrenia-header .site-header.is-compact .brand-lockup img,
.qr-shell tirrenia-header .brand-lockup img {
  width: 86px !important;
}

.qr-shell tirrenia-header .site-header.is-compact .main-menu,
.qr-shell tirrenia-header .main-menu {
  top: 86px !important;
}

.qr-shell tirrenia-header .site-header.is-compact .language-holder,
.qr-shell tirrenia-header .language-holder {
  top: 0.81px !important;
}

.qr-shell tirrenia-header .nav-button,
.qr-mobile-stage tirrenia-header .nav-button {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.qr-shell tirrenia-header .language-holder,
.qr-mobile-stage tirrenia-header .language-holder {
  position: relative;
}

.qr-shell tirrenia-header .language-holder,
.qr-mobile-stage tirrenia-header .desktop-nav .language-holder {
  position: absolute;
  right: 0;
}

.qr-mobile-stage tirrenia-header .mobile-drawer .language-holder {
  position: relative;
  top: auto;
  right: auto;
  margin-top: 20px;
}

.qr-shell tirrenia-header .language-options,
.qr-mobile-stage tirrenia-header .language-options {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  right: 0;
  display: none;
  min-width: 152px;
  padding: 6px;
  border: 1px solid rgba(24, 98, 140, 0.2);
  border-radius: 8px;
  background: rgba(255, 252, 247, 0.98);
  box-shadow: 0 12px 24px rgba(45, 35, 29, 0.16);
}

.qr-shell tirrenia-header .language-options.is-open,
.qr-mobile-stage tirrenia-header .language-options.is-open {
  display: grid;
  gap: 4px;
}

.qr-shell tirrenia-header .language-options button,
.qr-mobile-stage tirrenia-header .language-options button {
  appearance: none;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #2d231d;
  cursor: pointer;
  font: 600 13px/1 Arial, Helvetica, sans-serif;
  text-align: left;
}

.qr-shell tirrenia-header .language-options button:hover,
.qr-shell tirrenia-header .language-options button.is-active,
.qr-mobile-stage tirrenia-header .language-options button:hover,
.qr-mobile-stage tirrenia-header .language-options button.is-active {
  background: rgba(24, 98, 140, 0.09);
  color: var(--tirrenia-blue);
}

img {
  display: block;
}

.qr-page {
  width: 1086px;
  height: 1306px;
  min-height: 0;
  background: #f7f1e8;
}

.qr-artboard {
  position: relative;
  width: 1086px;
  height: 1306px;
  aspect-ratio: 1086 / 1306;
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
  background: #f8f1e7;
}

.qr-artboard::before {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 18px;
  background: #fff;
  content: "";
  pointer-events: none;
}

.qr-body-texture {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: 0.58;
}

.hero-copy,
.paper-link,
.order-note,
.asset,
.paper-base,
.paper-edge,
.paper-shadow,
.paper-order-shadow,
.paper-order-base,
.paper-order-edge {
  position: absolute;
}

.hero-copy {
  z-index: 2;
  top: 41px;
  left: 0;
  width: 100%;
  text-align: center;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  margin: 0 0 27px;
  color: var(--tirrenia-eyebrow);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.22em;
}

.kicker span {
  width: 52px;
  height: 1px;
  background: currentColor;
}

.hero-copy h1 {
  max-width: none;
  margin: 0 auto;
  color: #33271f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.lede {
  margin: 22px auto 0;
  color: #746d68;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 27px;
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: 0;
}

em {
  font-family: "Concept Italic", Georgia, serif;
  font-style: italic;
}

.paper-link {
  z-index: 3;
  display: block;
  color: inherit;
  text-decoration: none;
  transform-origin: top left;
}

button.paper-link {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.paper-link:focus-visible {
  outline: 3px solid rgba(20, 93, 135, 0.58);
  outline-offset: 8px;
}

.paper-story {
  top: 288px;
  left: var(--qr-card-left);
  width: var(--qr-card-width);
  height: 348px;
}

.paper-menu {
  top: 586px;
  left: var(--qr-card-left);
  width: var(--qr-card-width);
  height: 336px;
}

.paper-feedback {
  top: 854px;
  left: var(--qr-card-left);
  width: var(--qr-card-width);
  height: 390px;
}

.paper-shadow {
  z-index: 0;
  top: -80px;
  left: -80px;
  width: calc(100% + 160px);
  height: calc(100% + 160px);
  opacity: 1;
  pointer-events: none;
}

.paper-base,
.paper-edge {
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.paper-base {
  z-index: 1;
}

.paper-edge {
  z-index: 2;
  opacity: 0.88;
}

.paper-link > .asset {
  z-index: 4;
}

.paper-copy {
  position: absolute;
  z-index: 5;
  display: block;
}

.story-copy,
.menu-copy,
.feedback-copy {
  left: 414px;
}

.story-copy {
  top: 70px;
}

.menu-copy {
  top: 56px;
}

.feedback-copy {
  top: 62px;
}

.label {
  display: block;
  margin: 0 0 16px;
  color: var(--tirrenia-blue);
  font-family: "Concept Bold", Georgia, serif;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0;
}

.title {
  display: block;
  margin: 0 0 18px;
  color: var(--tirrenia-heading-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 40px;
  line-height: 1;
  letter-spacing: 0;
}

.story-copy .title {
  font-size: 42px;
}

.feedback-copy .title {
  font-size: 34px;
  line-height: 0.96;
}

.text {
  display: block;
  color: #66615d;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: 0;
}

.icon-cup {
  top: 66px;
  left: 60px;
  width: 214px;
}

.icon-cannolo {
  top: 53px;
  left: 45px;
  width: 247px;
}

.icon-feedback {
  top: 82px;
  left: 76px;
  width: 198px;
}

.divider-story {
  top: 37px;
  left: 319px;
  width: 16px;
}

.divider-menu {
  top: 27px;
  left: 319px;
  width: 16px;
}

.divider-feedback {
  top: 27px;
  left: 319px;
  width: 16px;
}

.arrow-story {
  top: 135px;
  left: 783px;
  width: 102px;
}

.arrow-menu {
  top: 110px;
  left: 783px;
  width: 102px;
}

.arrow-feedback {
  top: 119px;
  left: 782px;
  width: 102px;
}

.stamp-clean {
  z-index: 3;
  top: 248px;
  left: 850px;
  width: 198px;
  opacity: 0.58;
  pointer-events: none;
}

.icon-cup,
.icon-cannolo,
.icon-feedback {
  display: block;
}

.bell {
  display: none;
}

.order-note {
  z-index: 4;
  top: 1160px;
  left: 0;
  width: 100%;
  height: 146px;
}

.paper-order-shadow {
  z-index: 0;
  top: 0;
  left: 280px;
  width: 523px;
  height: 146px;
  opacity: 1;
  pointer-events: none;
}

.paper-order-base,
.paper-order-edge {
  top: 0;
  left: 280px;
  width: 523px;
  height: 146px;
  pointer-events: none;
}

.paper-order-base {
  z-index: 2;
}

.paper-order-edge {
  z-index: 3;
  opacity: 0.62;
}

.bell {
  z-index: 4;
  top: 46px;
  left: 344px;
  width: 82px;
  display: block;
}

.line-left {
  z-index: 1;
  top: 73px;
  left: 78px;
  width: 214px;
}

.line-right {
  z-index: 1;
  top: 73px;
  left: 793px;
  width: 198px;
}

.order-copy {
  position: absolute;
  z-index: 5;
  top: 46px;
  left: 392px;
  width: 300px;
  display: grid;
  gap: 3px;
  justify-items: center;
  text-align: center;
}

.order-copy strong {
  color: var(--tirrenia-blue);
  font-family: "Concept Bold", Georgia, serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}

.order-copy em {
  color: #2d231d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 36px;
  line-height: 0.95;
}

.qr-rating {
  display: grid;
  gap: 7px;
  color: #5f5a56;
  font-family: Arial, Helvetica, sans-serif;
}

.qr-rating p {
  margin: 0;
  color: #352820;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  line-height: 1.05;
}

.qr-stars {
  display: flex;
  gap: 4px;
}

.qr-stars button {
  appearance: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(24, 98, 140, 0.26);
  border-radius: 999px;
  background: rgba(255, 252, 247, 0.72);
  color: rgba(24, 98, 140, 0.76);
  cursor: pointer;
  font: 22px/1 Georgia, "Times New Roman", serif;
}

.qr-stars button:hover,
.qr-stars button:focus-visible,
.qr-stars button.is-selected {
  background: var(--tirrenia-blue);
  color: #fffaf3;
  outline: none;
}

.qr-rating-hint {
  color: #66615d;
  font-size: 13px;
  line-height: 1.2;
}

.qr-card-rating {
  display: grid;
  gap: 10px;
}

.qr-card-rating-prompt {
  color: #5f5a56;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
}

.qr-card-stars {
  display: flex;
  gap: 8px;
}

.qr-card-stars button {
  appearance: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(24, 98, 140, 0.34);
  border-radius: 999px;
  background: rgba(255, 252, 247, 0.8);
  color: rgba(24, 98, 140, 0.82);
  cursor: pointer;
  font: 24px/1 Georgia, "Times New Roman", serif;
}

.qr-card-stars button:hover,
.qr-card-stars button:focus-visible,
.qr-card-stars button.is-selected {
  background: var(--tirrenia-blue);
  color: #fffaf3;
  outline: none;
}

.qr-modal-backdrop {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(45, 35, 29, 0.34);
}

.qr-modal {
  position: relative;
  width: min(720px, 100%);
  max-height: min(840px, calc(100dvh - 44px));
  overflow: auto;
  padding: 30px;
  border: 1px solid rgba(24, 98, 140, 0.16);
  border-radius: 10px;
  background:
    linear-gradient(rgba(255, 252, 247, 0.94), rgba(255, 252, 247, 0.94)),
    url("generated/body-background.jpg") top center / 680px auto repeat-y;
  box-shadow: 0 24px 70px rgba(45, 35, 29, 0.28);
}

.qr-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(24, 98, 140, 0.24);
  border-radius: 999px;
  background: rgba(255, 252, 247, 0.9);
  color: var(--tirrenia-blue);
  cursor: pointer;
  font: 26px/1 Arial, Helvetica, sans-serif;
}

.qr-survey-form,
.qr-completion-screen {
  display: grid;
  gap: 18px;
}

.qr-survey-form h2,
.qr-completion-screen h2 {
  margin: 0;
  color: #33271f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.05;
}

.qr-survey-subtitle,
.qr-completion-screen > p,
.qr-completion-note {
  margin: 0;
  color: #625c57;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.45;
}

.qr-survey-rating,
.qr-completion-kicker {
  margin: 0;
  color: var(--tirrenia-blue);
  font-family: "Concept Bold", Georgia, serif;
  font-size: 14px;
  line-height: 1;
  text-transform: uppercase;
}

.qr-survey-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.qr-survey-field,
.qr-survey-textarea {
  display: grid;
  gap: 7px;
  color: #352820;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.qr-survey-field select,
.qr-survey-textarea textarea {
  width: 100%;
  border: 1px solid rgba(24, 98, 140, 0.22);
  border-radius: 8px;
  background: rgba(255, 252, 247, 0.84);
  color: #2d231d;
  font: 400 15px/1.3 Arial, Helvetica, sans-serif;
}

.qr-survey-field select {
  min-height: 42px;
  padding: 0 10px;
}

.qr-survey-textarea textarea {
  min-height: 86px;
  resize: vertical;
  padding: 10px;
}

.qr-submit-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.qr-submit-row span {
  color: #5f5a56;
  font: 400 13px/1.35 Arial, Helvetica, sans-serif;
}

.qr-primary-action,
.qr-support-block a,
.qr-footer button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(24, 98, 140, 0.28);
  border-radius: 999px;
  background: var(--tirrenia-blue);
  color: #fffaf3;
  cursor: pointer;
  font: 700 14px/1 Arial, Helvetica, sans-serif;
  text-decoration: none;
}

.qr-primary-action:disabled {
  cursor: wait;
  opacity: 0.72;
}

.qr-support-block {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(24, 98, 140, 0.16);
  border-radius: 10px;
  background: rgba(255, 252, 247, 0.66);
}

.qr-support-block h3 {
  margin: 0;
  color: #352820;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}

.qr-support-block p {
  margin: 0;
  color: #625c57;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.4;
}

.qr-support-block a {
  justify-self: start;
  min-height: 38px;
  background: rgba(255, 252, 247, 0.88);
  color: var(--tirrenia-blue);
}

.qr-footer {
  display: grid;
  gap: 8px;
  max-width: 1086px;
  margin: 0 auto;
  padding: 20px 26px 28px;
  background: #f8f1e7;
  color: #625c57;
  font-family: Arial, Helvetica, sans-serif;
}

.qr-footer nav {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.qr-footer a,
.qr-footer button {
  color: var(--tirrenia-blue);
  font: 700 13px/1 Arial, Helvetica, sans-serif;
  text-decoration: none;
}

.qr-footer button {
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
}

.qr-footer p {
  max-width: 620px;
  margin: 0 auto;
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
}

/* The mobile composition is the single layout at every width; the desktop poster
   stage stays hidden. Above 1025px only the header switches to its desktop nav
   (see the min-width:1025px block below). */
@media all {
  html,
  body {
    min-height: 100%;
    background: #f8f1e7;
  }

  /* Natural, legible layout at full width; the page scrolls vertically if the
     content is taller than the viewport. overflow-x:hidden (on html too) keeps
     the corner seal's overhang and card shadows from making a horizontal bar. */
  html,
  body {
    overflow-x: hidden;
  }

  .qr-stage {
    display: none;
  }

  .qr-mobile-stage {
    display: block;
    min-width: 320px;
    background: #f8f1e7;
  }

  .qr-stage::before {
    height: calc(176px * var(--qr-scale, 1));
  }

  .qr-stage::after {
    top: calc(176px * var(--qr-scale, 1));
  }

  .qr-shell {
    height: 2120px;
  }

  .qr-shell tirrenia-header .desktop-nav {
    display: none !important;
  }

  .qr-shell tirrenia-header .mobile-nav {
    display: block !important;
  }

  .qr-shell tirrenia-header,
  .qr-shell tirrenia-header .site-header,
  .qr-shell tirrenia-header .site-header.is-compact {
    width: 1086px !important;
    height: 176px !important;
    min-height: 176px !important;
  }

  .qr-shell tirrenia-header .mobile-container {
    height: 176px !important;
    padding: 0 36px !important;
  }

  .qr-shell tirrenia-header .mobile-brand img,
  .qr-shell tirrenia-header .site-header.is-compact .mobile-brand img {
    width: 204px !important;
  }

  .qr-shell tirrenia-header .mobile-toggle {
    width: 126px !important;
    height: 126px !important;
    margin-right: 0 !important;
    padding: 28px !important;
  }

  .qr-shell tirrenia-header .navbar-toggler-icon {
    width: 70px !important;
    height: 70px !important;
  }

  .qr-page,
  .qr-artboard {
    height: 1944px;
  }

  /* The mobile stage always uses the compact hamburger header. Without this the
     header component switches to its desktop nav row near ~990px, which collides
     with the hero eyebrow in the 990-1024 band. */
  .qr-mobile-stage tirrenia-header .desktop-nav {
    display: none !important;
  }

  .qr-mobile-stage tirrenia-header .mobile-nav {
    display: block !important;
  }

  .qr-mobile-stage tirrenia-header .site-header {
    box-shadow: 0 2px 10px rgba(31, 27, 26, 0.035);
  }

  .qr-mobile-stage tirrenia-header .mobile-container {
    height: 62px;
    padding: 0 12px;
  }

  .qr-mobile-stage tirrenia-header .site-header,
  .qr-mobile-stage tirrenia-header .site-header.is-compact {
    height: 62px;
  }

  .qr-mobile-stage tirrenia-header .mobile-brand img,
  .qr-mobile-stage tirrenia-header .site-header.is-compact .mobile-brand img {
    width: 72px;
  }

  .qr-mobile-stage tirrenia-header .mobile-toggle {
    width: 42px;
    height: 44px;
    margin-right: 2px;
    padding: 8px 6px;
  }

  .qr-mobile-stage tirrenia-header .drawer-button {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-align: left;
  }

  .qr-mobile-stage tirrenia-header .language-options {
    right: auto;
    left: 0;
  }

  .qr-mobile-stage tirrenia-header .navbar-toggler-icon {
    width: 27px;
    height: 27px;
  }

  .qr-mobile-page {
    position: relative;
    max-width: 460px;
    margin: 0 auto;
    padding: 12px 6px 14px;
    /* visible so the corner seal can straddle the card edge into the margin */
    overflow: visible;
  }

  .mobile-hero {
    position: relative;
    z-index: 1;
    margin: 0 auto 12px;
    text-align: center;
  }

  .kicker {
    gap: 20px;
    margin-bottom: 24px;
    font-size: 32px;
  }

  .kicker span {
    width: 72px;
  }

  .hero-copy h1 {
    font-size: 68px;
  }

  .lede {
    margin-top: 18px;
    font-size: 39px;
    line-height: 1.16;
  }

  .label {
    margin-bottom: 14px;
    font-size: 23px;
  }

  .title {
    margin-bottom: 16px;
    font-size: 43px;
  }

  .story-copy .title {
    font-size: 45px;
  }

  .feedback-copy .title {
    font-size: 36px;
  }

  .text {
    font-size: 24px;
    line-height: 1.28;
  }

  .order-copy strong {
    font-size: 22px;
  }

  .order-copy em {
    font-size: 39px;
  }

  .hero-copy {
    top: 34px;
  }

  .paper-story {
    top: 310px;
    left: 36px;
    width: 1014px;
    height: 470px;
  }

  .paper-menu {
    top: 760px;
    left: 36px;
    width: 1014px;
    height: 430px;
  }

  .paper-feedback {
    top: 1185px;
    left: 36px;
    width: 1014px;
    height: 430px;
  }

  .paper-shadow {
    display: none;
  }

  .paper-base {
    filter:
      drop-shadow(0 14px 14px rgba(82, 58, 34, 0.16))
      drop-shadow(0 28px 30px rgba(82, 58, 34, 0.09));
  }

  .paper-feedback .paper-base {
    filter:
      drop-shadow(0 18px 15px rgba(82, 58, 34, 0.2))
      drop-shadow(0 34px 28px rgba(82, 58, 34, 0.12));
  }

  .paper-edge {
    filter: none;
  }

  .story-copy,
  .menu-copy,
  .feedback-copy {
    left: 360px;
    width: 500px;
  }

  .story-copy {
    top: 86px;
  }

  .menu-copy {
    top: 92px;
  }

  .feedback-copy {
    top: 92px;
  }

  .label {
    margin-bottom: 14px;
    font-size: 32px;
  }

  .title {
    margin-bottom: 15px;
    font-size: 62px;
  }

  .story-copy .title {
    font-size: 64px;
  }

  .feedback-copy .title {
    font-size: 50px;
  }

  .text {
    font-size: 36px;
    line-height: 1.14;
  }

  .icon-cannolo,
  .icon-feedback,
  .icon-cup {
    left: 170px;
    transform: translate(-50%, -50%);
  }

  .icon-cannolo {
    top: 235px;
    width: 280px;
  }

  .icon-feedback {
    top: 215px;
    width: 230px;
  }

  .icon-cup {
    top: 215px;
    width: 235px;
  }

  .arrow-story {
    top: 235px;
    left: 850px;
    width: 105px;
  }

  .arrow-feedback {
    top: 215px;
    left: 850px;
    width: 105px;
  }

  .arrow-menu {
    top: 215px;
    left: 850px;
    width: 105px;
  }

  .stamp-clean {
    top: 260px;
    left: 820px;
    width: 200px;
  }

  .qr-card-rating {
    gap: 9px;
  }

  .qr-card-rating-prompt {
    font-size: 36px;
  }

  .qr-card-stars {
    gap: 10px;
  }

  .qr-card-stars button {
    width: 58px;
    height: 58px;
    font-size: 36px;
  }

  .order-note {
    top: 1628px;
    height: 220px;
  }

  .paper-order-shadow {
    top: 0;
    left: 230px;
    width: 626px;
    height: 175px;
  }

  .paper-order-base,
  .paper-order-edge {
    top: 0;
    left: 230px;
    width: 626px;
    height: 175px;
  }

  .bell {
    top: 57px;
    left: 300px;
    width: 98px;
  }

  .line-left {
    top: 88px;
    left: 60px;
    width: 230px;
  }

  .line-right {
    top: 88px;
    left: 790px;
    width: 230px;
  }

  .order-copy {
    top: 54px;
    left: 390px;
    width: 310px;
  }

  .order-copy strong {
    font-size: 28px;
  }

  .order-copy em {
    font-size: 50px;
  }

  .mobile-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    color: var(--tirrenia-eyebrow);
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.2em;
  }

  .mobile-kicker span {
    width: 36px;
    height: 1px;
    background: currentColor;
  }

  .mobile-hero h1 {
    margin: 0;
    color: #33271f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(22px, 6.4vw, 27px);
    font-weight: 400;
    line-height: 0.96;
    letter-spacing: 0;
  }

  .mobile-hero p:last-child {
    width: min(94vw, 342px);
    margin: 8px auto 0;
    color: #746d68;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(11px, 3vw, 13px);
    font-weight: 400;
    line-height: 1.18;
    letter-spacing: 0;
  }

  .mobile-strip-list {
    display: grid;
    gap: 0;
    margin: 0 auto;
  }

  .mobile-strip {
    --qr-paper-grow: 10%;
    position: relative;
    display: block;
    width: 100%;
    /* Content-sized: the copy (in normal flow) sets the height, so text can
       never spill past the torn edge. Left/right padding reserve the icon and
       arrow lanes; the icon/divider/arrow are absolute overlays centered on it. */
    min-height: clamp(108px, 30vw, 128px);
    padding: clamp(15px, 4.4vw, 20px) clamp(48px, 14.5vw, 72px) clamp(15px, 4.4vw, 20px) 37%;
    color: inherit;
    text-decoration: none;
  }

  button.mobile-strip {
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    text-align: left;
  }

  .mobile-strip:focus-visible {
    outline: 3px solid rgba(20, 93, 135, 0.58);
    outline-offset: 4px;
  }

  .mobile-strip-shadow,
  .mobile-strip-base,
  .mobile-strip-edge {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: fill;
    filter: none;
    pointer-events: none;
  }

  .mobile-strip-shadow {
    z-index: 0;
    top: -23%;
    left: -8%;
    width: 116%;
    height: 146%;
  }

  /* Grow the paper image past the strip box, top and bottom, so the torn
     deckled edges of adjacent cards nearly meet (tighter stack, like the
     golden). The content stays inside the strip; only the paper extends. */
  .mobile-strip-base,
  .mobile-strip-edge {
    top: calc(-1 * var(--qr-paper-grow));
    left: 0;
    height: calc(100% + 2 * var(--qr-paper-grow));
  }

  .mobile-strip-base {
    z-index: 1;
  }

  .mobile-strip-edge {
    z-index: 2;
    opacity: 0.88;
  }

  .mobile-copy {
    position: relative;
    z-index: 3;
    display: block;
  }

  .mobile-label,
  .mobile-title,
  .mobile-text {
    display: block;
  }

  .mobile-label {
    margin-bottom: 7px;
    color: var(--tirrenia-blue);
    font-family: "Concept Bold", Georgia, serif;
    font-size: clamp(11.5px, 3.3vw, 13px);
    line-height: 1;
    letter-spacing: 0;
  }

  .mobile-title {
    margin-bottom: 7px;
    color: var(--tirrenia-heading-ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(20px, 5.8vw, 24px);
    line-height: 1;
    letter-spacing: 0;
  }

  .mobile-text {
    color: #5f5a56;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(12.5px, 3.6vw, 14px);
    line-height: 1.16;
    letter-spacing: 0;
  }

  .mobile-arrow {
    position: absolute;
    z-index: 3;
    top: 50%;
    right: clamp(24px, 8vw, 38px);
    width: clamp(29px, 8.4vw, 34px);
    height: auto;
    transform: translateY(-50%);
    pointer-events: none;
  }

  .mobile-icon,
  .mobile-divider,
  .mobile-stamp {
    position: absolute;
    z-index: 3;
    pointer-events: none;
  }

  .mobile-icon {
    top: 50%;
    left: 17%;
    transform: translate(-50%, -50%);
    mix-blend-mode: multiply;
  }

  .mobile-icon-cup {
    width: 20%;
  }

  .mobile-icon-cannolo {
    width: 24%;
  }

  .mobile-icon-feedback {
    width: 22%;
  }

  .mobile-divider {
    top: 50%;
    left: 34%;
    width: 9px;
    height: 64px;
    object-fit: fill;
    opacity: 0.72;
    transform: translateY(-50%);
  }

  .mobile-stamp {
    --qr-seal-size: clamp(56px, 20vw, 96px);
    /* Center the seal on the sheet's torn bottom-right corner, which sits ~13px
       inside the box (the deckled edge cuts the corner). */
    right: calc(var(--qr-seal-size) / -2 + 30px);
    bottom: calc(var(--qr-seal-size) / -2 + 20px);
    width: var(--qr-seal-size);
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    opacity: 0.6;
  }

  .mobile-feedback {
    /* height is content-driven (stars + 2-line title) like the other strips */
  }

  .mobile-feedback .mobile-title {
    line-height: 0.96;
  }

  .mobile-order-note {
    position: relative;
    width: 100%;
    height: 86px;
    margin: 0 auto;
  }

  .mobile-order-base {
    position: absolute;
    z-index: 1;
    top: 4px;
    left: 50%;
    width: min(292px, 74vw);
    height: 78px;
    object-fit: fill;
    transform: translateX(-50%);
    filter: drop-shadow(0 5px 6px rgba(77, 56, 36, 0.13));
  }

  .mobile-line {
    position: absolute;
    z-index: 0;
    top: 40px;
    width: 88px;
    height: auto;
  }

  .mobile-line-left {
    left: 17px;
  }

  .mobile-line-right {
    right: 17px;
  }

  .mobile-bell {
    position: absolute;
    z-index: 2;
    top: 29px;
    left: calc(50% - 110px);
    width: 39px;
    height: auto;
  }

  .mobile-order-copy {
    position: absolute;
    z-index: 3;
    top: 26px;
    left: 50%;
    width: 172px;
    display: grid;
    gap: 2px;
    text-align: center;
    transform: translateX(-38%);
  }

  .mobile-order-copy strong {
    color: var(--tirrenia-blue);
    font-family: "Concept Bold", Georgia, serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
  }

  .mobile-order-copy em {
    color: #2d231d;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
    line-height: 0.95;
  }

  .mobile-feedback .mobile-title {
    margin-bottom: 8px;
    line-height: 0.96;
  }

  .mobile-text .qr-card-rating {
    gap: 5px;
  }

  .mobile-text .qr-card-rating-prompt {
    font-size: 11.6px;
    line-height: 1.1;
  }

  .mobile-text .qr-card-stars {
    gap: 2px;
  }

  .mobile-text .qr-card-stars button {
    width: clamp(19px, 5.6vw, 22px);
    height: clamp(19px, 5.6vw, 22px);
    font-size: clamp(13px, 4vw, 15px);
  }

  .qr-footer {
    padding: 16px 14px 22px;
  }

  .qr-footer nav {
    gap: 10px;
  }

  .qr-modal-backdrop {
    align-items: end;
    padding: 0;
  }

  .qr-modal {
    width: 100%;
    max-height: calc(100dvh - 22px);
    padding: 24px 16px 18px;
    border-radius: 16px 16px 0 0;
  }

  .qr-survey-form,
  .qr-completion-screen {
    gap: 14px;
  }

  .qr-survey-form h2,
  .qr-completion-screen h2 {
    padding-right: 34px;
    font-size: 27px;
  }

  .qr-survey-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .qr-support-block {
    padding: 12px;
  }

  .qr-support-block h3 {
    font-size: 20px;
  }
}

@media (max-width: 370px) {
  .qr-mobile-page {
    padding-right: 9px;
    padding-left: 9px;
  }

  .mobile-title {
    font-size: 16.5px;
  }

  .mobile-feedback .mobile-title {
    font-size: 15.8px;
  }

  .mobile-text {
    font-size: 11.5px;
  }

  .mobile-arrow {
    right: 30px;
    width: 30px;
  }
}

@media (max-width: 300px) {
  .qr-mobile-page {
    padding-right: 7px;
    padding-left: 7px;
  }

  .mobile-strip-list {
    gap: 0;
  }

  .mobile-label {
    margin-bottom: 3px;
    font-size: clamp(8px, 3.6vw, 9px);
    line-height: 0.98;
  }

  .mobile-title {
    margin-bottom: 4px;
    font-size: clamp(13.5px, 6.3vw, 15px);
    line-height: 0.98;
  }

  .mobile-text {
    font-size: clamp(8.8px, 4vw, 9.6px);
    line-height: 1.08;
  }

  .mobile-arrow {
    top: 50%;
    right: 9px;
    width: clamp(21px, 9.6vw, 24px);
    transform: translateY(-50%);
  }

  .mobile-feedback .mobile-title {
    margin-bottom: 5px;
  }

  .mobile-text .qr-card-rating {
    gap: 3px;
  }

  .mobile-text .qr-card-rating-prompt {
    font-size: clamp(8.8px, 4vw, 9.7px);
  }

  .mobile-text .qr-card-stars {
    gap: 1px;
  }

  .mobile-text .qr-card-stars button {
    width: clamp(18px, 8.6vw, 21px);
    height: clamp(18px, 8.6vw, 21px);
    font-size: clamp(11px, 4.8vw, 14px);
  }

  .mobile-stamp {
    right: 3px;
    bottom: 9px;
    width: clamp(30px, 11vw, 36px);
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

/* Desktop: keep the mobile body, but swap the hamburger for the component's
   desktop navigation. The nav children are absolutely positioned, so the header
   needs a definite height to reserve space and let the body flow below it. */
@media (min-width: 1025px) {
  .qr-mobile-stage tirrenia-header .mobile-nav {
    display: none !important;
  }

  .qr-mobile-stage tirrenia-header .desktop-nav {
    display: block !important;
  }

  .qr-mobile-stage tirrenia-header .site-header,
  .qr-mobile-stage tirrenia-header .site-header.is-compact,
  .qr-mobile-stage tirrenia-header .mobile-container {
    height: 142px !important;
    min-height: 142px !important;
  }

  .mobile-line-left {
    left: 100px;
    width: 200px;
  }

  .mobile-line-right {
    right: 100px;
    width: 200px;
  }

  /* Wider centered column on desktop only; the <=1024 column stays at 460px.
     The strip internals (icon, divider, lanes) are width-%, so they scale with it. */
  .qr-mobile-page {
    max-width: 820px;
  }

  /* At 820px the mobile-capped type/height left the cards a thin letterbox with
     a half-empty right side. Scale type and vertical room up to the golden's
     proportions, and adopt the golden's serif body + light tracked-caps eyebrow
     (the mobile defaults below 1025px are unchanged). The wider right padding
     reserves a clear lane for a larger arrow. */
  .mobile-strip {
    min-height: 200px;
    padding-top: 34px;
    padding-bottom: 34px;
    padding-right: 132px;
  }

  /* Eyebrow: light, widely tracked sans caps in a soft slate, matching the hero
     eyebrow, instead of the bold saturated serif the mobile layout uses. */
  .mobile-label {
    margin-bottom: 12px;
    color: #466a8f;
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.16em;
  }

  .mobile-title {
    margin-bottom: 12px;
    font-size: 33px;
    line-height: 1.05;
  }

  /* Body description in the same serif family as the title, like the golden. */
  .mobile-text {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    line-height: 1.5;
  }

  /* Replace the near-invisible dashed-line image with a crisp CSS rule, placed
     midway between the illustration and the text column. */
  .mobile-divider {
    display: none;
  }

  .mobile-strip::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 31.5%;
    height: 64%;
    border-left: 2px dashed rgba(60, 84, 110, 0.5);
    transform: translateY(-50%);
    pointer-events: none;
  }

  /* Bigger arrow with real clearance from the deckled right edge. */
  .mobile-arrow {
    width: 86px;
    right: 64px;
  }

  /* Seal sits inside the sheet's bottom-right corner as a faint, desaturated
     blue-grey ghost stamp like the golden (the source PNG is teal, so desaturate
     and nudge the hue toward blue rather than amplify it). */
  .mobile-stamp {
    --qr-seal-size: 120px;
    right: 10px;
    bottom: -30px;
    opacity: 0.42;
    filter: saturate(0.45) hue-rotate(18deg) brightness(1.04);
  }

  /* The mobile star/prompt sizes looked tiny in the wide card. */
  .mobile-text .qr-card-rating {
    gap: 10px;
  }

  .mobile-text .qr-card-rating-prompt {
    font-size: 15px;
  }

  .mobile-text .qr-card-stars {
    gap: 7px;
  }

  .mobile-text .qr-card-stars button {
    width: 32px;
    height: 32px;
    font-size: 22px;
  }

  /* Order-tab eyebrow matches the card eyebrows (light tracked sans caps). */
  .mobile-order-copy strong {
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-weight: 500;
    letter-spacing: 0.12em;
  }

  /* Larger hero eyebrow on desktop; below 1025px it stays 12px so it keeps to
     one line on phones (at 20px it wraps with its flanking rules). */
  .mobile-kicker {
    font-size: 20px;
  }

  /* Bold two-line hero (one line isn't achievable at a strong size in the 820px
     column without shrinking the title too much). */
  .mobile-hero h1 {
    font-size: 46px;
    line-height: 1;
  }

  .mobile-hero p:last-child {
    width: 620px;
    font-size: 20px;
    line-height: 1.45;
  }
}