:root{
      --pink:#ff4fa0;
      --pink-2:#ff8fc5;
      --pink-3:#ffd2e7;
      --pink-4:#fff0f7;
      --cream:#fffaf6;
      --black:#111;
      --lilac:#cbb8ff;
      --yellow:#fff36f;
      --mint:#b9f6c6;
      --shadow:8px 8px 0 var(--black);
      --soft-shadow:0 24px 70px rgba(93,18,55,.16);
      --max:1180px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth;scroll-padding-top:86px}
    body{
      margin:0;
      color:var(--black);
      background:var(--pink-4);
      font-family:"Manrope",sans-serif;
      line-height:1.5;
      overflow-x:hidden;
    }
    img{display:block;max-width:100%}
    a{color:inherit}
    .wrap{width:min(var(--max),calc(100% - 2rem));margin:auto}
    .display{font-family:"Archivo Black",sans-serif;text-transform:uppercase;letter-spacing:-.045em;line-height:.9}

    .skip{position:absolute;left:-999px;top:0;background:#fff;border:3px solid #111;padding:.8rem;z-index:99}.skip:focus{left:1rem;top:1rem}

    header{
      position:sticky;top:0;z-index:50;
      background:rgba(255,240,247,.92);
      backdrop-filter:blur(14px);
      border-bottom:3px solid var(--black);
    }
    .nav{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:1rem}
    .brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;font-weight:900;text-transform:uppercase;letter-spacing:.02em}
    .brand img{width:46px;height:46px;object-fit:contain}
    nav{display:flex;align-items:center;gap:1.2rem;font-weight:800}
    nav a{text-decoration:none}
    nav a:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px}
    .nav-cta{background:var(--pink);border:3px solid var(--black);padding:.72rem 1rem;box-shadow:4px 4px 0 var(--black);transition:.18s}
    .nav-cta:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--black);text-decoration:none}

    .hero{
      min-height:780px;
      padding:4rem 0 3rem;
      background:
        linear-gradient(rgba(255,255,255,.07),rgba(255,255,255,.07)),
        var(--pink);
      border-bottom:4px solid var(--black);
      position:relative;
      overflow:hidden;
    }
    .hero::before,.hero::after{content:"";position:absolute;border:4px solid #111;border-radius:50%;background:var(--yellow);width:150px;height:150px;right:-30px;top:70px;box-shadow:8px 8px 0 #111}
    .hero::after{width:92px;height:92px;left:-22px;top:auto;bottom:70px;background:var(--lilac)}
    .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:4rem}
    .eyebrow{display:inline-block;background:var(--yellow);border:3px solid #111;border-radius:999px;padding:.55rem 1rem;font-weight:900;text-transform:uppercase;transform:rotate(-2deg);box-shadow:4px 4px 0 #111}
    h1{font-size:clamp(4rem,9vw,8.7rem);margin:1.5rem 0 .9rem;max-width:770px}
    .tagline{font-size:clamp(1.5rem,3vw,2.5rem);font-weight:900;margin:0 0 1rem}
    .lede{font-size:clamp(1rem,1.8vw,1.24rem);max-width:660px;font-weight:600}
    .hero-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}
    .button{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;text-decoration:none;text-transform:uppercase;font-weight:900;border:3px solid #111;padding:1rem 1.25rem;background:#fff;box-shadow:var(--shadow);transition:.18s}
    .button:hover{transform:translate(4px,4px);box-shadow:4px 4px 0 #111}
    .button.dark{background:#111;color:#fff}
    .micro{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.7rem}
    .micro span{background:rgba(255,255,255,.32);border:2px solid #111;border-radius:999px;padding:.45rem .75rem;font-size:.86rem;font-weight:900;text-transform:uppercase}

    .photo-stack{position:relative;min-height:610px}
    .photo-card{position:absolute;background:#fff;border:4px solid #111;padding:12px 12px 52px;box-shadow:12px 12px 0 #111;width:70%;transition:.25s}
    .photo-card img{width:100%;height:380px;object-fit:cover;border:2px solid #111}
    .photo-card.one{top:25px;left:0;transform:rotate(-7deg)}
    .photo-card.two{top:115px;right:-10px;transform:rotate(7deg);width:64%}
    .photo-card:hover{z-index:10;transform:rotate(0) scale(1.02)}
    .tape{position:absolute;width:120px;height:34px;background:rgba(255,243,111,.92);border:2px solid #111;top:-18px;left:50%;transform:translateX(-50%) rotate(-3deg)}
    .scribble{position:absolute;right:8%;bottom:0;background:var(--lilac);border:3px solid #111;border-radius:50%;width:130px;height:130px;display:grid;place-items:center;font-family:"Archivo Black";text-transform:uppercase;text-align:center;transform:rotate(8deg);box-shadow:6px 6px 0 #111}

    .marquee{overflow:hidden;border-bottom:4px solid #111;background:var(--black);color:#fff;padding:.9rem 0}
    .marquee-track{display:flex;gap:2.5rem;width:max-content;animation:scroll 24s linear infinite;font-family:"Archivo Black";text-transform:uppercase;font-size:1.35rem}
    @keyframes scroll{to{transform:translateX(-50%)}}

    section{padding:6rem 0}
    .intro{background:#111 url("assets/images/image-03-bfed942b6a06.jpg") center 46%/cover no-repeat;border-bottom:4px solid #111;position:relative;overflow:hidden;color:#fff;min-height:620px;display:flex;align-items:center}
    .intro::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,6,8,.82) 0%,rgba(10,6,8,.66) 48%,rgba(10,6,8,.35) 100%);z-index:0}
    .intro .wrap{position:relative;z-index:2}
    .intro .kicker{background:var(--pink);color:#111;border-color:#111;box-shadow:4px 4px 0 #111}
    .intro .display,.intro p{color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.38)}
    .intro .marker{background:linear-gradient(transparent 60%,rgba(255,92,168,.8) 60%);color:#fff}
    .intro .retro-sticker,.intro .retro-dots{z-index:2}
    .intro .retro-spark-row i{box-shadow:0 0 0 2px rgba(255,255,255,.2)}
    .intro-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:4rem;align-items:start}
    .kicker{font-size:.85rem;text-transform:uppercase;font-weight:900;letter-spacing:.12em}
    h2{font-size:clamp(3rem,6vw,6rem);margin:.5rem 0 1.2rem}
    .big-copy{font-size:clamp(1.45rem,3vw,2.6rem);font-weight:800;line-height:1.25}
    .marker{background:linear-gradient(transparent 60%,var(--pink-2) 60%)}

    .features{background:var(--pink-3);border-bottom:4px solid #111;position:relative;overflow:hidden}
    .feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.5rem}
    .feature{min-height:250px;border:3px solid #111;background:#fff;padding:1.5rem;box-shadow:7px 7px 0 #111;display:flex;flex-direction:column;justify-content:space-between;transition:.2s}
    .feature:nth-child(2){background:var(--yellow);transform:rotate(1deg)}
    .feature:nth-child(3){background:var(--lilac);transform:rotate(-1deg)}
    .feature:hover{transform:translateY(-6px) rotate(0)}
    .icon{width:66px;height:66px;border:3px solid #111;border-radius:50%;background:var(--pink);display:grid;place-items:center}
    .icon svg{width:34px;height:34px;stroke:#111;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
    .feature h3{font-family:"Archivo Black";text-transform:uppercase;font-size:1.6rem;margin:1rem 0 .6rem;line-height:1}

    .events{background:var(--pink);border-bottom:4px solid #111;position:relative;overflow:hidden}
    .events-head{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:2.5rem}
    .event-list{display:grid;gap:1.4rem}
    .event-card{display:grid;grid-template-columns:180px 1fr auto;align-items:center;gap:1.6rem;border:3px solid #111;background:#fff;padding:1.35rem;box-shadow:8px 8px 0 #111;transition:.2s}
    .event-card:nth-child(2){background:var(--lilac)}
    .event-card:nth-child(3){background:var(--yellow)}
    .event-card:hover{transform:translate(3px,3px);box-shadow:5px 5px 0 #111}
    .date-arrow{position:relative;background:#fff;border:3px solid #111;padding:1rem;font-family:"Archivo Black";font-size:1.6rem;text-transform:uppercase;text-align:center;transform:rotate(-2deg)}
    .event-card h3{font-family:"Archivo Black";text-transform:uppercase;font-size:clamp(1.7rem,3vw,3rem);line-height:.95;margin:0 0 .5rem}
    .event-meta{font-weight:800}
    .event-link{white-space:nowrap}

    .gallery{background:#fff;border-bottom:4px solid #111;position:relative;overflow:hidden}
    .gallery-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;grid-auto-rows:260px;gap:1rem}
    .gallery-grid figure{margin:0;border:3px solid #111;overflow:hidden;position:relative;background:var(--pink-3)}
    .gallery-grid figure:nth-child(1){grid-row:span 2}
    .gallery-grid figure:nth-child(4){grid-column:span 2}
    .gallery-grid img{width:100%;height:100%;object-fit:cover;transition:.35s}
    .gallery-grid figure:hover img{transform:scale(1.04)}
    .label{position:absolute;left:12px;bottom:12px;background:var(--pink);border:3px solid #111;padding:.5rem .7rem;font-weight:900;text-transform:uppercase;box-shadow:4px 4px 0 #111}

    .promise{background:var(--pink-3);border-bottom:4px solid #111;position:relative;overflow:hidden}
    .promise-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:2rem}
    .promise-item{border-top:3px solid #111;padding:1.1rem 0;display:grid;grid-template-columns:52px 1fr;gap:1rem;align-items:start}
    .num{font-family:"Archivo Black";font-size:2rem;color:var(--pink)}

    .testimonials{background:var(--cream);border-bottom:4px solid #111;position:relative;overflow:hidden}
    .quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
    blockquote{margin:0;border:3px solid #111;background:#fff;padding:1.5rem;box-shadow:7px 7px 0 #111;font-weight:700}
    blockquote:nth-child(2){background:var(--pink-3);transform:rotate(1deg)}
    blockquote:nth-child(3){background:var(--yellow);transform:rotate(-1deg)}
    blockquote p{font-size:1.08rem;margin-top:0}

    .cta{background:#111;color:#fff;padding:0;border-bottom:4px solid #111}
    .cta-grid{display:grid;grid-template-columns:1fr 1fr;min-height:540px}
    .cta-copy{padding:5rem max(2rem,calc((100vw - var(--max))/2));padding-right:4rem;display:flex;flex-direction:column;justify-content:center;background:var(--pink)}
    .cta-copy h2{margin-top:0}
    .cta-photo img{width:100%;height:100%;object-fit:cover}

    footer{background:#111;color:#fff;padding:3rem 0}
    .footer-grid{display:flex;justify-content:space-between;gap:2rem;align-items:flex-end}
    .footer-logo{max-width:280px;filter:brightness(0) invert(1)}
    .footer-links{display:flex;gap:1rem;flex-wrap:wrap;font-weight:800}

    @media(max-width:900px){
      nav a:not(.nav-cta){display:none}
      .hero-grid,.intro-grid,.cta-grid{grid-template-columns:1fr}
      .photo-stack{min-height:540px;margin-top:1rem}
      .feature-grid,.quote-grid{grid-template-columns:1fr}
      .event-card{grid-template-columns:130px 1fr}.event-link{grid-column:2}
      .gallery-grid{grid-template-columns:1fr 1fr}.gallery-grid figure:nth-child(1){grid-row:span 1}.gallery-grid figure:nth-child(4){grid-column:span 1}
      .cta-photo{min-height:420px}
    }
    @media(max-width:620px){
      .intro{min-height:auto;background-position:58% center}
      .intro::before{background:rgba(10,6,8,.72)}
      section{padding:4rem 0}
      .hero{padding-top:2.7rem;min-height:auto}
      h1{font-size:clamp(3.4rem,18vw,5.3rem)}
      .photo-stack{min-height:460px}
      .photo-card{width:76%;padding:8px 8px 42px}.photo-card img{height:300px}.photo-card.two{width:67%}
      .scribble{width:100px;height:100px;font-size:.8rem}
      .feature-grid,.promise-grid,.quote-grid,.gallery-grid{grid-template-columns:1fr}
      .gallery-grid{grid-auto-rows:330px}
      .event-card{grid-template-columns:1fr}.event-link{grid-column:1}.date-arrow{width:max-content}
      .events-head,.footer-grid{align-items:flex-start;flex-direction:column}
      .brand span{display:none}
    }


    /* Retro pink sticker details inspired by the supplied moodboard */
    .retro-sticker{position:absolute;z-index:3;pointer-events:none;filter:drop-shadow(5px 6px 0 #111)}
    .retro-sticker svg{display:block;width:100%;height:100%;overflow:visible}
    .retro-sticker .line{stroke:#111;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
    .retro-sticker .soft-line{stroke:#cf315f;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
    .retro-sticker .shine{fill:#fff;opacity:.9}

    .eight-ball{width:112px;height:112px;left:47%;top:82px;transform:rotate(-10deg);filter:drop-shadow(5px 6px 0 rgba(17,17,17,.95))}
    .glitter-star{width:125px;height:125px;right:2.2%;bottom:38px;transform:rotate(10deg);filter:drop-shadow(6px 7px 0 #111)}
    .glitter-star svg path{fill:url(#pinkGlitter);stroke:#111;stroke-width:4}
    .spark-cluster{width:125px;height:98px;left:3%;top:120px;filter:none;transform:rotate(-7deg)}
    .flower-face{width:154px;height:154px;right:4%;bottom:60px;transform:rotate(8deg)}
    .pixel-heart{width:124px;height:108px;right:5%;top:44px;filter:drop-shadow(5px 6px 0 #111)}
    .crayon{width:82px;height:220px;left:1.5%;top:100px;transform:rotate(-8deg)}
    .puffy-star{width:105px;height:92px;right:3%;top:38%;transform:rotate(9deg);filter:drop-shadow(4px 5px 0 rgba(17,17,17,.75))}
    .heart-doodle{width:112px;height:110px;left:3%;bottom:40px;filter:none;transform:rotate(-9deg)}

    .retro-dots{position:absolute;pointer-events:none;z-index:1;width:180px;height:180px;border-radius:50%;opacity:.35;background-image:radial-gradient(#ff1493 1.5px,transparent 1.5px);background-size:8px 8px;mask-image:radial-gradient(circle,#000 20%,transparent 72%)}
    .intro .retro-dots{right:5%;bottom:-25px}
    .gallery .retro-dots{left:-28px;top:62px}

    .retro-spark-row{display:flex;gap:.35rem;align-items:center;margin-top:1.2rem}
    .retro-spark-row i{display:block;background:var(--pink);clip-path:polygon(50% 0,59% 39%,100% 50%,59% 61%,50% 100%,41% 61%,0 50%,41% 39%)}
    .retro-spark-row i:nth-child(1){width:22px;height:22px}.retro-spark-row i:nth-child(2){width:38px;height:38px}.retro-spark-row i:nth-child(3){width:17px;height:17px;background:var(--lilac)}

    .sticker-badge{position:absolute;z-index:4;display:grid;place-items:center;width:118px;height:80px;padding:1rem;text-align:center;background:var(--pink-2);border:3px solid #111;border-radius:44% 56% 48% 52% / 55% 44% 56% 45%;box-shadow:6px 6px 0 #111;font-family:"Archivo Black",sans-serif;text-transform:uppercase;font-size:.88rem;line-height:1;transform:rotate(7deg)}
    .events .sticker-badge{right:max(1.2rem,calc((100vw - var(--max))/2));top:88px}

    @media(max-width:900px){
      .eight-ball{left:auto;right:4%;top:92px;width:92px;height:92px}
      .spark-cluster,.crayon,.events .sticker-badge{display:none}
      .flower-face{width:118px;height:118px;right:3%;bottom:35px}
      .pixel-heart{width:92px;height:82px;right:4%;top:28px}
    }
    @media(max-width:620px){
      .eight-ball{width:70px;height:70px;top:110px;right:-12px}
      .glitter-star{width:86px;height:86px;right:-18px;bottom:80px}
      .flower-face,.puffy-star,.heart-doodle{display:none}
      .pixel-heart{width:74px;height:66px;right:-8px;top:20px}
      .retro-dots{width:130px;height:130px}
    }

    @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
  
    .instagram-footer {
      display: grid;
      gap: .75rem;
      max-width: 560px;
    }

    .instagram-footer h2 {
      margin: 0;
      font-size: clamp(2.3rem, 5vw, 4.8rem);
      line-height: .95;
      letter-spacing: -.055em;
      text-transform: uppercase;
    }

    .instagram-footer p {
      margin: 0;
      max-width: 46ch;
      color: rgba(255,255,255,.76);
      font-weight: 650;
    }

    .instagram-link {
      display: inline-flex;
      align-items: center;
      gap: .75rem;
      width: fit-content;
      margin-top: .45rem;
      color: #fff;
      font-size: 1.05rem;
      font-weight: 900;
      text-decoration: none;
      transition: color .2s ease, transform .2s ease;
    }

    .instagram-link:hover {
      color: var(--hot-pink);
      transform: translateY(-2px);
    }

    .instagram-icon {
      width: 42px;
      height: 42px;
      padding: 8px;
      border: 2px solid currentColor;
      border-radius: 13px;
      transition: transform .2s ease, background .2s ease;
    }

    .instagram-link:hover .instagram-icon {
      transform: rotate(-5deg);
      background: rgba(255,255,255,.08);
    }

    .instagram-icon rect,
    .instagram-icon circle {
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

  
    .eventbrite-button{
      background:var(--pink-3);
      letter-spacing:.075em;
      white-space:nowrap;
      transform:rotate(-1deg);
      box-shadow:7px 7px 0 #111;
    }
    .event-card:nth-child(even) .eventbrite-button{transform:rotate(1deg)}
    .eventbrite-button span{font-size:1.15em;transition:transform .18s ease}
    .eventbrite-button:hover{
      transform:translate(4px,4px) rotate(0);
      box-shadow:3px 3px 0 #111;
      background:#fff;
    }
    .eventbrite-button:hover span{transform:translateX(4px)}

  

    /* New Bosco Florente brand system */
    .brand img {
      width: clamp(150px, 17vw, 225px);
      height: auto;
      max-height: 64px;
      object-fit: contain;
      object-position: left center;
      filter: none;
      transition: transform .22s ease;
    }
    .brand:hover img { transform: rotate(-1.5deg) scale(1.025); }

    .footer-logo {
      width: min(330px, 68vw);
      max-width: none;
      height: auto;
      filter: none;
      display: block;
      transition: transform .22s ease;
    }
    .footer-logo:hover { transform: rotate(1deg) translateY(-2px); }

    .brand-badge {
      position: absolute;
      z-index: 4;
      width: clamp(92px, 10vw, 145px);
      height: auto;
      filter: drop-shadow(7px 8px 0 rgba(17,17,17,.18));
      transform: rotate(-7deg);
      transition: transform .25s ease, filter .25s ease;
      user-select: none;
    }
    .brand-badge:hover {
      transform: rotate(1deg) translateY(-7px) scale(1.04);
      filter: drop-shadow(10px 12px 0 rgba(17,17,17,.22));
    }
    .badge-hero { right: clamp(1rem, 3vw, 2.5rem); top: clamp(1rem, 3vw, 2.5rem); bottom: auto; width: clamp(82px, 8vw, 118px); }
    .badge-gallery { right: 4%; top: 5rem; transform: rotate(8deg); }
    .badge-cta { left: 47%; top: 1.5rem; transform: rotate(-5deg); }
    footer { position: relative; overflow: hidden; }
    .badge-footer { right: 2.5rem; top: 1.2rem; width: 105px; transform: rotate(7deg); opacity: .95; }

    /* Keep the illustration language consistent and tactile. */
    .retro-sticker,
    .brand-badge,
    .button,
    .event-card,
    .photo-card {
      will-change: transform;
    }
    .button:hover { transform: translate(-2px,-3px) rotate(-1deg); }
    .event-card:hover { transform: translateY(-5px) rotate(-.35deg); }

    @media (max-width: 900px) {
      .brand img { width: 155px; max-height: 54px; }
      .badge-gallery { right: 1rem; top: 1.5rem; }
      .badge-cta { left: auto; right: 1rem; top: 1rem; }
      .badge-footer { right: 1rem; top: 1rem; width: 82px; }
    }
    @media (max-width: 620px) {
      .brand img { width: 138px; }
      .badge-hero { width: 72px; right: .75rem; top: .75rem; bottom: auto; }
      .badge-gallery { width: 78px; }
      .badge-cta { width: 76px; }
      .badge-footer { display: none; }
    }

    @media (max-width: 900px) {
      .hero-grid { padding-top: 3.5rem; }
    }
    @media (max-width: 620px) {
      .hero-grid { padding-top: 4rem; }
      .badge-hero { filter: drop-shadow(4px 5px 0 rgba(17,17,17,.16)); }
    }

  

/* ---- extracted style block ---- */


/* =========================================================
   BOSCO FLORENTE STUDIO — VERSION 2
   Consolidated desktop fixes + responsive mobile layout
   ========================================================= */

/* ---------- Shared ---------- */
html {
  scroll-behavior: smooth;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img {
  max-width: 100%;
}

.hero,
.gallery {
  position: relative;
}

/* ---------- Desktop hero refinements ---------- */

/* Covers the unwanted background-embedded circular logo above the 8-ball. */
.top-centre-logo-cover {
  position: absolute;
  top: 0;
  left: 50%;
  width: 190px;
  height: 92px;
  transform: translateX(-50%);
  background: var(--pink);
  z-index: 30;
  pointer-events: none;
}

.hero .eight-ball {
  z-index: 31;
}

/* Retained top-right logo overlapping the yellow circle. */
.hero-yellow-badge {
  position: absolute;
  right: -28px;
  top: 62px;
  width: 184px;
  height: 184px;
  border: 4px solid #111;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 8px 8px 0 #111;
  z-index: 32;
  overflow: visible;
}

.hero-yellow-badge .hero-top-right-logo {
  position: absolute;
  display: block;
  width: 156px;
  height: 156px;
  left: -30px;
  top: -28px;
  object-fit: contain;
  transform: rotate(7deg);
  filter: drop-shadow(6px 7px 0 rgba(17, 17, 17, 0.2));
}

/* ---------- Gallery sticker refinement ---------- */

.gallery .badge-gallery.gallery-logo-sticker {
  position: absolute;
  top: 150px;
  right: 34px;
  width: 128px;
  height: 128px;
  object-fit: contain;
  z-index: 6;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: rotate(5deg);
  filter: drop-shadow(5px 6px 0 rgba(17, 17, 17, 0.16));
}

/* ---------- Tablet ---------- */

@media (max-width: 980px) {
  .hero-yellow-badge {
    right: -34px;
    top: 54px;
    width: 152px;
    height: 152px;
  }

  .hero-yellow-badge .hero-top-right-logo {
    width: 126px;
    height: 126px;
    left: -22px;
    top: -22px;
  }

  .gallery .badge-gallery.gallery-logo-sticker {
    top: 142px;
    right: 20px;
    width: 108px;
    height: 108px;
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 760px) {
  /* Header */
  header .wrap.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
  }

  header .brand {
    flex: 0 1 auto;
  }

  header .brand img {
    display: block;
    width: 145px;
    max-width: 41vw;
    height: auto;
  }

  header nav,
  header .nav-links {
    display: none;
  }

  header .button,
  header .nav-cta,
  header a[href*="eventbrite"] {
    flex: 0 0 auto;
    min-width: 0;
    padding: 13px 15px;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 4px 4px 0 #111;
  }

  /* Hero */
  .hero {
    min-height: auto;
    padding: 76px 18px 42px;
    overflow: hidden;
  }

  .hero .wrap,
  .hero-grid {
    width: 100%;
    max-width: none;
  }

  .hero-grid {
    display: block;
  }

  .hero-copy {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: none;
  }

  .hero .eyebrow {
    max-width: 92%;
    padding: 9px 15px;
    font-size: 13px;
  }

  .hero h1.display {
    max-width: 100%;
    margin: 22px 0 26px;
    font-size: clamp(3.15rem, 14.6vw, 4.85rem);
    line-height: 0.91;
    letter-spacing: -0.055em;
    overflow-wrap: normal;
    word-break: normal;
  }

  .hero .tagline {
    margin-bottom: 18px;
    font-size: clamp(1.55rem, 7vw, 2.15rem);
    line-height: 1.08;
  }

  .hero .lede {
    max-width: 100%;
    font-size: 17px;
    line-height: 1.48;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 13px;
    width: 100%;
    margin-top: 26px;
  }

  .hero-actions .button {
    width: 100%;
    max-width: 100%;
    padding: 17px 16px;
    font-size: 15px;
    text-align: center;
  }

  .hero .micro {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 17px;
  }

  .hero .micro > * {
    padding: 7px 10px;
    font-size: 11px;
  }

  /* The desktop photo composition becomes a normal block below the text. */
  .hero .photo-stack {
    position: relative;
    inset: auto;
    width: min(92vw, 420px);
    max-width: 100%;
    min-height: 330px;
    margin: 34px auto 0;
    transform: none;
  }

  /* Decorative circles and logo sticker disappear on mobile to protect the copy. */
  .hero-yellow-badge,
  .hero .hero-top-right-logo {
    display: none;
  }

  /* Remove the cover because the embedded logo is outside the visible mobile crop. */
  .top-centre-logo-cover {
    display: none;
  }

  .hero .eight-ball {
    top: 20px;
    right: 16px;
    left: auto;
    transform: scale(0.66);
    transform-origin: top right;
  }

  .hero .glitter-star {
    right: 8px;
    bottom: 12px;
    transform: scale(0.68);
    transform-origin: bottom right;
  }

  /* Sections */
  section h2.display {
    font-size: clamp(2.55rem, 11.5vw, 4.1rem);
    line-height: 0.94;
    letter-spacing: -0.045em;
  }

  .intro,
  .features,
  .events,
  .gallery,
  .promise,
  .testimonials,
  .cta,
  footer {
    padding-left: 18px;
    padding-right: 18px;
  }

  /* Cards and grids */
  .features-grid,
  .events-grid,
  .gallery-grid,
  .testimonial-grid,
  .testimonials-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .gallery {
    padding-top: 66px;
  }

  .gallery .badge-gallery.gallery-logo-sticker {
    position: static;
    display: block;
    width: 88px;
    height: 88px;
    margin: 16px 0 12px auto;
    transform: rotate(5deg);
  }

  .gallery-grid {
    gap: 18px;
  }

  .events-grid {
    gap: 22px;
  }

  .cta {
    min-height: auto;
    padding-top: 66px;
    padding-bottom: 66px;
  }

  footer .footer-grid {
    gap: 26px;
  }
}

/* ---------- Small mobile ---------- */

@media (max-width: 430px) {
  header .wrap.nav {
    padding: 12px 14px;
  }

  header .brand img {
    width: 126px;
    max-width: 39vw;
  }

  header .button,
  header .nav-cta,
  header a[href*="eventbrite"] {
    padding: 12px 12px;
    font-size: 12.5px;
  }

  .hero {
    padding: 66px 15px 36px;
  }

  .hero h1.display {
    font-size: clamp(3rem, 14vw, 4rem);
  }

  .hero .tagline {
    font-size: clamp(1.42rem, 6.6vw, 1.85rem);
  }

  .hero .lede {
    font-size: 16px;
  }

  .hero .photo-stack {
    min-height: 285px;
  }

  .intro,
  .features,
  .events,
  .gallery,
  .promise,
  .testimonials,
  .cta,
  footer {
    padding-left: 15px;
    padding-right: 15px;
  }

  section h2.display {
    font-size: clamp(2.3rem, 10.8vw, 3.5rem);
  }
}


/* ---- extracted style block ---- */


/* ==================================================
   V2 MOBILE CORRECTION — exact site structure/classes
   Desktop remains unchanged.
   ================================================== */

@media (max-width: 760px) {
  /* Prevent decorative artwork from creating horizontal overflow. */
  html,
  body {
    width: 100%;
    overflow-x: hidden;
  }

  .wrap {
    width: min(100% - 30px, var(--max));
  }

  /* ---------- Header ---------- */
  header .wrap.nav {
    min-height: 72px;
    padding: 10px 0;
    gap: 10px;
  }

  header .brand img {
    width: 128px;
    height: auto;
    max-width: 42vw;
  }

  /* Keep the CTA visible, hide only the ordinary navigation links. */
  header nav {
    display: flex;
    align-items: center;
    margin-left: auto;
  }

  header nav > a:not(.nav-cta) {
    display: none;
  }

  header .nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 13px;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 4px 4px 0 #111;
  }

  /* ---------- Hero ---------- */
  .hero {
    min-height: 0;
    padding: 44px 0 34px;
    overflow: hidden;
  }

  /* Remove desktop circles and floating stickers from the mobile hero. */
  .hero::before,
  .hero::after,
  .hero-yellow-badge,
  .hero .eight-ball,
  .hero .glitter-star,
  .top-centre-logo-cover {
    display: none !important;
  }

  .hero-grid {
    display: block;
  }

  .hero-copy {
    width: 100%;
    position: relative;
    z-index: 3;
  }

  .eyebrow {
    max-width: 100%;
    padding: 10px 15px;
    font-size: 13px;
    line-height: 1.1;
  }

  .hero h1.display {
    width: 100%;
    max-width: 100%;
    margin: 25px 0 25px;
    font-size: clamp(3.35rem, 15vw, 4.8rem);
    line-height: 0.9;
    letter-spacing: -0.055em;
  }

  .hero .tagline {
    margin: 0 0 17px;
    font-size: clamp(1.55rem, 7vw, 2rem);
    line-height: 1.08;
  }

  .hero .lede {
    max-width: 100%;
    font-size: 17px;
    line-height: 1.48;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 13px;
    width: 100%;
    margin-top: 27px;
  }

  .hero-actions .button {
    width: 100%;
    min-height: 58px;
    padding: 15px 14px;
    font-size: 15px;
    text-align: center;
  }

  .hero .micro {
    gap: 8px;
    margin-top: 19px;
  }

  .hero .micro span {
    padding: 8px 11px;
    font-size: 11px;
  }

  /* Rebuild the photo collage as a contained mobile composition. */
  .photo-stack {
    position: relative;
    width: 100%;
    height: 430px;
    min-height: 0;
    margin: 42px auto 0;
  }

  .photo-card {
    position: absolute;
    width: 68%;
    padding: 8px 8px 38px;
    border-width: 3px;
    box-shadow: 8px 8px 0 #111;
  }

  .photo-card img {
    width: 100%;
    height: 270px;
    border-width: 2px;
    object-fit: cover;
  }

  .photo-card.one {
    top: 28px;
    left: 2%;
    right: auto;
    transform: rotate(-5deg);
  }

  .photo-card.two {
    top: 103px;
    right: 1%;
    left: auto;
    width: 64%;
    transform: rotate(5deg);
  }

  .photo-card:hover {
    transform: none;
  }

  .tape {
    width: 92px;
    height: 27px;
    top: -14px;
  }

  .scribble {
    right: 3%;
    bottom: 8px;
    width: 94px;
    height: 94px;
    font-size: 12px;
    box-shadow: 4px 4px 0 #111;
  }

  /* Keep the mobile collage inside the section. */
  .photo-stack .retro-sticker,
  .photo-stack + .retro-sticker {
    max-width: 74px;
    max-height: 74px;
  }

  /* ---------- Marquee ---------- */
  .marquee {
    padding: 12px 0;
  }

  .marquee-track {
    gap: 24px;
    font-size: 18px;
    white-space: nowrap;
  }

  /* ---------- Intro and general sections ---------- */
  section {
    padding-top: 68px;
    padding-bottom: 68px;
  }

  .intro {
    min-height: 0;
    background-position: center;
  }

  .intro-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .intro h2.display,
  section h2.display {
    font-size: clamp(2.75rem, 12vw, 4.1rem);
    line-height: 0.92;
  }

  .features-grid,
  .events-grid,
  .gallery-grid,
  .promise-grid,
  .quote-grid,
  .cta-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  /* ---------- Gallery ---------- */
  .gallery .badge-gallery.gallery-logo-sticker {
    position: static;
    display: block;
    width: 82px;
    height: 82px;
    margin: 0 0 18px auto;
    transform: rotate(5deg);
  }

  .gallery .pixel-heart {
    top: 26px;
    right: 18px;
    width: 58px;
  }

  .gallery-grid {
    grid-auto-rows: 230px;
    gap: 16px;
  }

  .gallery-grid figure,
  .gallery-grid figure:nth-child(1),
  .gallery-grid figure:nth-child(4) {
    grid-column: auto;
    grid-row: auto;
  }

  /* ---------- CTA ---------- */
  .cta-grid {
    min-height: 0;
  }

  .cta-copy {
    padding: 56px 20px;
  }

  .cta-image {
    min-height: 330px;
  }

  /* Remove decorative badges that collide on narrow screens. */
  .badge-cta,
  .badge-footer {
    display: none;
  }
}

@media (max-width: 430px) {
  .wrap {
    width: min(100% - 24px, var(--max));
  }

  header .brand img {
    width: 116px;
    max-width: 39vw;
  }

  header .nav-cta {
    padding: 11px 10px;
    font-size: 12px;
  }

  .hero {
    padding-top: 38px;
  }

  .hero h1.display {
    font-size: clamp(3.1rem, 14.2vw, 4rem);
  }

  .hero .lede {
    font-size: 16px;
  }

  .photo-stack {
    height: 390px;
    margin-top: 34px;
  }

  .photo-card img {
    height: 238px;
  }

  .photo-card.one {
    width: 70%;
  }

  .photo-card.two {
    top: 91px;
    width: 66%;
  }

  .scribble {
    width: 84px;
    height: 84px;
    font-size: 11px;
  }

  section {
    padding-top: 58px;
    padding-bottom: 58px;
  }
}


/* Support us section */
.support-us {
  position: relative;
  overflow: hidden;
  background: #ffb7d5;
  border-top: 4px solid #111;
  border-bottom: 4px solid #111;
}
.support-us::before {
  content: "SUPPORT LOCAL CREATIVITY ✦ SUPPORT LOCAL CREATIVITY ✦";
  position: absolute;
  top: 26px;
  right: -105px;
  transform: rotate(8deg);
  padding: 10px 18px;
  background: #fff36f;
  border: 3px solid #111;
  box-shadow: 6px 6px 0 #111;
  font-weight: 900;
  letter-spacing: .06em;
  white-space: nowrap;
}
.support-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(560px, 1.08fr);
  gap: clamp(42px, 5vw, 72px);
  align-items: start;
}
.support-copy {
  min-width: 0;
  position: relative;
  z-index: 1;
}
.support-copy .display {
  max-width: 100%;
  margin: 14px 0 22px;
  font-size: clamp(4rem, 5.65vw, 6.15rem);
  line-height: .88;
  overflow-wrap: anywhere;
}
.support-cards {
  position: relative;
  z-index: 2;
}
.support-copy > p {
  max-width: 650px;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.65;
}
.support-note {
  display: inline-block;
  margin-top: 22px;
  padding: 12px 16px;
  background: #fff;
  border: 3px solid #111;
  box-shadow: 5px 5px 0 #111;
  font-weight: 850;
  transform: rotate(-1deg);
}
.support-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.support-card {
  display: flex;
  min-height: 240px;
  flex-direction: column;
  align-items: flex-start;
  padding: 25px;
  background: #fff;
  border: 3px solid #111;
  border-radius: 24px;
  box-shadow: 8px 8px 0 #111;
}
.support-card:nth-child(2) { background: #fff36f; transform: rotate(1deg); }
.support-card:nth-child(3) { background: #cbb8ff; transform: rotate(-1deg); }
.support-card:nth-child(4) { background: #ff78b6; }
.support-card .support-icon {
  display: grid;
  width: 52px;
  height: 52px;
  margin-bottom: 17px;
  place-items: center;
  border: 3px solid #111;
  border-radius: 50%;
  background: #fff;
  font-size: 25px;
}
.support-card h3 {
  margin: 0 0 10px;
  font-size: 1.35rem;
  line-height: 1.05;
}
.support-card p { margin: 0 0 20px; line-height: 1.5; }
.support-card .button { margin-top: auto; }
@media (max-width: 1180px) and (min-width: 901px) {
  .support-grid {
    grid-template-columns: minmax(0, .92fr) minmax(500px, 1.08fr);
    gap: 36px;
  }
  .support-copy .display {
    font-size: clamp(3.35rem, 5vw, 4.7rem);
  }
}
@media (max-width: 900px) {
  .support-us::before { display: none; }
  .support-grid { grid-template-columns: 1fr; }
  .support-copy .display {
    font-size: clamp(2.75rem, 12vw, 4.1rem);
    overflow-wrap: normal;
  }
}
@media (max-width: 620px) {
  .support-cards { grid-template-columns: 1fr; }
  .support-card { min-height: 0; transform: none !important; }
  .support-note { transform: none; }
}