* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body, html {
    background-color: #FFEFE3;
    overflow-x: hidden;
    overscroll-behavior-y: none;
    font-family: 'Hepta Slab';
  }

  * {
    box-sizing: border-box;
    max-width: 100vw;
  }

  
  /* Hero with background */
  .hero {
    position: relative;
    height: 90svh;
    background: url('Images/Vaiski26BGuusilowquality.webp') center bottom / cover no-repeat;
    margin-bottom: 10svh;
  }
  
  .hero__content {
    position: absolute;
    left: 0vw;
    right: auto;             /* don’t stretch all the way across */
    bottom: 70px;
    display: flex;
    justify-content: flex-start;  /* no space-between */
    align-items: flex-end;        /* sit on the same baseline near bottom */
    gap: 1rem;
    flex-wrap: wrap;              /* avoid squishing if there’s also a button */
  }

  /* logo: preserve aspect ratio, just scale down */
  .logo {
    width: clamp(3000px, 30vw, 700px);  /* scales smoothly; change numbers if you like */
    height: auto;                      /* keep shape */
    max-width: 60vw;                   /* safety on very narrow screens */
    flex: 0 0 auto;                    /* prevent flex from compressing it */
    display: block;
  }
  main {
    background-color: #FFEFE3;
    padding: 0px;
  }

  .full-bleed-strip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100vw;
    aspect-ratio: 1921 / 893;
    background: url('Images/Vaiski pattern rip.png') center / cover no-repeat;
    min-height: 500px
  }

  .full-bleed-strip { position: relative; overflow: hidden; }

  /* space so content doesn't sit on the torn edges in the image */
  :root {
  --rip-pad: clamp(24px, 6vw, 72px);     /* top/bottom padding on the strip */
  --side-pad: clamp(16px, 4vw, 32px);
  --edge-fade: 48px;
  --img-bleed: 12%;  
  --yonsininen: #0F262B;
  --btn-hover: none;
}


/* Title centered */
.strip-title {
  font-family: "Expletus Sans", system-ui, sans-serif;
  font-weight: 800;
  color: var(--color-LuonnonValkoinen);
  text-align: center;
  font-size: clamp(2.2rem, 4vw + .5rem, 5rem);
  margin-bottom: 12px;
  text-shadow: 0 2px 15px rgba(0,0,0,0.6);
}



/* --- Horizontal scroller (flex = easy centering on big screens) --- */
.pesti-scroller {
  padding: 20px;
  display: flex;
  gap: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* old Edge/IE */
}

.pesti-scroller::-webkit-scrollbar { display: none; }  /* Chrome/Safari */

/* card width now scales larger on big screens (no early cap) */
.pesti-card {
  position: relative;
  flex: 0 0 clamp(220px, 28vw, 400px);   /* ← increase the max here if you want */
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: var(--color-LuonnonValkoinen);
  scroll-snap-align: start;
  transition: transform .15s ease, box-shadow .15s ease;
}
.pesti-card:hover { transform: translateY(-2px); box-shadow: 0 8px 8px rgba(0,0,0,.22); }

.pesti-card img {
  width: 100%;
  height: clamp(160px, 18vw, 400px);     /* grow taller on big screens */
  object-fit: cover;
  display: block;
}

/* label overlay on the bottom of each card */
.pesti-label {
  position: absolute;
  text-align: center;
  left: 0; right: 0; bottom: 0;
  padding: .7rem 1rem;
  font-family: "Hepta Slab", system-ui, sans-serif;
  font-weight: 600;
  font-size: 25px;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
  background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0));
}

.pesti-label--stack{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;                 /* space between lines */
  line-height: 1.15;
}

/* first line (keeps inherited 25px size) */
.pesti-label__main{
  font-weight: 600;
}

/* second line smaller */
.pesti-label__sub{
  font-size: 0.72em;        /* ~18px when base is 25px */
  font-weight: 700;
  opacity: .95;             /* optional */
}

/* ===== Info trios ===== */
.info-trios {
  max-width: 1200px;
  margin: 2.5rem auto 6rem;
  padding: 0 1rem;
}
.info-trios > h2 {
  font-family: "Expletus Sans", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 4vw + .5rem, 5rem);
  color: var(--color-yösininen);
  text-align: center;
  margin-bottom: 4rem;
}
.info-trios .info-text {
  text-align: center;
  padding-left: 15px;
  padding-right: 15px;
}

.info-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr;   /* image a bit larger */
  gap: clamp(16px, 3vw, 36px);
  align-items: center;
  padding-left: clamp(14px, 2.2vw, 22px);
  padding-right: clamp(14px, 2.2vw, 22px);
  margin-block: clamp(16px, 3vw,40px);
}
.info-row--flip { grid-template-columns: 1fr 1.1fr; }
.info-row--flip .info-media { order: 2; }
.info-row--flip .info-text  { order: 1; }
.info-media{
  display: grid;
  place-items: center;   
  overflow: visible;
}
.info-media img {
  display: block;
  width: 90%;
  height: auto;
  margin-block: calc(-1 * var(--img-bleed));
}

