/* Sticky adaptation of templates/fullpage/public/assets/css/custom/paper-fold.css.
   Hinged leaf / fixed left page / two-face lighting retained from paperFold. */
#brand-story { --story-paper: var(--white); --story-fold-shadow: 0; --story-sticky-top: var(--head, 88px); position: relative; color: var(--ink); }
#brand-story *, #brand-story *::before, #brand-story *::after { box-sizing: border-box; }
#brand-story [hidden] { display: none !important; }
#brand-story .story-stage { position: relative; max-width: 1600px; margin-inline: auto; padding: 76px clamp(20px, 5vw, 86px); }
#brand-story .story-heading { position: relative; margin-bottom: 32px; }
#brand-story .story-book-shell { display: contents; }
#brand-story .story-pages { display: grid; gap: 28px; }
#brand-story .story-page { display: grid; grid-template-columns: 1fr 1fr; margin: 0; background: var(--story-paper); border-radius: 3px; overflow: hidden; box-shadow: 0 14px 36px rgb(41 45 35 / .09); scroll-margin-top: 90px; }
#brand-story .story-copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; min-height: 410px; padding: clamp(28px, 4vw, 64px); background: var(--story-paper); color: var(--ink); }
#brand-story .story-kicker { margin: 0 0 24px; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: .12em; color: var(--khaki); }
#brand-story .story-copy h3 { margin: 0; font-size: clamp(29px, 3.25vw, 52px); font-weight: 800; line-height: 1.25; letter-spacing: -.055em; word-break: keep-all; text-wrap: balance; }
#brand-story .story-description { max-width: 42ch; margin: 26px 0 0; font-size: clamp(14px, 1.14vw, 17px); font-weight: 400; line-height: 1.85; letter-spacing: -.025em; word-break: keep-all; }
#brand-story .story-description + .story-description { margin-top: 15px; }
#brand-story .story-page-number { position: absolute; left: clamp(28px, 4vw, 64px); bottom: 24px; color: var(--khaki); font-size: 11px; font-weight: 600; letter-spacing: .14em; }
#brand-story .story-visual { position: relative; display: grid; align-items: center; min-width: 0; min-height: 410px; overflow: hidden; background: var(--peach); }
#brand-story .story-visual > img { display: block; width: 100%; height: 100%; object-fit: cover; }
#brand-story .story-caption { position: absolute; inset: auto 22px 22px; z-index: 1; width: fit-content; max-width: calc(100% - 44px); margin: 0; padding: 9px 12px; color: var(--white); background: var(--ink); border-radius: 2px; font-size: 11px; font-weight: 600; letter-spacing: .04em; }
#brand-story .story-controls { display: flex; justify-content: center; align-items: center; gap: clamp(15px, 3vw, 44px); margin-top: 25px; }
#brand-story .story-controls button { min-width: 100px; min-height: 44px; border: 1px solid currentColor; border-radius: 100px; padding: 10px 18px; background: transparent; color: inherit; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
#brand-story .story-controls button:not(:disabled):hover { color: var(--white); background: var(--ink); border-color: var(--ink); }
#brand-story .story-controls button:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; box-shadow: 0 0 0 2px var(--white); }
#brand-story .story-controls button:disabled { opacity: .4; cursor: default; }
#brand-story [data-story-current] { min-width: 56px; text-align: center; font-size: 11px; font-variant-numeric: tabular-nums; font-weight: 650; letter-spacing: .1em; }

/* Enhanced desktop: one wheel gesture turns one chapter inside the pinned book.
   Touch, keyboard and scrollbar travel remain native, as do the surrounding sections. */
