/* ==========================================================================
   INBO — hero landing page
   ========================================================================== */

:root {
  /* brand */
  --ink: #17233A;
  /* headline navy            */
  --ink-soft: #2A3548;
  /* body copy                */
  --lime: #B3E467;
  /* highlight marker         */
  --violet-500: #7121DF;
  /* button top               */
  --violet-900: #2C1980;
  /* button bottom            */
  --violet-light: #C583FF;
  /* "5+ years"               */
  --cream: #FDFBF7;
  /* page top                 */
  --night: #190F45;
  /* page bottom              */

  /* layout */
  --shell: 1200px;
  --gutter: clamp(20px, 5vw, 48px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;

  /* the page can never scroll sideways.
     `clip` and NOT `hidden`: overflow-x: hidden on html or body turns the
     root into a scroll container, which silently kills every position:sticky
     on the page — the card stack in section 3 would stop working. `clip`
     crops the same overflow without creating that scroll container. */
  overflow-x: clip;
}

@supports not (overflow: clip) {

  /* older engines: crop inside the sections instead, leaving html alone */
  .page,
  .spans,
  .grow {
    overflow-x: hidden;
  }
}

body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font-family: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
}

/* taps should behave like taps, not like text selection */
a,
button {
  -webkit-tap-highlight-color: rgba(23, 35, 58, .12);
  touch-action: manipulation;
}

/* --------------------------------------------------------------------------
   Page shell + background
   -------------------------------------------------------------------------- */

.page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 620px;
  padding-bottom: clamp(28px, 3.6vw, 44px);

  background-image:
    /* soft violet bloom behind the diagram */
    radial-gradient(48% 26% at 50% 63%, rgba(139, 92, 246, .30) 0%, rgba(139, 92, 246, 0) 72%),
    /* lavender light, upper right */
    radial-gradient(66% 46% at 86% 16%, rgba(206, 190, 246, .70) 0%, rgba(206, 190, 246, 0) 68%),
    /* warm cream light, upper left */
    radial-gradient(60% 44% at 6% 10%, rgba(255, 247, 235, .95) 0%, rgba(255, 247, 235, 0) 62%),
    /* the main vertical fade: cream → lavender → deep violet → night */
    linear-gradient(180deg,
      #FDFBF7 0%,
      #FBF8F7 32%,
      #F1ECEF 40%,
      #D3CFD9 48%,
      #C6C0D1 52%,
      #B4ACC5 55%,
      #9B92B5 58%,
      #7D729F 61%,
      #615688 65%,
      #46356F 70%,
      #2E225F 74%,
      #261957 77%,
      #1E124E 81%,
      #180E45 88%,
      #190F45 100%);
}

/* fine film grain over the whole page */
.grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* without the blend mode the noise is a flat grey wash over the hero, which
   is worse than no grain at all */
@supports not (mix-blend-mode: overlay) {
  .grain {
    display: none;
  }
}

.page>*:not(.grain) {
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(22px, 3vw, 34px) var(--gutter) 0;
  display: flex;
  justify-content: center;
}

.brand img {
  width: clamp(62px, 6vw, 78px);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(40px, 5.6vw, 68px) var(--gutter) 0;
  text-align: center;
}

.hero__title {
  margin: 0;
  font-size: clamp(2.1rem, 4.55vw, 3.4rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.018em;
  color: var(--ink);
}

/* the lime marker. The block sits on a slight angle while the word stays
   level on the baseline — so the colour is painted by a pseudo-element that
   carries the rotation, rather than rotating the text along with it. */
.mark {
  position: relative;
  isolation: isolate;
  display: inline-block;
  padding: .02em .15em .05em;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
}

.mark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--lime);
  transform: rotate(-2deg);
}

.hero__lede {
  /* wide enough that the forced break lands on two full lines */
  max-width: 880px;
  margin: clamp(20px, 2.4vw, 30px) auto 0;
  font-family: "PT Serif", Georgia, "Times New Roman", serif;
  font-size: clamp(.95rem, 1.55vw, 1.2rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
  /* PT Serif ships Regular and Bold and nothing between, and Bold is far too
     heavy for a lede. A hairline stroke in the text colour thickens the stems
     by about half a weight step, which is the "slightly bolder" that's wanted.
     For true bold instead, drop the stroke and set font-weight: 700. */
  -webkit-text-stroke: 0;
}

/* only where the stroke exists, and painted behind the glyph rather than over
   it so the counters stay open on low-DPI screens */
@supports (-webkit-text-stroke: 1px currentColor) {
  .hero__lede {
    -webkit-text-stroke: .018em currentColor;
    paint-order: stroke fill;
  }
}

/* call to action ---------------------------------------------------------- */

.cta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  margin-top: clamp(16px, 2.1vw, 26px);
}

