/* =========================================================================
   POLYMATH BALI — Archival Folder System
   Shared styles for the landing page and all sub-pages.
   =========================================================================
   Palette, typography and the paper/grain texture live here so every page
   stays visually identical. Page-specific bits (folder layout, sub-page
   stacks) are grouped further down and clearly labelled.
   ========================================================================= */

/* ---- 1. Design tokens ------------------------------------------------- */
:root {
  /* Earthy archival palette */
  --bone:        #E7E0D0;   /* bone-white paper            */
  --bone-2:      #DAD1BE;   /* slightly deeper paper       */
  --olive:       #6E6B45;   /* olive / khaki green         */
  --brown:       #7C5F44;   /* warm brown                  */
  --slate:       #5E6B72;   /* slate blue-grey             */
  --ink:         #1B1915;   /* near-black ink              */
  --ink-soft:    #3A362E;

  /* Per-folder accent colours (also reused as sub-page accents) */
  --c1: #6E6B45;            /* THE SITUATION  — olive      */
  --c2: #7C5F44;            /* THE ASSET      — brown      */
  --c3: #45524F;            /* INTELLIGENCE   — deep teal  */
  --c4: #5E6B72;            /* THE INVESTMENT — slate      */
  --c5: #2A2723;            /* THE SUCCESS    — near-black */

  --tab-h: 260px;           /* how tall a folder tab reads */
  --ease:  cubic-bezier(0.22, 0.61, 0.36, 1); /* smooth ease-out */
}

/* ---- 2. Reset & base -------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* html keeps a height reference; body must be free to GROW with content so
   sub-page bottom padding sits under the content (not trapped at 100vh).
   The landing page re-fixes its own height via .landing. */
html { height: 100%; }
body { min-height: 100vh; }

body {
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  color: var(--ink);
  background-color: #cfc7b3;
  /* Layered paper: soft vignette + repeating fibre lines */
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.35), transparent 60%),
    linear-gradient(180deg, #d3cbb7, #c3baa4);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Fine grain/noise overlay — a tiny SVG turbulence tiled across the page.
   Sits above the background but ignores pointer events. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Shared mono + condensed type helpers */
.mono {
  font-family: 'Space Mono', 'Courier New', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.condensed {
  font-family: 'Archivo', sans-serif;
  font-stretch: 75%;         /* Archivo is a variable width font */
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* =========================================================================
   3. LANDING PAGE
   ========================================================================= */

.landing {
  height: 100vh;
  overflow: hidden;          /* no scroll on the landing */
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* ---- Logo ---- */
.logo {
  margin-top: clamp(22px, 5vh, 56px);
  margin-bottom: clamp(16px, 3.5vh, 40px);
  text-align: center;
  flex: 0 0 auto;
}
.logo img {
  /* Transparent, pre-cropped stamp (background removed) — size by height. */
  height: clamp(120px, 20vh, 190px);
  width: auto;
  display: block;
  margin: 0 auto;
  /* Deepen the terracotta into a browner / darker red. */
  filter: brightness(0.62) saturate(1.05) contrast(1.15) sepia(0.12);
}
/* Fallback wordmark if the image is swapped out / missing */
.logo .logo-fallback {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-stretch: 75%;
  letter-spacing: 0.32em;
  font-size: clamp(20px, 3vw, 30px);
  color: var(--ink);
  text-transform: uppercase;
}

/* ---- Folder stack ---- */
/* The stack is a fixed-height row. Each folder is absolutely placed and
   offset horizontally so only its left strip + vertical tab shows, exactly
   like files standing in a drawer. */
.stack {
  position: relative;
  flex: 1 1 auto;
  width: min(1100px, 92vw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stack-inner {
  position: relative;
  width: 100%;
  height: min(60vh, 560px);
}

/* A single folder = a tall vertical panel */
.folder {
  position: absolute;
  top: 0;
  height: 100%;
  width: 300px;
  border-radius: 10px 4px 4px 10px;   /* open edge (left) rounded, fold edge (right) square */
  background: var(--bone);
  /* The shadow is a drop-shadow FILTER (not box-shadow) so it traces the whole
     folder silhouette — body + protruding tab — as one continuous outline.
     That means the tab has no seam where it joins the body; only the outer
     contour is shaded, and it casts onto the folder cascading behind it. */
  filter:
    drop-shadow(6px 5px 10px rgba(0,0,0,0.20))
    drop-shadow(0 3px 6px rgba(0,0,0,0.10));
  cursor: pointer;
  /* Transform is the only thing that moves the folder, and it's GPU-cheap so
     the slide stays smooth. Promoting the folder to its own compositor layer
     (translateZ + will-change) is what removes the previous hover jank. */
  transition: transform 280ms var(--ease), filter 280ms var(--ease);
  transform: translateZ(0);          /* resting state, own compositor layer */
  will-change: transform;
  backface-visibility: hidden;
  /* NB: no overflow:hidden — the tab flap needs to extend past the body. */
}

/* Polymath icon watermark across the whole folder front, barely-there. */
.folder::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("polymath_icon.png") center / 82% auto no-repeat;
  opacity: 0.07;
  border-radius: inherit;
  pointer-events: none;
}

/* Coloured spine down the right edge (the fold), beside the title, so it
   shows in each folder's right-hand strip. */
.folder::after {
  content: "";
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 10px;
  background: var(--accent);
  border-radius: 0 4px 4px 0;
}


/* The vertical text stack on the right strip: bold TITLE at the top and the
   small code label at the bottom, both reading bottom-to-top. */
.folder .tab {
  position: absolute;
  right: 34px;                 /* right strip, clear of the accent spine */
  top: 44px;
  bottom: 36px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);   /* so text reads bottom-up */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;  /* title top, code bottom */
}
.folder .tab .code {
  font-family: 'Space Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: var(--accent);
  text-transform: uppercase;
  white-space: nowrap;
}
.folder .tab .title {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-stretch: 75%;
  /* All folders share this value so titles read alike. */
  font-size: clamp(22px, 3.1vh, 32px);
  line-height: 0.9;
  color: var(--ink);
  text-transform: uppercase;
  white-space: nowrap;
}

/* The folder's descriptive note on the left face — a short line summarising
   what the chapter covers. Only fully seen on the front folder and on hover. */
.folder .note {
  position: absolute;
  left: 44px;
  bottom: 74px;
  width: 230px;
  text-align: left;
  pointer-events: none;
  /* Revealed content: hidden while the folder is buried in the stack, shown
     on the fully-open front folder and whenever a folder is hovered. */
  opacity: 0;
  transition: opacity 220ms var(--ease);
}
.folder:hover .note,
.folder[data-i="0"] .note {   /* data-i=0 is the front (fully visible) folder */
  opacity: 1;
}
.folder .note .note-text {
  display: block;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.folder .note .note-tag {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(27,25,21,0.5);
}
/* A rotated "FILED" stamp on the top-left of the face */
.folder .stamp {
  position: absolute;
  left: 34px;
  top: 34px;
  transform: rotate(-8deg);
  border: 2px solid var(--accent);
  color: var(--accent);
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 3px;
  opacity: 0.75;
  pointer-events: none;
}

/* A faint index number in the bottom-left corner of each folder */
.folder .idx {
  position: absolute;
  left: 44px;
  bottom: 40px;
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  color: rgba(27,25,21,0.4);
  letter-spacing: 0.1em;
}

/* HOVER: lift the folder upward so more of it shows and it sits above the
   rest of the stack. Only the hovered folder moves. */
.folder:hover {
  transform: translateY(-46px) translateZ(0);
  filter:
    drop-shadow(10px 12px 20px rgba(0,0,0,0.28))
    drop-shadow(0 8px 16px rgba(0,0,0,0.18));
}

/* CLICK: the "pull out" — slide fully up and fade. Added by JS, then we
   navigate once the transition ends. */
.folder.pulling {
  transform: translateY(-120%) scale(1.04);
  opacity: 0;
  transition: transform 620ms var(--ease), opacity 620ms var(--ease);
  z-index: 999 !important;
}

/* Per-folder accent + horizontal offset. The stack is centred, so we push
   each folder rightward from a shared start point. z-index rises left→right
   so each folder overlaps the previous one (drawer effect). */
.folder[data-i="0"] { --accent: var(--c1); }
.folder[data-i="1"] { --accent: var(--c2); }
.folder[data-i="2"] { --accent: var(--c3); }
.folder[data-i="3"] { --accent: var(--c4); }
.folder[data-i="4"] { --accent: var(--c5); }

/* =========================================================================
   4. SUB-PAGES  (scroll-only "PDF" stacks)
   ========================================================================= */

.subpage {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  /* Background space below the folder-nav so the buttons never sit at the very
     bottom edge of the page. */
  padding: 0 0 clamp(110px, 15vh, 180px);
}

/* Sticky chapter header bar with the code label + back link */
.chapter-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px clamp(16px, 5vw, 60px);
  background: rgba(20,18,15,0.90);
  backdrop-filter: blur(6px);
  color: var(--bone);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.chapter-bar .code {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sub-accent, var(--bone));
}
.chapter-bar .chapter-title {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-stretch: 75%;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(15px, 2.4vw, 22px);
}
.back-link {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bone);
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.35);
  padding: 7px 12px;
  border-radius: 4px;
  transition: background 200ms var(--ease), color 200ms var(--ease);
  white-space: nowrap;
}
.back-link:hover { background: var(--bone); color: var(--ink); }

/* Small screens: the bar stacks (title row + wrapped tab rows), stops being
   sticky so it doesn't eat the short viewport, and drops the back link
   because the "Investor archive" tab already leads home. */
@media (max-width: 700px) {
  .chapter-bar {
    position: static;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .chapter-bar .back-link { display: none; }
  .chapter-bar .site-tabs { width: 100%; gap: 8px; }
  .chapter-bar .site-tabs a { font-size: 10px; padding: 6px 9px; letter-spacing: 0.08em; }
}

/* A big chapter intro block below the bar */
.chapter-hero {
  max-width: min(1240px, 94vw);   /* matches the wider .pages column */
  margin: clamp(40px, 8vh, 90px) auto clamp(30px, 6vh, 60px);
  padding: 0 clamp(20px, 5vw, 40px);
}
.chapter-hero .kicker {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sub-accent);
  margin-bottom: 14px;
}
.chapter-hero h1 {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-stretch: 75%;
  text-transform: uppercase;
  font-size: clamp(42px, 9vw, 96px);
  line-height: 0.92;
  color: var(--ink);
}
/* Small archivist's note under the title, explaining the page */
.chapter-hero .lede {
  margin-top: 20px;
  max-width: 600px;
  font-family: 'Space Mono', monospace;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* The stacked "pages" — each is a paper card with an image + text block.
   Wide column: content spreads out, so sections run shorter. */
.pages {
  max-width: min(1240px, 94vw);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 36px);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 5vh, 54px);
}

/* A document image (text baked in) mounted inside a matted frame, sitting
   within the archival section card. */
.doc-frame {
  margin: 22px clamp(20px, 4vw, 36px) 6px;
  padding: clamp(20px, 4vw, 40px);
  background: var(--bone-2);
  border: 1px solid rgba(27,25,21,0.16);
  border-radius: 4px;
  /* centre the smaller plate so there's a generous mat around it */
  display: flex;
  justify-content: center;
  /* faint corner ticks give it a "mounted plate" feel */
  background-image:
    linear-gradient(var(--sub-accent), var(--sub-accent)),
    linear-gradient(var(--sub-accent), var(--sub-accent)),
    linear-gradient(var(--sub-accent), var(--sub-accent)),
    linear-gradient(var(--sub-accent), var(--sub-accent));
  background-repeat: no-repeat;
  background-size: 14px 1px, 1px 14px, 14px 1px, 1px 14px;
  background-position: 10px 10px, 10px 10px, calc(100% - 10px) calc(100% - 10px), calc(100% - 10px) calc(100% - 10px);
}
/* flush plate: no inner mat, the sheet itself is the only frame */
.doc-frame.plate-flush {
  margin: 0;
  padding: 0;
  background: none;
  background-image: none;
  border: none;
  border-radius: 0;
}
.doc-frame.plate-flush img {
  max-width: none;
  border: none;
  box-shadow: none;
}

.doc-frame img {
  display: block;
  width: 100%;
  max-width: 360px;          /* smaller mounted plate, not full width */
  height: auto;
  border: 1px solid rgba(27,25,21,0.12);
  box-shadow: 0 6px 18px rgba(0,0,0,0.14);
  cursor: zoom-in;           /* signals the paper is clickable to enlarge */
  transition: box-shadow 220ms var(--ease), transform 220ms var(--ease);
}
.doc-frame img:hover {
  box-shadow: 0 10px 26px rgba(0,0,0,0.22);
  transform: translateY(-2px);
}
/* Caption row under the image — text outside the picture, inside the frame */
.doc-caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px clamp(20px, 4vw, 36px) 30px;
}
.doc-caption .doc-caption-title {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-stretch: 80%;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(18px, 2.4vw, 25px);
  color: var(--ink);
}
.doc-caption .doc-caption-note {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(27,25,21,0.5);
  white-space: nowrap;
}

