/* The Approach page — mostly fixed-dark styling to match the source design (this page isn't part of the light/dark token system; header/footer still are). */

.approach-hero {
  position: relative;
  min-height: clamp(420px, 42vw, 600px);
  display: flex;
  align-items: flex-start;
  gap: 4rem;
  padding: clamp(7rem, 10vw, 9rem) var(--page-edge) 3.5rem;
  background: #121212;
  overflow: hidden;
}
.approach-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; z-index: 0; }
.approach-hero-copy { position: relative; z-index: 1; max-width: 560px; }
.approach-hero-copy .section-kicker { color: var(--orange); }
.approach-hero-copy h1 { margin: .6rem 0 0; font-family: var(--serif); font-weight: 500; font-size: clamp(2.2rem, 3.6vw, 3rem); line-height: 1.22; color: #f2e8d6; }
.approach-hero-rule { display: block; width: 2.6rem; height: 3px; margin: 1.4rem 0 1.1rem; background: var(--orange); }
.approach-hero-body { margin: 0; max-width: 34rem; color: #f2e8d6; font-size: 1rem; line-height: 1.65; opacity: .92; }

.mode-section { position: relative; padding: 3rem var(--page-edge); background: #121212; border-top: 1px solid rgba(242,232,214,.18); overflow: hidden; }
/* Keep each photographic mode composition inside the same 1440px frame as
   its copy. The section color remains full bleed, while the notebook artwork
   scales down within a controlled height range and keeps its proportions. */
.mode-reveal, .mode-build, .mode-sustain {
  background-color: #0e0c0a;
  /* The artwork belongs exclusively to the bounded ::before layer. Clear any
     legacy section-level image rule that may still be present in cached CSS. */
  background-image: none !important;
}
.mode-reveal { --mode-art-h: clamp(560px, 38vw, 640px); }
.mode-build { --mode-art-h: clamp(620px, 43vw, 720px); }
.mode-sustain { --mode-art-h: clamp(540px, 36vw, 600px); }
.mode-reveal::before, .mode-build::before, .mode-sustain::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: min(var(--max), calc(100% - (2 * var(--page-gutter))));
  transform: translateX(-50%);
  /* Each layer declares its own repeat behavior below. Keeping the image's
     no-repeat in the same shorthand prevents a later image swap from
     accidentally restoring the browser's default tiling. */
  pointer-events: none;
  z-index: 0;
}
.mode-section > * { position: relative; z-index: 1; }
.mode-reveal::before {
  background:
    linear-gradient(90deg, rgba(14,12,10,.9) 0%, rgba(14,12,10,.72) 28%, rgba(14,12,10,.24) 46%, rgba(14,12,10,0) 60%) left top / 100% 100% no-repeat,
    linear-gradient(180deg, rgba(14,12,10,0) 68%, rgba(14,12,10,.68) 91%, #0e0c0a 100%) right top / 100% var(--mode-art-h) no-repeat,
    url('assets/approach-reveal.webp') right top / auto var(--mode-art-h) no-repeat;
}
.mode-build::before {
  background:
    linear-gradient(90deg, rgba(14,12,10,.96) 0%, rgba(14,12,10,.88) 30%, rgba(14,12,10,.45) 48%, rgba(14,12,10,0) 66%) left top / 100% 100% no-repeat,
    linear-gradient(180deg, rgba(14,12,10,0) 68%, rgba(14,12,10,.9) 92%, #0e0c0a 99%) right top / 100% var(--mode-art-h) no-repeat,
    url('assets/approach-build.webp') right top / auto var(--mode-art-h) no-repeat;
}
.mode-sustain::before {
  background:
    linear-gradient(90deg, rgba(14,12,10,.96) 0%, rgba(14,12,10,.88) 30%, rgba(14,12,10,.45) 48%, rgba(14,12,10,0) 66%) left top / 100% 100% no-repeat,
    linear-gradient(180deg, rgba(14,12,10,0) 62%, rgba(14,12,10,.9) 89%, #0e0c0a 98%) right top / 100% var(--mode-art-h) no-repeat,
    url('assets/approach-sustain.webp') right top / auto var(--mode-art-h) no-repeat;
}
/* Belt-and-suspenders repeat control: this later declaration wins even if a
   browser retained an earlier shorthand while refreshing the stylesheet. */
.mode-reveal::before,
.mode-build::before,
.mode-sustain::before {
  background-repeat: no-repeat, no-repeat, no-repeat !important;
}
.mode-row { display: flex; gap: clamp(1.5rem, 4vw, 3rem); align-items: flex-start; }
.mode-copy { width: 560px; max-width: 100%; flex-shrink: 0; display: flex; flex-direction: column; gap: .75rem; }
.mode-number { margin: 0; color: var(--orange); font-size: 1.125rem; }
.mode-title { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1.1; color: var(--orange); }
.mode-subtype { margin: 0; color: #f2e8d6; font-weight: 600; font-size: 1.05rem; }
.mode-lead { margin: .25rem 0 0; color: var(--orange); font-weight: 600; font-size: 1.1rem; line-height: 1.5; }
.mode-body { margin: 0; max-width: 34rem; color: #f2e8d6; font-size: .95rem; line-height: 1.65; opacity: .88; }

/* Match the hero's 560px reading measure across all three modes. The wider
   copy reduces unnecessary wrapping; a shared stage height keeps the card
   groups aligned while still allowing Build's extra card group to make that
   complete section naturally taller. */
.mode-row { min-height: 540px; }

.mode-cards-block { margin-top: 2.5rem; }
.mode-reveal { --mode-accent: var(--orange); }
.mode-build { --mode-accent: #06b6d4; }
.mode-sustain { --mode-accent: var(--green); }
.mode-cards-label { margin: 0 0 1rem; font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--mode-accent); }
.mode-cards-block .mode-cards-label + .mode-cards { margin-bottom: 2.25rem; }
/* The cards are the paper slips from the artwork: paper-toned, ink icons and
   text on them, slightly askew. Each section tints its paper (--card-paper). */
.mode-cards { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.mode-reveal { --card-paper: #e7dcc3; }
.mode-build { --card-paper: #cfd5c1; }
.mode-sustain { --card-paper: #dcd8c4; }
.mode-card {
  flex: 1 1 260px;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.2rem;
  background: var(--card-paper, #e7dcc3);
  color: #2a2015;
  border: 0;
  border-radius: 3px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .38);
}
.mode-cards .mode-card:nth-child(1) { transform: rotate(-.5deg); }
.mode-cards .mode-card:nth-child(2) { transform: rotate(.45deg); }
.mode-cards .mode-card:nth-child(3) { transform: rotate(-.35deg); }
.mode-cards .mode-card:nth-child(4) { transform: rotate(.5deg); }
.mode-card-icon { flex-shrink: 0; width: 30px; height: 30px; color: #3a3226; font-size: 1.25rem; line-height: 1; }
.mode-card p { margin: 0; color: #2a2015; font-size: .875rem; line-height: 1.45; }
.mode-cards-4 .mode-card { flex-basis: 200px; }
.mode-card-outcome { flex-direction: column; justify-content: center; text-align: center; gap: .7rem; padding: 1.3rem 1rem; background: #cbd6d7; }
.mode-card-outcome .mode-card-icon { width: 27px; height: 27px; color: #232a2b; }
.mode-card-outcome p { color: #1d2223; font-weight: 600; }

/* Reveal's brighter paper and denser notebook artwork need less artificial
   depth than the other modes. Keep the slips tactile without the heavy lift. */
.mode-reveal .mode-card { box-shadow: 0 7px 16px rgba(0, 0, 0, .22); }

.how-we-work { padding: 3.5rem var(--page-edge); background: #0f0d0b; }
.how-we-work-paper { position: relative; max-width: var(--max); margin: 0 auto; overflow: hidden; border-radius: 4px; background: #121212; }
.how-we-work-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.how-we-work-note {
  position: absolute;
  bottom: 3.5rem;
  left: 3.5rem;
  max-width: clamp(220px, 26vw, 280px);
  color: #121212;
  text-shadow: 0 1px 10px rgba(255, 255, 255, .5);
  font-family: "Caveat", cursive;
  font-size: 1.3rem;
  line-height: 1.45;
  transform: rotate(-2deg);
  z-index: 2;
}
.how-we-work-note p { margin: 0 0 .65rem; }
.how-we-work-note p:last-child { margin-bottom: 0; }
.how-we-work-content { position: relative; z-index: 1; padding: clamp(2rem, 4vw, 2.75rem) clamp(1.5rem, 5vw, 3rem); color: #17130e; }
.how-we-work-content h2 { margin: 0 0 1rem; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
.how-we-work-content > p { max-width: 32rem; margin: 0 0 1rem; font-size: .92rem; line-height: 1.55; }
.how-we-work-content > p:last-of-type { margin-bottom: 2rem; }

.how-we-work-steps { display: flex; gap: 1rem; margin-bottom: 2.5rem; }
.how-we-work-steps .step { flex: 1; padding-top: 5.5rem; }
.how-we-work-steps .step p { margin: 0; font-size: .85rem; line-height: 1.4; text-align: center; }

.how-we-work-cta { display: flex; align-items: center; gap: 2.5rem; padding: 2rem clamp(1rem, 3vw, 2.5rem) 2rem 0; }
.cta-copy { flex: 1; margin-left: 36%; }
.cta-copy h3 { margin: 0 0 .75rem; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.cta-copy p { margin: 0; max-width: 34rem; font-size: .9rem; line-height: 1.55; }
.button-dark { background: #121212; border-color: #121212; color: #f7f5f0; box-shadow: none; flex-shrink: 0; }
.button-dark:hover, .button-dark:focus-visible { background: #000; box-shadow: none; }

/* Poster layout: the paper keeps the artwork's exact aspect ratio so the whole
   image is the section background — nothing cropped. Content is pinned to the
   zones designed into the artwork (blank left column, icon flow top-right,
   kraft CTA paper bottom-right) and type scales with the box via vw so the
   alignment holds at any width down to the stacked breakpoint. */
@media (min-width: 1051px) {
  .how-we-work-paper { aspect-ratio: 1928 / 816; }
  .how-we-work-bg { object-fit: fill; }
  .how-we-work-content { position: absolute; inset: 0; padding: 2.2% 3.2%; }
  .how-we-work-content h2 { margin-bottom: 1.2%; font-size: min(2.1rem, 2.35vw); }
  .how-we-work-content > p { max-width: 38%; margin: 0 0 .8em; font-size: min(.88rem, .98vw); line-height: 1.5; }
  .how-we-work-steps { position: absolute; left: 37%; right: 6%; top: 32.5%; margin: 0; gap: 3%; }
  .how-we-work-steps .step { padding-top: 0; }
  .how-we-work-steps .step p { font-size: min(.78rem, .88vw); line-height: 1.35; }
  .how-we-work-cta { position: absolute; left: 41%; right: 20%; top: 56%; bottom: 7%; padding: 0; gap: 4%; }
  .cta-copy { margin-left: 0; }
  .cta-copy h3 { font-size: min(1.6rem, 1.8vw); }
  .cta-copy p { font-size: min(.85rem, .95vw); }
}

/* ---------- Light theme ---------- */

/* Theme-swapped artwork: dark version by default, light version when the
   light theme is active. */
.how-we-work-bg-light { display: none; }
[data-theme="light"] .how-we-work-bg-dark { display: none; }
[data-theme="light"] .how-we-work-bg-light { display: block; }

[data-theme="light"] .approach-hero { background: #f6efe2; }
.approach-hero-bg-light { display: none; }
[data-theme="light"] .approach-hero-bg-dark, [data-theme="light"] .approach-page-tear { display: none; }
[data-theme="light"] .approach-hero-bg-light { display: block; object-position: right center; }
[data-theme="light"] .approach-hero-copy h1 { color: #17130e; }
[data-theme="light"] .approach-hero-body { color: #3a3428; opacity: 1; }

[data-theme="light"] .mode-section { border-top-color: rgba(23, 19, 14, .14); }
/* Same capped-height layering as dark, with light scrims and section tones. */
[data-theme="light"] .mode-reveal { background-color: #f6f0e4; }
[data-theme="light"] .mode-build,
[data-theme="light"] .mode-sustain { background-color: #f4efe6; }
[data-theme="light"] .mode-reveal::before {
  background:
    linear-gradient(90deg, rgba(246, 240, 228, .94) 0%, rgba(246, 240, 228, .62) 36%, rgba(246, 240, 228, 0) 58%) left top / 100% 100% no-repeat,
    linear-gradient(180deg, rgba(246, 240, 228, 0) 55%, rgba(246, 240, 228, .9) 86%, #f6f0e4 97%) right top / 100% var(--mode-art-h) no-repeat,
    url('assets/approach-reveal-light@2x.png') right top / auto var(--mode-art-h) no-repeat;
}
[data-theme="light"] .mode-build::before {
  background:
    linear-gradient(90deg, rgba(244, 239, 230, .97) 0%, rgba(244, 239, 230, .92) 32%, rgba(244, 239, 230, .55) 52%, rgba(244, 239, 230, 0) 74%) left top / 100% 100% no-repeat,
    linear-gradient(180deg, rgba(244, 239, 230, 0) 68%, rgba(244, 239, 230, .9) 92%, #f4efe6 99%) right top / 100% var(--mode-art-h) no-repeat,
    url('assets/approach-build-light-bg.png') right top / auto var(--mode-art-h) no-repeat;
}
[data-theme="light"] .mode-sustain::before {
  background:
    linear-gradient(90deg, rgba(244, 239, 230, .97) 0%, rgba(244, 239, 230, .92) 32%, rgba(244, 239, 230, .55) 52%, rgba(244, 239, 230, 0) 74%) left top / 100% 100% no-repeat,
    linear-gradient(180deg, rgba(244, 239, 230, 0) 62%, rgba(244, 239, 230, .9) 89%, #f4efe6 98%) right top / 100% var(--mode-art-h) no-repeat,
    url('assets/approach-sustain-light-bg.png') right top / auto var(--mode-art-h) no-repeat;
}
[data-theme="light"] .mode-subtype { color: #17130e; }
[data-theme="light"] .mode-body { color: #3a3428; opacity: 1; }
/* The paper cards keep their tones in light mode; only the shadow softens. */
[data-theme="light"] .mode-card { box-shadow: 0 9px 20px rgba(70, 50, 25, .2); }
[data-theme="light"] .mode-reveal .mode-card { box-shadow: 0 5px 12px rgba(70, 50, 25, .14); }
[data-theme="light"] .how-we-work { background: #f7f5f0; }

@media (max-width: 1050px) {
  .approach-hero-bg { object-position: 72% center; }

  .mode-row { flex-direction: column; min-height: 0; }
  .mode-copy { width: 100%; }

  /* Once the copy needs the full row, move each notebook composition into its
     own responsive stage between the copy and the cards. This preserves the
     artwork and its notes without forcing text across it. */
  .mode-reveal::before, .mode-build::before, .mode-sustain::before,
  [data-theme="light"] .mode-reveal::before, [data-theme="light"] .mode-build::before, [data-theme="light"] .mode-sustain::before { background-image: none; }
  .mode-row::after {
    content: "";
    display: block;
    width: 100%;
    height: clamp(300px, 58vw, 560px);
    margin-top: 1rem;
    background-position: center, center top;
    background-size: 100% 100%, contain;
    background-repeat: no-repeat, no-repeat;
  }
  .mode-reveal .mode-row::after {
    background-image:
      linear-gradient(180deg, rgba(14,12,10,0) 84%, rgba(14,12,10,.58) 96%, #0e0c0a 100%),
      url('assets/approach-reveal.webp');
  }
  .mode-build .mode-row::after {
    height: clamp(340px, 64vw, 620px);
    background-image:
      linear-gradient(180deg, rgba(14,12,10,0) 76%, rgba(14,12,10,.88) 94%, #0e0c0a 100%),
      url('assets/approach-build.webp');
  }
  .mode-sustain .mode-row::after {
    background-image:
      linear-gradient(180deg, rgba(14,12,10,0) 72%, rgba(14,12,10,.88) 93%, #0e0c0a 100%),
      url('assets/approach-sustain.webp');
  }
  [data-theme="light"] .mode-reveal .mode-row::after {
    background-image:
      linear-gradient(180deg, rgba(246,240,228,0) 84%, rgba(246,240,228,.58) 96%, #f6f0e4 100%),
      url('assets/approach-reveal-light@2x.png');
  }
  [data-theme="light"] .mode-build .mode-row::after {
    background-image:
      linear-gradient(180deg, rgba(244,239,230,0) 76%, rgba(244,239,230,.88) 94%, #f4efe6 100%),
      url('assets/approach-build-light-bg.png');
  }
  [data-theme="light"] .mode-sustain .mode-row::after {
    background-image:
      linear-gradient(180deg, rgba(244,239,230,0) 72%, rgba(244,239,230,.88) 93%, #f4efe6 100%),
      url('assets/approach-sustain-light-bg.png');
  }
  .how-we-work-steps { flex-wrap: wrap; }
  .how-we-work-steps .step { flex: 1 1 30%; padding-top: 0; }
  /* Below the poster breakpoint the content flows taller than the artwork's
     ratio, so switch to plain paper instead of cropping the image. */
  .how-we-work-bg { display: none; }
  .how-we-work-paper { background: #121212; }
  [data-theme="light"] .how-we-work-paper { background: var(--paper); }
  [data-theme="dark"] .how-we-work-content { color: var(--cream); }
  [data-theme="light"] .how-we-work-content { color: #17130e; }
}

@media (max-width: 780px) {
  .approach-hero {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 6.5rem;
  }
  .approach-hero-bg { object-position: 68% center; }
  .mode-section { padding-block: 2.5rem; }
  .mode-row::after { height: clamp(250px, 72vw, 430px); margin-top: .5rem; }
  .mode-build .mode-row::after { height: clamp(280px, 80vw, 480px); }
  .mode-cards { flex-direction: column; }
  .mode-cards-4 .mode-card { flex-basis: auto; }

  /* On phones, the paper slips become a quieter editorial list. The existing
     icons act as bullets, while a fine divider preserves separation without
     stacking a column of stark, shadowed boxes. */
  .mode-cards { gap: 0; }
  .mode-card,
  .mode-card-outcome {
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: .85rem;
    padding: .95rem 0;
    background: transparent;
    border-bottom: 1px solid rgba(242, 232, 214, .16);
    border-radius: 0;
    box-shadow: none;
    text-align: left;
    transform: none !important;
  }
  .mode-cards .mode-card:last-child { border-bottom: 0; }
  .mode-card-icon,
  .mode-card-outcome .mode-card-icon {
    width: 24px;
    height: 24px;
    margin-top: .1rem;
    color: var(--mode-accent);
  }
  .mode-card p,
  .mode-card-outcome p {
    color: #f2e8d6;
    font-size: .92rem;
    font-weight: 400;
    line-height: 1.5;
  }
  [data-theme="light"] .mode-card,
  [data-theme="light"] .mode-card-outcome {
    border-bottom-color: rgba(23, 19, 14, .16);
    box-shadow: none;
  }
  [data-theme="light"] .mode-card p,
  [data-theme="light"] .mode-card-outcome p { color: #2a2015; }
  .how-we-work-bg { display: none; }
  .how-we-work-paper { background: #121212; }
  [data-theme="light"] .how-we-work-paper { background: var(--paper); }
  [data-theme="dark"] .how-we-work-content { color: var(--cream); }
  [data-theme="light"] .how-we-work-content { color: #17130e; }
  .how-we-work-steps { flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
  .how-we-work-steps .step { flex: none; }
  .how-we-work-steps .step p { text-align: left; }
  .how-we-work-cta { flex-direction: column; align-items: flex-start; gap: 1.25rem; padding: 0; }
  .cta-copy { margin-left: 0; }
}