/* V8.13 — a visible result for the Chapter and the brand's agreed use.
   Native scrolling, tap/keyboard controls, no autoplay or scroll locks. */
html { overflow-x: clip; }
.hero-copy .hero-freedom { max-width: 32ch; margin-top: 20px; font-size: clamp(16px, 1.3vw, 20px); color: #d6bb8a; }
.chapters-section { position: relative; padding: clamp(80px, 9vw, 150px) 0; background: #151b19; color: #f4f4ef; scroll-margin-top: 90px; }
.scene-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.chapters-section h2 { max-width: 12ch; font-size: clamp(44px, 5.2vw, 80px); line-height: 1; letter-spacing: -.055em; }
.scene-eyebrow { display: block; margin-bottom: 20px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #b8f1d0; }
.chapters-section .chapter-copy p { max-width: 38ch; color: #c5cfc8; line-height: 1.55; }
.chapters-section .chapter-copy .chapter-result { color: #f4f4ef; font-size: 17px; }
.story-sequence { --scene-ink: #f4f4ef; --scene-muted: #bac5bf; --scene-line: #ffffff26; --scene-surface: #ffffff09; --scene-accent: #b8f1d0; color: var(--scene-ink); min-width: 0; border: 1px solid var(--scene-line); border-radius: 24px; padding: clamp(18px, 2.3vw, 32px); background: var(--scene-surface); }
.sequence-tabs { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-bottom: 22px; padding: 4px; border: 1px solid var(--scene-line); border-radius: 14px; }
[data-enhanced] .sequence-tabs { display: grid; }
.sequence-tabs button { min-height: 46px; padding: 9px 5px; border: 0; border-radius: 10px; background: transparent; color: var(--scene-muted); font: inherit; font-size: 13px; line-height: 1.2; cursor: pointer; }
.sequence-tabs button b { display: block; margin-bottom: 4px; font-size: 10px; letter-spacing: .1em; opacity: .7; }
.sequence-tabs button[aria-selected="true"] { background: var(--scene-accent); color: #17231c; }
.sequence-panel[hidden] { display: none !important; }
.sequence-panel { animation: scene-enter .45s ease both; }
.sequence-panel h3 { margin: 22px 0 10px; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.12; letter-spacing: -.035em; }
.sequence-panel > p { min-height: 4.6em; margin: 0; color: var(--scene-muted); font-size: 15px; line-height: 1.55; }
.sequence-art { position: relative; height: 310px; min-width: 0; }
.sequence-controls { display: none; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; }
[data-enhanced] .sequence-controls { display: flex; }
.sequence-controls button { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid var(--scene-line); border-radius: 50%; color: var(--scene-ink); background: transparent; font: inherit; font-size: 21px; cursor: pointer; }
.sequence-controls button:disabled { opacity: .3; cursor: default; }
.sequence-note { margin: 0; color: var(--scene-muted); font-size: 11px; line-height: 1.5; text-align: center; }
.story-sequence :is(button,summary):focus-visible { outline: 2px solid var(--scene-accent); outline-offset: 4px; }
.chapter-picks { display: flex; align-items: center; justify-content: center; padding: 16px; }
.chapter-picks figure { width: 35%; margin: 0 -4%; padding: 8px 8px 12px; background: #f5f0e5; box-shadow: 0 12px 30px #0003; color: #27322b; transform: rotate(var(--turn)); transition: transform .85s cubic-bezier(.16,1,.3,1); }
.chapter-picks img { width: 100%; height: 180px; object-fit: cover; border-radius: 2px; }
.chapter-picks figcaption { margin-top: 10px; font-size: 11px; text-align: center; }
.chapter-picks figure:nth-child(2) { z-index: 1; transform: translateY(-14px) rotate(var(--turn)); }
.js [data-scene-reveal]:not(.is-seen) .chapter-picks figure { transform: translateY(35px) rotate(calc(var(--turn) * 2)); }
.chapter-consent { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.chapter-consent > img { width: 160px; height: 180px; object-fit: cover; border-radius: 14px; }
.scene-approved { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid #b8f1d044; border-radius: 999px; color: var(--scene-accent); font-size: 12px; }
.scene-approved::before { content: '✓'; }
.chapter-book { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr); align-content: stretch; gap: 10px; height: 270px; margin: 20px 0; padding: 18px; border-radius: 4px; background: #f4f0e6; color: #263a31; box-shadow: 0 20px 32px #0003; transform: rotate(-2deg); }
.chapter-book::after { position: absolute; content: ''; top: 0; bottom: 0; left: 50%; width: 1px; background: #394c3226; box-shadow: 2px 0 8px #0002; }
.chapter-book .book-left { display: flex; flex-direction: column; gap: 10px; padding-right: 6px; min-width: 0; }
.chapter-book h4 { margin: 0; font-size: clamp(18px, 2vw, 27px); line-height: 1.05; letter-spacing: -.045em; }
.chapter-book small { font-size: 10px; letter-spacing: .1em; }
.chapter-book .book-left img { min-height: 0; width: 100%; flex: 1; object-fit: cover; }
.chapter-book .book-right { position: relative; min-width: 0; overflow: hidden; }
.chapter-book .book-right > img { width: 100%; height: 100%; object-fit: cover; }
.chapter-book .book-right > .book-inset { position: absolute; bottom: 9px; right: 9px; width: 35%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border: 2px solid #fff; }
.brand-sequence { --scene-ink: #17201b; --scene-muted: #54645a; --scene-line: #17201b26; --scene-surface: #fff; --scene-accent: #cae7d1; width: min(100%, 1040px); margin: 50px auto 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 24px; align-items: center; }
.brand-sequence .sequence-tabs, .brand-sequence .sequence-controls { grid-column: 1 / -1; margin: 0; }
.brand-sequence .sequence-panel { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 32px; align-items: center; }
.brand-sequence .sequence-panel h3 { margin-top: 0; }
.brand-sequence .sequence-panel p { color: var(--scene-muted); font-size: 16px; line-height: 1.5; }
.circle-mosaic { display: grid; grid-template-columns: 1fr 1.15fr; gap: 10px; padding: 10px; align-items: center; }
.circle-mosaic .mosaic-side { display: grid; gap: 10px; }
/* 21.10.: the selfie sits top left in every Dual Moment; a tighter frame cuts from the other sides. */
.circle-mosaic img, .feature-photo img, .brand-post img { object-position: left top; }
.circle-mosaic img { width: 100%; height: 115px; object-fit: cover; border-radius: 10px; }
.circle-mosaic .mosaic-main img { height: 230px; }
.circle-mosaic figure { margin: 0; transition: transform .8s cubic-bezier(.16,1,.3,1); }
.circle-mosaic figcaption { margin-top: 6px; font-size: 11px; color: #536458; }
.js [data-scene-reveal]:not(.is-seen) .circle-mosaic figure { transform: translateY(24px) rotate(-4deg); }
/* 21.10.: Lena's requested moment in its own 3:4 format, not a wide cut. */
.feature-photo { width: min(100%, 340px); aspect-ratio: 3 / 4; margin-inline: auto; padding: 12px; border-radius: 16px; background: #f0ede5; }
.feature-photo img { width: 100%; height: 100%; border-radius: 8px; object-fit: cover; }
.scene-terms { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.scene-terms li { padding: 11px 13px; border-radius: 10px; background: #f0f3ee; font-size: 14px; }
.scene-terms small { display: block; color: #69756b; margin-bottom: 3px; font-size: 11px; }
.brand-post { height: 310px; max-width: 300px; margin: 0 auto; padding: 12px; border: 1px solid #283d2920; border-radius: 16px; background: #fff; box-shadow: 0 14px 30px #263a3112; }
.brand-post strong { display: block; font-size: 12px; margin: 0 0 9px; letter-spacing: .08em; }
.brand-post img { width: 100%; height: 218px; border-radius: 7px; object-fit: cover; }
.brand-post figcaption { margin-top: 10px; font-size: 11px; line-height: 1.3; }
.badge-proof { margin: 28px 0 0; padding-top: 22px; border-top: 1px solid #ffffff26; }
.badge-proof summary { cursor: pointer; font-size: 15px; color: #e8d39a; }
.badge-proof .proof-content { display: grid; grid-template-columns: 75px minmax(0, 1fr); gap: 20px; max-width: 680px; margin-top: 24px; }
.badge-proof img { width: 75px; height: 75px; object-fit: contain; }
.badge-proof h3 { margin: 0 0 12px; font-size: 24px; letter-spacing: -.035em; }
.badge-proof p { font-size: 15px; line-height: 1.5; color: #d4dbd7; }
.badge-proof dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; font-size: 13px; }
.badge-proof dd { margin: 0; }
.badge-proof dt, .badge-proof .proof-note { color: #a9b7af; font-size: 12px; }
.br-demo { margin-top: 24px; font-size: 12px; color: #5b655d; line-height: 1.5; }
.br-demo b { display: block; color: #27362d; font-weight: 600; }
.site-footer { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }
@keyframes scene-enter { from { opacity: .3; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 950px) {
  .scene-layout { grid-template-columns: 1fr; gap: 32px; }
  .chapters-section h2 { max-width: 15ch; font-size: clamp(42px, 7vw, 64px); }
  .chapters-section .chapter-copy p { max-width: 50ch; }
  .story-sequence { width: min(100%, 600px); margin-inline: auto; }
  .brand-sequence, .brand-sequence .sequence-panel { grid-template-columns: 1fr; gap: 20px; }
  .brand-sequence .sequence-panel h3 { margin-top: 2px; }
  .sequence-art { height: 270px; }
  .circle-mosaic img { height: 100px; }
  .circle-mosaic .mosaic-main img { height: 205px; }
  .brand-post { height: 270px; }
  .feature-photo { width: min(100%, 260px); }
  .brand-post img { height: 178px; }
  .chapter-book { height: 235px; margin-block: 16px; }
}
@media (max-width: 480px) {
  .hero-pin { min-height: 870px; align-items: flex-start; }
  .hero-copy .hero-freedom { margin-top: 12px; font-size: 15px; }
  .chapters-section { padding: 70px 0; }
  .story-sequence { padding: 15px; border-radius: 18px; }
  .sequence-tabs { gap: 2px; margin-bottom: 14px; }
  .sequence-tabs button { font-size: 11px; }
  .sequence-art { height: 240px; }
  .circle-mosaic img { height: 86px; }
  .circle-mosaic .mosaic-main img { height: 180px; }
  .chapter-picks { padding: 4px; }
  .chapter-picks figure { padding: 6px 6px 10px; width: 39%; }
  .chapter-picks img { height: 150px; }
  .chapter-picks figcaption { font-size: 10px; }
  .chapter-book { height: 215px; padding: 12px; gap: 8px; margin-block: 12px; }
  .chapter-book h4 { font-size: 20px; }
  .sequence-panel > p { min-height: 0; }
  .sequence-panel h3 { font-size: 24px; }
  .badge-proof .proof-content { grid-template-columns: 48px minmax(0,1fr); gap: 14px; }
  .badge-proof img { width: 48px; height: 48px; }
  .badge-proof dl { grid-template-columns: 1fr; gap: 4px; }
  .badge-proof dd { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .sequence-panel { animation: none; }
  .chapter-picks figure, .circle-mosaic figure { transition: none; }
}

/* V8.14 — choice and reciprocity, after the concrete experience. */
.offer-fair { font-weight: 650; }
.values-section { padding: clamp(80px, 9vw, 140px) 0; background: #eeeee6; color: #17271f; }
.values-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 70px; align-items: start; }
.values-section .scene-eyebrow { color: #456a50; }
.values-section h2 { max-width: 14ch; font-size: clamp(42px, 5vw, 74px); letter-spacing: -.055em; line-height: 1.02; }
.values-lead { margin-top: 0; max-width: 48ch; font-size: clamp(21px, 2vw, 28px); line-height: 1.35; }
.values-body { max-width: 60ch; font-size: 17px; line-height: 1.6; opacity: .8; }
.values-built { margin-top: 25px; font-weight: 650; font-size: 16px; }
.values-proof { grid-column: 1 / -1; border-top: 1px solid #71867460; padding-top: 22px; }
.values-proof summary { cursor: pointer; font-size: 16px; font-weight: 600; }
.values-proof summary:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.values-proof-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px; padding-top: 24px; }
.values-proof-grid h3 { margin: 0 0 10px; font-size: 22px; letter-spacing: -.03em; }
.values-proof-grid p { margin: 0; font-size: 15px; line-height: 1.55; opacity: .8; }
.values-intro { max-width: 1000px; margin: 0 0 44px; }
.values-intro .values-lead { max-width: 45ch; }
.values-intro .values-proof { margin-top: 30px; }
#chapter-panel-2 > p { min-height: 0; }
.memory-formats { margin-top: 24px; }
.format-tabs { display: none; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin-bottom: 20px; }
[data-formats][data-enhanced] .format-tabs { display: grid; }
.format-tabs button { min-height: 44px; padding: 9px 5px; border-radius: 10px; border: 1px solid #ffffff40; background: transparent; color: #e5eee7; font: inherit; font-size: 13px; cursor: pointer; }
.format-tabs button[aria-selected="true"] { color: #183023; background: #b8f1d0; border-color: #b8f1d0; }
[data-format-panel][hidden] { display: none !important; }
[data-format-panel] > p { min-height: 3em; margin: 18px 0 0; font-size: 15px; line-height: 1.5; color: #c5cfc8; }
.format-picture { position: relative; width: min(75%, 260px); height: 270px; margin: 0 auto; padding: 10px; border-radius: 6px; background: #f6f1e7; transform: rotate(-3deg); }
.format-picture > img { width: 100%; height: 100%; object-fit: cover; }
.format-picture > .format-inset { position: absolute; right: 18px; bottom: 18px; width: 29%; height: 30%; border: 2px solid #fff; border-radius: 4px; }
.format-collage { display: grid; grid-template-columns: 1.1fr 1fr; grid-template-rows: 1fr 1fr; gap: 7px; height: 270px; padding: 10px; background: #f5f1e7; transform: rotate(2deg); }
.format-collage img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.format-collage img:first-child { grid-row: 1 / -1; }
[data-format-panel] > .format-planned { min-height: 0; margin-top: 8px; }
.format-planned > span { display: inline-block; margin-right: 7px; color: #f0d69e; font-size: 12px; }
.format-planned small { font-size: 11px; }
.badge-filters { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 18px; }
.badge-filters button { min-height: 44px; padding: 8px 12px; border: 1px solid #64746660; border-radius: 24px; background: transparent; color: inherit; font: inherit; font-size: 12px; cursor: pointer; }
.badge-filters button[aria-pressed="true"] { background: #183b2b; border-color: #183b2b; color: #fff; }
.badge-filters button:focus-visible { outline: 2px solid #456a50; outline-offset: 3px; }
.pc-campaigns > p { margin: 0; }
.filter-status { margin: 10px 0 5px; font-size: 12px; font-weight: 600; }
.filter-hint { margin: 0; font-size: 12px; line-height: 1.5; opacity: .7; }
@media (max-width: 950px) {
 .values-layout { grid-template-columns: 1fr; gap: 30px; }
 .values-proof-grid { grid-template-columns: 1fr; gap: 24px; }
 .values-section h2 { max-width: 16ch; }
}
@media (max-width: 480px) {
 .values-body { font-size: 16px; }
 .format-picture, .format-collage { height: 230px; }
 .format-tabs button { font-size: 12px; }
}

.chapter-book > div { min-height: 0; }