.cta__btn,
.cta__send {
  background-image: linear-gradient(180deg, var(--violet-500) 0%, var(--violet-900) 100%);
  color: #fff;
  box-shadow:
    0 10px 22px -8px rgba(31, 12, 84, .55),
    inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.cta__btn {
  display: inline-flex;
  align-items: center;
  height: clamp(44px, 4.2vw, 50px);
  padding: 0 clamp(22px, 2.4vw, 30px);
  border-radius: 999px;
  font-size: clamp(.95rem, 1.35vw, 1.0625rem);
  font-weight: 500;
  letter-spacing: .002em;
  white-space: nowrap;
}

.cta__send {
  display: inline-grid;
  place-items: center;
  width: clamp(44px, 4.2vw, 50px);
  height: clamp(44px, 4.2vw, 50px);
  border-radius: 50%;
}

.cta__send svg {
  width: 46%;
  height: 46%;
}

.cta__btn:hover,
.cta__send:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    0 16px 28px -10px rgba(31, 12, 84, .6),
    inset 0 1px 0 rgba(255, 255, 255, .22);
}

.cta__btn:focus-visible,
.cta__send:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* browsers that never learned :focus-visible still need a visible ring */
@supports not selector(:focus-visible) {

  .cta__btn:focus,
  .cta__send:focus {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
  }

  .cta--dark .cta__btn:focus,
  .cta--dark .cta__send:focus {
    outline-color: #2F160F;
  }
}

.hero__note {
  margin: clamp(13px, 1.6vw, 18px) auto 0;
  font-size: clamp(.8rem, 1.18vw, .92rem);
  font-style: italic;
  /* Figtree is variable, so this one gets a real 500 */
  font-weight: 500;
  color: #333C4C;
}

/* Below this width the forced break no longer fits on one line, so the
   sentence is left to wrap on its own — which still lands on two lines. */
