/* 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;
  /* One pixel of overlap, so no hairline shows where the two meet. */
  bottom: calc(100% - 1px);
  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;
  /* One pixel of overlap, so no hairline shows where the two meet. */
  top: calc(100% - 1px);
  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)); }

/* .services clips its own overflow to contain the carousel and the shapes that
   bleed off the edge. .advance hangs a curve above and below itself, so it must
   not clip at all: clipping sideways only (overflow-x: clip) makes Safari drop
   both curves whenever it promotes the section to its own layer, which left the
   band flat at random. Its shapes are clipped by their own layer instead, and
   the body's horizontal clip catches anything else. */
.services { overflow: clip; }
.advance { overflow: visible; }
.advance .deco { overflow: hidden; }

/* --- 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; }
}