#brand-story.story-enhanced { height: var(--story-scroll-height); padding-block: 0; }
#brand-story.story-enhanced .story-stage { position: sticky; top: var(--story-sticky-top); display: flex; flex-direction: column; justify-content: center; height: var(--story-stage-height, 100svh); min-height: 500px; padding-block: 28px; overflow: hidden; }
#brand-story.story-enhanced .story-heading { flex: 0 0 auto; margin: 0 0 clamp(20px, 3vh, 32px); }
#brand-story.story-enhanced .story-pages { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); }
#brand-story.story-enhanced .story-book-shell { position: relative; display: block; flex: 1 1 auto; width: 100%; max-height: 650px; min-height: 340px; }
#brand-story .story-book-visual { position: absolute; inset: 0; width: 100%; height: 100%; perspective: 2600px; perspective-origin: 50% 40%; filter: drop-shadow(0 20px 22px rgb(41 45 35 / .18)); }
#brand-story .story-book-under { position: absolute; inset: 0; background: var(--story-paper); box-shadow: 0 3px 0 #dfd7c8, 0 6px 0 #f4ede0; }
#brand-story .story-book-left, #brand-story .story-book-right, #brand-story .story-book-still { position: absolute; top: 0; width: 50%; height: 100%; }
#brand-story .story-book-left, #brand-story .story-book-still { left: 0; }
#brand-story .story-book-right { right: 0; }
#brand-story .story-book-still { z-index: 2; }
#brand-story .story-book-still::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 65%, rgb(41 45 35 / .2)); opacity: var(--story-fold-shadow); pointer-events: none; }
#brand-story .story-book-leaf { position: absolute; z-index: 4; top: 0; left: 50%; width: 50%; height: 100%; transform-origin: 0 50%; transform-style: preserve-3d; will-change: transform; }
#brand-story .story-book-face { position: absolute; inset: 0; background: var(--story-paper); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
#brand-story .story-book-front { transform: translateZ(.2px); }
#brand-story .story-book-back { transform: rotateY(180deg) translateZ(.2px); }
#brand-story .story-book-front::after, #brand-story .story-book-back::after { content: ''; position: absolute; z-index: 3; inset: 0; opacity: var(--story-fold-shadow); pointer-events: none; }
#brand-story .story-book-front::after { background: linear-gradient(90deg, rgb(41 45 35 / .34), rgb(255 255 255 / .13) 15%, transparent 48%, rgb(41 45 35 / .18)); }
#brand-story .story-book-back::after { background: linear-gradient(270deg, rgb(41 45 35 / .32), rgb(255 255 255 / .25) 18%, transparent 60%); }
#brand-story .story-book-front::before { content: ''; position: absolute; z-index: 4; right: 0; bottom: 0; width: clamp(26px, 4vw, 60px); aspect-ratio: 1; background: linear-gradient(135deg, transparent 48%, #f9f0df 49%, var(--white) 70%, #d6c8af); clip-path: polygon(100% 0, 100% 100%, 0 100%); opacity: calc(var(--story-corner-fold, 0) * .95); pointer-events: none; }
#brand-story .story-book-spine { position: absolute; z-index: 5; left: 50%; top: 0; width: 16px; height: 100%; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgb(41 45 35 / .14), rgb(255 255 255 / .28), transparent); pointer-events: none; }
#brand-story .story-book-visual .story-copy, #brand-story .story-book-visual .story-visual { width: 100%; height: 100%; min-height: 0; }
#brand-story .story-book-visual .story-copy { padding-bottom: clamp(58px, 5vw, 76px); }
#brand-story.story-enhanced .story-controls { flex: 0 0 auto; }

@media (min-width: 761px) and (max-height: 760px) {
  #brand-story.story-enhanced .story-stage { padding-block: 20px; }
  #brand-story.story-enhanced .story-heading { margin-bottom: 18px; }
  #brand-story.story-enhanced .story-heading h2 { font-size: 32px; margin-block: 10px; }
  #brand-story.story-enhanced .story-copy { padding: 25px 30px 52px; }
  #brand-story.story-enhanced .story-copy h3 { font-size: clamp(27px, 2.8vw, 36px); }
  #brand-story.story-enhanced .story-kicker { margin-bottom: 15px; font-size: 10px; }
  #brand-story.story-enhanced .story-description { margin-top: 18px; font-size: 14px; line-height: 1.75; }
  #brand-story.story-enhanced .story-description + .story-description { margin-top: 12px; }
  #brand-story.story-enhanced .story-page-number { left: 30px; bottom: 18px; }
  #brand-story.story-enhanced .story-controls { margin-top: 18px; }
}
@media (max-width: 760px) {
  #brand-story .story-stage { padding-block: 60px; }
  #brand-story .story-page { grid-template-columns: 1fr; }
  #brand-story .story-copy { min-height: 330px; padding: 32px 28px 65px; }
  #brand-story .story-copy h3 { font-size: clamp(28px, 7.5vw, 42px); }
  #brand-story .story-description { max-width: 34ch; margin-top: 22px; font-size: 14px; }
  #brand-story .story-visual { min-height: 0; aspect-ratio: 1.25; }
  #brand-story .story-page-number { left: 28px; bottom: 22px; }
}
/* The portrait introduction scrolls away before the book fills the viewport.
   At rest the original photo/copy halves remain readable. During a turn only
   the inert two-sided visual leaf moves; the lower current copy stays still. */