/* -------- Lightbox: click a document to enlarge it on the same screen ----- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 5vh, 56px);
  overflow-y: auto;
  background: rgba(20, 18, 15, 0.84);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  cursor: zoom-out;
  /* animated in/out in the same easing as the folders */
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms var(--ease), visibility 300ms var(--ease);
}
.lightbox.open { opacity: 1; visibility: visible; }

/* faint grain over the overlay for the archival vibe */
.lightbox::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.lightbox img {
  max-width: min(760px, 94vw);
  max-height: 90vh;
  width: auto;
  height: auto;
  margin: auto;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
  cursor: default;
  /* enlarge animation: rises and scales in */
  transform: scale(0.94) translateY(12px);
  opacity: 0;
  transition: transform 360ms var(--ease), opacity 360ms var(--ease);
}
.lightbox.open img { transform: scale(1) translateY(0); opacity: 1; }

/* Exit button, top-right, archival mono style */
.lightbox-close {
  position: fixed;
  top: clamp(16px, 3vh, 28px);
  right: clamp(16px, 4vw, 40px);
  z-index: 2;
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone);
  background: rgba(20, 18, 15, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 9px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 200ms var(--ease), color 200ms var(--ease);
}
.lightbox-close:hover { background: var(--bone); color: var(--ink); }

/* Prev / Next arrows + counter — only shown for multi-image galleries */
.lightbox-nav,
.lightbox-counter { display: none; }
.lightbox.has-nav .lightbox-nav { display: flex; }
.lightbox.has-nav .lightbox-counter { display: flex; }

.lightbox-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  font-family: 'Space Mono', monospace;
  font-size: 19px;
  color: var(--bone);
  background: rgba(20, 18, 15, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  cursor: pointer;
  transition: background 200ms var(--ease), color 200ms var(--ease);
}
.lightbox-nav:hover { background: var(--bone); color: var(--ink); }
.lightbox-prev { left: clamp(10px, 3vw, 30px); }
.lightbox-next { right: clamp(10px, 3vw, 30px); }

.lightbox-counter {
  position: fixed;
  bottom: clamp(16px, 3vh, 26px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  align-items: center;
  justify-content: center;
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--bone);
  background: rgba(20, 18, 15, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 6px 13px;
  border-radius: 4px;
}

.sheet {
  background: var(--bone);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 6px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.14);
  overflow: hidden;
  position: relative;
}
/* Coloured rule along the top of each sheet */
.sheet::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--sub-accent);
}

.sheet .sheet-head {
  display: flex;
  justify-content: space-between;
  padding: 20px clamp(20px, 4vw, 36px) 0;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(27,25,21,0.55);
}
/* Small screens: the two head labels stack instead of wrapping into each
   other mid-line. */
@media (max-width: 640px) {
  .sheet .sheet-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}

/* IMAGE_PLACEHOLDER — swap the inner element for a real <img> later */
.image-placeholder {
  margin: 18px clamp(20px, 4vw, 36px);
  aspect-ratio: 16 / 9;
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,0.05) 0 12px, rgba(0,0,0,0.02) 12px 24px),
    var(--bone-2);
  border: 1px dashed rgba(27,25,21,0.35);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: rgba(27,25,21,0.5);
  text-transform: uppercase;
}

/* A real image filling a section (replaces the IMAGE_PLACEHOLDER) */
.sheet .section-img {
  display: block;
  width: auto;
  max-width: calc(100% - 2 * clamp(20px, 4vw, 36px));
  margin: 18px clamp(20px, 4vw, 36px);
  height: auto;
  border-radius: 4px;
  border: 1px solid rgba(27,25,21,0.12);
  box-shadow: 0 6px 18px rgba(0,0,0,0.14);
}

