@font-face {
  font-family: 'Filicudi Solid';
  src: url('fonts/filicudi-solid.woff2') format('woff2'),
       url('fonts/filicudi-solid.woff') format('woff'),
       url('fonts/FilicudiSolid.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

:root{
  --navy:#0E2A47;
  --teal:#4CC4B0;
  --soft-pink:#ffb3fb;
  --show-pink:#c44c9c;
  --white:#ffffff;
  --black:#000000;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family: Arial, sans-serif;
  background:var(--white);
  color:var(--navy);
  line-height:1.55;
}

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

a{color:inherit}

.container{
  width:min(1100px, calc(100% - 2rem));
  margin:0 auto;
}

h1,h2,h3{
  font-family:'Filicudi Solid','Arial Black',sans-serif;
  text-transform:uppercase;
  margin:0;
  line-height:.95;
}

p{margin:0 0 1rem}

.site-header{
  background:var(--navy);
  color:var(--white);
}

.header-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1rem 0;
  gap:1rem;
}

.brand img{width:auto;height:150px}

.site-nav ul{
  display:flex;
  gap:1rem;
  list-style:none;
  margin:0;
  padding:0;
  flex-wrap:wrap;
}

.site-nav a{
  text-decoration:none;
  color:var(--white);
  font-weight:900;
  padding:.4rem .7rem;
}

.site-nav a:hover,
.site-nav a.active{
  background:var(--white);
  color:var(--navy);
}

.button-row,
.hero-actions{
  margin-top:1rem;
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
}

.button{
  background:var(--navy);
  color:var(--white);
  padding:.85rem 1.25rem;
  text-decoration:none;
  font-weight:900;
  display:inline-block;
}

.button.light{
  background:var(--white);
  color:var(--navy);
}

.section{padding:5rem 0}

.footer{
  background:var(--navy);
  color:var(--white);
  padding:2rem 0;
  margin-top:1rem;
}

.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
}

.footer-links{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}

.footer-links a{
  text-decoration:none;
}

/* INDEX */
.hero{
  padding:5rem 0 4.5rem;
}

.hero-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2.25rem;
  align-items:stretch;
}

.hero-copy{
  background:var(--teal);
  color:var(--white);
  padding:2.75rem;
  min-height:420px;
  transform:rotate(-10deg);
  position:relative;
  z-index:2;
}

.hero-copy h1{
  font-size:clamp(2.5rem,6vw,4.5rem);
}

.hero-image{
  background:var(--teal);
  position:relative;
  overflow:hidden;
  min-height:420px;
}

.hero-image .shape-top,
.hero-image .shape-bottom,
.feature-image .shape-top,
.feature-image .shape-bottom {
  position: absolute;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 2;
}

.feature-image .shape-top {
  top: 0;
}

.feature-image .shape-bottom {
  bottom: 0;
}

.hero-image img.main-photo,
.feature-image img.main-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  opacity: 0.6;
}

.section-alt{
  background:var(--navy);
  color:var(--white);
}

.section-heading{
  position:relative;
  margin-bottom:2.25rem;
  padding-right:4rem;
}

.section-heading h2{
  font-size:clamp(2rem,5vw,3rem);
  margin-bottom:.5rem;
}

.poster-title{
  font-family:'Filicudi Solid';
  font-size:clamp(3rem,8vw,6rem);
  position:relative;
  display:inline-block;
  margin:0 0 1.2rem;
}

.poster-title span{
  position:relative;
  z-index:2;
}

.poster-title::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--show-pink);
  transform:translate(10px,10px);
  z-index:1;
}

.sticker {
  position: absolute;
  top: -16px;
  right: -16px;
  background: var(--show-pink);
  color: var(--white);
  padding: 1rem 1.5rem;
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  font-weight: 900;
  transform: rotate(10deg);
  z-index: 3;
}

@media (max-width: 800px) {
  .sticker {
    top: -8px;
    right: 8px;
    padding: 0.8rem 1.2rem;
    font-size: 1rem;
  }
}

@media (max-width: 520px) {
  .sticker {
    top: -4px;
    right: 4px;
    padding: 0.65rem 1rem;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
  }
}

.grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.75rem;
}

.panel{
  padding:1.75rem;
  background:var(--white);
  color:var(--navy);
  transform:rotate(3deg);
}