#brand-story.story-enhanced.story-portrait .story-stage {
  min-height: 0;
  justify-content: flex-start;
  padding: 14px clamp(16px, 5vw, 30px);
}
#brand-story.story-enhanced.story-portrait .story-heading {
  height: calc(var(--story-intro-height, 100px) * (1 - var(--story-intro-progress, 0)));
  margin: 0 0 calc(12px * (1 - var(--story-intro-progress, 0)));
  transform: translateY(calc(-1 * (var(--story-intro-height, 100px) + 14px) * var(--story-intro-progress, 0)));
  overflow: visible;
}
#brand-story.story-enhanced.story-portrait:not(.story-introducing) .story-heading { visibility: hidden; }
#brand-story.story-enhanced.story-portrait .story-heading .eyebrow { font-size: 10px; line-height: 1.4; }
#brand-story.story-enhanced.story-portrait .story-heading h2 { margin: 6px 0; font-size: clamp(24px, 6vw, 28px); line-height: 1.14; }
#brand-story.story-enhanced.story-portrait .story-heading > p:last-child { font-size: 11px; line-height: 1.4; }
#brand-story.story-enhanced.story-portrait .story-book-shell {
  position: relative;
  flex: 1 1 0;
  height: auto;
  max-height: none;
  min-height: 0;
}
#brand-story.story-enhanced.story-portrait .story-book-visual {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  perspective: 1800px;
  perspective-origin: 50% 50%;
  filter: drop-shadow(0 7px 12px rgb(41 45 35 / .14));
}
#brand-story.story-enhanced.story-portrait .story-pages {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: auto;
  clip-path: none;
  border-radius: 3px;
  background: var(--story-paper);
  box-shadow: 0 3px 0 #dfd7c8, 0 7px 20px rgb(41 45 35 / .12);
}
#brand-story.story-enhanced.story-portrait.story-folding .story-pages { opacity: 0; pointer-events: none; }
#brand-story.story-enhanced.story-portrait .story-page {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  transform: none;
  box-shadow: none;
}
#brand-story.story-enhanced.story-portrait .story-page:focus-visible { outline: 3px solid var(--khaki); outline-offset: -3px; }
#brand-story.story-enhanced.story-portrait .story-visual {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  min-height: 0;
  aspect-ratio: auto;
}
#brand-story.story-enhanced.story-portrait .story-visual > img { height: 100%; object-fit: cover; object-position: center; }
#brand-story.story-enhanced.story-portrait .story-caption { inset: auto 12px 10px; max-width: calc(100% - 24px); padding: 5px 8px; font-size: 9px; line-height: 1.4; letter-spacing: .025em; }
#brand-story.story-enhanced.story-portrait .story-copy {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 50%;
  min-height: 0;
  justify-content: flex-start;
  padding: 18px 22px 20px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--khaki) var(--white);
}
#brand-story.story-enhanced.story-portrait .story-copy > * { flex-shrink: 0; }
#brand-story.story-enhanced.story-portrait .story-copy:focus-visible { outline: 3px solid var(--khaki); outline-offset: -3px; }
#brand-story.story-enhanced.story-portrait.story-introducing .story-pages .story-copy { overflow-y: hidden; }
#brand-story.story-enhanced.story-portrait .story-kicker { margin: 0 0 10px; font-size: 10px; line-height: 1.3; }
#brand-story.story-enhanced.story-portrait .story-copy h3 { font-size: clamp(25px, 7vw, 30px); line-height: 1.2; }
#brand-story.story-enhanced.story-portrait .story-description { max-width: none; margin: 12px 0 0; font-size: 13px; line-height: 1.65; }
#brand-story.story-enhanced.story-portrait .story-description + .story-description { margin-top: 8px; }
#brand-story.story-enhanced.story-portrait .story-page-number { position: static; margin-top: 16px; font-size: 10px; line-height: 1.5; }
#brand-story.story-enhanced.story-portrait .story-book-left,
#brand-story.story-enhanced.story-portrait .story-book-still { top: 50%; bottom: 0; left: 0; width: 100%; height: 50%; }
#brand-story.story-enhanced.story-portrait .story-book-right { top: 0; right: auto; left: 0; width: 100%; height: 50%; }
#brand-story.story-enhanced.story-portrait .story-book-leaf { top: 0; left: 0; width: 100%; height: 50%; transform-origin: 50% 100%; }
#brand-story.story-enhanced.story-portrait .story-book-back { transform: rotateX(180deg) translateZ(.2px); }
#brand-story.story-enhanced.story-portrait .story-book-still::after { background: linear-gradient(180deg, rgb(41 45 35 / .2), transparent 40%); }
#brand-story.story-enhanced.story-portrait .story-book-front::after { background: linear-gradient(0deg, rgb(41 45 35 / .34), rgb(255 255 255 / .13) 15%, transparent 48%, rgb(41 45 35 / .18)); }
#brand-story.story-enhanced.story-portrait .story-book-back::after { background: linear-gradient(180deg, rgb(41 45 35 / .32), rgb(255 255 255 / .25) 18%, transparent 60%); }
#brand-story.story-enhanced.story-portrait .story-book-spine { top: 50%; left: 0; width: 100%; height: 12px; transform: translateY(-50%); background: linear-gradient(180deg, transparent, rgb(41 45 35 / .14), rgb(255 255 255 / .28), transparent); }
#brand-story.story-enhanced.story-portrait .story-book-visual .story-copy,
#brand-story.story-enhanced.story-portrait .story-book-visual .story-visual { position: relative; inset: auto; width: 100%; height: 100%; }
#brand-story.story-enhanced.story-portrait .story-controls { gap: 12px; margin-top: 12px; }
#brand-story.story-enhanced.story-portrait .story-controls button { min-width: 88px; min-height: 44px; padding: 9px 13px; }
#brand-story.story-enhanced.story-portrait [data-story-current] { min-width: 52px; font-size: 10px; }

