/* ---------------------------------------------------------------------
   About section -- the product-intro beat following the hero: packet
   drops in, settles, holds with the left/right side copy, then releases
   into ProcessSection's video. No canvas here -- just a static image and
   a couple of text blocks.
--------------------------------------------------------------------- */
.about-scroll-section {
  position: relative;
  width: 100%;
  /* Sits above ProcessSection (see .process-scroll-section's negative
     margin) for the tail end of this section's scroll, where the two
     overlap in the document so ProcessSection is already pinned and
     visible underneath while .about-sticky is still fully pinned itself.
     Keeping this section on top during that overlap is what lets its
     JS-driven opacity fade (see about-section.js's `_updateHandoff`)
     dissolve into ProcessSection instead of cutting to it. */
  z-index: 2;
  &::before {
    content: '';
    display: block;
    background: url(/bg-2.jpg) no-repeat center center;
    background-size: cover;
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

.about-sticky {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* Sized by viewport HEIGHT, not width -- ProcessSection's cover-crop keeps
   its video frames' vertical scale 1:1 with the viewport (it only ever
   crops left/right), so matching the bag's ~80%-of-frame-height size here
   is what makes this packet read as the same object as the one in that
   section's first frame, even without a literal crossfade between them.
   JS only ever touches this wrapper's opacity and translateY (the
   scroll-driven "fall" into place); the floating idle animation lives on
   the inner <img> instead, so nothing fights over the same element's
   transform (same pattern as .hero-banner-product-wrap). */
.about-product-wrap {
  position: absolute;
  top: 50%;
  left: 49.4%;
  height: 100vh;
  /* Locks the wrap's width to a value derived purely from its height and
     the source PNG's own intrinsic ratio (1122x1402) -- no shrink-to-fit
     involved. Without this, an absolutely-positioned box with no explicit
     width and a percentage-sized replaced child is a genuine circular
     dependency (the child's width, capped by the global `img{max-width:
     100%}` reset, depends on the wrap's width, which -- with no width of
     its own -- shrink-fits to the child): browsers resolve that cycle
     inconsistently across viewport sizes, which is what read as the image
     stretching while resizing. */
  aspect-ratio: 1122 / 1402;
  z-index: 2;
  /* Deliberately uncapped, even though height:100vh means this box's width
     scales with viewport HEIGHT rather than width -- on a narrow-but-tall
     viewport the resulting box can run wider than the viewport itself, but
     `.about-sticky`'s own `overflow: hidden` (above) safely clips that
     excess left/right instead of causing page-level horizontal scroll. A
     `max-width` here would "fix" that overflow by shrinking the box on
     both axes (aspect-ratio keeps them locked together), which breaks the
     one thing this box's sizing exists for: staying locked to the
     viewport's HEIGHT so the packet keeps matching ProcessSection's own
     cover-cropped video frame (which also only ever crops horizontally,
     never scales vertically) -- shrinking it here is what read as the
     packet suddenly not matching size with the video during the
     about->process crossfade. */
}
.about-product-single {
  display: block;
  width: 100%;
  height: 100%;
  /* Belt-and-suspenders: even if the box and the image's own ratio ever
     drift apart by a hair, `contain` still can't distort it the way the
     default `fill` (or a `cover` crop) would. */
  object-fit: contain;
  filter: drop-shadow(0 26px 40px rgba(0, 0, 0, 0.5));
  animation: hero-product-float 6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .about-product-single {
    animation: none;
  }
}

/* Product story (left) / brand story (right), flanking the centered
   packet. `top: 50%` only -- the translateY(-50%) that centers it, and the
   settle-in lift on top of that, are both written from JS every tick (see
   _updateHandoff), so no transform is set here to avoid the two fighting
   over the same property. Anchored to the edge with a gradient fading
   toward the packet, rather than a hard-edged card, to stay legible over
   the busy background without boxing the text in. */
.about-side-copy {
  position: absolute;
  top: 50%;
  z-index: 3;
  max-width: 35%;
  padding: 2.75rem 2.5rem;
  /* Slight blur on the scrim behind the text -- softens the busy background
     photo just enough to read as a deliberate glass panel rather than a
     flat color patch pasted over the image. */
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.about-side-copy--left {
  left: 0;
  background: linear-gradient(90deg, rgba(8, 6, 4, 0.85) 0%, rgba(8, 6, 4, 0.55) 55%, transparent 100%);
  border-left: 2px solid rgba(200, 168, 118, 0.35);
}

.about-side-copy--right {
  right: 0;
  text-align: right;
  background: linear-gradient(270deg, rgba(8, 6, 4, 0.85) 0%, rgba(8, 6, 4, 0.55) 55%, transparent 100%);
  border-right: 2px solid rgba(200, 168, 118, 0.35);
}

.about-side-title {
  position: relative;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.2;
  color: var(--coffee-cream);
  margin: 0.85rem 0 0;
  padding-bottom: 0.9rem;
}

/* Short brand-gold underline instead of a generic full-width rule --
   ties the title back to the gold gradient used on every CTA button
   across the site (site-header-cta, product-cta, enquiry-submit). */
.about-side-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 2.5rem;
  height: 2px;
  background: linear-gradient(90deg, #e3c393, #b8894f);
}

.about-side-copy--right .about-side-title::after {
  left: auto;
  right: 0;
}

.about-side-text {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.7;
  color: #d8cec0;
  margin: 1rem 0 0;
}

.about-side-details {
  position: relative;
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 1.15rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Paper-fold crease where the narrative copy ends and the spec list
   begins -- a thin gold line plus a dark shadow above/light catch-line
   below, the same shading a physical fold in paper or a scroll would
   pick up, rather than a flat divider rule. */
.about-side-details::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(200, 168, 118, 0.3);
  box-shadow:
    0 -4px 6px -2px rgba(0, 0, 0, 0.45),
    0 2px 4px -1px rgba(255, 255, 255, 0.06);
}

.about-side-details li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  color: var(--coffee-tan);
}

.about-side-copy--right .about-side-details li {
  justify-content: flex-end;
}

/* Small gold marker in place of a default list bullet -- reads as a spec
   sheet rather than plain paragraph text. */
.about-side-details li::before {
  content: '';
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e3c393, #b8894f);
}

/* No room next to a packet this size once the layout narrows -- there's
   nothing else in this section to carry it on mobile, so the side copy
   just doesn't show there. Threshold sits above the hero nav's own 900px
   breakpoint since these wider panels need more clearance from the
   centered packet before that. */
@media (max-width: 1100px) {
  .about-side-copy {
    display: none;
  }

  /* The 49.4% base offset exists to leave room for the flanking side-copy
     panels -- with those hidden below this same breakpoint, true center
     reads better than that small deliberate desktop asymmetry. */
  .about-product-wrap {
    left: 50%;
  }
}

.about-sticky--static {
  position: relative;
  height: 100vh;
}