/* Organic section transitions and floating colour shapes, in the spirit of the
   reference composition but built with CSS masks instead of flat images. */

:root {
  --deco-lime: #c6e04f;
  --deco-teal: #6fd3de;
  --deco-yellow: #ffcf4d;
  --deco-purple: #cdb9f0;
  --curve-h: clamp(46px, 7vw, 125px);
  --curve-h-lg: clamp(64px, 9.5vw, 175px);
  --curve-h-sm: clamp(36px, 5vw, 92px);
  --curve-rise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120 H1440 V2 C1060 0 780 22 520 58 C300 88 150 108 0 116 Z' fill='%23000'/%3E%3C/svg%3E");
  --curve-dome: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120 H1440 V54 C1250 6 1010 -8 720 -8 C430 -8 190 6 0 54 Z' fill='%23000'/%3E%3C/svg%3E");
}

/* --- Curved section entrances -------------------------------------------
   The incoming section paints a masked band over the tail of the previous
   one, so its background rises into view instead of starting on a hard line. */
.curve-top { position: relative; }
.curve-top::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: var(--curve-h);
  background: var(--curve-fill, var(--paper));
  -webkit-mask: var(--curve-shape, var(--curve-rise)) center / 100% 100% no-repeat;
  mask: var(--curve-shape, var(--curve-rise)) center / 100% 100% no-repeat;
  pointer-events: none;
}
.curve-flip::before { transform: scaleX(-1); }

/* The mirror case. Where the incoming section is the textured paper, a band of
   paper would tile from its own edge and leave a seam against the body's tiling,
   so the outgoing flat colour reaches down instead. */
