/* ==========================================================================
   TUOIL — diagonal strip
   One horizontal band cut into parallelograms at the 15deg system angle:
   the same slant as the hexagon lattice in the hero. Seven plants and
   ingredients, drifting past each other on scroll.
   ========================================================================== */

.s-diagonal {
  position: relative;
  --diag-h: clamp(240px, 27.5vw, 440px);
  height: var(--diag-h);
  overflow: hidden;
  background: var(--c-cream);
}

/* The row hangs over both edges of the screen by exactly what the shear takes
   away at the corners -- half the height times tan(15deg) -- and no more. Any
   wider and the two outermost strips would be mostly off-screen, which is
   what makes a band of seven look like a band of five with slivers. */
.s-diagonal__row {
  --diag-over: calc(var(--diag-h) * 0.134);
  display: flex;
  gap: 5px; /* the white seams between strips */
  width: calc(100% + var(--diag-over) * 2);
  height: 100%;
  margin-left: calc(-1 * var(--diag-over));
}

/* Equal widths: the seven carry the same weight, and the band reads as one run
   rather than as seven pictures of different importance. */
.s-diagonal__strip {
  position: relative;
  flex: 1 1 0;
  overflow: hidden;
  transform: skewX(var(--angle-neg));
}

/* Skewed back to upright, and widened by height * tan(15deg) so the picture
   still covers the slanted opening without being blown up. */
.s-diagonal__unskew {
  position: absolute;
  /* height * tan(15deg) is 118px at the tallest band; 130 covers every case */
  inset: 0 -130px;
  transform: skewX(var(--angle));
}

/* The layer the parallax moves. Taller than the strip by the largest drift. */
.s-diagonal__media {
  position: absolute;
  inset: -80px 0;
  will-change: transform;
}

.s-diagonal__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.8) brightness(0.94);
}

@media (max-width: 768px) {
  /* Seven slivers on a phone read as noise; four are left. */
  .s-diagonal__strip:nth-child(n + 5) { display: none; }
}

@media (max-width: 480px) {
  .s-diagonal__strip:nth-child(n + 4) { display: none; }
}

/* ==========================================================================
   TUOIL — quote call to action
   Dense olive plate, one drifting pentagon, two lines and a link. The whole
   block is the link.
   ========================================================================== */

.s-cta {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(360px, 30vw, 480px);
  overflow: hidden;
  background: var(--c-base);
  color: var(--c-on-dark);
  text-decoration: none;
  transition: background-color var(--dur-slow) var(--ease-out);
}

.s-cta:hover { background: var(--c-base-lift); }

.s-cta:focus-visible {
  outline: 2px solid var(--c-on-dark);
  outline-offset: -8px;
}

/* --- Pentagon ----------------------------------------------------------------
   Two nested layers again: the outer one is moved by the scroll, the inner
   one drifts on its own. Neither ever touches the other's transform. */
.s-cta__shape {
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(390px, 44vw, 702px);
  transform: translate(-24%, 22%);
  pointer-events: none;
}

.s-cta__shape-scroll,
.s-cta__shape-drift {
  display: block;
  will-change: transform;
}

.s-cta__shape svg { display: block; width: 100%; height: auto; }

.s-cta__shape path { fill: var(--c-base-glow); }

/* --- Text ---------------------------------------------------------------------- */
.s-cta__inner {
  position: relative;
  width: 100%;
  padding-block: var(--sp-6);
}

.s-cta__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1rem + 3vw, 3.5rem);
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  letter-spacing: var(--ls-display);
}

/* the second line steps in, the way the strips step across */
.s-cta__title-line--indent { display: block; padding-left: 2.4em; }

.s-cta__link {
  display: inline-block;
  margin-top: var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  border-bottom-color: color-mix(in srgb, currentColor 32%, transparent);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--dur-base) var(--ease-out);
}

.s-cta:hover .s-cta__link,
.s-cta:focus-visible .s-cta__link { background-size: 100% 1px; }

@media (max-width: 768px) {
  .s-cta__title-line--indent { padding-left: 1.2em; }
  .s-cta__shape { width: clamp(338px, 94vw, 546px); }
}

@media (prefers-reduced-motion: reduce) {
  .s-cta__shape,
  .s-cta__shape-scroll,
  .s-cta__shape-drift,
  .s-diagonal__media { transform: none; }
  .s-cta__shape { transform: translate(-24%, 22%); }
}