.panel.hot{
  background:var(--show-pink);
  color:var(--white);
  transform:rotate(-3deg);
}
  
.panel.pale{
  background:var(--pale-pink);
  color:var(--black);
  transform:rotate(0deg);
}

.panel.black{
  background:var(--navy);
  color:var(--white);
}

.panel.no-tilt{transform:none}

.feature-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2.25rem;
  align-items:center;
}

.feature-image {
  background: var(--teal);
  position: relative;
  overflow: hidden;
  min-height: 380px;
  height: 100%;
}

.cta-band{
  background:var(--teal);
  padding:2.75rem;
  text-align:center;
}

.cta-band h2{
  font-size:clamp(2rem,5vw,3rem);
  margin-bottom:.75rem;
}

.email-section .card{
  background:var(--teal);
  color:var(--white);
  padding:3rem;
}

/* ABOUT */
.poster{
  font-family:'Filicudi Solid','Arial Black',sans-serif;
  text-transform:uppercase;
  font-size:clamp(3rem,7vw,5rem);
  line-height:0.95; /* 👈 tighter poster feel */
  position:relative;
  display:inline-block;
}

.poster::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--teal);
  transform:translate(10px,10px);
  z-index:-1;
}

.grid-2{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:2rem;
}

.card{
  padding:1.5rem;
  background:var(--white);
  transform:rotate(3deg);
}

.card.no-tilt{transform:none}
.card:nth-child(even):not(.no-tilt){transform:rotate(-3deg)}

.highlight{
  background:var(--navy);
  color:var(--white);
  padding:2rem;
  transform:rotate(-10deg);
}

.image{
  background:var(--teal);
  min-height:320px;
  position:relative;
  overflow:hidden;
}

.image img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(100%);
  opacity:.6;
}

.image::after{

  position:absolute;
  bottom:10px;
  right:10px;
  background:var(--navy);
  color:var(--white);
  padding:4px 8px;
}

/* AUDITIONS */
.show-hero{
  padding:4.5rem 0 4rem;
  overflow:hidden;
}

.show-hero .hero-copy{
  background:var(--show-pink);
}

.show-hero .hero-image{
  background:var(--soft-pink);
}

.show-hero .eyebrow{
  color:var(--soft-pink);
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  display:inline-block;
  margin-bottom:1rem;
}

.show-card{
  background:var(--show-pink);
  color:var(--white);
}

.soft-card{
  background:var(--soft-pink);
  color:var(--navy);
}

.navy-card{
  background:var(--navy);
  color:var(--white);
}

.list-box{
  background:var(--navy);
  color:var(--white);
  padding:2rem;
}

/* SUPPORT */
.cta{
  background:var(--teal);
  color:var(--white);
  padding:2.5rem;
  transform:rotate(-10deg);
}

/* responsive */
@media(max-width:800px){
  .header-inner{
    flex-direction:column;
    align-items:flex-start;
    gap:.85rem;
  }

  .brand img{width:auto}

  .site-nav ul{
    gap:.5rem;
  }

  .site-nav a{
    padding:.35rem .55rem;
    font-size:.95rem;
  }

  .hero,
  .show-hero,
  .section{
    padding:3.5rem 0;
  }

  .hero-grid,
  .grid-3,
  .grid-2,
  .feature-layout{
    grid-template-columns:1fr;
  }

  .hero-copy{
    transform:rotate(-4deg);
    min-height:auto;
    padding:2rem;
  }

  .hero-copy h1{
    font-size:clamp(2.2rem,10vw,3.6rem);
  }

  .hero-image,
  .feature-image,
  .image{
    min-height:280px;
  }

  .section-heading{
    padding-right:0;
    padding-top:2.25rem;
  }

  .panel,
  .panel.hot,
  .card,
  .highlight,
  .cta{
    transform:none;
  }

  .email-section .card{
    padding:2rem;
  }
}

@media(max-width:520px){
  .container{
    width:min(1100px, calc(100% - 1.25rem));
  }

  .hero-copy{
    padding:1.5rem;
  }

  .button{
    width:100%;
    text-align:center;
  }

  .email-section .card{
    padding:1.5rem;
  }

  .poster-title{
    font-size:clamp(2.4rem,11vw,4.5rem);
  }
}
.color-image {
  filter: none !important;
  opacity: 1 !important;
}