/* Moodboard collage shown at its exact layout, with a transparent clickable
   zone positioned over each photo (percentages measured from the collage). */
.moodboard {
  position: relative;
  margin: 18px clamp(20px, 4vw, 36px);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(27,25,21,0.10);
  box-shadow: 0 6px 18px rgba(0,0,0,0.14);
}
.moodboard > img {
  display: block;
  width: 100%;
  height: auto;
}
.mb-hotspot {
  position: absolute;
  cursor: zoom-in;              /* signals click-to-enlarge */
}
.mb-hotspot::after {           /* subtle highlight of the photo you'll open */
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 15, 0);
  box-shadow: inset 0 0 0 0 rgba(247, 243, 233, 0);
  transition: background 200ms var(--ease), box-shadow 200ms var(--ease);
}
.mb-hotspot:hover::after {
  background: rgba(20, 18, 15, 0.14);
  box-shadow: inset 0 0 0 2px rgba(247, 243, 233, 0.55);
}

/* -------- Folder navigation (previous / next chapter) ------------------- */
.folder-nav {
  /* Full width so the two buttons sit in the page's bottom corners. */
  margin: clamp(46px, 8vh, 84px) 0 0;
  padding: 0 clamp(20px, 5vw, 60px);
  display: flex;
  gap: 16px;
}
/* Next button hugs the right corner; if a page has only a Next (or only a
   Previous) button, this keeps each on its correct side. */
.folder-nav-btn.fn-right { margin-left: auto; }
.folder-nav-btn {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 14px;          /* smaller, more minimal */
  text-decoration: none;
  background: var(--bone);
  border: 1px solid rgba(27, 25, 21, 0.22);
  border-radius: 5px;
  transition: background 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease);
}
.folder-nav-btn:hover {
  background: var(--bone-2);
  border-color: rgba(27, 25, 21, 0.45);
  transform: translateY(-2px);
}
.folder-nav-btn.fn-right { text-align: right; align-items: flex-end; }
/* folder name + number: small, not bold, sits ABOVE */
.folder-nav-btn .fn-name {
  order: 1;
  font-family: 'Space Mono', monospace;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sub-accent);
}
/* direction: bold + larger, sits BELOW */
.folder-nav-btn .fn-dir {
  order: 2;
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-stretch: 80%;
  font-size: 15px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
}
@media (max-width: 520px) {
  .folder-nav-btn { padding: 7px 12px; }
}

/* -------- Section 02: typed spec-sheet document (monospace) -------------- */
.spec-doc {
  padding: clamp(34px, 5vw, 62px) clamp(28px, 5vw, 64px) clamp(44px, 6vw, 70px);
  font-family: 'Space Mono', monospace;
  color: var(--ink-soft);
}
.spec-logo {
  display: block;
  width: 72px;
  height: auto;
  margin-bottom: 26px;
}
.spec-title {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: clamp(19px, 2.6vw, 25px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 30px;
}
.spec-meta {
  font-family: 'Space Mono', monospace;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.spec-rule {
  border: none;
  border-top: 1px solid rgba(27, 25, 21, 0.45);
  width: min(560px, 100%);
  margin: 26px 0;
}
.spec-list { margin: 0; }
.spec-row {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 8px 18px;
  margin-bottom: 22px;
}
.spec-row dt {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--ink);
}
.spec-row dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.spec-close {
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink-soft);
  margin-top: 4px;
}
@media (max-width: 560px) {
  .spec-row { grid-template-columns: 1fr; gap: 3px; }
  .spec-row dt { margin-bottom: 2px; }
}

/* TEXT_PLACEHOLDER */
.text-placeholder {
  padding: 6px clamp(20px, 4vw, 36px) 34px;
}
.text-placeholder h2 {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-stretch: 80%;
  text-transform: uppercase;
  font-size: clamp(20px, 3vw, 28px);
  margin-bottom: 12px;
  color: var(--ink);
}
.text-placeholder p {
  font-family: 'Space Mono', monospace;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: none;   /* fill the section width — longer lines */
}
.text-placeholder p + p { margin-top: 14px; }
.text-placeholder strong {
  color: var(--sub-accent);   /* make the statistics pop in the chapter accent */
  font-weight: 700;
}
.text-placeholder em {
  font-style: italic;
  color: var(--ink);
}
/* Faux "lorem" lines so the placeholder reads like body copy */
.text-placeholder .lines span {
  display: block;
  height: 10px;
  background: rgba(27,25,21,0.10);
  border-radius: 3px;
  margin-top: 10px;
}
.text-placeholder .lines span:nth-child(1) { width: 96%; }
.text-placeholder .lines span:nth-child(2) { width: 88%; }
.text-placeholder .lines span:nth-child(3) { width: 92%; }
.text-placeholder .lines span:nth-child(4) { width: 60%; }

/* =========================================================================
   5. RESPONSIVE
   ========================================================================= */

/* On narrow screens the drawer metaphor breaks down, so the folders become
   a simple vertical list of tabs the user can tap. Handled together with JS
   which disables the absolute offsets below this width. */
@media (max-width: 720px) {
  .stack-inner { height: auto; }

  .stack {
    align-items: stretch;
  }

  .folder {
    position: relative !important;
    left: 0 !important;
    width: 100% !important;
    height: 84px;
    margin-bottom: 12px;
    border-radius: 6px;
    z-index: auto !important;
  }
  /* On mobile the folders are horizontal bars: show the title + code
     horizontally, always visible. */
  .folder .tab {
    writing-mode: horizontal-tb;
    transform: none;
    left: 26px;
    right: auto;
    top: 0; bottom: 0;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
  }
  .folder .tab .title { font-size: 26px; }
  .folder .idx { left: auto; right: 20px; top: 10px; bottom: auto; }
  /* The FILED stamp and note are desktop-only reveal details */
  .folder .stamp, .folder .note { display: none; }

  /* On mobile, "lift" reads as a small slide right instead of up */
  .folder:hover { transform: translateX(8px); }
  .folder.pulling {
    transform: translateX(110%);
    opacity: 0;
  }

  .stack-inner {
    display: flex;
    flex-direction: column;
    padding-bottom: 30px;
  }
  .landing { overflow-y: auto; height: auto; min-height: 100vh; }
}

/* =========================================================================
   6. THE LOCATION (folder 03) — chapters, market table, map, calculator
   ========================================================================= */

/* ---- Chapter divider (Bali / Munduk) ---- */
.chapter-divider {
  max-width: min(1240px, 94vw);
  margin: clamp(54px, 9vh, 104px) auto clamp(22px, 4vh, 42px);
  padding: 0 clamp(16px, 5vw, 40px);
}
.chapter-divider:first-child { margin-top: clamp(18px, 3vh, 34px); }
.chapter-divider .cd-kicker {
  font-family: 'Space Mono', monospace;
  font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--sub-accent);
}
.chapter-divider .cd-title {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-stretch: 75%;
  text-transform: uppercase; font-size: clamp(42px, 8vw, 82px); line-height: 0.95;
  color: var(--ink); margin: 4px 0 12px;
}
.chapter-divider .cd-sub {
  font-family: 'Space Mono', monospace; font-size: 13px; line-height: 1.6;
  color: var(--ink-soft); max-width: 60ch;
  border-top: 1px solid rgba(27,25,21,0.22); padding-top: 14px;
}

/* ---- Bali facts list ---- */
.loc-list {
  list-style: none; margin: 2px 0 24px; padding: 0;
  font-family: 'Space Mono', monospace; font-size: 14px; line-height: 1.95; color: var(--ink);
}
.loc-list li { position: relative; padding-left: 20px; font-weight: 700; }
.loc-list li::before { content: "•"; position: absolute; left: 3px; }