@media (max-width: 780px) {
  .lede-br {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Diagram (animated GIF)
   -------------------------------------------------------------------------- */

.diagram {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(20px, 2.8vw, 34px) var(--gutter) 0;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}

.diagram__art {
  width: 100%;
  max-width: 830px;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Backed by
   -------------------------------------------------------------------------- */

.backed {
  padding: clamp(10px, 1.5vw, 16px) var(--gutter) 0;
  text-align: center;
  color: #FFFFFF;
}

.backed__label,
.backed__years,
.backed__copy {
  margin: 0;
}

.backed__label {
  font-size: clamp(.75rem, 1.05vw, .8125rem);
  font-weight: 600;
  letter-spacing: .005em;
}

/* the gradient needs a visible fallback: `color: transparent` on its own is
   INVISIBLE text anywhere background-clip: text is unsupported, so the
   transparency is only switched on where the clip actually works */
.backed__years {
  margin-top: .28em;
  font-size: clamp(1.6rem, 2.7vw, 2rem);
  font-weight: 500;
  letter-spacing: -.01em;
  background-image: linear-gradient(92deg, #A855F7 0%, #C583FF 45%, #B266FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: #C583FF;
  -webkit-text-fill-color: #C583FF;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .backed__years {
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

.backed__copy {
  margin-top: .35em;
  font-size: clamp(.9rem, 1.3vw, 1rem);
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .page {
    /* no floor: on a phone the hero is as tall as its content */
    min-height: 0;

    background-image:
      radial-gradient(70% 22% at 50% 64%, rgba(139, 92, 246, .30) 0%, rgba(139, 92, 246, 0) 72%),
      radial-gradient(80% 40% at 88% 14%, rgba(206, 190, 246, .70) 0%, rgba(206, 190, 246, 0) 68%),
      radial-gradient(80% 38% at 4% 8%, rgba(255, 247, 235, .95) 0%, rgba(255, 247, 235, 0) 62%),
      linear-gradient(180deg,
        #FDFBF7 0%, #FBF8F7 34%, #F1ECEF 42%, #D3CFD9 49%,
        #B4ACC5 55%, #9B92B5 59%, #7D729F 62%, #615688 66%,
        #46356F 71%, #2E225F 75%, #261957 79%, #1E124E 84%,
        #180E45 90%, #190F45 100%);
  }

  .hero {
    padding-top: clamp(26px, 7vw, 42px);
  }

  /* the desktop minimum (2.1rem) overflows a 375px screen on the longer of
     the two lines, so the whole scale steps down here */
  .hero__title {
    font-size: clamp(1.6rem, 7.8vw, 2.3rem);
    line-height: 1.2;
    letter-spacing: -.022em;
    overflow-wrap: break-word;
  }

  /* three lines, not seven. The 33ch measure was the thing forcing the
     sentence into a narrow column — it is dropped so the paragraph uses the
     full width, and the size is tied to the viewport so the wrap holds at
     the same three lines from 320px up to this breakpoint. */
  .hero__lede {
    max-width: none;
    font-size: clamp(.66rem, 3.3vw, .9rem);
    line-height: 1.55;
  }

  .hero__note {
    max-width: 34ch;
    line-height: 1.5;
  }

  .cta {
    flex-wrap: nowrap;
    gap: 4px;
  }

  /* the diagram stays legible: let it scroll sideways instead of shrinking */
  .diagram {
    padding-inline: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .diagram::-webkit-scrollbar {
    display: none;
  }

  .diagram__art {
    width: 560px;
    max-width: none;
    margin-inline: auto;
    padding-inline: 20px;
  }

  .backed {
    padding-top: clamp(14px, 4vw, 20px);
  }
}

@media (max-width: 480px) {
  .hero__title {
    font-size: clamp(1.5rem, 7.6vw, 1.95rem);
  }

  .diagram__art {
    width: 480px;
    padding-inline: 16px;
  }
}

/* the narrowest phones still in real use */
@media (max-width: 380px) {
  :root {
    --gutter: 16px;
  }

  .hero__title {
    font-size: 1.45rem;
  }

  .cta__btn {
    padding: 0 18px;
    font-size: .9rem;
  }
}

/* --------------------------------------------------------------------------
   Touch devices
   -------------------------------------------------------------------------- */

/* :hover latches after a tap on a touchscreen — a lifted card stays lifted
   and a paused column stays paused for good. So the lifts only exist where
   there is a real pointer. */
@media (hover: none) {

  .cta__btn:hover,
  .cta__send:hover {
    transform: none;
    filter: none;
  }
}

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* ==========================================================================
   SECTION 2 — "Our work spans across businesses"
   A static two-line industry list + four columns of work on vertical loops.
   ========================================================================== */

.spans {
  background: var(--cream);
  padding-top: clamp(54px, 7vw, 92px);
  padding-bottom: clamp(10px, 2vw, 24px);
  overflow: hidden;

  /* one gap value shared by the grid, the columns and the loop maths */
  --work-gap: clamp(10px, 1.15vw, 16px);
}

.spans__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* --- industries: static, two lines ---------------------------------------- */

.industries {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2vw, 18px);
  min-width: 0;
  width: 100%;
  margin: 0;
}

.industries__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(18px, 3.2vw, 54px);
  margin: 0;
}

/* the second line steps in a little, so the two rows read as a stagger */
.industries__row:nth-child(2) {
  padding-left: clamp(10px, 2.6vw, 44px);
}

.tag {
  /* Instrument Serif — condensed, high contrast, single-storey g.
     This is the face in the original design; a Garamond or Playfair is
     roughly 30% wider at the same cap height and reads quite differently. */
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-size: clamp(1.4rem, 2.85vw, 2.5rem);
  font-weight: 400;
  line-height: 1.15;
  color: #262626;
  white-space: nowrap;
}

/* --- heading + arrow ----------------------------------------------------- */

.spans__head {
  position: relative;
  text-align: right;
  padding-bottom: clamp(34px, 4.5vw, 56px);
}

.spans__title {
  margin: 0;
  font-size: clamp(1.65rem, 3vw, 2.4rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
}

.spans__arrow {
  position: absolute;
  top: calc(100% - clamp(30px, 4vw, 50px));
  right: clamp(28px, 3.6vw, 56px);
  width: clamp(190px, 23vw, 292px);
  height: auto;
  color: #1B2430;
  pointer-events: none;
}

/* --- work grid: four vertical loops --------------------------------------- */

.work {
  position: relative;
  margin-top: clamp(28px, 3.6vw, 48px);
  height: clamp(380px, 46vw, 640px);
  overflow: hidden;
}

/* soften both cut edges so pieces arrive and leave instead of popping */
.work::before,
.work::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
}

.work::before {
  top: 0;
  height: clamp(26px, 3.4vw, 48px);
  background: linear-gradient(180deg, var(--cream), rgba(253, 251, 247, 0));
}

.work::after {
  bottom: 0;
  height: clamp(50px, 6.5vw, 92px);
  background: linear-gradient(180deg, rgba(253, 251, 247, 0), var(--cream));
}

.work__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--work-gap);
  height: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.work__col {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.work__track {
  /* --loop is written by the script: the height of ONE .work__set.
     Travelling exactly that far means the next copy lands precisely where
     the first one started, so the join is invisible.

     Safari (and a few older engines) will not animate a transform that
     reads var() from inside @keyframes, so the script also writes a real
     keyframe rule per column with the distance in literal pixels, and
     points the track at it inline. The rules below stay as the fallback. */
  --loop: 0px;
  display: flex;
  flex-direction: column;
  will-change: transform;

  /* stops the transformed layer flickering in Safari */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.work__track--up {
  animation: work-up 40s linear infinite;
}

.work__track--down {
  animation: work-down 40s linear infinite;
}

@keyframes work-up {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(0, calc(var(--loop) * -1), 0);
  }
}

@keyframes work-down {
  from {
    transform: translate3d(0, calc(var(--loop) * -1), 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.work__set {
  display: flex;
  flex-direction: column;
  gap: var(--work-gap);
  /* the trailing gap belongs to the set, so spacing across the join matches
     spacing inside it — and --loop stays a single clean measurement */
  padding-bottom: var(--work-gap);
}

/* hover a column to hold it still and look at a piece properly.
   Pointer devices only: on a touchscreen the first tap would pause the
   column permanently. */
@media (hover: hover) {
  .work__col:hover .work__track {
    animation-play-state: paused;
  }
}

.work__item {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #F1ECE4;
  box-shadow: 0 10px 24px -16px rgba(23, 35, 58, .45);
}

.work__item img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 900px) {
  .spans {
    padding-top: clamp(40px, 7vw, 64px);
  }

  .spans__inner {
    grid-template-columns: 1fr;
    gap: clamp(22px, 4vw, 36px);
  }

  .spans__head {
    order: -1;
    text-align: left;
    padding-bottom: 0;
  }

  .spans__arrow {
    display: none;
  }

  /* all four columns stay. Dropping to three hid a whole column of work,
     and the three that remained had to grow to fill the width. Keeping the
     count and tightening the gap is what makes every piece smaller. */
  .spans {
    --work-gap: 10px;
  }
}

@media (max-width: 640px) {
  .spans__inner {
    gap: 20px;
  }

  .spans__title {
    font-size: clamp(1.45rem, 6.6vw, 1.9rem);
    line-height: 1.26;
  }

  /* the long names have to be allowed to break down here. `nowrap` plus the
     section's overflow:hidden simply chops the end off
     "Higher-Consideration Consumer" on a phone. */
  .tag {
    white-space: normal;
    font-size: clamp(1.2rem, 6.2vw, 1.75rem);
  }

  .industries__row {
    gap: 6px 18px;
  }

  .industries__row:nth-child(2) {
    padding-left: 0;
  }
}

@media (max-width: 560px) {
  .work {
    height: clamp(340px, 88vw, 460px);
  }
}

@media (max-width: 480px) {
  .spans {
    --work-gap: 6px;
  }

  .work {
    height: clamp(300px, 84vw, 400px);
  }

  .work__item {
    border-radius: 6px;
    /* the desktop shadow is a smudge at this size */
    box-shadow: 0 4px 10px -8px rgba(23, 35, 58, .45);
  }
}

@media (max-width: 380px) {
  .tag {
    font-size: 1.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  .work__track {
    animation: none !important;
  }
}

/* ==========================================================================
   SECTION 3 — "From the First Ad to the Business Outcome."
   Copy on the left, a five-deep card stack on the right.
   ========================================================================== */

.system {
  background: #FFFFFF;
  padding: clamp(56px, 7.5vw, 104px) 0 clamp(22px, 2.8vw, 40px);
}

.system__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: start;
  gap: clamp(32px, 4.4vw, 64px);
  max-width: 1060px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* --- left column --------------------------------------------------------- */

.system__copy {
  display: flex;
  flex-direction: column;
}

.system__badge {
  align-self: flex-start;
  margin: 0;
  padding: 9px clamp(16px, 1.6vw, 22px);
  border-radius: 999px;
  background: #F3F4F6;
  font-size: clamp(.75rem, 1.05vw, .8125rem);
  font-weight: 700;
  letter-spacing: -.005em;
  color: #2F2D2D;
}

.system__title {
  margin: clamp(18px, 2.2vw, 28px) 0 0;
  font-size: clamp(1.9rem, 3.1vw, 2.35rem);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -.02em;
  color: var(--ink);
}

.system__lede {
  margin: clamp(16px, 2vw, 24px) 0 0;
  font-size: clamp(.9rem, 1.25vw, .96rem);
  line-height: 1.6;
  color: #505050;
}

/* sits at the foot of the column, level with the bottom of the deck */
.system__kicker {
  margin: clamp(36px, 6vw, 72px) 0 0;
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  font-style: italic;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: -.01em;
  color: #A15BFF;
}

@media (min-width: 901px) {

  /* the copy holds still while the cards travel past it */
  .system__copy {
    position: -webkit-sticky;
    position: sticky;
    top: clamp(84px, 11vh, 128px);
    align-self: start;
  }
}

/* --- the deck: sticky, scroll-driven ------------------------------------- */

.stack {
  /* one tall column. Each card pins a little lower than the last, so the
     stack builds up at the top of the viewport as you scroll through. */
  --stack-top: clamp(84px, 11vh, 128px);
  --stack-step: clamp(12px, 1.4vw, 20px);

  display: flex;
  flex-direction: column;
  gap: clamp(26px, 3.6vw, 52px);

  /* No padding-bottom here: a sticky element is constrained by its
     containing block, and padding sits outside that box — it buys the last
     card no room at all. The .stack__runout element below does the job. */
}

.stack__card {
  position: -webkit-sticky;
  position: sticky;
  top: calc(var(--stack-top) + var(--i) * var(--stack-step));

  border-radius: 16px;
  overflow: hidden;

  /* the upward shadow is what separates the pinned edges — without it the
     stacked strips share a background and read as one tall card */
  box-shadow:
    0 -9px 20px -10px rgba(23, 35, 58, .26),
    0 20px 44px -30px rgba(23, 35, 58, .5);
}

/* the run-out that keeps the final card pinned to the end of the section */
.stack__runout {
  flex: none;
  height: clamp(150px, 32vh, 360px);
}

/* the card IS the image — nothing is drawn around it */
.stack__card img {
  display: block;
  width: 100%;
  height: auto;
}

/* stacking order — the first card must sit underneath everything after it */
.stack__card:nth-child(1) {
  --i: 0;
  z-index: 1;
}

.stack__card:nth-child(2) {
  --i: 1;
  z-index: 2;
}

.stack__card:nth-child(3) {
  --i: 2;
  z-index: 3;
}

.stack__card:nth-child(4) {
  --i: 3;
  z-index: 4;
}

.stack__card:nth-child(5) {
  --i: 4;
  z-index: 5;
}

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 1024px) {
  .system__inner {
    max-width: 900px;
  }

  .stack {
    --stack-top: clamp(72px, 9vh, 104px);
  }
}

@media (max-width: 900px) {
  .system {
    padding-top: clamp(44px, 7vw, 76px);
  }

  .system__inner {
    grid-template-columns: 1fr;
    gap: clamp(30px, 6vw, 46px);
  }

  /* single column now, so the copy is centred rather than ragged against a
     left edge that no longer has anything sitting beside it.
     align-items on the flex column is what centres the badge; text-align
     alone would leave the pill hard left. */
  .system__copy {
    align-items: center;
    text-align: center;
  }

  .system__badge {
    align-self: center;
  }

  /* the copy no longer pins here, so the stack no longer needs to run long */
  .stack {
    --stack-top: 80px;
    gap: clamp(18px, 4vw, 34px);
  }

  .stack__runout {
    height: clamp(80px, 18vh, 180px);
  }
}

@media (max-width: 640px) {
  .system {
    padding-bottom: 8px;
  }

  .system__badge {
    padding: 8px 14px;
    font-size: .72rem;
    line-height: 1.4;
  }

  .system__title {
    font-size: clamp(1.55rem, 7.2vw, 2rem);
  }

  .system__kicker {
    margin-top: clamp(20px, 6vw, 32px);
    font-size: clamp(1rem, 4.6vw, 1.15rem);
  }

  .stack {
    --stack-top: 68px;
    --stack-step: 8px;
    gap: 16px;
  }

  .stack__card {
    border-radius: 12px;
  }

  .stack__runout {
    height: 56px;
  }
}

/* a 128px sticky offset on a 380px-tall viewport leaves nothing for the card */
@media (orientation: landscape) and (max-height: 520px) {
  .stack {
    --stack-top: 24px;
    --stack-step: 8px;
  }

  .stack__runout {
    height: 48px;
  }

  .system__copy {
    top: 24px;
  }
}

/* ==========================================================================
   SECTION 4 — "Start With What You're Trying to Grow."
   A folder that holds seven notes. They come out when the section arrives
   and slide back inside when it leaves.
   ========================================================================== */

.grow {
  background: var(--cream);
  padding-top: clamp(30px, 3.6vw, 52px);
}

.grow__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--gutter);
  text-align: center;
}

.grow__badge {
  display: inline-block;
  margin: 0;
  padding: 8px clamp(14px, 1.5vw, 20px);
  border-radius: 999px;
  background: #F3F4F6;
  font-size: clamp(.64rem, .88vw, .74rem);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink);
}

.grow__title {
  margin: clamp(14px, 1.8vw, 22px) 0 0;
  font-size: clamp(1.7rem, 3.5vw, 2.6rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -.02em;
  color: var(--ink);
}

/* --- the folder ---------------------------------------------------------- */

.folder {
  position: relative;
  width: min(100%, 760px);
  /* the notes live above the folder, so the room for them is reserved here.
     Raising this number pushes the whole folder — notes included — further
     down, which is what opens up the gap under the heading. */
  margin: clamp(184px, 23.5vw, 248px) auto 0;
  padding-top: clamp(24px, 3.2vw, 32px);
}

/* the folder artwork — swap this file for your own; the copy and CTA below
   are positioned to sit on top of its front panel */
.folder__bg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

/* text + CTA, centred on the front panel of the folder artwork.
   `top` is the vertical centre of that panel measured from the top of the
   whole folder — 62% matches the artwork's proportions. It is the one number
   to nudge if your folder.png sits differently: lower it to raise the copy. */
.folder__content {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: 62%;
  transform: translateY(-50%);
  padding: 0 clamp(28px, 6vw, 80px);
  text-align: center;
}

.folder__copy {
  margin: 0;
  font-size: clamp(.98rem, 1.55vw, 1.26rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -.01em;
  color: var(--ink);
}

.cta--dark {
  margin-top: clamp(18px, 2.4vw, 30px);
}

.cta--dark .cta__btn,
.cta--dark .cta__send {
  background-image: linear-gradient(180deg, #4A2B22 0%, #2F160F 100%);
  box-shadow:
    0 12px 22px -10px rgba(30, 12, 6, .65),
    inset 0 1px 0 rgba(255, 255, 255, .16);
}

.cta--dark .cta__btn:focus-visible,
.cta--dark .cta__send:focus-visible {
  outline-color: #2F160F;
}

/* --- the notes ----------------------------------------------------------- */

.folder__notes {
  position: absolute;
  z-index: 2;
  /* above the folder artwork, under the copy */
  left: 0;
  right: 0;
  bottom: 100%;
  height: clamp(150px, 20vw, 200px);
  pointer-events: none;
}

.note {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  min-width: 96px;
  padding: clamp(10px, 1.05vw, 14px) clamp(12px, 1.3vw, 16px);
  border: 2px solid #48547A;
  border-radius: 12px;
  background: #FFFFFF;
  font-size: clamp(.68rem, .98vw, .84rem);
  font-weight: 500;
  line-height: 1.42;
  color: #2A3348;
  text-align: center;
  box-shadow: 0 10px 18px -12px rgba(23, 35, 58, .35);

  /* closed: tucked deep enough inside that the artwork covers them */
  opacity: 0;
  transform:
    translate(var(--dx), clamp(210px, 27vw, 264px)) rotate(0deg) scale(.6);
  transition:
    transform .75s cubic-bezier(.2, .85, .3, 1) var(--d),
    opacity .3s ease calc(var(--d) + .42s);
}

.folder.is-open .note {
  opacity: 1;
  transform: translate(0, 0) rotate(var(--rot)) scale(1);
  transition:
    transform .75s cubic-bezier(.2, .85, .3, 1) var(--d),
    opacity .28s ease var(--d);
}

/* note placement — x/y are % of the notes area, w is % of the folder width.
   --dx pulls each note toward the middle of the folder as it goes back in,
   --d staggers them so they come out left to right rather than all at once. */
.note:nth-child(1) {
  --x: -2.0%;
  --y: 4%;
  --w: 28.0%;
  --rot: -11deg;
  --dx: 48px;
  --d: 0ms;
}

.note:nth-child(2) {
  --x: 29.0%;
  --y: 0%;
  --w: 21.5%;
  --rot: -3deg;
  --dx: 18px;
  --d: 120ms;
}

.note:nth-child(3) {
  --x: 54.0%;
  --y: 2%;
  --w: 20.0%;
  --rot: 5deg;
  --dx: -18px;
  --d: 240ms;
}

.note:nth-child(4) {
  --x: 76.0%;
  --y: 7%;
  --w: 26.0%;
  --rot: 9deg;
  --dx: -48px;
  --d: 360ms;
}

.note:nth-child(5) {
  --x: 13.0%;
  --y: 46%;
  --w: 22.5%;
  --rot: -8deg;
  --dx: 34px;
  --d: 60ms;
}

.note:nth-child(6) {
  --x: 40.0%;
  --y: 45%;
  --w: 20.5%;
  --rot: 1deg;
  --dx: 0px;
  --d: 180ms;
}

.note:nth-child(7) {
  --x: 65.0%;
  --y: 48%;
  --w: 22.0%;
  --rot: 6deg;
  --dx: -34px;
  --d: 300ms;
}

/* --- footer -------------------------------------------------------------- */

.site-footer {
  margin-top: clamp(24px, 3vw, 38px);
  border-top: 1px solid #E7E4DD;
}

.site-footer p {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(16px, 2vw, 22px) var(--gutter) 4px;
  text-align: center;
  font-size: clamp(.72rem, 1vw, .8rem);
  color: #8A8880;
}

.site-footer__links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 20px;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(16px, 2vw, 22px);
}

.site-footer__links a {
  font-size: clamp(.72rem, 1vw, .8rem);
  color: #8A8880;
  text-decoration: none;
  transition: color .2s ease;
}

.site-footer__links a:hover {
  color: var(--ink);
}

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 700px) {
  .folder {
    margin-top: clamp(310px, 84vw, 400px);
  }

  .folder__notes {
    height: clamp(270px, 75vw, 355px);
  }

  /* the copy breaks better on its own down here */
  .folder__copy br {
    display: none;
  }

  /* folder.png carries a transparent margin: the painted panel is roughly
     77% of the element's width, so a padding in px lets the copy run past
     the artwork on a phone. A percentage keeps it on the panel at any size.
     Raise this one number if the copy still touches the folder's edges. */
  .folder__content {
    padding: 0 15%;
  }

  /* four short rows instead of two wide ones */
  .note:nth-child(1) {
    --x: 0%;
    --y: 0%;
    --w: 49%;
  }

  .note:nth-child(2) {
    --x: 52%;
    --y: 3%;
    --w: 45%;
  }

  .note:nth-child(3) {
    --x: 2%;
    --y: 29%;
    --w: 45%;
  }

  .note:nth-child(4) {
    --x: 50%;
    --y: 31%;
    --w: 49%;
  }

  .note:nth-child(5) {
    --x: 0%;
    --y: 57%;
    --w: 45%;
  }

  .note:nth-child(6) {
    --x: 51%;
    --y: 60%;
    --w: 42%;
  }

  .note:nth-child(7) {
    --x: 20%;
    --y: 82%;
    --w: 49%;
  }
}

@media (max-width: 640px) {
  .grow__title {
    font-size: clamp(1.5rem, 7.4vw, 2rem);
  }

  .site-footer p {
    line-height: 1.5;
  }
}

/* the notes, the copy and the CTA all scale down together, so everything
   stays on the front panel of the artwork instead of spilling off it */
@media (max-width: 480px) {
  .folder {
    margin-top: clamp(300px, 82vw, 372px);
    padding-top: 18px;
  }

  .folder__notes {
    height: clamp(262px, 74vw, 336px);
  }

  .note {
    min-width: 0;
    padding: 8px 9px;
    border-width: 1.5px;
    border-radius: 9px;
    font-size: clamp(.6rem, 2.9vw, .72rem);
    line-height: 1.35;
  }

  .folder__content {
    top: 60%;
  }

  /* small enough to drop to two lines from 360px up, which leaves 40–57px
     of panel clear below the button. It only goes to three lines at 320px,
     and even there it clears by 16px. */
  .folder__copy {
    font-size: clamp(.625rem, 2.9vw, .75rem);
    line-height: 1.3;
  }

  .cta--dark {
    margin-top: 10px;
  }

  .cta--dark .cta__btn {
    padding: 0 16px;
    font-size: .8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .note {
    opacity: 1;
    transform: translate(0, 0) rotate(var(--rot));
    transition: none;
  }
}

/* ==========================================================================
   THANK-YOU PAGE (thankyou.html)
   Reuses the shared shell: .site-header, .brand, .mark and .site-footer.
   ========================================================================== */

body.thanks-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--cream);
}

/* dvh tracks the mobile browser's collapsing toolbar; 100vh does not, and
   leaves a scrollbar's worth of dead space under the footer on iOS */
@supports (min-height: 100dvh) {
  body.thanks-page {
    min-height: 100dvh;
  }
}

/* .site-header already centres the logo (see the shared rule above); this
   just pins the header to full width inside the flex column so that
   centring has the whole row to work with, matching the landing page. */
body.thanks-page>.site-header {
  width: 100%;
  padding-top: clamp(16px, 2.2vw, 26px);
}

.thanks {
  flex: 1;
  max-width: var(--shell);
  width: 100%;
  margin: 0 auto;
  padding: clamp(20px, 2.8vw, 38px) var(--gutter) clamp(16px, 2.2vw, 30px);
  text-align: center;
}

/* --- heading -------------------------------------------------------------- */

.thanks__head {
  position: relative;
}

/* the animation above the heading */
.thanks__art {
  display: block;
  width: 100%;
  max-width: clamp(88px, 10vw, 128px);
  height: auto;
  margin: 0 auto clamp(6px, 1vw, 14px);
}

/* "Thank you." — the lime block is the shared .mark, so it carries the
   same slight tilt as every other highlight on the site */
.thanks__eyebrow {
  margin: 0;
  font-size: clamp(2rem, 5.2vw, 4.15rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
}

.thanks__title {
  margin: clamp(6px, .8vw, 10px) 0 0;
  font-size: clamp(1.75rem, 3.9vw, 2.9rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.022em;
  color: var(--ink);
}

.thanks__lede {
  margin: clamp(12px, 1.6vw, 20px) auto 0;
  max-width: 620px;
  font-size: clamp(.88rem, 1.2vw, 1rem);
  line-height: 1.65;
  color: #3A3A39;
}

/* --- the three steps ------------------------------------------------------ */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 20px);
  max-width: 1040px;
  margin: clamp(22px, 2.9vw, 40px) auto 0;
  text-align: left;
}

.step {
  padding: clamp(16px, 1.7vw, 22px);
  border: 1px solid #EFEBEB;
  border-radius: 12px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(23, 35, 58, .04);
  transition:
    transform .3s cubic-bezier(.22, .72, .3, 1),
    box-shadow .3s ease,
    border-color .3s ease;
}

/* pointer devices only — on a touchscreen a tapped card stays lifted */
@media (hover: hover) {
  .step:hover {
    transform: translateY(-7px);
    border-color: #E2D8F8;
    box-shadow: 0 20px 34px -20px rgba(74, 30, 160, .3);
  }

  .step:hover .step__icon {
    transform: translateY(-2px) scale(1.08);
  }
}

.step__icon {
  transition: transform .3s cubic-bezier(.22, .72, .3, 1);
}

/* a quiet entrance so the page assembles itself rather than just appearing */
@keyframes thanks-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

.thanks__art,
.thanks__eyebrow,
.thanks__title,
.thanks__lede,
.step {
  /* `backwards` and not `forwards`: the animation must not hold a transform
     at the end, or it would override the hover lift */
  animation: thanks-rise .65s cubic-bezier(.22, .72, .3, 1) backwards;
}

.thanks__art {
  animation-delay: 0s;
}

.thanks__eyebrow {
  animation-delay: .1s;
}

.thanks__title {
  animation-delay: .19s;
}

.thanks__lede {
  animation-delay: .28s;
}

.step:nth-child(1) {
  animation-delay: .34s;
}

.step:nth-child(2) {
  animation-delay: .43s;
}

.step:nth-child(3) {
  animation-delay: .52s;
}

.step__icon {
  display: block;
  width: clamp(30px, 3vw, 38px);
  height: auto;
  color: #7C1FE9;
}

.step__title {
  margin: clamp(14px, 1.8vw, 22px) 0 0;
  font-size: clamp(.98rem, 1.35vw, 1.12rem);
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--ink);
}

.step__copy {
  margin: clamp(8px, 1vw, 12px) 0 0;
  font-size: clamp(.78rem, 1.05vw, .875rem);
  line-height: 1.6;
  color: #767676;
}

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 820px) {
  .steps {
    grid-template-columns: 1fr;
    max-width: 460px;
  }
}

@media (max-width: 560px) {
  .thanks__lede br {
    display: none;
  }
}

@media (max-width: 480px) {
  .thanks {
    padding-top: 14px;
  }

  .thanks__eyebrow {
    font-size: clamp(1.9rem, 11vw, 2.6rem);
  }

  .thanks__title {
    font-size: clamp(1.45rem, 7.2vw, 1.95rem);
  }

  .thanks__lede {
    font-size: .9rem;
  }

  .steps {
    gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .thanks__art,
  .thanks__eyebrow,
  .thanks__title,
  .thanks__lede,
  .step {
    animation: none;
  }

  .step:hover {
    transform: none;
  }
}

/* ==========================================================================
   NOTCHED PHONES IN LANDSCAPE
   Needs viewport-fit=cover on the viewport meta tag to have any effect.
   .diagram is deliberately left out — it runs edge to edge on phones.
   ========================================================================== */

@supports (padding: max(0px)) {

  .site-header,
  .hero,
  .spans__inner,
  .work__grid,
  .system__inner,
  .grow__inner,
  .thanks,
  .site-footer p {
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }
}