:root{
    --red: #e31c3d;
    --red-dark: #c9152f;
    --pink-neon: #ff3d78;
    --cream: #fffaf6;
    --ink: #221512;
    --ink-soft: #4a3a37;
    --overlay-top: rgba(20, 8, 8, 0.35);
    --overlay-bottom: rgba(15, 6, 6, 0.75);
    --radius-lg: 28px;
    --section-gap: 96px;
    /* placeholder for all three step photos — swap each .step-photo for its
       own image (formularz / laptop, mail z filmem, rodzina przed ekranem) */
    --step-photo-src: url('assets/reference-01.jpg');
    /* ---- HERO IMAGES: one per device, swap independently ----
       --hero-photo-desktop : wide crop, subject off to one side, copy sits
                              in the clear space in the middle.
       --hero-photo-mobile  : tall crop, Mikołaj centred and near the top;
                              leave the lower third calm, the copy sits there.
       Both currently point at the same placeholder file. */
    /* final art for the "Jak to działa" steps, one variable per step */
    --step-1-photo: url('assets/reference-02.jpg');
    --step-2-photo: url('assets/reference-03.jpg');
    --step-3-photo: url('assets/reference-04.jpg');
    /* quote band: elves on the edges, clear middle for the copy */
    --quote-photo: none;
    --hero-photo-desktop: none;
    --hero-photo-mobile: none;
    --radius-pill: 999px;
  }

  * { box-sizing: border-box; }

  html, body {
    margin: 0;
    padding: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  img { max-width: 100%; display: block; }

  a { text-decoration: none; color: inherit; }

  /* ---------- HEADER ---------- */
  .site-header {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px clamp(20px, 5vw, 64px) 24px;
    background: rgba(255, 255, 255, 0.34);
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
  }

  .logo {
    display: inline-block;
    line-height: 0;
    transition: opacity 0.15s ease;
  }
  .logo:hover { opacity: 0.85; }

  .logo img {
    width: auto;
    height: 44px;
    display: block;
  }

  .nav {
    display: flex;
    align-items: center;
    gap: 32px;
    color: #fff;
    font-weight: 500;
    font-size: 15px;
    text-shadow: 0 1px 6px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.3);
  }

  .nav a { opacity: 0.92; transition: opacity 0.2s ease; }
  .nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

  .nav .account-icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
  }
  .nav .account-icon:hover { text-decoration: none; }

  .cart-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
  }

  @media (max-width: 640px) {
    .nav { gap: 16px; font-size: 13px; }
    .nav .nav-label { display: none; }
  }

  /* ---------- MOBILE NAV ---------- */
  .nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 34px;
    height: 34px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
  }

  .nav-toggle span {
    display: block;
    height: 2px;
    width: 22px;
    border-radius: 2px;
    background: #fff;
    transition: transform 0.22s ease, opacity 0.18s ease;
  }

  .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 19;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    padding: 90px 24px 40px;
    background: linear-gradient(160deg, #2a1210 0%, #3a1613 55%, #200d0b 100%);
  }

  .mobile-menu[hidden] { display: none; }

  .mobile-menu a {
    font-family: 'Berkshire Swash', cursive;
    font-size: 24px;
    color: rgba(255,255,255,0.9);
  }

  .mobile-menu .btn-primary {
    font-size: 20px;
    margin-top: 6px;
    color: #fff;
  }
  .mobile-menu .mobile-account { display: inline-flex; align-items: center; gap: 10px; }
  .mobile-menu .mobile-account svg { width: 22px; height: 22px; }

  @media (max-width: 640px) {
    .nav-toggle { display: flex; }
  }

  /* ---------- HERO ---------- */
  .hero {
    position: relative;
    min-height: 780px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 140px 24px 80px;
    overflow: hidden;
    background-image: var(--hero-photo-desktop), linear-gradient(145deg, #7d1718 0%, #3f1515 48%, #170c0d 100%);
    background-size: cover;
    background-position: center 25%;
    background-repeat: no-repeat;
  }

  .hero::before {
    /* darken a pool directly behind the text/buttons, keep the photo's
       edges bright so the image itself can breathe */
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 58% 72% at 50% 46%, rgba(6,3,2,0.58) 0%, rgba(6,3,2,0.44) 34%, rgba(6,3,2,0.24) 56%, rgba(6,3,2,0.08) 74%, transparent 88%),
      linear-gradient(to bottom, transparent 0%, transparent 82%, rgba(8,4,3,0.3) 100%);
    pointer-events: none;
  }

  .hero-content {
    position: relative;
    z-index: 2;
    max-width: 920px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .badge {
    display: inline-block;
    padding: 10px 24px;
    border: 1px solid rgba(255,255,255,0.55);
    border-radius: var(--radius-pill);
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    font-family: 'Berkshire Swash', cursive;
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(2px);
    margin-bottom: 28px;
  }

  .hero .badge {
    font-size: 20px;
    padding: 13px 34px;
    border-color: rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.08);
    margin-bottom: 32px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
  }

  .hero h1 {
    font-family: 'Climate Crisis', sans-serif;
    font-weight: 800;
    font-size: clamp(34px, 5.4vw, 66px);
    line-height: 1.1;
    letter-spacing: 0.03em;
    color: #fff;
    margin: 0 0 24px;
    text-shadow: 0 3px 18px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.4);
  }

  .hero p.sub {
    font-family: 'Berkshire Swash', cursive;
    color: rgba(255,255,255,0.96);
    font-size: clamp(16px, 1.8vw, 19px);
    line-height: 1.6;
    max-width: 640px;
    margin: 0 0 34px;
    font-weight: 400;
    text-shadow: 0 2px 10px rgba(0,0,0,0.65), 0 1px 3px rgba(0,0,0,0.5);
  }

  .btn-primary {
    display: inline-block;
    background: var(--red);
    color: #fff;
    font-family: 'Berkshire Swash', cursive;
    font-weight: 400;
    font-size: 18px;
    padding: 16px 38px;
    border-radius: var(--radius-pill);
    box-shadow: 0 10px 24px rgba(227, 28, 61, 0.45);
    border: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  }

  .btn-primary:hover {
    background: var(--red-dark);
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(227, 28, 61, 0.55);
  }

  .btn-watch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    color: #fff;
    font-family: 'Berkshire Swash', cursive;
    font-weight: 400;
    font-size: 17px;
    background: none;
    border: none;
    cursor: pointer;
    text-shadow: 0 2px 10px rgba(0,0,0,0.65), 0 1px 3px rgba(0,0,0,0.5);
  }

  .btn-watch .play-circle {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.95);
    color: var(--red);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: transform 0.15s ease;
  }
  .btn-watch:hover .play-circle { transform: scale(1.08); }

  .hero-footnote {
    position: relative;
    z-index: 2;
    margin-top: 56px;
    padding: 12px 26px;
    background: rgba(20,10,8,0.55);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: var(--radius-pill);
    color: rgba(255,255,255,0.95);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    backdrop-filter: blur(3px);
  }

  /* ---------- PROMO BAR ---------- */
  .promo-bar {
    position: relative;
    overflow: hidden;
    background: linear-gradient(100deg, #0d6b36 0%, #12803f 50%, #0d6b36 100%);
    color: #fff;
    display: flex;
    align-items: center;
  }

  .promo-track {
    display: flex;
    width: max-content;
    animation: promo-scroll 55s linear infinite;
    padding: 15px 0;
  }
  .promo-bar:hover .promo-track { animation-play-state: paused; }

  @keyframes promo-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  /* one run of the message, repeated so the loop never shows a gap */
  .promo-run {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-right: 18px;
    white-space: nowrap;
  }

  .promo-hook {
    font-family: 'Berkshire Swash', cursive;
    font-size: 17px;
    color: rgba(255,255,255,0.95);
  }

  .promo-code {
    font-family: 'Climate Crisis', sans-serif;
    font-size: 17px;
    letter-spacing: 0.06em;
    padding: 5px 14px 3px;
    border: 1.5px dashed rgba(255,255,255,0.6);
    border-radius: 8px;
  }

  .promo-value {
    font-family: 'Climate Crisis', sans-serif;
    font-size: 17px;
    letter-spacing: 0.03em;
    color: #ffd9a0;
  }

  .promo-star {
    font-family: 'Berkshire Swash', cursive;
    font-size: 15px;
    color: rgba(255,255,255,0.45);
  }

  /* the message fades out before it reaches the button */
  .promo-bar::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 230px;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to right, rgba(13,107,54,0) 0%, #0d6b36 45%, #0d6b36 100%);
  }

  /* the copy button stays put while the message runs underneath it */
  .promo-copy {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    background: var(--cream);
    color: #0d6b36;
    font-family: 'Berkshire Swash', cursive;
    font-size: 15px;
    white-space: nowrap;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
  }

  .promo-copy:hover {
    transform: translateY(-50%) translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    background: #fff;
  }

  .promo-copy:active {
    transform: translateY(-50%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
  }

  .promo-copy.copied {
    background: #ffd9a0;
    color: #7a3d05;
  }

  @media (max-width: 600px) {
    .promo-hook, .promo-code, .promo-value { font-size: 15px; }
    .promo-copy { right: 12px; padding: 8px 14px; font-size: 14px; }
    .promo-bar::after { width: 170px; }
  }

  /* ---------- FEATURE / PLAYER SECTION ---------- */
  .feature-section {
    padding: var(--section-gap) 24px 0;
    max-width: 1440px;
    margin: 0 auto;
  }

  .feature-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 64px;
    align-items: center;
  }

  .feature-player {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 4;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(34, 21, 18, 0.16);
	background: #120807;
  }

  .feature-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
    background: #2a1512;
  }

  .feature-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .feature-badge {
    align-self: flex-start;
    border-color: rgba(227,28,61,0.3);
    color: var(--red);
    background: rgba(227,28,61,0.06);
  }

  .feature-content h2 {
    font-family: 'Berkshire Swash', cursive;
    font-weight: 400;
    font-size: clamp(28px, 3.2vw, 38px);
    margin: 4px 0 16px;
    color: var(--ink);
  }

  .feature-content > p {
    font-family: 'Inter', sans-serif;
    color: var(--ink-soft);
    font-size: 16px;
    line-height: 1.7;
    margin: 0 0 30px;
  }

  .feature-content .btn-primary {
    align-self: flex-start;
  }

  .benefit-list {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .benefit-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
  }

  .benefit-list .check {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
  }

  @media (max-width: 900px) {
    .feature-grid {
      grid-template-columns: 1fr;
      gap: 36px;
    }
    .feature-player { aspect-ratio: 16 / 11; }
  }

  /* ---------- QUOTE BAND (dark) ---------- */
  .quote-section {
    margin-top: var(--section-gap);
    position: relative;
    overflow: hidden;
    /* film still behind the quote — swap --step-photo-src for a dedicated
       frame. Keep the sides of that frame free for characters (elves,
       Mikołaj), since only the centre gets darkened. */
    background-image: var(--quote-photo), linear-gradient(135deg, #5f1718 0%, #2b1011 58%, #160a0b 100%);
    background-size: cover;
    /* elves' faces sit in the upper half of the frame */
    background-position: center 38%;
    background-repeat: no-repeat;
    padding: 68px 24px;
    text-align: center;
  }

  /* darken only a pool behind the copy, exactly like the hero, so the
     left and right of the photo stay bright for the characters */
  .quote-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 46% 88% at 50% 50%, rgba(6,3,2,0.7) 0%, rgba(6,3,2,0.53) 34%, rgba(6,3,2,0.29) 56%, rgba(6,3,2,0.1) 74%, transparent 88%);
    pointer-events: none;
  }

  .quote-inner {
    position: relative;
    z-index: 2;
    max-width: 780px;
    margin: 0 auto;
  }

  .quote-mark {
    font-family: 'Berkshire Swash', cursive;
    font-size: 54px;
    line-height: 0.6;
    color: rgba(255,255,255,0.2);
    display: block;
    margin-bottom: 12px;
  }

  .quote-inner h2 {
    text-wrap: balance;
    font-family: 'Climate Crisis', sans-serif;
    font-weight: 400;
    font-size: clamp(26px, 3.6vw, 40px);
    line-height: 1.24;
    letter-spacing: 0.02em;
    color: #fff;
    margin: 0 0 20px;
    text-shadow: 0 3px 20px rgba(0,0,0,0.4);
  }

  .quote-inner p {
    font-family: 'Berkshire Swash', cursive;
    font-size: clamp(16px, 1.9vw, 20px);
    line-height: 1.6;
    color: rgba(255,255,255,0.9);
    margin: 0 0 26px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.45);
  }

  /* soft falling-snow dots, kept very subtle */
  .quote-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(circle, rgba(255,255,255,0.5) 1.5px, transparent 1.6px),
      radial-gradient(circle, rgba(255,255,255,0.32) 1px, transparent 1.1px);
    background-size: 190px 190px, 120px 120px;
    background-position: 0 0, 60px 70px;
    opacity: 0.5;
    pointer-events: none;
  }

  /* ---------- FAQ ---------- */
  .faq-section {
    padding: var(--section-gap) 24px 0;
    max-width: 940px;
    margin: 0 auto;
  }

  .faq-section > h2 {
    font-family: 'Berkshire Swash', cursive;
    font-weight: 400;
    font-size: clamp(28px, 4vw, 38px);
    text-align: center;
    margin: 0 0 48px;
    color: var(--ink);
  }

  .faq-item {
    border-bottom: 1px solid rgba(34,21,18,0.12);
  }

  .faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 0;
    cursor: pointer;
    list-style: none;
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    transition: color 0.15s ease;
  }

  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary:hover { color: var(--red); }

  .faq-toggle {
    flex-shrink: 0;
    position: relative;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--red);
    transition: transform 0.22s ease;
  }

  /* the plus sign, drawn as two bars so one can disappear when open */
  .faq-toggle::before,
  .faq-toggle::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    background: #fff;
    border-radius: 2px;
    transform: translate(-50%, -50%);
  }
  .faq-toggle::before { width: 12px; height: 2px; }
  .faq-toggle::after  { width: 2px; height: 12px; transition: opacity 0.2s ease, transform 0.22s ease; }

  .faq-item[open] .faq-toggle::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }
  .faq-item[open] summary { color: var(--red); }

  .faq-answer {
    padding: 0 60px 28px 0;
    font-family: 'Inter', sans-serif;
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--ink-soft);
    animation: faq-reveal 0.25s ease;
  }

  .faq-answer p { margin: 0 0 12px; }
  .faq-answer p:last-child { margin-bottom: 0; }

  @keyframes faq-reveal {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @media (max-width: 600px) {
    .faq-item summary { font-size: 16px; gap: 16px; }
    .faq-answer { padding-right: 0; }
  }

  /* ---------- BLOG ---------- */
  .blog-section {
    padding: var(--section-gap) 24px 0;
    max-width: 1140px;
    margin: 0 auto;
  }

  .blog-section h2 {
    font-family: 'Berkshire Swash', cursive;
    font-weight: 400;
    font-size: clamp(26px, 3.6vw, 34px);
    margin: 0 0 36px;
    color: var(--ink);
  }

  .blog-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }

  .blog-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: transform 0.2s ease;
  }
  .blog-card:hover { transform: translateY(-4px); }

  .blog-thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    overflow: hidden;
    background-image: var(--step-photo-src);
    background-size: cover;
    background-position: center;
    box-shadow: 0 8px 20px rgba(34, 21, 18, 0.12);
    margin-bottom: 14px;
    transition: box-shadow 0.2s ease;
  }
  .blog-card:hover .blog-thumb { box-shadow: 0 14px 28px rgba(34, 21, 18, 0.2); }

  .blog-cat {
    display: inline-block;
    align-self: flex-start;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 7px;
  }

  .blog-card h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.45;
    color: var(--ink);
    margin: 0;
    transition: color 0.15s ease;
  }
  .blog-card:hover h3 { color: var(--red); }

  @media (max-width: 900px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  }

  @media (max-width: 520px) {
    .blog-grid { grid-template-columns: 1fr; }
  }

  /* ---------- FINAL CTA ---------- */
  .final-cta {
    max-width: 1140px;
    margin: 0 auto;
    padding: var(--section-gap) 24px var(--section-gap);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
  }

  .final-cta h2 {
    font-family: 'Climate Crisis', sans-serif;
    font-weight: 400;
    font-size: clamp(28px, 4.6vw, 52px);
    line-height: 1.14;
    letter-spacing: 0.02em;
    color: var(--ink);
    margin: 0;
  }

  .final-cta .btn-primary { flex-shrink: 0; }

  @media (max-width: 760px) {
    .final-cta {
      flex-direction: column;
      align-items: flex-start;
      gap: 26px;
    }
  }

  /* ---------- FOOTER ---------- */
  .site-footer {
    background: linear-gradient(160deg, #2a1210 0%, #3a1613 55%, #200d0b 100%);
    color: rgba(255,255,255,0.72);
    font-family: 'Inter', sans-serif;
  }

  .footer-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 64px 24px 0;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 48px;
  }

  .footer-brand img { width: auto; height: 42px; margin-bottom: 18px; }

  .footer-brand p {
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 20px;
    max-width: 320px;
    color: rgba(255,255,255,0.6);
  }

  .footer-socials { display: flex; gap: 10px; }

  .footer-socials a {
    width: 34px; height: 34px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.8);
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
  }
  .footer-socials a:hover {
    background: var(--red);
    border-color: transparent;
    color: #fff;
    transform: translateY(-2px);
  }
  .footer-socials i { display: block; font-size: 16px; line-height: 1; }
  .footer-socials img { display: block; height: 17px; object-fit: contain; width: 17px; }

  .footer-col h4 {
    font-family: 'Berkshire Swash', cursive;
    font-weight: 400;
    font-size: 17px;
    color: #fff;
    margin: 0 0 16px;
  }

  .footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
  }

  .footer-col a {
    font-size: 14px;
    color: rgba(255,255,255,0.66);
    transition: color 0.15s ease;
  }
  .footer-col a:hover { color: #fff; }

  .footer-note {
    font-size: 13.5px;
    line-height: 1.7;
    color: rgba(255,255,255,0.55);
    margin: 18px 0 0;
  }

  .footer-bottom {
    max-width: 1140px;
    margin: 0 auto;
    padding: 28px 24px 34px;
    margin-top: 48px;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13px;
    color: rgba(255,255,255,0.5);
  }

  .footer-bottom a { color: rgba(255,255,255,0.5); }
  .footer-bottom a:hover { color: #fff; }
  .footer-bottom__right .footer-bottom-widget,
  .footer-bottom__right .widget,
  .footer-bottom__right p { margin: 0; }

  @media (max-width: 800px) {
    .footer-inner { grid-template-columns: 1fr 1fr; gap: 36px; }
    .footer-brand { grid-column: 1 / -1; }
  }

  @media (max-width: 520px) {
    .footer-inner { grid-template-columns: 1fr; }
    .footer-bottom { justify-content: center; text-align: center; }
  }

  /* ---------- SEO COPY (quiet, collapsible) ---------- */
  /* The text stays in the HTML at all times so crawlers read it in full;
     only its visual height is capped until the reader opens it. */
  .seo-section {
    padding: var(--section-gap) 24px 0;
    max-width: 940px;
    margin: 0 auto;
    border-top: 1px solid rgba(34,21,18,0.08);
  }

  .seo-block { position: relative; }

  .seo-block > summary {
    list-style: none;
    cursor: pointer;
  }
  .seo-block > summary::-webkit-details-marker { display: none; }

  .seo-section h2 {
    font-family: 'Berkshire Swash', cursive;
    font-weight: 400;
    font-size: 21px;
    line-height: 1.35;
    color: rgba(34,21,18,0.62);
    margin: 0 0 16px;
  }

  .seo-section h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: rgba(34,21,18,0.6);
    margin: 26px 0 10px;
  }

  .seo-section p {
    font-family: 'Inter', sans-serif;
    font-size: 14.5px;
    line-height: 1.75;
    color: rgba(74,58,55,0.72);
    margin: 0 0 14px;
  }

  /* collapsed: show a taste of the copy, fade the rest out */
  .seo-body {
    position: relative;
    max-height: 132px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  }

  .seo-block[open] .seo-body {
    max-height: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .seo-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    color: rgba(34,21,18,0.55);
    transition: color 0.15s ease;
  }
  .seo-block > summary:hover .seo-toggle { color: var(--red); }

  .seo-toggle svg { transition: transform 0.2s ease; }
  .seo-block[open] .seo-toggle svg { transform: rotate(180deg); }

  .seo-block[open] .seo-toggle .label-more { display: none; }
  .seo-toggle .label-less { display: none; }
  .seo-block[open] .seo-toggle .label-less { display: inline; }

  /* ---------- TESTIMONIAL SCREENSHOTS ---------- */
  .testi-section {
    padding: var(--section-gap) 24px 0;
    max-width: 1180px;
    margin: 0 auto;
  }

  .testi-heading {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 52px;
  }

  .testi-heading h2 {
    font-family: 'Berkshire Swash', cursive;
    font-weight: 400;
    font-size: clamp(28px, 4vw, 38px);
    margin: 0 0 14px;
    color: var(--ink);
  }

  .testi-heading p {
    font-family: 'Inter', sans-serif;
    color: var(--ink-soft);
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
  }

  /* CSS columns give us masonry for free — screenshots keep their own
     aspect ratio, so any mix of sizes flows without cropping.
     To add or remove a testimonial, just add/remove a .testi-card. */
  .testi-grid {
    columns: 3;
    column-gap: 22px;
  }

  .testi-card {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin: 0 0 22px;
    background: #fff;
    border: 1px solid rgba(34,21,18,0.07);
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 6px 18px rgba(34, 21, 18, 0.07);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }

  .testi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(34, 21, 18, 0.12);
  }

  .testi-card img {
    width: 100%;
    height: auto;
    border-radius: 9px;
    display: block;
  }

  .testi-source {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 0 2px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: rgba(74,58,55,0.65);
  }

  .testi-source svg { flex-shrink: 0; opacity: 0.75; }

  .testi-cta {
    text-align: center;
    margin-top: 44px;
  }

  @media (max-width: 900px) {
    .testi-grid { columns: 2; }
  }

  @media (max-width: 600px) {
    .testi-grid { columns: 1; }
  }

  /* ---------- TRUST BAR (dark break) ---------- */
  .trust-section {
    margin-top: var(--section-gap);
    background:
      radial-gradient(ellipse 70% 120% at 15% 0%, rgba(227,28,61,0.22), transparent 60%),
      linear-gradient(135deg, #2a1210 0%, #3d1714 45%, #24100e 100%);
    padding: 72px 24px;
  }

  .trust-grid {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 20px;
    position: relative;
  }

  /* thin dividers between the three items */
  .trust-item + .trust-item::before {
    content: "";
    position: absolute;
    left: 0; top: 12%;
    height: 76%;
    width: 1px;
    background: rgba(255,255,255,0.14);
  }

  .trust-icon {
    width: 54px; height: 54px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.22);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    margin-bottom: 18px;
  }

  .trust-item h3 {
    font-family: 'Berkshire Swash', cursive;
    font-weight: 400;
    font-size: 21px;
    color: #fff;
    margin: 0 0 8px;
  }

  .trust-item p {
    font-family: 'Inter', sans-serif;
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(255,255,255,0.7);
    margin: 0;
    max-width: 260px;
  }

  @media (max-width: 760px) {
    .trust-grid { grid-template-columns: 1fr; gap: 40px; }
    .trust-item + .trust-item::before { display: none; }
  }

  /* ---------- HOW IT WORKS / STEPS SECTION ---------- */
  .steps-section {
    padding: var(--section-gap) 24px 0;
    max-width: 1140px;
    margin: 0 auto;
  }

  .steps-heading {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 64px;
  }

  .steps-heading h2 {
    font-family: 'Berkshire Swash', cursive;
    font-weight: 400;
    font-size: clamp(28px, 4vw, 38px);
    margin: 0 0 14px;
    color: var(--ink);
  }

  .steps-heading p {
    font-family: 'Inter', sans-serif;
    color: var(--ink-soft);
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
  }

  .steps-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 72px;
  }

  /* the vertical spine running down the middle */
  .steps-list::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: linear-gradient(to bottom, transparent, rgba(227,28,61,0.22) 8%, rgba(227,28,61,0.22) 92%, transparent);
  }

  .step-row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
  }

  /* the dot sitting on the spine */
  .step-row::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 0 5px var(--cream);
    z-index: 2;
  }

  .step-media { position: relative; }

  .step-photo {
    --photo: var(--step-photo-src);
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 16px 34px rgba(34, 21, 18, 0.16);
    /* one shared timing so lift, tilt and growth move as a single gesture */
    transition:
      translate 0.55s cubic-bezier(.2,.8,.2,1),
      rotate 0.55s cubic-bezier(.2,.8,.2,1),
      scale 0.55s cubic-bezier(.2,.8,.2,1),
      box-shadow 0.55s ease;
  }

  /* the image itself lives on an inner layer so it can zoom inside the frame */
  .step-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--photo);
    background-size: cover;
    background-position: center;
    transition: scale 1.1s cubic-bezier(.2,.8,.2,1);
  }

  /* warm light that blooms over the photo on hover */
  .step-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at 30% 20%, rgba(255,214,150,0.28), transparent 70%);
    opacity: 0;
    transition: opacity 0.6s ease;
  }

  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .step-media:hover { z-index: 2; }

    /* tilts toward the text and grows in one movement */
    .step-media:hover .step-photo {
      translate: -6px -10px;
      rotate: -1.8deg;
      scale: 1.06;
      box-shadow: 0 30px 56px rgba(34, 21, 18, 0.26);
    }
    .step-media:hover .step-photo::before { scale: 1.05; }
    .step-media:hover .step-photo::after  { opacity: 1; }

    /* photos on the right mirror the lean so they still tip inward */
    .step-row:nth-child(even) .step-media:hover .step-photo {
      translate: 6px -10px;
      rotate: 1.8deg;
    }
  }

  .step-text h3 {
    font-family: 'Berkshire Swash', cursive;
    font-weight: 400;
    font-size: clamp(22px, 2.6vw, 28px);
    margin: 0 0 14px;
    color: var(--ink);
  }

  .step-text p {
    font-family: 'Inter', sans-serif;
    color: var(--ink-soft);
    font-size: 15.5px;
    line-height: 1.7;
    margin: 0 0 12px;
  }

  .step-text p:last-child { margin-bottom: 0; }

  .step-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(227,28,61,0.1);
    color: var(--red);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 14px;
  }

  /* even rows put the photo on the right, text on the left */
  .step-row:nth-child(even) .step-media { order: 2; }
  .step-row:nth-child(even) .step-text { order: 1; text-align: right; }
  .step-row:nth-child(even) .step-text .step-index { margin-left: auto; }

  .steps-cta {
    text-align: center;
    margin-top: 64px;
  }

  @media (max-width: 820px) {
    .steps-list::before { display: none; }
    .steps-list { gap: 52px; }
    .step-row {
      grid-template-columns: 1fr;
      gap: 22px;
    }
    .step-row::after { display: none; }
    .step-row:nth-child(even) .step-media { order: 0; }
    .step-row:nth-child(even) .step-text { order: 0; text-align: left; }
    .step-row:nth-child(even) .step-text .step-index { margin-left: 0; }
  }

  /* ---------- REEL / SOCIAL PROOF SECTION ---------- */
  .reel-section {
    padding: var(--section-gap) 0 0;
  }

  .reel-heading {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 48px;
    padding: 0 24px;
  }

  .reel-heading h2 {
    font-family: 'Berkshire Swash', cursive;
    font-weight: 400;
    font-size: clamp(28px, 4vw, 38px);
    margin: 0 0 14px;
    color: var(--ink);
  }

  .reel-heading p {
    font-family: 'Inter', sans-serif;
    color: var(--ink-soft);
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
  }

  .reel-carousel-wrap {
    position: relative;
    width: 100%;
  }

  .reel-track {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 8px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .reel-track::-webkit-scrollbar { display: none; }

  .reel-card {
    position: relative;
    flex: 0 0 auto;
    width: 16.6667%;
    min-width: 150px;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    scroll-snap-align: start;
    background: linear-gradient(155deg, #d8d8d8, #ececec);
    cursor: pointer;
  }

  /* warm placeholder tints, cycling every 6 so cards read as separate clips */
  .reel-card:nth-child(6n+1){ background: linear-gradient(160deg,#f3d3c1,#e7b199); }
  .reel-card:nth-child(6n+2){ background: linear-gradient(160deg,#e9d6c9,#d9b7a3); }
  .reel-card:nth-child(6n+3){ background: linear-gradient(160deg,#f0dccb,#e0b898); }
  .reel-card:nth-child(6n+4){ background: linear-gradient(160deg,#ecd0bd,#dcae8e); }
  .reel-card:nth-child(6n+5){ background: linear-gradient(160deg,#f2d8c6,#e2b596); }
  .reel-card:nth-child(6n+6){ background: linear-gradient(160deg,#e6cdbc,#d6a988); }

  .reel-card::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(20,10,8,0.55) 0%, transparent 45%);
  }

  .reel-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 46px; height: 46px;
    border-radius: 50%;
    background: rgba(255,255,255,0.85);
    display: flex; align-items: center; justify-content: center;
    color: var(--ink);
    z-index: 2;
  }

  .reel-caption {
    position: absolute;
    left: 14px; right: 14px; bottom: 12px;
    z-index: 2;
    color: #fff;
  }

  .reel-caption .handle {
    display: block;
    font-size: 13px;
    font-weight: 600;
    text-shadow: 0 1px 6px rgba(0,0,0,0.55);
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .reel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    display: flex; align-items: center; justify-content: center;
    color: var(--ink);
    cursor: pointer;
    z-index: 5;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .reel-arrow:hover { transform: translateY(-50%) scale(1.06); box-shadow: 0 8px 22px rgba(0,0,0,0.18); }
  .reel-arrow.prev { left: 20px; }
  .reel-arrow.next { right: 20px; }

  @media (max-width: 900px) {
    .reel-arrow { display: none; }
  }

  .reel-cta {
    text-align: center;
    margin-top: 40px;
  }

  .feature-content .btn-primary {
    align-self: flex-start;
  }

  @media (max-width: 560px) {
    .site-header { padding: 16px 20px 14px; }

    /* one big reel in the middle, slivers of the neighbours either side */
    .reel-track {
      gap: 12px;
      padding: 0 18vw 8px;
      scroll-snap-type: x mandatory;
      scroll-padding: 0 18vw;
    }
    .reel-card {
      width: 64vw;
      min-width: 0;
      border-radius: 18px;
      scroll-snap-align: center;
    }
    .reel-caption .handle { font-size: 15px; }
  }
  /* ---------- ORDER MODAL ---------- */
  .modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    background: rgba(18, 8, 7, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
  }

  .modal-overlay.is-open { opacity: 1; pointer-events: auto; }

  .modal {
    position: relative;
    width: 66%;
    max-width: 720px;
    max-height: 100%;
    overflow-y: auto;
    background: var(--cream);
    border-radius: 22px;
    box-shadow: 0 30px 70px rgba(20, 10, 8, 0.4);
    transform: translateY(14px) scale(0.985);
    transition: transform 0.22s ease;
  }
  .modal-overlay.is-open .modal { transform: none; }

  .modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 4;
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.35);
    background: rgba(20,10,8,0.5);
    backdrop-filter: blur(4px);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
  }
  .modal-close:hover { background: rgba(20,10,8,0.75); transform: scale(1.06); }

  /* --- video thumbnail --- */
  .modal-video {
    position: relative;
    width: 100%;
    /* wide strip on desktop: poster, tiles, price, CTA and the payment row
       all land inside one screen, no scrolling to reach the button */
    aspect-ratio: 12 / 5;
    overflow: hidden;
    background-image: var(--step-photo-src);
    background-size: cover;
    background-position: center;
    cursor: pointer;
  }

  .modal-video::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(10,5,4,0.42) 0%, transparent 32%, rgba(10,5,4,0.82) 100%);
    pointer-events: none;
  }

  .modal-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  .modal-video.is-playing::after,
  .modal-video.is-playing .modal-play,
  .modal-video.is-playing .modal-video-top,
  .modal-video.is-playing .modal-video-bottom { display: none; }

  .modal-play {
    position: absolute;
    top: 40%; left: 50%;
    transform: translate(-50%, -50%);
    width: 66px; height: 66px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    color: var(--red);
    display: flex; align-items: center; justify-content: center;
    z-index: 2;
    box-shadow: 0 8px 22px rgba(0,0,0,0.3);
    transition: transform 0.16s ease;
  }
  .modal-video:hover .modal-play { transform: translate(-50%, -50%) scale(1.07); }

  .modal-video-top {
    position: absolute;
    top: 16px; left: 18px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    max-width: calc(100% - 90px);
  }

  .modal-film-title {
    display: block;
    font-family: 'Berkshire Swash', cursive;
    font-size: 30px;
    line-height: 1.16;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,0.65);
    margin-bottom: 12px;
  }

  .modal-flag {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: var(--red);
    padding: 5px 12px;
    border-radius: var(--radius-pill);
  }

  .modal-video-bottom {
    position: absolute;
    left: 22px; right: 22px; bottom: 18px;
    z-index: 2;
  }

  .modal-video-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .modal-video-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(3px);
    padding: 5px 11px;
    border-radius: var(--radius-pill);
  }

  /* --- body --- */
  .modal-body { padding: 26px 28px 30px; }

  .modal-body h3 {
    font-family: 'Berkshire Swash', cursive;
    font-weight: 400;
    font-size: 22px;
    color: var(--ink);
    margin: 0 0 16px;
    text-align: center;
  }

  .kids-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
  }

  .kid-option {
    padding: 14px 6px;
    border-radius: 12px;
    border: 2px solid rgba(34,21,18,0.12);
    background: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
    color: var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease;
  }

  .kid-option:hover { border-color: rgba(227,28,61,0.4); transform: translateY(-2px); }

  .kid-option.is-selected {
    border-color: var(--red);
    background: var(--red);
    color: #fff;
    box-shadow: 0 6px 14px rgba(227,28,61,0.28);
  }

  .modal-summary {
    text-align: center;
    margin-bottom: 18px;
  }

  .modal-summary-price {
    font-family: 'Berkshire Swash', cursive;
    font-size: 30px;
    color: var(--ink);
  }


  /* --- progress bar along the top edge of the order panel --- */
  .modal-progress {
    position: sticky;
    top: 0;
    z-index: 6;
    height: 4px;
    background: rgba(34,21,18,0.08);
  }

  .modal-progress span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--red), #ff6a5c);
    border-radius: 0 999px 999px 0;
    transition: width 0.45s cubic-bezier(.22,.9,.3,1);
  }

  /* over the poster on step 1 it sits on the photo, so it gets a lighter track */
  .modal:not(.step-2) .modal-progress { margin-bottom: -4px; background: rgba(255,255,255,0.18); }

  /* --- step 2: personalisation form --- */
  .modal.step-2 .modal-video { display: none; }

  .step-head {
    display: flex;
    align-items: center;
    gap: 12px;
    /* keep clear of the close button parked in the corner */
    padding-right: 44px;
    margin-bottom: 22px;
  }

  /* on step 2 there is no photo behind it, so the X switches to a light chip */
  .modal.step-2 .modal-close {
    background: #fff;
    border-color: rgba(34,21,18,0.14);
    color: var(--ink);
  }
  .modal.step-2 .modal-close:hover { background: #fff; border-color: var(--red); color: var(--red); }

  .step-back {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(34,21,18,0.14);
    background: #fff;
    color: var(--ink);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
  }
  .step-back:hover { border-color: var(--red); color: var(--red); }


  .step-title {
    font-family: 'Berkshire Swash', cursive;
    font-weight: 400;
    font-size: 21px;
    color: var(--ink);
    margin: 0;
    text-align: left;
  }

  .child-block {
    padding: 16px 16px 4px;
    border: 1px solid rgba(34,21,18,0.1);
    border-radius: 14px;
    background: #fff;
    margin-bottom: 14px;
  }

  .child-tag {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--red);
    background: rgba(227,28,61,0.09);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    margin-bottom: 14px;
  }

  .field { margin-bottom: 16px; }

  .field-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 8px;
  }

  .req { color: var(--red); }

  .field-input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 11px;
    border: 2px solid rgba(34,21,18,0.12);
    background: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: var(--ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .field-input::placeholder { color: rgba(74,58,55,0.42); }
  .field-input:focus {
    outline: none;
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(227,28,61,0.12);
  }

  .field-hint {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--ink-soft);
    margin-top: 6px;
  }

  .field-error {
    display: none;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--red);
    margin-top: 6px;
  }

  .field.has-error .field-error { display: block; }
  .field.has-error .field-hint { display: none; }
  .field.has-error .field-input { border-color: var(--red); }
  .field.has-error .gender-option { border-color: rgba(227,28,61,0.55); }

  .gender-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .gender-option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 8px;
    border-radius: 12px;
    border: 2px solid rgba(34,21,18,0.12);
    background: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease;
  }

  .gender-icon { display: inline-flex; color: var(--ink-soft); transition: color 0.16s ease; }

  .gender-option:hover { border-color: rgba(227,28,61,0.4); transform: translateY(-2px); }

  .gender-option.is-selected {
    border-color: var(--red);
    background: var(--red);
    color: #fff;
  }
  .gender-option.is-selected .gender-icon { color: #fff; }

  @media (max-width: 420px) {
    .gender-option { flex-direction: column; gap: 5px; font-size: 12.5px; padding: 11px 6px; }
  }

  /* --- step 3: good deeds --- */
  .deed-block { padding-bottom: 16px; }

  .deed-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
  }

  .deed-head .child-tag { margin-bottom: 0; }

  .deed-counter {
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    color: var(--ink-soft);
    white-space: nowrap;
  }
  .deed-counter b { color: var(--ink); }
  .deed-block.is-full .deed-counter b { color: var(--red); }

  /* the catalogue can grow to hundreds of deeds, so each child's list is
     capped and scrolls on its own instead of stretching the modal */
  .deed-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 168px;
    overflow-y: auto;
    padding: 2px 10px 12px 2px;
    margin-bottom: -6px;
    overscroll-behavior: contain;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent 100%);
  }

  .deed-row::-webkit-scrollbar { width: 6px; }
  .deed-row::-webkit-scrollbar-track { background: transparent; }
  .deed-row::-webkit-scrollbar-thumb {
    background: rgba(34,21,18,0.18);
    border-radius: 999px;
  }
  .deed-row::-webkit-scrollbar-thumb:hover { background: rgba(34,21,18,0.3); }
  .deed-row { scrollbar-width: thin; scrollbar-color: rgba(34,21,18,0.18) transparent; }

  .deed-option {
    flex-shrink: 0;
    padding: 9px 14px;
    border-radius: var(--radius-pill);
    border: 1.5px solid rgba(34,21,18,0.14);
    background: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    color: var(--ink);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
  }

  .deed-option:hover { border-color: rgba(227,28,61,0.45); }

  .deed-option.is-selected {
    border-color: var(--red);
    background: var(--red);
    color: #fff;
  }

  /* once the quota is filled the rest dim, so the limit is obvious */
  .deed-block.is-full .deed-option:not(.is-selected) {
    opacity: 0.42;
    cursor: default;
  }
  .deed-block.is-full .deed-option:not(.is-selected):hover {
    border-color: rgba(34,21,18,0.14);
  }

  .deed-block .field-error { display: none; margin-top: 12px; }
  .deed-block.has-error .field-error { display: block; }
  .deed-block.has-error { border-color: rgba(227,28,61,0.5); }

  /* --- step 4: photo uploads --- */
  .photo-field { margin-bottom: 20px; }

  .photo-field .field-label { line-height: 1.5; }
  .photo-field .field-label em {
    font-style: normal;
    color: var(--red);
    font-weight: 700;
  }

  .dropzone {
    display: block;
    position: relative;
    border: 2px dashed rgba(34,21,18,0.18);
    border-radius: 14px;
    background: #fff;
    padding: 16px;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease;
  }

  .dropzone:hover { border-color: rgba(227,28,61,0.45); }

  .dropzone.is-over {
    border-color: var(--red);
    background: rgba(227,28,61,0.05);
  }

  .drop-empty {
    display: flex;
    align-items: center;
    gap: 13px;
  }

  .drop-icon {
    flex-shrink: 0;
    width: 42px; height: 42px;
    border-radius: 12px;
    background: rgba(227,28,61,0.09);
    color: var(--red);
    display: flex; align-items: center; justify-content: center;
  }

  .drop-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

  .drop-text b {
    font-family: 'Inter', sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
  }

  .drop-text small {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--ink-soft);
  }

  /* swap the two states once a file is chosen */
  .drop-filled { display: none; align-items: center; gap: 13px; }
  .photo-field.has-file .drop-empty { display: none; }
  .photo-field.has-file .drop-filled { display: flex; }
  .photo-field.has-file .dropzone {
    border-style: solid;
    border-color: rgba(34,21,18,0.12);
  }

  .drop-preview {
    width: 54px; height: 54px;
    flex-shrink: 0;
    border-radius: 10px;
    object-fit: cover;
    background: rgba(34,21,18,0.06);
  }

  .drop-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
  }

  .drop-meta b {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .drop-meta small {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--ink-soft);
  }

  .drop-remove {
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(34,21,18,0.14);
    background: #fff;
    color: var(--ink-soft);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
  }
  .drop-remove:hover { border-color: var(--red); color: var(--red); }

  .photo-field.has-error .dropzone { border-color: var(--red); }

  @media (max-width: 420px) {
    .drop-text small { font-size: 11.5px; }
    .drop-icon { width: 38px; height: 38px; }
  }

  /* --- step 5: closest people --- */
  .step-intro {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: -8px 0 20px;
  }

  .field-select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234a3a37' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
  }

  .field-select:invalid,
  .field-select option[value=""] { color: rgba(74,58,55,0.5); }

  /* a relation already taken by the other person is greyed out */
  .field-select option:disabled { color: rgba(74,58,55,0.35); }

  .person-block .deed-head { margin-bottom: 10px; }

  /* the message list behaves exactly like the deeds list, scroll included */
  .about-field .deed-row { max-height: 152px; }

  .about-field .field-error { display: none; margin-top: 10px; }
  .about-field.has-error .field-error { display: block; }
  .about-field.is-full .deed-counter b { color: var(--red); }

  /* name and age share a row — age needs far less space */
  .field-pair {
    display: grid;
    grid-template-columns: 1fr 96px;
    gap: 12px;
    align-items: start;
  }

  .field-age .field-select { padding-right: 34px; background-position: right 11px center; }

  .eyes-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .eye-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 10px;
    border-radius: var(--radius-pill);
    border: 1.5px solid rgba(34,21,18,0.14);
    background: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    color: var(--ink);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  }

  .eye-dot {
    width: 16px; height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: inset 0 -1px 2px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.06);
    position: relative;
  }

  /* tiny highlight so the swatch reads as an eye, not a colour blob */
  .eye-dot::after {
    content: "";
    position: absolute;
    top: 3px; left: 4px;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: rgba(255,255,255,0.75);
  }

  .eye-option:hover { border-color: rgba(227,28,61,0.45); }

  .eye-option.is-selected {
    border-color: var(--red);
    background: var(--red);
    color: #fff;
  }
  .eye-option.is-selected .eye-dot { box-shadow: inset 0 -1px 2px rgba(0,0,0,0.25), 0 0 0 2px rgba(255,255,255,0.85); }

  .field.has-error .eye-option { border-color: rgba(227,28,61,0.55); }

  @media (max-width: 420px) {
    .field-pair { grid-template-columns: 1fr 82px; gap: 10px; }
    .eye-option { font-size: 12.5px; padding: 7px 12px 7px 9px; }
  }

  /* --- step 6: summary --- */
  .sum-block {
    border: 1px solid rgba(34,21,18,0.1);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    margin-bottom: 14px;
  }

  .sum-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(34,21,18,0.03);
    border-bottom: 1px solid rgba(34,21,18,0.08);
  }

  .sum-title {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink);
  }

  /* deliberately quiet — a full restart is a last resort, not a shortcut */
  .restart-link {
    display: block;
    margin: 4px auto 0;
    border: none;
    background: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: rgba(74,58,55,0.6);
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 6px 10px;
  }
  .restart-link:hover { color: var(--red); }

  .sum-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 14px;
    padding: 11px 16px;
    border-bottom: 1px solid rgba(34,21,18,0.06);
  }
  .sum-row:last-child { border-bottom: none; }

  .sum-label {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
  }

  .sum-value {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-soft);
    min-width: 0;
    word-break: break-word;
  }

  .sum-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .sum-chips span {
    background: rgba(227,28,61,0.08);
    color: var(--red);
    font-size: 12.5px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
  }

  .sum-peek {
    border: none;
    cursor: pointer;
    background: var(--red);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    transition: background 0.15s ease;
  }
  .sum-peek:hover { background: var(--red-dark); }

  /* photo preview above the modal */
  .photo-peek {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: rgba(12, 6, 5, 0.82);
    backdrop-filter: blur(4px);
    cursor: zoom-out;
  }
  .photo-peek[hidden] { display: none; }

  .photo-peek img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  }

  .peek-close {
    position: absolute;
    top: 18px; right: 18px;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.12);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
  }
  .peek-close:hover { background: rgba(255,255,255,0.22); }

  @media (max-width: 480px) {
    .sum-row { grid-template-columns: 1fr; gap: 4px; }
    .sum-label { font-size: 12.5px; }
  }

  /* --- step 7: delivery --- */
  .ship-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
  }

  .ship-option {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px;
    border-radius: 14px;
    border: 2px solid rgba(34,21,18,0.12);
    background: #fff;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
  }

  .ship-option:hover { border-color: rgba(227,28,61,0.4); }

  .ship-option.is-selected {
    border-color: var(--red);
    box-shadow: 0 6px 16px rgba(227,28,61,0.16);
  }

  /* radio dot */
  .ship-mark {
    flex-shrink: 0;
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(34,21,18,0.22);
    position: relative;
    transition: border-color 0.16s ease;
  }

  .ship-mark::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--red);
    transition: transform 0.16s ease;
  }

  .ship-option.is-selected .ship-mark { border-color: var(--red); }
  .ship-option.is-selected .ship-mark::after { transform: translate(-50%, -50%) scale(1); }

  .ship-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }

  .ship-name {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
  }

  .ship-time {
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    color: var(--ink-soft);
  }

  .ship-cost {
    flex-shrink: 0;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
  }

  .ship-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-top: 1px solid rgba(34,21,18,0.1);
    margin-bottom: 6px;
  }

  .ship-total-label {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
  }

  .ship-total-price {
    font-family: 'Berkshire Swash', cursive;
    font-size: 28px;
    color: var(--ink);
  }

  /* while the upload runs the step is frozen */
  .is-sending .ship-option,
  .is-sending .step-back,
  .is-sending .modal-cta {
    pointer-events: none;
    opacity: 0.55;
  }

  .cart-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(227,28,61,0.07);
    border: 1px solid rgba(227,28,61,0.2);
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ink);
  }
  .cart-notice[hidden] { display: none; }

  .cart-spinner {
    flex-shrink: 0;
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(227,28,61,0.25);
    border-top-color: var(--red);
    animation: cart-spin 0.8s linear infinite;
  }

  @keyframes cart-spin { to { transform: rotate(360deg); } }

  /* ---------- FILM PREVIEW MODAL ---------- */
  /* deliberately wider than the order modal — the film is the point here */
  .film-modal {
    width: 84%;
    max-width: 1040px;
  }

  .film-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #120807;
    overflow: hidden;
  }

  .film-stage iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

  .film-unavailable {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 24px;
    color: #fff;
    font: 700 15px/1.5 'Inter', sans-serif;
    text-align: center;
  }

  .film-pitch {
    padding: 30px 32px 34px;
    text-align: center;
  }

  .film-pitch h3 {
    font-family: 'Berkshire Swash', cursive;
    font-weight: 400;
    font-size: clamp(22px, 2.6vw, 30px);
    color: var(--ink);
    margin: 0 0 10px;
  }

  .film-pitch p {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-soft);
    max-width: 560px;
    margin: 0 auto 22px;
  }

  .film-cta {
    border: none;
    cursor: pointer;
    padding-left: 52px;
    padding-right: 52px;
  }

  /* perks sit in one flowing row under the button, not a stacked list */
  .film-perks {
    list-style: none;
    margin: 26px 0 0;
    padding: 22px 0 0;
    border-top: 1px solid rgba(34,21,18,0.1);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 22px;
  }

  .film-perks li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink-soft);
  }

  .film-perks .check {
    flex-shrink: 0;
    width: 19px; height: 19px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
  }

  @media (max-width: 760px) {
    .film-modal { width: 100%; height: 100%; border-radius: 0; }
    .film-pitch { padding: 24px 20px 28px; }
    .film-perks {
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
      gap: 11px;
    }
  }

  /* inline reel video sits under the caption and play button */
  .reel-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }

  /* ---------- REEL VIEWER (fullscreen) ---------- */
  .reel-viewer {
    position: fixed;
    inset: 0;
    z-index: 140;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 3vw, 34px);
    padding: 24px;
    background: rgba(10, 5, 4, 0.9);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.22s ease;
  }
  .reel-viewer.is-open { opacity: 1; }
  .reel-viewer[hidden] { display: none; }

  .reel-viewer-stage {
    position: relative;
    height: min(88vh, 900px);
    aspect-ratio: 9 / 16;
    max-width: 100%;
    min-width: 0;
    flex-shrink: 1;
    border-radius: 18px;
    overflow: hidden;
    background: #150a09;
    box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  }

  .reel-viewer-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .reel-viewer-video[hidden] { display: none; }

  .reel-viewer-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    text-align: center;
    font-family: 'Inter', sans-serif;
    color: rgba(255,255,255,0.75);
  }
  .reel-viewer-empty[hidden] { display: none; }
  .reel-viewer-empty span { font-size: 15px; font-weight: 600; }
  .reel-viewer-empty small { font-size: 12.5px; color: rgba(255,255,255,0.5); }
  .reel-viewer-empty code {
    background: rgba(255,255,255,0.12);
    padding: 1px 5px;
    border-radius: 4px;
  }

  .reel-viewer-close {
    position: absolute;
    top: 20px; right: 20px;
    z-index: 5;
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.28);
    background: rgba(255,255,255,0.12);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
  }
  .reel-viewer-close:hover { background: rgba(255,255,255,0.24); transform: scale(1.05); }

  .reel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    flex-shrink: 0;
    width: 50px; height: 50px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.28);
    background: rgba(255,255,255,0.12);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
  }
  .reel-nav:hover { background: rgba(255,255,255,0.24); transform: translateY(-50%) scale(1.06); }
  .reel-nav.prev { left: clamp(12px, 4vw, 48px); }
  .reel-nav.next { right: clamp(12px, 4vw, 48px); }

  @media (max-width: 700px) {
    .reel-viewer { padding: 0; gap: 0; }
    .reel-viewer-stage {
      height: 100%;
      width: 100%;
      max-width: none;
      aspect-ratio: auto;
      border-radius: 0;
    }
    .reel-nav { width: 42px; height: 42px; }
  }

  /* ---------- CHECKOUT ---------- */
  .checkout {
    position: fixed;
    inset: 0;
    z-index: 130;
    overflow-y: auto;
    background: var(--cream);
  }
  .checkout[hidden] { display: none; }

  .checkout-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px clamp(20px, 5vw, 48px);
    background: #fff;
    border-bottom: 1px solid rgba(34,21,18,0.08);
  }

  .checkout-logo img { height: 34px; display: block; }

  .checkout-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: none;
    background: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink-soft);
  }
  .checkout-back:hover { color: var(--red); }

  .checkout-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px clamp(20px, 5vw, 32px) 64px;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 26px;
    align-items: start;
  }

  .checkout-title {
    font-family: 'Berkshire Swash', cursive;
    font-weight: 400;
    font-size: clamp(26px, 3.4vw, 34px);
    color: var(--ink);
    margin: 0 0 20px;
  }

  .co-card {
    background: #fff;
    border: 1px solid rgba(34,21,18,0.1);
    border-radius: 16px;
    padding: 22px 22px 8px;
    margin-bottom: 18px;
  }

  .co-card h2 {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0 0 18px;
  }

  .opt {
    font-weight: 500;
    font-size: 11.5px;
    color: var(--ink-soft);
    text-transform: none;
    letter-spacing: 0;
  }

  /* payment method row */
  .pay-method {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 14px;
    border: 2px solid var(--red);
    border-radius: 13px;
    margin-bottom: 14px;
  }

  .ship-mark.is-on { border-color: var(--red); }
  .ship-mark.is-on::after { transform: translate(-50%, -50%) scale(1); }

  .pay-method-body { display: flex; flex-direction: column; gap: 3px; }

  .pay-method-name {
    font-family: 'Inter', sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
  }

  .pay-method-desc {
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--ink-soft);
  }

  .pay-logos {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
  }

  /* checkboxes */
  .co-check {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    cursor: pointer;
    margin-bottom: 16px;
  }

  .co-check input { position: absolute; opacity: 0; pointer-events: none; }

  .co-mark {
    flex-shrink: 0;
    width: 21px; height: 21px;
    margin-top: 1px;
    border-radius: 7px;
    border: 2px solid rgba(34,21,18,0.2);
    background: #fff;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  .co-mark svg { opacity: 0; transition: opacity 0.15s ease; }
  .co-check input:checked + .co-mark { background: var(--red); border-color: var(--red); }
  .co-check input:checked + .co-mark svg { opacity: 1; }

  .co-check-text {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
  }
  .co-check-text a { color: var(--red); text-decoration: underline; }

  #coTermsError { display: none; margin: -8px 0 14px; }
  .terms-missing #coTermsError { display: block; }
  .terms-missing .co-mark { border-color: var(--red); }

  /* summary column */
  .checkout-aside { position: sticky; top: 24px; }

  .summary-card { padding-bottom: 22px; }

  .co-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(34,21,18,0.08);
  }

  .co-item-thumb {
    width: 54px; height: 54px;
    flex-shrink: 0;
    border-radius: 10px;
    background-image: var(--step-photo-src);
    background-size: cover;
    background-position: center;
  }

  .co-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

  .co-item-name {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.35;
  }

  .co-item-meta {
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    color: var(--ink-soft);
  }

  .co-item-price {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
  }

  .co-coupon {
    display: flex;
    gap: 8px;
    margin: 16px 0 0;
  }
  .co-coupon .field-input { flex: 1; padding: 10px 12px; font-size: 14px; }

  .co-coupon-btn {
    flex-shrink: 0;
    border: 2px solid rgba(34,21,18,0.14);
    background: #fff;
    border-radius: 11px;
    padding: 0 16px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    transition: border-color 0.15s ease, color 0.15s ease;
  }
  .co-coupon-btn:hover { border-color: var(--red); color: var(--red); }

  .co-coupon-msg {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    margin-top: 7px;
    min-height: 16px;
  }
  .co-coupon-msg.is-ok { color: #0d6b36; }
  .co-coupon-msg.is-bad { color: var(--red); }

  .co-lines {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(34,21,18,0.08);
    display: flex;
    flex-direction: column;
    gap: 9px;
  }

  .co-line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    color: var(--ink-soft);
  }
  .co-line b { color: var(--ink); font-weight: 600; }
  .co-line em { font-style: normal; color: var(--red); font-weight: 600; }
  .co-line[hidden] { display: none; }

  .co-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(34,21,18,0.12);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
  }

  .co-total b {
    font-family: 'Berkshire Swash', cursive;
    font-weight: 400;
    font-size: 27px;
  }

  .co-pay-card { padding-bottom: 22px; }

  .co-pay-card .co-total {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    margin-bottom: 16px;
  }

  .co-submit {
    display: block;
    width: 100%;
    border: none;
    cursor: pointer;
    margin: 16px 0 0;
    text-align: center;
    transition: background 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
  }

  /* stays visibly inert until the required fields are done */
  .co-submit:disabled {
    background: rgba(34,21,18,0.14);
    color: rgba(34,21,18,0.42);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
  }
  .co-submit:disabled:hover { background: rgba(34,21,18,0.14); transform: none; }

  @media (max-width: 900px) {
    .checkout-inner { grid-template-columns: 1fr; }
    .checkout-aside { position: static; order: -1; }
  }

  /* --- focus mode: the group being filled gets the room --- */
  .focus-group .deed-row { transition: max-height 0.28s ease; }

  /* the one being worked on opens up */
  .focus-group.is-active .deed-row { max-height: min(48vh, 330px); }

  /* not yet reached — kept short so it only hints at what's coming */
  .focus-group:not(.is-active):not(.is-done) .deed-row { max-height: 96px; }

  /* finished — collapses to just the chosen chips, no scroll, no mask */
  .focus-group.is-done .deed-row {
    max-height: none;
    overflow: visible;
    padding-bottom: 2px;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .focus-group.is-done .deed-option:not(.is-selected) { display: none; }
  .focus-group.is-done .deed-option.is-selected { opacity: 1; }

  /* deselecting a chip is all that is needed to reopen the list */
  .focus-group.is-done .deed-option.is-selected { cursor: pointer; }

  @media (max-width: 560px) {
    .focus-group.is-active .deed-row { max-height: min(46vh, 300px); }
    .focus-group:not(.is-active):not(.is-done) .deed-row { max-height: 84px; }
  }

  /* --- express delivery nudge --- */
  .ship-upsell {
    margin-top: 16px;
    padding: 14px;
    border-radius: 13px;
    border: 1.5px solid rgba(13,107,54,0.28);
    background: linear-gradient(135deg, rgba(13,107,54,0.09), rgba(255,193,90,0.12));
  }
  .ship-upsell[hidden] { display: none; }

  .upsell-top {
    display: flex;
    gap: 12px;
    align-items: flex-start;
  }

  .upsell-bolt {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: #0d6b36;
    color: #ffd9a0;
    display: flex; align-items: center; justify-content: center;
  }

  .upsell-body { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }

  .upsell-title {
    font-family: 'Berkshire Swash', cursive;
    font-size: 16px;
    color: var(--ink);
  }

  .upsell-text {
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-soft);
  }
  .upsell-text b { color: #0d6b36; font-weight: 700; }

  /* full width of the banner, everything on one line */
  .upsell-btn {
    width: 100%;
    margin-top: 12px;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-pill);
    background: #0d6b36;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    transition: background 0.15s ease, transform 0.15s ease;
  }
  .upsell-btn span {
    background: rgba(255,255,255,0.2);
    border-radius: var(--radius-pill);
    padding: 2px 9px;
    font-weight: 700;
    white-space: nowrap;
  }
  .upsell-btn:hover { background: #0a5a2d; transform: translateY(-1px); }

  /* confirmation state once express is on */
  .ship-express-on {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 16px;
    padding: 11px 14px;
    border-radius: 12px;
    background: rgba(13,107,54,0.09);
    border: 1px solid rgba(13,107,54,0.22);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--ink);
  }
  .ship-express-on[hidden] { display: none; }

  .upsell-check {
    flex-shrink: 0;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #0d6b36;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
  }

  .upsell-undo {
    margin-left: auto;
    border: none;
    background: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    color: var(--ink-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .upsell-undo:hover { color: var(--red); }

  /* --- expandable personalisation details in the cart --- */
  .co-details {
    margin-top: 14px;
    border-top: 1px solid rgba(34,21,18,0.08);
    padding-top: 12px;
  }

  .co-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    list-style: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    padding: 2px 0;
    transition: color 0.15s ease;
  }
  .co-details summary::-webkit-details-marker { display: none; }
  .co-details summary:hover { color: var(--red); }

  .co-details summary svg { flex-shrink: 0; transition: transform 0.2s ease; }
  .co-details[open] summary svg { transform: rotate(180deg); }
  .co-details[open] summary { color: var(--red); }

  .co-details-body {
    margin-top: 12px;
    animation: faq-reveal 0.22s ease;
  }

  /* the review blocks are denser here than in the modal */
  .co-details-body .sum-block { margin-bottom: 10px; }
  .co-details-body .sum-block:last-child { margin-bottom: 0; }
  .co-details-body .sum-head { padding: 9px 12px; }
  .co-details-body .sum-title { font-size: 11px; }
  .co-details-body .sum-row {
    grid-template-columns: 104px 1fr;
    gap: 10px;
    padding: 8px 12px;
  }
  .co-details-body .sum-label,
  .co-details-body .sum-value { font-size: 12.5px; }
  .co-details-body .sum-chips span { font-size: 11.5px; padding: 3px 8px; }
  .co-details-body .sum-peek { font-size: 11.5px; padding: 5px 13px; }

  @media (max-width: 480px) {
    .co-details-body .sum-row { grid-template-columns: 1fr; gap: 3px; }
  }

  .modal-pay {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-bottom: 24px;
  }

  .modal-pay-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink-soft);
  }

  .modal-pay-logos {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  .pay-hotpay {
    height: 15px;
    width: auto;
    opacity: 0.85;
  }

  /* BLIK ships as a white mark, so it sits on its own dark chip */
  .pay-blik {
    height: 24px;
    width: auto;
    border-radius: 5px;
    background: #000;
  }

  .modal-cta-row {
    text-align: center;
    margin-bottom: 24px;
  }

  .modal-cta {
    border: none;
    cursor: pointer;
    padding-left: 52px;
    padding-right: 52px;
  }

  .modal-perks {
    list-style: none;
    margin: 0;
    padding: 20px 0 0;
    border-top: 1px solid rgba(34,21,18,0.1);
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .modal-perks li {
    display: flex;
    align-items: center;
    gap: 11px;
    font-family: 'Inter', sans-serif;
    font-size: 14.5px;
    color: var(--ink-soft);
  }

  .modal-perks .check {
    flex-shrink: 0;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
  }

  @media (max-width: 760px) {
    .modal-overlay { padding: 0; }
    .modal {
      width: 100%;
      max-width: none;
      height: 100%;
      max-height: none;
      border-radius: 0;
    }
    .modal-body { padding: 22px 20px 28px; }
    .modal-video { aspect-ratio: 5 / 4; }
    .modal-film-title { font-size: 22px; margin-bottom: 10px; }
    .modal-video-bottom { left: 18px; right: 18px; }
    .modal-play { top: 36%; width: 58px; height: 58px; }
    .kids-row { gap: 8px; }
    .deed-row { max-height: 148px; }
    .kid-option { padding: 12px 4px; border-radius: 11px; font-size: 17px; }
    .modal-summary-price { font-size: 26px; }
    .modal-cta { padding-left: 38px; padding-right: 38px; }
    .modal-video-meta span { font-size: 11px; padding: 4px 9px; }
  }


  .hero-price {
    margin-top: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: rgba(255,255,255,0.88);
    text-shadow: 0 1px 6px rgba(0,0,0,0.5);
  }
  .hero-price b { color: #fff; font-weight: 700; }


  /* ---------- STICKY ORDER BAR (mobile) ---------- */
  .sticky-order {
    display: none;
  }

  @media (max-width: 640px) {
    .sticky-order {
      position: fixed;
      left: 0; right: 0; bottom: 0;
      z-index: 60;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
      background: rgba(255, 250, 246, 0.94);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-top: 1px solid rgba(34,21,18,0.1);
      box-shadow: 0 -6px 20px rgba(34,21,18,0.1);
      transform: translateY(110%);
      transition: transform 0.28s ease;
    }
    .sticky-order.is-visible { transform: translateY(0); }

    .sticky-order-text { display: flex; flex-direction: column; line-height: 1.2; }

    .sticky-order-name {
      font-family: 'Berkshire Swash', cursive;
      font-size: 16px;
      color: var(--ink);
    }

    .sticky-order-price {
      font-family: 'Inter', sans-serif;
      font-size: 12.5px;
      color: var(--ink-soft);
    }
    .sticky-order-price b { color: var(--red); font-weight: 700; }

    .sticky-order-btn {
      flex-shrink: 0;
      padding: 11px 24px;
      font-size: 15px;
    }
  }


  /* ---------- SNOW (hero + quote band) ---------- */
  .snow-layer {
    position: absolute;
    inset: 0;
    z-index: 1;               /* above the scrim, under the copy */
    pointer-events: none;
  }


  /* ---------- MOBILE REFINEMENTS ---------- */
  @media (max-width: 640px) {
    /* sections sit closer together so the page isn't endless on a phone */
    :root { --section-gap: 62px; }

    /* HERO: the frame stays TALL so the Santa in the middle of the mobile
       crop is fully visible from the top down. Only the copy shrinks and
       drops to the bottom, under a light scrim rising from the base. */
    .hero {
      min-height: 100svh;
      isolation: isolate;
      justify-content: flex-end;
      padding: 96px 20px 30px;
      background-image: var(--hero-photo-mobile), linear-gradient(180deg, #7d1718 0%, #431516 52%, #170c0d 100%);
      background-position: center top;
    }
    .hero::before {
      background: linear-gradient(to bottom,
        transparent 0%,
        transparent 34%,
        rgba(6,3,2,0.18) 50%,
        rgba(6,3,2,0.48) 66%,
        rgba(6,3,2,0.72) 84%,
        rgba(6,3,2,0.82) 100%);
    }
    /* the badge is absolute against the HERO, so the bottom stack must stop
       being its containing block; the scrim drops behind the flow instead */
    .hero-content { width: 100%; position: static; }
    .hero::before { z-index: -1; }
    .hero .snow-layer { z-index: -1; }

    /* badge sits alone at the top of the frame; everything else lives at
       the bottom, tight together */
    .hero .badge {
      position: absolute;
      top: 92px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 12.5px;
      padding: 6px 16px;
      margin-bottom: 0;
      z-index: 3;
    }
    .hero h1 {
      font-size: 23px;
      line-height: 1.12;
      letter-spacing: 0.02em;
      margin-bottom: 10px;
    }
    .hero p.sub { font-size: 13.5px; line-height: 1.45; margin-bottom: 16px; }
    .hero .btn-primary { font-size: 15.5px; padding: 13px 30px; }
    .btn-watch { font-size: 14.5px; margin-top: 12px; }
    .btn-watch .play-circle { width: 28px; height: 28px; }
    .hero-footnote { margin-top: 18px; padding: 8px 16px; font-size: 12px; }

    /* PLAYER: full-bleed and taller — it's the product, it needs the room */
    .feature-section { padding-left: 0; padding-right: 0; }
    .feature-grid { gap: 26px; }
    .feature-player { aspect-ratio: 4 / 3; border-radius: 0; box-shadow: none; }
    .feature-content { padding: 0 20px; }
    .feature-content h2 { font-size: 26px; }

    /* BLOG: demoted to a compact list — useful, not a headline act */
    .blog-section h2 { font-size: 22px; margin-bottom: 18px; }
    .blog-grid { grid-template-columns: 1fr; gap: 14px; }
    .blog-card { flex-direction: row; align-items: center; gap: 14px; }
    .blog-card:hover { transform: none; }
    .blog-thumb {
      width: 88px;
      flex-shrink: 0;
      aspect-ratio: 1 / 1;
      margin-bottom: 0;
      border-radius: 12px;
      box-shadow: none;
    }
    .blog-text { min-width: 0; }
    .blog-cat { font-size: 10.5px; margin-bottom: 3px; }
    .blog-card h3 { font-size: 14.5px; line-height: 1.4; }

    /* everything else, trimmed to phone proportions */
    .trust-section { padding: 44px 24px; }
    .steps-section { padding-left: 20px; padding-right: 20px; }
    .quote-section { padding: 54px 20px; }
    .quote-inner h2 { font-size: 24px; }
    .final-cta h2 { font-size: 30px; }
    .faq-section { padding-left: 20px; padding-right: 20px; }
    .seo-section { padding-left: 20px; padding-right: 20px; }
  }