/* ---- Market comparison table (salmon, like the reference) ---- */
.loc-table {
  border-collapse: separate; border-spacing: 4px;
  width: 100%; margin: 2px 0 6px;
  font-family: 'Space Mono', monospace; font-size: 13px;
}
.loc-table th, .loc-table td {
  background: #d9b6ab; color: var(--ink); text-align: left; font-weight: 400;
  padding: 7px 12px; border-radius: 2px; white-space: nowrap;
}
.loc-table thead th { background: #c99a8d; }
.loc-table tbody td:first-child { font-weight: 700; }
.spec-meta.loc-gap { margin-top: 16px; color: var(--ink); }
@media (max-width: 560px) {
  .loc-table { font-size: 11px; border-spacing: 3px; }
  .loc-table th, .loc-table td { padding: 5px 7px; white-space: normal; }
}

/* ---- Indonesia map: full illustration under the text, bleeding off the
   sides and flush with the bottom edge of the section (no blank space). ---- */
.loc-map {
  margin-top: clamp(22px, 3.5vw, 38px);
  padding-bottom: clamp(18px, 3vw, 30px);
  line-height: 0;
}
.loc-map img {
  display: block;
  width: min(840px, 86%);           /* smaller, centred illustration */
  height: auto;
  margin: 0 auto;
  /* islands carry 40% alpha baked into the PNG; Bali + marker stay full */
  /* the archipelago dissolves at the sides instead of cutting off hard */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}

/* ---- Interactive return model (sliders) ---- */
.calc { padding: clamp(30px, 5vw, 56px) clamp(24px, 5vw, 60px) clamp(32px, 5vw, 54px); }
.calc-kicker {
  font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--sub-accent);
}
.calc-head h2 {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-stretch: 78%;
  text-transform: uppercase; font-size: clamp(24px, 3.4vw, 36px); line-height: 1.0;
  color: var(--ink); margin: 8px 0 10px;
}
.calc-head p {
  font-family: 'Space Mono', monospace; font-size: 13px; line-height: 1.6;
  color: var(--ink-soft); max-width: 82ch;
}
.calc-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 4vw, 52px);
  margin-top: 30px; align-items: start;
}
@media (max-width: 680px) { .calc-grid { grid-template-columns: 1fr; gap: 30px; } }

.calc-field { display: block; margin-bottom: 24px; }
.calc-field:last-child { margin-bottom: 0; }
.calc-field .cf-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.cf-name { font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.calc-field output { font-family: 'Archivo', sans-serif; font-weight: 800; font-stretch: 80%; font-size: 18px; color: var(--sub-accent); }

.calc-field input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 3px; outline: none; cursor: pointer;
  background: linear-gradient(to right,
    var(--sub-accent) 0 var(--fill, 50%), rgba(27,25,21,0.16) var(--fill, 50%) 100%);
}
.calc-field input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--bone); border: 2px solid var(--sub-accent); cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.calc-field input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--bone); border: 2px solid var(--sub-accent); cursor: pointer;
}

.calc-results { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.calc-metric {
  background: var(--bone-2); border: 1px solid rgba(27,25,21,0.12); border-radius: 6px;
  padding: 15px 18px; display: flex; flex-direction: column; gap: 7px;
}
.calc-metric.big { border-color: var(--sub-accent); }
.cm-label { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(27,25,21,0.55); }
.cm-value { font-family: 'Archivo', sans-serif; font-weight: 800; font-stretch: 80%; font-size: clamp(20px, 2.6vw, 26px); color: var(--ink); }
.calc-metric.big .cm-value { color: var(--sub-accent); font-size: clamp(24px, 3vw, 32px); }
.calc-note { margin-top: 24px; font-family: 'Space Mono', monospace; font-size: 11px; line-height: 1.6; color: rgba(27,25,21,0.5); max-width: 100ch; }

/* ---- Playful chapter mark, folder-1 "observation" style:
   Chapter 0X / dashed rule / name (small mono) ---- */
.chapter-mark {
  font-family: 'Space Mono', monospace;
  margin-bottom: 26px;
}
.chapter-mark .cm-num {
  display: block;
  font-size: 15px; letter-spacing: 0.04em; color: var(--ink);
}
.chapter-mark .cm-rule {
  display: block;
  width: clamp(180px, 42%, 250px);
  border-top: 1px dashed rgba(27,25,21,0.55);
  margin: 8px 0;
}
.chapter-mark .cm-name {
  display: block;
  font-size: 15px; letter-spacing: 0.04em; color: var(--ink);
}

/* Shorter section 1 — tighter, smaller document */
.loc-sheet .spec-doc { padding: clamp(24px, 4vw, 42px) clamp(24px, 5vw, 54px) clamp(14px, 2.5vw, 22px); }
.loc-sheet .spec-title { font-size: clamp(18px, 2.4vw, 23px); margin-bottom: 14px; }
.loc-sheet .spec-meta { font-size: 13px; line-height: 1.55; }
.loc-sheet .spec-rule { margin: clamp(26px, 3.5vw, 38px) 0; width: 100%; }
.loc-sheet .loc-list { margin: 2px 0 14px; line-height: 1.6; font-size: 13px; }
.loc-sheet .loc-list li { padding-left: 18px; }

/* section header (kicker + big title + lede) */
.loc-head { margin-bottom: clamp(20px, 3vw, 30px); }
.loc-head .calc-kicker { display: block; margin-bottom: 4px; }
.wb-head.loc-head p { max-width: none; }   /* the lede runs full width, one line */

/* the island facts as stat cards */
.fact-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.fact {
  background: var(--bone-2);
  border: 1px solid rgba(27, 25, 21, 0.12);
  border-top: 3px solid var(--sub-accent);
  border-radius: 6px;
  padding: 14px 15px 13px;
  display: flex; flex-direction: column; gap: 6px;
}
.fact-v {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-stretch: 80%;
  font-size: clamp(19px, 2.2vw, 26px); line-height: 1;
  color: var(--ink);
}
.fact-l {
  font-family: 'Space Mono', monospace; font-size: 9.5px; line-height: 1.55;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(27, 25, 21, 0.55);
}
@media (max-width: 980px) { .fact-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .fact-grid { grid-template-columns: 1fr 1fr; } }
.loc-sheet .loc-table { font-size: 12px; margin: 2px 0 4px; }
.loc-sheet .loc-table th, .loc-sheet .loc-table td { padding: 5px 10px; }
.loc-sheet .spec-meta.loc-gap { margin-top: 12px; }

/* ---- "Why Bali" interactive comparison ---- */
.whybali { padding: clamp(30px, 5vw, 56px) clamp(24px, 5vw, 60px) clamp(32px, 5vw, 52px); }
.wb-head h2 {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-stretch: 78%;
  text-transform: uppercase; font-size: clamp(24px, 3.4vw, 36px); line-height: 1;
  color: var(--ink); margin: 8px 0 10px;
}
.wb-head p {
  font-family: 'Space Mono', monospace; font-size: 13px; line-height: 1.6;
  color: var(--ink-soft); max-width: 82ch;
}
.wb-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 28px; }
.wb-tab {
  font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-soft);
  padding: 8px 15px; border: 1px solid rgba(27,25,21,0.22); border-radius: 20px;
  background: var(--bone); cursor: pointer;
  transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
}
.wb-tab:hover { border-color: var(--sub-accent); }
.wb-tab.active { background: var(--sub-accent); color: var(--bone); border-color: var(--sub-accent); }

.wb-metric { margin-bottom: 22px; }
.wb-mlabel {
  font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(27,25,21,0.55); margin-bottom: 9px;
}
.wb-row { display: flex; align-items: center; gap: 12px; margin-bottom: 7px; }
.wb-name { font-family: 'Space Mono', monospace; font-size: 12px; width: 74px; flex-shrink: 0; color: var(--ink); }
.wb-track { flex: 1; height: 16px; background: rgba(27,25,21,0.08); border-radius: 3px; overflow: hidden; }
.wb-fill { height: 100%; border-radius: 3px; width: 0; transition: width 650ms var(--ease); }
.wb-fill.bali { background: var(--sub-accent); }
.wb-fill.rival { background: rgba(27,25,21,0.32); }
.wb-val { font-family: 'Archivo', sans-serif; font-weight: 800; font-stretch: 80%; font-size: 14px; width: 74px; text-align: right; flex-shrink: 0; color: var(--ink); }

.wb-foot { display: flex; gap: 12px; margin-top: 26px; }
.wb-pb { flex: 1; background: var(--bone-2); border: 1px solid rgba(27,25,21,0.12); border-radius: 6px; padding: 14px 16px; }
.wb-pb.bali { border-color: var(--sub-accent); }
.wb-pb .pb-num { display: block; font-family: 'Archivo', sans-serif; font-weight: 800; font-stretch: 80%; font-size: clamp(22px, 3vw, 30px); color: var(--ink); }
.wb-pb.bali .pb-num { color: var(--sub-accent); }
.wb-pb .pb-lbl { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(27,25,21,0.55); }
@media (max-width: 520px) { .wb-name, .wb-val { width: 58px; font-size: 11px; } }