@media (prefers-reduced-motion: reduce) {
  /* CSS fails safe immediately, including while a media-query event is pending. */
  #brand-story.story-enhanced { height: auto; }
  #brand-story.story-enhanced .story-stage { position: relative; top: auto; display: block; height: auto; overflow: visible; padding-block: 60px; }
  #brand-story.story-enhanced .story-book-shell { position: static; display: block; height: auto; min-height: 0; max-height: none; }
  #brand-story.story-enhanced .story-pages { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; }
  #brand-story.story-enhanced .story-book-visual, #brand-story.story-enhanced .story-controls { display: none; }
  #brand-story.story-enhanced.story-portrait .story-stage { position: relative; top: auto; display: block; height: auto; overflow: visible; padding-block: 60px; }
  #brand-story.story-enhanced.story-portrait .story-book-shell { position: static; display: block; height: auto; min-height: 0; max-height: none; }
  #brand-story.story-enhanced.story-portrait .story-heading { height: auto; margin-bottom: 32px; transform: none; visibility: visible !important; }
  #brand-story.story-enhanced.story-portrait .story-pages { position: static; display: grid; width: auto; height: auto; overflow: visible; background: none; box-shadow: none; opacity: 1 !important; pointer-events: auto; }
  #brand-story.story-enhanced.story-portrait .story-page { position: static; display: flex; flex-direction: column; height: auto; overflow: visible; visibility: visible !important; opacity: 1 !important; transform: none !important; }
  #brand-story.story-enhanced.story-portrait .story-copy { position: relative; inset: auto; height: auto; overflow: visible; }
  #brand-story.story-enhanced.story-portrait .story-visual { position: relative; inset: auto; order: -1; height: auto; aspect-ratio: 1.25; }
  #brand-story.story-enhanced.story-portrait .story-book-visual { display: none; }
}
@media print {
  #brand-story.story-enhanced { height: auto; }
  #brand-story.story-enhanced .story-stage { position: static; height: auto; display: block; overflow: visible; padding: 20px 0; }
  #brand-story.story-enhanced .story-book-shell { position: static; display: block; height: auto; min-height: 0; max-height: none; }
  #brand-story.story-enhanced .story-pages { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; }
  #brand-story .story-book-visual, #brand-story .story-controls { display: none !important; }
  #brand-story.story-enhanced.story-portrait .story-stage { position: static; height: auto; display: block; overflow: visible; padding: 20px 0; }
  #brand-story.story-enhanced.story-portrait .story-book-shell { position: static; display: block; height: auto; min-height: 0; max-height: none; }
  #brand-story.story-enhanced.story-portrait .story-heading { height: auto; margin-bottom: 32px; transform: none; visibility: visible !important; }
  #brand-story.story-enhanced.story-portrait .story-pages { position: static; display: grid; width: auto; height: auto; overflow: visible; background: none; box-shadow: none; opacity: 1 !important; pointer-events: auto; }
  #brand-story.story-enhanced.story-portrait .story-page { position: static; display: flex; flex-direction: column; height: auto; overflow: visible; visibility: visible !important; opacity: 1 !important; transform: none !important; break-inside: avoid; }
  #brand-story.story-enhanced.story-portrait .story-copy { position: relative; inset: auto; height: auto; overflow: visible; }
  #brand-story.story-enhanced.story-portrait .story-visual { position: relative; inset: auto; order: -1; height: auto; aspect-ratio: 1.25; }
}