.info-text h3 {
  font-family: "Expletus Sans", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 1.25;
  margin: 0 0 .4rem 0;
  color: var(--yonsininen);
}
.info-text h4 {
  font-family: "Hepta Slab", system-ui, sans-serif;
  margin: 0 0 1rem 0;
  line-height: 1.6;
  color: var(--yonsininen);
}
.info-text p {
  font-family: "Hepta Slab", system-ui, sans-serif;
  margin: 0 0 1rem 0;
  line-height: 1.6;
  color: var(--yonsininen);
}

/* Reuse your button vibe */
.info-text .btn {
  inline-size: 240px;
  display: inline-block;
  background: var(--btn-bg);
  color: var(--yonsininen);
  font-family: "Hepta Slab", system-ui, sans-serif;
  font-weight: 500;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 200px;
  transition: transform .06s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover{ background: var(--btn-hover); }

/* ——— Only affect the "alt" trio ——— */

/* left-align text on the flipped row */
.info-trios--alt .info-row--flip .info-text{
  text-align: left;
  align-items: flex-start;
}

/* allow image bleed if you use --img-bleed inline (optional) */
.info-trios--alt .info-row .info-media{
  justify-self: center;   /* horizontal centering in the grid cell */
  align-self: center;     /* vertical centering (safe) */
}
.info-trios--alt .info-media > img{
  display: block;
  width: 90%;
  height: auto;
  margin-block: calc(-1 * var(--img-bleed, 0%));
}
.subhead{
  position: relative;
  max-width: 1500px;       /* match your page width */
  margin: 0 auto;
  padding: 2.2rem 5rem 1.2rem;  /* extra right pad for the icon */
  text-align: center;
}

/* Heading style – reuse your title font */
.subhead h2{
  font-family: "Expletus Sans", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 1.25;
  margin: 0;
  color: #0F262B;
}

/* Icon sits to the right, vertically centered */
.subhead__icon{
  position: absolute;
  right: clamp(10px, 3vw, 48px);
  top: 50%;
  width: clamp(48px, 8vw, 96px);
  height: auto;
  pointer-events: none;
  user-select: none;
  opacity: .95;
}

/* Hide icon on small screens; tighten padding */
@media (max-width: 640px){
  .subhead__icon{ display: none; }
  .subhead{ padding: 1.6rem 1.25rem 0.75rem; }
}
/* mobile behavior only for this block */
@media (max-width: 760px){
  /* hide the FIRST row's image in this section on phone */
  .info-trios--alt .info-row:first-of-type .info-media{ display: none; }
  .info-trios--alt .info-media{
    width: 100%;
    margin-block: 10%;
  }

  /* keep left alignment for the flipped row when stacked */
  .info-trios--alt .info-row--flip .info-text{
    text-align: left;
    align-items: flex-start;
  }
  .info-trios {
  margin: 2.5rem auto 0rem;
}
}


/* Mobile: stack image then text */
@media (max-width: 760px){
  .info-row,
  .info-row--flip {
    grid-template-columns: 1fr;
  }
  .info-row--flip .info-media,
  .info-row--flip .info-text {
    order: initial;
  }
  .info-media img {
  width: 75%;
  margin-block: 0%;
}
  .info-trios > h2 {
    margin-bottom: 0;
  }
}


@media (max-width: 700px) {
  .hero__content {
    left: 2vw;          /* 5% padding left  */
    right: 2vw;         /* 5% padding right */
    bottom: 70px;       /* same vertical position */
    justify-content: center;
    align-items: flex-end;   /* sit on the bottom baseline */
    gap: 0.5rem;
  }

  /* Make the logo fill the available width, keep aspect ratio */
  .logo {
    width: 100%;
    height: auto;
    max-width: 100%;        /* safety */
    display: block;
  }
}

.hero{ position: relative; }

/* cue base */
.scroll-cue{
  --cue-bg: rgba(0,0,0,.58);
  --cue-fg: #fff;

  position: absolute;
  left: 50%;
  bottom: -40px;
  transform: translate(-50%, 12px);   /* small offset; animates to 0 */
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: none; border-radius: 50%;
  background: var(--cue-bg);
  color: var(--cue-fg);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  cursor: pointer;
  z-index: 2;

  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, transform .35s ease;
}


/* visible state after 3s (JS adds this class) */
.scroll-cue.is-visible{
  opacity: 1; visibility: visible;
  transform: translate(-50%, 0);
}

.scroll-cue svg{ width: 24px; height: 24px; }

/* gentle bob */

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .scroll-cue.is-visible{ animation: none; }
}