/* Warm, in-brand palette for the "why Bali" comparison — burnt orange for
   Bali, muted brown for rivals (overrides the teal folder accent here only). */
.whybali-sheet { --sub-accent: #b0562f; }
.whybali-sheet .wb-track { background: rgba(124, 95, 68, 0.15); }
.whybali-sheet .wb-fill.rival { background: rgba(124, 95, 68, 0.5); }
.whybali-sheet .wb-pb.rival { border-color: rgba(124, 95, 68, 0.3); }

/* ---- Small document icon above the chapter mark (folder-1 style) ---- */
.spec-logo.spec-logo-sm {
  width: 52px;
  margin-bottom: 20px;
}

/* ---- Munduk essay: small type flowing in columns across the frame, so the
   full story costs minimal page length. ---- */
.munduk-essay {
  columns: 3 230px;            /* 3 columns on desktop, collapses gracefully */
  column-gap: 30px;
  margin-top: 4px;
  font-family: 'Space Mono', monospace;
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.munduk-essay p { margin-bottom: 10px; }
.munduk-essay .me-strong { font-weight: 700; color: var(--ink); }

/* ---- Bali map inside the Munduk section ---- */
.munduk-map { margin-top: 22px; }
.munduk-map img { display: block; width: 100%; height: auto; }

/* ---- Split sheet: text on the left, image on the right ---- */
.split-sheet {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
}
.split-text .spec-subtitle { margin-bottom: 14px; }
.split-text p + p { margin-top: 14px; }
.doc-frame.split-frame { margin: 0; }
.doc-frame.split-frame img { max-width: none; }

/* ---- Frame carousel: one photo at a time inside the mounted frame ---- */
.frame-car { position: relative; padding-bottom: clamp(44px, 5vw, 56px); }
.frame-car .fc-track {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.frame-car .fc-track img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 420ms var(--ease);
  cursor: pointer;
  pointer-events: none;              /* only the visible photo is clickable */
}
.frame-car .fc-track img.is-on { opacity: 1; pointer-events: auto; }
.frame-car .car-dots { bottom: clamp(16px, 2vw, 22px); }
/* the Munduk story column runs a touch wider than its map */
.munduk-split { grid-template-columns: 1.2fr 1fr; align-items: start; }
.munduk-split .munduk-story { margin-bottom: 0; }
.munduk-split .munduk-map { margin-top: 0; }

/* right column: framed map + the three demands + the circled answer */
.munduk-side { display: flex; flex-direction: column; gap: 20px; }
.doc-frame.map-frame { padding: clamp(16px, 2.2vw, 26px); }
.munduk-creed {
  list-style: none;
  margin: 2px 0 0; padding: 0;
  font-family: 'Space Mono', monospace;
  font-size: 14px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--ink);
}
.munduk-creed li {
  position: relative;
  padding: 10px 0 10px 22px;
  border-bottom: 1px dashed rgba(27, 25, 21, 0.28);
}
.munduk-creed li:first-child { border-top: 1px dashed rgba(27, 25, 21, 0.28); }
.munduk-creed li::before {
  content: "";
  position: absolute; left: 2px; top: 50%; margin-top: -4px;
  width: 8px; height: 8px;
  background: var(--sub-accent);
}
.munduk-found {
  font-family: 'Space Mono', monospace;
  font-size: 13.5px; line-height: 1.7;
  color: var(--ink-soft);
}
@media (max-width: 880px) {
  .split-sheet, .munduk-split { grid-template-columns: 1fr; }
}

/* ---- Munduk story: typed field-note, full section width ---- */
.munduk-story {
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-top: 4px;
}
.munduk-story p { margin-bottom: 14px; }
.munduk-story em { font-style: italic; }
.munduk-story strong { font-weight: 700; color: var(--ink); }
/* hand-drawn circle around "Munduk" */
.circled { position: relative; display: inline-block; padding: 2px 6px; }
.circled svg {
  /* tight on the left so the loop just clears the word before it */
  position: absolute; inset: -11px -10px -11px -7px;
  width: calc(100% + 17px); height: calc(100% + 22px);
  pointer-events: none;
}

/* ---- Munduk hero: full-photo section with text overlay ---- */
.munduk-hero { position: relative; overflow: hidden; }
.munduk-hero .mh-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  /* very low brightness so the bone overlay text stays clearly readable */
  filter: brightness(0.42) saturate(0.8);
}
.munduk-hero .mh-text {
  position: relative; z-index: 1;
  padding: clamp(36px, 6vw, 70px) clamp(26px, 6vw, 72px);
  max-width: 940px;
  font-family: 'Space Mono', monospace;
  color: var(--bone);
  text-shadow: 0 1px 10px rgba(0,0,0,0.45);
}
.munduk-hero .mh-intro { font-size: 13px; line-height: 1.7; }
.munduk-hero .mh-intro em { font-style: italic; }
.munduk-hero .mh-rule {
  border: none; border-top: 1px solid rgba(231,224,208,0.65);
  width: min(480px, 90%); margin: 18px 0 22px;
}
.munduk-hero .mh-list { list-style: none; margin: 0; padding: 0; }
.munduk-hero .mh-list li { font-size: 13px; line-height: 1.65; margin-bottom: 16px; }

/* ---- Wide picture frame (landscape moodboard fills the mat) ---- */
.doc-frame.doc-frame-wide img { max-width: 100%; }

/* ---- Section 1 (Why invest in Bali): spread content across the width ---- */
/* Facts as a responsive grid — bullets sit next to each other in rows */
.loc-list.loc-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px 36px;
}
/* Competition block: lines left, punchline right */
.loc-two {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 28px;
  align-items: center;
}
/* breathing room between stacked paragraphs in the left column */
.loc-two > div > p + p { margin-top: 14px; }
.loc-two .loc-gap-big {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.35;
  color: var(--ink);
  border-left: 3px solid var(--sub-accent);
  padding-left: 22px;
  justify-self: start;
}
@media (max-width: 640px) {
  .loc-two { grid-template-columns: 1fr; }
  .loc-two .loc-gap-big { margin-top: 6px; }
}
/* minimal variant: no bar, quieter weight, pushed to the right edge */
.loc-two .loc-gap-big.gap-min {
  border-left: none;
  padding-left: 0;
  justify-self: end;
  text-align: right;
  font-size: clamp(15px, 1.7vw, 20px);
  color: rgba(27, 25, 21, 0.8);
}
@media (max-width: 640px) {
  .loc-two .loc-gap-big.gap-min { justify-self: start; text-align: left; }
}