.curve-bottom { position: relative; }
.curve-bottom::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: var(--curve-h-bottom, var(--curve-h));
  background: var(--curve-fill-bottom, var(--curve-fill));
  -webkit-mask: var(--curve-shape-bottom, var(--curve-rise)) center / 100% 100% no-repeat;
  mask: var(--curve-shape-bottom, var(--curve-rise)) center / 100% 100% no-repeat;
  transform: scaleY(-1);
  pointer-events: none;
}
.curve-dome::before { --curve-shape: var(--curve-dome); }
.challenges.curve-top { --curve-fill: #f4f3f4; }
.advance.curve-top { --curve-fill: var(--pink-light); }
.advance.curve-bottom { --curve-shape-bottom: var(--curve-dome); --curve-h-bottom: var(--curve-h-sm); }
.people.curve-top, .trust.curve-top { --curve-fill: #fff; }
/* The straight rules these sections used to open with would cut across the curve. */
.trust.curve-top { border-top: 0; }
.contact.curve-top { --curve-fill: var(--pink-light); }
.site-footer.curve-top { --curve-fill: #191919; --curve-h: var(--curve-h-lg); }

/* Room for the band to overlap without reaching the text above it. */
.purpose, .challenges, .advance, .services, .method, .trust, .portfolio-work { padding-bottom: calc(110px + var(--curve-h)); }
.services { padding-top: calc(110px + var(--curve-h-sm)); }
.contact { padding-bottom: calc(110px + var(--curve-h-lg)); }

/* Both sections clip their own overflow to contain the rotated headline, the
   carousel and the shapes that bleed off the edge. Nothing escapes .services any
   more, but .advance now hangs a curve below itself, so it clips only sideways. */
.services { overflow: clip; }
.advance { overflow: visible; overflow-x: clip; overflow-y: visible; }

/* --- Floating colour shapes --------------------------------------------- */
.has-deco { position: relative; isolation: isolate; }
.deco {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.blob {
  position: absolute;
  display: block;
  width: var(--size, 200px);
  aspect-ratio: 1;
  background: var(--blob, var(--deco-lime));
  border-radius: 50%;
  will-change: transform;
}
.blob-organic { border-radius: 57% 43% 46% 54% / 45% 52% 48% 55%; }
.blob-ring { background: none; border: var(--ring, 14px) solid var(--blob, var(--deco-teal)); }

@media (prefers-reduced-motion: no-preference) {
  .blob-organic { animation: blobMorph 17s ease-in-out infinite; }
  @keyframes blobMorph {
    0%, 100% { border-radius: 57% 43% 46% 54% / 45% 52% 48% 55%; }
    34% { border-radius: 43% 57% 61% 39% / 56% 42% 58% 44%; }
    67% { border-radius: 52% 48% 37% 63% / 46% 61% 39% 54%; }
  }
  .blob[data-parallax] { transform: translate3d(0, var(--shift, 0px), 0); }
}

/* Hero: a colour shape sits under the photo collage, the way the reference
   tucks its circles behind the artwork. */
.hero .deco-hero-lime { --size: clamp(230px, 27vw, 380px); --blob: var(--deco-lime); top: -30px; right: -5vw; }
.hero .deco-hero-teal { --size: clamp(90px, 10vw, 140px); --blob: var(--deco-teal); --ring: clamp(10px, 1.3vw, 18px); left: -6vw; bottom: 46px; }
.hero .deco-hero-dot { --size: clamp(38px, 4vw, 62px); --blob: var(--deco-yellow); left: -5vw; top: 40%; }

/* Advance: the shout section gets the boldest shapes, half off the canvas. */
.advance .deco-advance-lime { --size: clamp(240px, 26vw, 400px); --blob: var(--deco-lime); left: -9vw; top: 4%; }
.advance .deco-advance-teal { --size: clamp(120px, 14vw, 205px); --blob: var(--deco-teal); right: -4vw; bottom: 8%; }
.advance .deco-advance-dot { --size: clamp(46px, 5vw, 78px); --blob: var(--pink); right: 16%; top: 12%; }

/* Services: one quiet shape so the cards keep the stage. */
.services .deco-services-yellow { --size: clamp(140px, 16vw, 250px); --blob: var(--deco-yellow); right: -8vw; top: 22px; }
.services .deco-services-purple { --size: clamp(70px, 7vw, 110px); --blob: var(--deco-purple); left: -3vw; bottom: 14%; }

/* Trust: two quiet shapes so the logo wall is not a bare rectangle. */
.trust .deco-trust-teal { --size: clamp(110px, 12vw, 190px); --blob: var(--deco-teal); left: -5vw; top: 22%; }
.trust .deco-trust-yellow { --size: clamp(60px, 6vw, 96px); --blob: var(--deco-yellow); right: 4vw; bottom: 22%; }

/* Contact into footer: the shapes straddle the seam and the black curve eats
   their lower half, which is the transition from the reference banner. */
.contact .deco-cta-lime { --size: clamp(230px, 24vw, 370px); --blob: var(--deco-lime); left: -8vw; bottom: -90px; }
.contact .deco-cta-pink { --size: clamp(130px, 15vw, 235px); --blob: var(--pink); left: 10vw; bottom: -85px; }
.contact .deco-cta-teal { --size: clamp(60px, 6vw, 95px); --blob: var(--deco-teal); right: 7vw; top: 18%; }

@media (max-width: 800px) {
  .purpose, .challenges, .advance, .services, .method, .trust, .portfolio-work { padding-bottom: calc(75px + var(--curve-h)); }
  .services { padding-top: calc(75px + var(--curve-h-sm)); }
  .contact { padding-bottom: calc(75px + var(--curve-h-lg)); }
  .hero .deco-hero-dot, .trust .deco-trust-yellow { display: none; }
  /* Narrow screens stack the columns, so the shapes are resized and re-anchored
     to sit behind the artwork instead of behind the running text. */
  .hero .deco-hero-lime { --size: clamp(150px, 42vw, 230px); top: 50%; right: -14vw; }
  .hero .deco-hero-teal { --size: clamp(70px, 20vw, 110px); --ring: 12px; bottom: 30%; }
  .advance .deco-advance-lime { --size: clamp(150px, 44vw, 240px); left: -17vw; top: 2%; }
  .advance .deco-advance-teal { --size: clamp(90px, 26vw, 140px); }
  .services .deco-services-yellow { --size: clamp(100px, 30vw, 170px); }
  .trust .deco-trust-teal { --size: clamp(80px, 24vw, 130px); }
  .contact .deco-cta-lime { --size: clamp(160px, 46vw, 260px); }
  .contact .deco-cta-pink { --size: clamp(95px, 28vw, 155px); }
  .advance .deco-advance-dot { top: 4%; right: 6%; }
  .contact .deco-cta-lime { bottom: -58px; left: -20vw; }
  .contact .deco-cta-pink { bottom: -4px; left: 11vw; }
}
@media (max-width: 480px) {
  .purpose, .challenges, .advance, .services, .method, .trust, .portfolio-work { padding-bottom: calc(60px + var(--curve-h)); }
  .services { padding-top: calc(60px + var(--curve-h-sm)); }
  .contact { padding-bottom: calc(60px + var(--curve-h-lg)); }
  .hero .deco-hero-teal, .services .deco-services-purple, .contact .deco-cta-teal, .trust .deco-trust-teal { display: none; }
}