/* ---- Divider line between chapters (dashed rule with centred label) ---- */
.chapter-sep {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: clamp(14px, 3vh, 30px) 0;
}
.chapter-sep::before,
.chapter-sep::after {
  content: "";
  flex: 1;
  border-top: 1px dashed rgba(27, 25, 21, 0.45);
}
.chapter-sep span {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* =========================================================================
   7. THE INVESTMENT (folder 04) — offer, flow, tiers, returns, FAQ
   ========================================================================= */

/* Rotated CLASSIFIED stamp on the offer document */
.spec-doc.has-stamp { position: relative; }
.doc-stamp {
  position: absolute;
  top: clamp(60px, 9vw, 120px);
  right: clamp(24px, 8vw, 110px);
  transform: rotate(-12deg);
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: clamp(20px, 3vw, 34px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(176, 86, 47, 0.55);
  border: 4px double rgba(176, 86, 47, 0.5);
  padding: 8px 18px 8px 24px;
  border-radius: 4px;
  pointer-events: none;
}
.spec-row dd .big-num {
  font-family: 'Archivo', sans-serif;
  font-weight: 800; font-stretch: 80%;
  font-size: clamp(22px, 2.6vw, 30px);
  color: var(--sub-accent);
}

/* Income flow diagram */
.flow {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 12px; margin: 26px 0 30px;   /* air around the row of blocks */
}
.flow-step {
  font-family: 'Space Mono', monospace; font-size: 12px;
  letter-spacing: 0.04em; color: var(--ink);
  background: var(--bone-2); border: 1px solid rgba(27,25,21,0.18);
  border-radius: 4px; padding: 9px 14px; white-space: nowrap;
  flex: 1 1 auto; text-align: center;    /* the row spans the full width */
}
.flow-arrow { flex: 0 0 auto; }
.flow-step.flow-end { background: var(--sub-accent); color: var(--bone); border-color: var(--sub-accent); }
.flow-arrow { font-family: 'Space Mono', monospace; color: var(--ink-soft); }

/* Perk tiers */
.tiers-wrap { padding-bottom: clamp(26px, 4vw, 44px); }
.tiers-title {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-stretch: 78%;
  text-transform: uppercase; font-size: clamp(24px, 3.4vw, 36px);
  color: var(--ink);
  margin: 18px clamp(20px, 4vw, 36px) 20px;
}
.tiers {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; margin: 0 clamp(20px, 4vw, 36px);
}
@media (max-width: 720px) { .tiers { grid-template-columns: 1fr; } }
.tier {
  background: var(--bone-2); border: 1px solid rgba(27,25,21,0.15);
  border-radius: 6px; padding: 20px 22px;
}
.tier.tier-top { border-color: var(--sub-accent); }
.tier .tier-num {
  display: block; font-family: 'Archivo', sans-serif; font-weight: 800; font-stretch: 80%;
  text-transform: uppercase; font-size: 21px; color: var(--ink);
}
.tier .tier-price {
  display: block; font-family: 'Space Mono', monospace; font-size: 12px;
  letter-spacing: 0.08em; color: var(--sub-accent); margin: 4px 0 14px;
}
.tier ul { list-style: none; margin: 0; padding: 0; }
.tier li {
  font-family: 'Space Mono', monospace; font-size: 12px; line-height: 1.55;
  color: var(--ink-soft); padding-left: 16px; position: relative; margin-bottom: 8px;
}
.tier li::before { content: "–"; position: absolute; left: 0; }

/* Returns chart */
.ret-metrics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 26px;
}
.ret-chart {
  display: flex; align-items: flex-end; gap: clamp(6px, 1.2vw, 14px);
  height: 240px; padding: 0 4px;
}
.ret-col {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; height: 100%; min-width: 0;
}
.ret-col .ret-bar {
  width: 100%; background: var(--sub-accent); border-radius: 3px 3px 0 0;
  flex: none;                 /* keep the pixel height honest, no flex squeeze */
  transition: height 500ms var(--ease);
}
.ret-col .ret-val {
  font-family: 'Space Mono', monospace; font-size: 9.5px; color: var(--ink-soft);
  margin-bottom: 5px; white-space: nowrap;
}
.ret-col .ret-year {
  font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.08em;
  color: rgba(27,25,21,0.55); margin-top: 7px;
}
@media (max-width: 640px) { .ret-col:nth-child(even) .ret-val { visibility: hidden; } }

/* =========================================================================
   13. SITE PAGES: FAQ + shareholders agreement
   ========================================================================= */
/* top bar with the three destinations (Investor Archive / FAQ / Agreement) */
.site-tabs {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.site-tabs a {
  font-family: 'Space Mono', monospace;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bone); text-decoration: none;
  border: 1px solid rgba(231, 224, 208, 0.35);
  border-radius: 4px; padding: 7px 12px;
  transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
}
.site-tabs a:hover { border-color: var(--bone); }
.site-tabs a.active { background: var(--bone); color: var(--ink); border-color: var(--bone); }

/* the agreement lives inside its own scrolling frame; the page holds still */
.agree-frame {
  height: min(66vh, 860px);
  overflow-y: auto;
  background: var(--bone-2);
  border: 1px solid rgba(27, 25, 21, 0.22);
  border-radius: 6px;
  padding: clamp(24px, 4vw, 48px);
  font-family: 'Space Mono', monospace;
  font-size: 13px; line-height: 1.8; color: var(--ink-soft);
}
.agree-pending {
  text-align: center;
  padding: 18vh 20px;
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(27, 25, 21, 0.4);
}

/* FAQ grid */
.faq {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 18px 40px; margin-top: 4px;
}
@media (max-width: 640px) { .faq { grid-template-columns: 1fr; } }
.faq-item { font-family: 'Space Mono', monospace; }
.faq-q { display: block; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.faq-a { display: block; font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); }

/* ---- Freehold + Pink Zone comparison ---- */
.fh-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px; margin: 16px 0 6px;
}
@media (max-width: 680px) { .fh-grid { grid-template-columns: 1fr; } }
.fh-card {
  background: var(--bone-2); border: 1px solid rgba(27,25,21,0.15);
  border-radius: 6px; padding: 20px 22px;
}
.fh-card.fh-ours { border-color: var(--sub-accent); background: var(--bone); }
.fh-label {
  display: block; font-family: 'Space Mono', monospace; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(27,25,21,0.55); margin-bottom: 12px;
}
.fh-card.fh-ours .fh-label { color: var(--sub-accent); }
.fh-card ul { list-style: none; margin: 0; padding: 0; }
.fh-card li {
  font-family: 'Space Mono', monospace; font-size: 12.5px; line-height: 1.55;
  color: var(--ink-soft); padding-left: 16px; position: relative; margin-bottom: 9px;
}
.fh-card li::before { content: "–"; position: absolute; left: 0; }
.fh-card.fh-ours li strong { color: var(--ink); font-weight: 700; }

/* ---- Investment Cap: more air between the rows ---- */
.cap-doc .spec-row {
  margin-bottom: clamp(30px, 4.5vh, 46px);
  /* labels and values share a baseline, with clear air between the columns */
  grid-template-columns: 230px 1fr;
  gap: 8px clamp(48px, 7vw, 110px);
  align-items: baseline;
}
.cap-doc .spec-row dt { line-height: 1.9; }
.cap-doc .spec-row dd { line-height: 1.9; }
/* Small screens: single column, label above value (the 230px label column
   would otherwise crush the values to a few characters per line). */
@media (max-width: 640px) {
  .cap-doc .spec-row {
    grid-template-columns: 1fr;
    gap: 4px;
    margin-bottom: clamp(24px, 4vh, 34px);
  }
}

/* ---- ROI plan: three occupancy scenarios side by side ---- */
.roi-wrap { overflow-x: auto; }
.roi-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Space Mono', monospace;
  font-size: 12.5px;
}
.roi-table th, .roi-table td {
  padding: 12px 16px;
  text-align: right;
  white-space: nowrap;
}
.roi-table th:first-child, .roi-table td:first-child {
  text-align: left;
  padding-left: 0;
}
.roi-table tbody td:first-child {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.roi-table tbody td { border-top: 1px dashed rgba(27, 25, 21, 0.28); }
.roi-table tbody td:not(:first-child) { font-weight: 700; color: var(--ink); }
.roi-table thead .rt-name {
  display: block;
  font-family: 'Archivo', sans-serif; font-weight: 800; font-stretch: 80%;
  font-size: 16px; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--ink);
}
.roi-table thead .rt-occ {
  display: block; margin-top: 4px;
  font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sub-accent);
}
/* the guideline case carries the accent */
.roi-table .rt-hi { background: rgba(176, 86, 47, 0.07); }
.roi-table thead th.rt-hi { border-top: 3px solid var(--sub-accent); }
/* visual grouping: inputs / money / returns. The group closes with extra
   air, then a solid rule opens the next block. */
.roi-table tr.rt-end td { padding-bottom: 26px; }
.roi-table tr.rt-gap td {
  border-top: 2px solid rgba(27, 25, 21, 0.45);
  padding-top: 16px;
}
@media (max-width: 720px) {
  .roi-table { font-size: 11px; }
  .roi-table th, .roi-table td { padding: 10px 10px; }
}

/* ROI intro: full-width, small print */
.wb-head.roi-head p {
  max-width: none;
  font-size: 11px;
  line-height: 1.7;
  color: rgba(27, 25, 21, 0.55);
}
/* clear air between the intro and the table */
.roi-wrap { margin-top: clamp(30px, 4.5vh, 46px); }
/* the footnote under the table runs the full section width */
.roi-wrap ~ .calc-note { max-width: none; }

/* the small honesty section under the ROI plan */
.roi-why { padding: clamp(24px, 3.2vw, 38px) clamp(24px, 5vw, 60px); }
.roi-why .calc-kicker { display: block; margin-bottom: 12px; }
.roi-why .spec-meta { max-width: 92ch; font-size: 13px; }
.roi-why .spec-meta + .spec-meta { margin-top: 12px; }

/* ---- Section 02: investment slider ---- */
.inv-slider { margin: 26px 0 6px; }
.inv-slider output { font-size: 22px; }
.sl-stops {
  display: flex; justify-content: space-between; margin-top: 8px;
  font-family: 'Space Mono', monospace; font-size: 10px;
  letter-spacing: 0.1em; color: rgba(27,25,21,0.5); text-transform: uppercase;
}
.sl-perks {
  margin-top: 22px;
  background: var(--bone-2);
  border: 1px solid var(--sub-accent);
  border-radius: 6px;
  padding: 18px 22px;
}
.sl-perks-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.sl-perks .fh-label { margin-bottom: 0; }
.sl-tier {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-stretch: 80%;
  text-transform: uppercase; font-size: 15px; color: var(--sub-accent);
}
.sl-perks ul { list-style: none; margin: 0; padding: 0; }
.sl-perks li {
  font-family: 'Space Mono', monospace; font-size: 12.5px; line-height: 1.55;
  color: var(--ink-soft); padding-left: 16px; position: relative; margin-bottom: 7px;
}
.sl-perks li::before { content: "–"; position: absolute; left: 0; }
@keyframes slpulse { 0% { transform: scale(1); } 35% { transform: scale(1.012); } 100% { transform: scale(1); } }
.sl-perks.sl-pulse { animation: slpulse 320ms var(--ease); }

/* ---- Section 03: ownership diagram ---- */
.own-diagram {
  display: flex; align-items: center; flex-wrap: nowrap;   /* one line */
  gap: 10px clamp(10px, 1.4vw, 18px); margin: 26px 0 30px; /* air around the blocks */
}
.own-box {
  background: var(--bone-2); border: 1px solid rgba(27,25,21,0.18);
  border-radius: 6px; padding: 14px clamp(14px, 1.8vw, 22px);
  flex: 0 0 auto;              /* never squeeze the text off-centre */
  text-align: center;
}
.own-box .own-title, .own-box .own-sub { white-space: nowrap; }
.own-box.own-core { background: var(--bone); border-color: var(--sub-accent); }
.own-title {
  display: block; font-family: 'Archivo', sans-serif; font-weight: 800; font-stretch: 80%;
  text-transform: uppercase; font-size: 14px; color: var(--ink);
}
.own-sub {
  display: block; font-family: 'Space Mono', monospace; font-size: 11px;
  line-height: 1.5; color: var(--ink-soft); margin-top: 4px;
}
.own-link {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-family: 'Space Mono', monospace; font-size: 10px;
  letter-spacing: 0.06em; color: rgba(27,25,21,0.55); text-align: center;
  flex: 0 1 auto;
}
.own-link .own-arrow { font-size: 17px; color: var(--sub-accent); }

/* fully managed: six points, three left and three right */
.managed-list {
  list-style: none;
  margin: 14px 0 4px; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: 10px clamp(24px, 4vw, 60px);
  max-width: 760px;
  font-family: 'Space Mono', monospace;
  font-size: 13px; color: var(--ink-soft);
}
.managed-list li {
  position: relative;
  padding-left: 20px;
}
.managed-list li::before {
  content: "";
  position: absolute; left: 2px; top: 50%; margin-top: -4px;
  width: 8px; height: 8px;
  background: var(--sub-accent);
}
@media (max-width: 640px) {
  .managed-list { grid-template-columns: 1fr; grid-auto-flow: row; }
}
@media (max-width: 760px) {
  .own-diagram { flex-direction: column; align-items: stretch; }
  .own-link { flex-direction: row; justify-content: center; gap: 8px; }
}

/* ---- Section 05: scenario pages ---- */
.sc-page { display: none; }
.sc-page.active { display: block; animation: scfade 320ms var(--ease); }
@keyframes scfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* one shared frame around the scenario pages; content swaps inside it */
.sc-frame {
  margin-top: 18px;
  border: 1px solid rgba(27, 25, 21, 0.22);
  border-radius: 8px;
  padding: clamp(20px, 3vw, 34px) clamp(18px, 2.8vw, 32px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.sc-intro {
  font-family: 'Space Mono', monospace; font-size: 13px; line-height: 1.7;
  color: var(--ink-soft); max-width: none; margin-bottom: 24px;
}
.sc-intro strong { color: var(--ink); }

/* value-bridge bars */
.sc-bridge { margin: 6px 0 24px; }
.sc-brow { display: flex; align-items: center; gap: 14px; margin-bottom: 9px; }
.sc-blabel {
  font-family: 'Space Mono', monospace; font-size: 11.5px; width: 170px;
  flex-shrink: 0; color: var(--ink); letter-spacing: 0.02em;
}
.sc-btrack { flex: 1; height: 18px; background: rgba(27,25,21,0.07); border-radius: 3px; overflow: hidden; }
.sc-bfill { height: 100%; border-radius: 3px; }
.sc-bfill.paid  { background: rgba(124, 95, 68, 0.45); }
.sc-bfill.stake { background: var(--sub-accent); }
.sc-bfill.cash  { background: rgba(176, 86, 47, 0.55); }
.sc-bfill.total { background: var(--ink-soft); }
.sc-brow.total .sc-blabel { font-weight: 700; }
.sc-bval {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-stretch: 80%;
  font-size: 14px; width: 92px; text-align: right; flex-shrink: 0; color: var(--ink);
}
@media (max-width: 560px) { .sc-blabel { width: 110px; font-size: 10.5px; } .sc-bval { width: 76px; } }

/* =========================================================================
   8. THE SUCCESS (folder 05) — branding, flywheel, social proof, CTA
   ========================================================================= */

.brand-lead {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-stretch: 82%;
  font-size: clamp(20px, 2.7vw, 30px); line-height: 1.25; color: var(--ink);
  max-width: 26ch; margin-bottom: 4px;
}
.brand-lead strong { color: var(--sub-accent); }

/* Virality flywheel */
.flywheel {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px 8px;
  margin: 24px 0 28px;
}
.fw-step {
  flex: 1 1 150px; min-width: 150px;
  background: var(--bone-2); border: 1px solid rgba(27,25,21,0.15);
  border-radius: 6px; padding: 16px 16px 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.fw-step.fw-end { border-color: var(--sub-accent); background: var(--bone); }
.fw-n { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.12em; color: var(--sub-accent); }
.fw-t { font-family: 'Archivo', sans-serif; font-weight: 800; font-stretch: 80%; text-transform: uppercase; font-size: 14px; color: var(--ink); }
.fw-d { font-family: 'Space Mono', monospace; font-size: 11px; line-height: 1.5; color: var(--ink-soft); }
.fw-arrow { align-self: center; font-family: 'Space Mono', monospace; color: var(--sub-accent); font-size: 18px; }
@media (max-width: 720px) { .fw-arrow { transform: rotate(90deg); } .fw-step { flex-basis: 100%; } }

.brand-pills { display: flex; flex-wrap: nowrap; align-items: center; gap: 7px; }
.pill {
  font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.02em;
  background: var(--bone-2); border: 1px solid rgba(27,25,21,0.16);
  border-radius: 18px; padding: 7px 13px; color: var(--ink); white-space: nowrap;
}
/* the orange pill grows to fill the row, ending flush with the blocks/divider */
.pill.pill-out { flex: 1 1 auto; text-align: center; background: var(--sub-accent); color: var(--bone); border-color: var(--sub-accent); }
.pill-op { padding: 0 2px; font-size: 13px; }
@media (max-width: 780px) {
  .brand-pills { flex-wrap: wrap; }
  .pill { font-size: 11px; padding: 7px 12px; white-space: normal; }
  .pill.pill-out { flex-basis: 100%; }
}

/* Social proof: photo + phone mockup */
.proof { padding: clamp(30px,5vw,54px) 0; }
.proof-visual {
  position: relative; margin: 24px clamp(24px,5vw,60px) 10px;
}
.proof-photo { margin: 0; }
.proof-photo-ph, .proof-photo img {
  display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover;
  border-radius: 8px; border: 1px solid rgba(27,25,21,0.12);
}
.proof-photo-ph {
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,0.05) 0 12px, rgba(0,0,0,0.02) 12px 24px),
    var(--bone-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(27,25,21,0.5); text-align: center; gap: 6px;
}
.proof-photo-ph small { font-size: 10px; letter-spacing: 0.08em; }

/* Instagram phone mockup */
.ig-phone {
  position: absolute; right: 5%; bottom: -30px; width: min(232px, 52%);
  border: 10px solid #14120f; border-radius: 34px; overflow: hidden;
  background: #000; box-shadow: 0 26px 54px rgba(0,0,0,0.36);
}
.ig-phone img { display: block; width: 100%; height: auto; }
@media (max-width: 620px) {
  .ig-phone { position: static; width: 100%; max-width: 260px; margin: 18px auto 0; }
}

.proof-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin: 44px clamp(24px,5vw,60px) 18px;
}
@media (max-width: 620px) { .proof-stats { grid-template-columns: 1fr; } }

.inline-link { color: var(--sub-accent); font-weight: 700; text-decoration: none; white-space: nowrap; }
.inline-link:hover { text-decoration: underline; }

/* Means chain */
.means-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 16px 0 6px; }
.mc-item {
  background: var(--bone-2); border: 1px solid rgba(27,25,21,0.16); border-radius: 6px;
  padding: 13px 17px; display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 150px;
}
.mc-item.mc-end { border-color: var(--sub-accent); background: var(--bone); }
.mc-t { font-family: 'Archivo', sans-serif; font-weight: 800; font-stretch: 80%; text-transform: uppercase; font-size: 14px; color: var(--ink); }
.mc-d { font-family: 'Space Mono', monospace; font-size: 10.5px; color: var(--ink-soft); }
.mc-arrow { color: var(--sub-accent); font-family: 'Space Mono', monospace; font-size: 17px; }
@media (max-width: 720px) { .means-chain { flex-direction: column; align-items: stretch; } .mc-arrow { transform: rotate(90deg); align-self: center; } }

/* CTA */
.invest-cta { --sub-accent: #b0562f; }
.cta { padding: clamp(40px,6vw,72px) clamp(24px,5vw,60px); text-align: center; }
.cta h2 {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-stretch: 76%;
  text-transform: uppercase; font-size: clamp(34px,6vw,64px); line-height: 0.95;
  color: var(--ink); margin: 8px 0 12px;
}
.cta > p { font-family: 'Space Mono', monospace; font-size: 13px; color: var(--ink-soft); margin-bottom: 26px; }
.cta-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 30px; }
.cta-step {
  font-family: 'Space Mono', monospace; font-size: 12px; color: var(--ink);
  background: var(--bone-2); border: 1px solid rgba(27,25,21,0.15); border-radius: 6px;
  padding: 14px 18px; display: flex; align-items: center; gap: 10px;
}
.cta-step .cta-n { font-weight: 700; color: var(--sub-accent); }
.cta-btn {
  display: inline-block; font-family: 'Archivo', sans-serif; font-weight: 800; font-stretch: 80%;
  text-transform: uppercase; letter-spacing: 0.04em; font-size: 15px;
  color: var(--bone); background: var(--sub-accent); text-decoration: none;
  padding: 15px 28px; border-radius: 6px;
  transition: transform 200ms var(--ease), filter 200ms var(--ease);
}
.cta-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }

/* ---- Success section-1 tweaks + pill operators ---- */
.accent-text { color: var(--sub-accent); }
.pill-op {
  align-self: center;
  font-family: 'Space Mono', monospace; font-weight: 700; font-size: 16px;
  color: var(--sub-accent); padding: 0 3px;
}

/* keep the means-chain items one line (no thicker block) */
.mc-d { white-space: nowrap; }
@media (max-width: 720px) { .mc-d { white-space: normal; } }

/* whole-pitch, full width, with a small "based on the data" note */
.pitch-line { max-width: 100%; }
.pitch-body { max-width: 100%; }
.tiny-note { font-size: 0.72em; letter-spacing: 0.02em; color: rgba(27,25,21,0.5); }

/* social-proof moat note */
.proof-moat {
  font-family: 'Space Mono', monospace; font-size: 12.5px; line-height: 1.65;
  color: var(--ink-soft); border-left: 3px solid var(--sub-accent);
  padding-left: 18px; margin-top: 22px !important; max-width: 96ch;
}

/* divider above the flywheel pills */
.pill-rule { border: none; border-top: 1px solid rgba(27,25,21,0.22); margin: 26px 0 20px; }

/* full-width divider (over wide block rows) */
.spec-rule.wide-rule { width: 100%; }

/* =========================================================================
   9. THE CONCEPT (folder 01) — observation carousel
   ========================================================================= */
.carousel-frame {
  display: block;                    /* override .doc-frame's flex centring */
  position: relative;
  overflow: hidden;
  padding-bottom: 46px;              /* room for the dots */
}
.carousel {
  position: relative;
  width: 100%;
  height: clamp(380px, 46vw, 560px);
  display: flex; align-items: center; justify-content: center;
}
.carousel-frame .car-slide img { max-width: none; }   /* beat .doc-frame img cap */
.car-slide {
  position: absolute;
  width: 40%;
  cursor: pointer;
  transition: transform 480ms var(--ease), opacity 480ms var(--ease);
  will-change: transform;
}
.car-slide img {
  display: block; width: 100%; height: auto;
  border: 1px solid rgba(27,25,21,0.14);
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}
.car-slide.is-center { transform: translateX(0) scale(1);        z-index: 3; opacity: 1; }
.car-slide.is-left   { transform: translateX(-84%) scale(0.66);  z-index: 2; opacity: 0.5; }
.car-slide.is-right  { transform: translateX(84%) scale(0.66);   z-index: 2; opacity: 0.5; }
.car-slide.is-hidden { transform: scale(0.5);                    z-index: 1; opacity: 0; pointer-events: none; }
.car-slide.is-left:hover, .car-slide.is-right:hover { opacity: 0.75; }

/* prev / next arrows */
.car-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 5; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Mono', monospace; font-size: 18px;
  color: var(--ink); background: var(--bone);
  border: 1px solid rgba(27,25,21,0.3); cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.14);
  transition: background 180ms var(--ease), transform 180ms var(--ease);
}
.car-btn:hover { background: var(--sub-accent); color: var(--bone); border-color: var(--sub-accent); }
.car-prev { left: clamp(6px, 2vw, 20px); }
.car-next { right: clamp(6px, 2vw, 20px); }

/* dots */
.car-dots { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; gap: 8px; }
.car-dot {
  width: 8px; height: 8px; border-radius: 50%; padding: 0; cursor: pointer;
  background: rgba(27,25,21,0.22); border: none;
  transition: background 180ms var(--ease), transform 180ms var(--ease);
}
.car-dot.is-on { background: var(--sub-accent); transform: scale(1.3); }

/* single section note under the carousel */
.car-caption { align-items: flex-start; }
.car-blurb {
  font-family: 'Space Mono', monospace; font-size: 13px; line-height: 1.7;
  color: var(--ink-soft); max-width: 68ch; margin: 0;
}

@media (max-width: 640px) {
  .car-slide { width: 58%; }
  .car-slide.is-left, .car-slide.is-right { opacity: 0.28; }
}


/* =========================================================================
   10. THE CONCEPT (folder 01) — what / why sections
   ========================================================================= */
/* three-up stat cards inside the "why" section (reuses .calc-metric cards) */
.concept-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin: 26px 0 4px;
}
@media (max-width: 620px) { .concept-stats { grid-template-columns: 1fr; } }
/* closing line under the stat cards */
.wb-shift-body { margin-top: 22px; }

/* labelled sub-blocks under the stat cards ("The data", etc.) */
.wb-sub { margin-top: 24px; }
.wb-sub .calc-kicker { display: block; margin-bottom: 6px; }
.wb-sub .cm-src { display: block; margin-top: 8px; }

/* full-width pull-quote (replaces the floating two-column punchline).
   Sits a touch below the section title in size. */
.concept-quote {
  margin: 26px 0 2px;
  border-left: 3px solid var(--sub-accent);
  padding-left: 22px;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: clamp(15px, 1.8vw, 19px);
  line-height: 1.4;
  color: var(--ink);
}
/* breathing room between stacked paragraphs in a single-column block */
.spec-stack > p + p { margin-top: 14px; }

/* small sub-heading inside a spec document (e.g. "What we offer") */
.spec-subtitle {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: clamp(13px, 1.5vw, 15px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 12px;
}

/* per-rival source line, the final footnote of the comparison */
.wb-datasrc { display: block; margin-top: 12px; }

/* very small source line inside each data card, under the value */
.cm-src {
  margin-top: -2px;
  font-family: 'Space Mono', monospace;
  font-size: 8.5px; line-height: 1.4;
  letter-spacing: 0.02em;
  color: rgba(27,25,21,0.4);
}