/* Fonts: Georgia (headlines) and Helvetica / Arial (text); the hero headline alone uses Instrument Serif */

:root {
  --paper: #f2f0e9;
  --ink: #151515;
  --muted: #6e6b64;
  --line: #c9c5ba;
  --acid: #d9ff43;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  overflow-x: hidden;

  background: var(--paper);
  color: var(--ink);

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

a,
button {
  color: inherit;
}

button {
  font-family: inherit;
}

.wrap {
  width: min(1180px, calc(100% - 48px));

  margin-left: auto;
  margin-right: auto;
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.eyebrow,
.index,
article > span,
footer,
.scroll-label,
.hero-progress {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

  font-size: 11px;

  letter-spacing: 0.08em;
}

em {
  font-weight: 400;
}


/* =========================================================
   NAV
   ========================================================= */

.nav {
  position: absolute;

  top: 0;
  left: 50%;

  width: min(1180px, calc(100% - 48px));
  height: 86px;

  transform: translateX(-50%);

  display: flex;
  align-items: center;
  justify-content: space-between;

  z-index: 1000;

  border-bottom:
    1px solid
    rgba(21, 21, 21, 0.25);
}

.brand {
  padding: 8px 9px;

  border:
    1px solid
    var(--ink);

  font-weight: 600;

  text-decoration: none;
}

.nav nav {
  display: flex;

  gap: 26px;
}

.nav nav a {
  font-size: 14px;

  text-decoration: none;
}

.nav nav a:hover {
  text-decoration: underline;
}


/* =========================================================
   HERO
   ========================================================= */

.morph-section {
  position: relative;

  height: 330vh;

  background: var(--paper);
}

/*
 * "Campaigns" menu target: 80% through the hero scroll,
 * where the 20 cards have settled into their arc.
 * (section height − one screen) × 0.8
 */
.campaigns-anchor {
  position: absolute;

  top: calc((300vh - 100vh) * 0.79);
  left: 0;

  width: 1px;
  height: 1px;
}

.morph-sticky {
  position: sticky;

  top: 0;

  width: 100%;
  height: 100vh;

  overflow: hidden;

  isolation: isolate;
}

.hero-intro,
.hero-reveal {
  position: absolute;

  top: 50%;
  left: 50%;

  width:
    min(
      1000px,
      calc(100% - 40px)
    );

  transform:
    translate(
      -50%,
      -50%
    );

  text-align: center;

  z-index: 10;

  pointer-events: none;
}

.hero-intro h1 {
  margin:
    18px
    0
    25px;

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(
      68px,
      10vw,
      145px
    );

  font-weight: 400;

  line-height: 0.85;

  letter-spacing: -0.045em;
}

.hero-subtitle {
  max-width: 620px;

  margin: auto;

  font-size: 18px;

  line-height: 1.55;
}

.scroll-label {
  display: block;

  margin-top: 36px;

  color: var(--muted);
}


/* =========================================================
   HERO REVEAL
   ========================================================= */

.hero-reveal {
  top: 28%;

  opacity: 0;

  transform:
    translate(
      -50%,
      -50%
    )
    translateY(30px);
}

.hero-reveal h2 {
  margin: 15px 0;

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(
      52px,
      7vw,
      105px
    );

  font-weight: 400;

  line-height: 0.9;

  letter-spacing: -0.035em;
}

.hero-reveal p {
  max-width: 550px;

  margin: auto;

  color: var(--muted);

  line-height: 1.6;
}


/* =========================================================
   FLASH CARD LAYER
   ========================================================= */

.morph-cards {
  position: absolute;

  inset: 0;

  z-index: 25;

  /*
   * Empty parts of this layer don't
   * block the page.
   */
  pointer-events: none;
}


/* =========================================================
   FLASH CARD
   ========================================================= */

.morph-card {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 82px;
  height: 116px;

  /*
   * IMPORTANT:
   * The cards are visible by default.
   */
  opacity: 1;

  transform-origin: center;

  perspective: 1200px;

  pointer-events: auto;

  will-change:
    transform,
    opacity;
}


/* =========================================================
   CARD FLIPPER
   ========================================================= */

.card-flipper {
  position: relative;

  width: 100%;
  height: 100%;

  transform:
    rotateY(0deg);

  transform-style:
    preserve-3d;

  -webkit-transform-style:
    preserve-3d;

  transition:
    transform
    0.65s
    cubic-bezier(
      .2,
      .8,
      .2,
      1
    );
}


/* =========================================================
   CARD FLIP
   ========================================================= */

.morph-card:hover
.card-flipper,

.morph-card.flipped
.card-flipper {
  transform:
    rotateY(180deg);
}

/*
 * Magnify: the hovered card lifts above its neighbours and
 * grows so its text is easy to read. On touch screens the
 * tapped (flipped) card grows instead.
 */
.morph-card {
  transition: z-index 0s 0.3s;
}

@media (hover: hover) {

  .morph-card:hover {
    z-index: 40;

    transition-delay: 0s;
  }

  .morph-card:hover .card-flipper {
    transform:
      rotateY(180deg)
      scale(1.7);
  }

  .morph-card:hover .card-face {
    box-shadow:
      0 24px 50px rgba(21, 21, 21, 0.28);
  }

}

@media (hover: none) {

  .morph-card.flipped {
    z-index: 40;
  }

  .morph-card.flipped .card-flipper {
    transform:
      rotateY(180deg)
      scale(1.45);
  }

}


/* =========================================================
   CARD FACE
   ========================================================= */

.card-face {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  padding: 8px;

  overflow: hidden;

  border:
    1px solid
    var(--ink);

  border-radius: 10px;

  -webkit-backface-visibility:
    hidden;

  backface-visibility:
    hidden;
}


/* =========================================================
   FRONT
   ========================================================= */

.card-front {
  background:
    rgba(
      242,
      240,
      233,
      0.98
    );

  color:
    var(--ink);

  transform:
    rotateY(0deg);

  box-shadow:
    0
    12px
    35px
    rgba(
      21,
      21,
      21,
      0.12
    );
}

.card-number {
  position: absolute;

  top: 7px;
  left: 8px;

  font:
    7px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  opacity: 0.45;
}

.card-front strong {
  font-family:
    Georgia,
    serif;

  font-size: 14px;
  font-weight: 400;

  text-align: center;

  line-height: 1;
}


/* =========================================================
   BACK
   ========================================================= */

.card-back {
  background:
    var(--ink);

  color:
    var(--paper);

  transform:
    rotateY(180deg);

  text-align: center;
}

.card-back small {
  margin-bottom: 7px;

  color:
    var(--acid);

  font:
    7px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing:
    0.1em;
}

.card-back span {
  padding:
    0
    4px;

  font:
    11px
    Georgia,
    serif;

  text-align: center;

  line-height: 1.1;
}

/* Cards linked to a campaign story: brand colour on the back */
.morph-card.is-campaign .card-back {
  background: var(--card-accent);

  color: var(--ink);
}

.morph-card.is-campaign .card-back small {
  color: var(--ink);
}

.card-back em {
  margin-top: 8px;

  font:
    normal
    7px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.1em;
}


/* =========================================================
   PROGRESS
   ========================================================= */

.hero-progress {
  position: absolute;

  bottom: 24px;
  left: 50%;

  width:
    min(
      500px,
      calc(100% - 50px)
    );

  transform:
    translateX(-50%);

  display: flex;

  align-items: center;

  gap: 14px;

  z-index: 50;

  opacity: 0.65;

  pointer-events: none;
}

.progress-track {
  flex: 1;

  height: 1px;

  background:
    rgba(
      21,
      21,
      21,
      0.2
    );
}

.progress-fill {
  width: 0;
  height: 100%;

  background:
    var(--ink);
}


/* =========================================================
   STANDARD SECTIONS
   ========================================================= */

.statement,
.map,
.writing,
.about {
  display: grid;

  grid-template-columns:
    220px
    1fr;

  gap: 50px;

  padding:
    110px
    0;

  border-top:
    1px solid
    var(--line);
}

.statement h2, .statement h1,
.map h2, .map h1,
.about h2 {
  margin:
    0
    0
    35px;

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(
      48px,
      7vw,
      90px
    );

  font-weight: 400;

  line-height: 0.92;

  letter-spacing: -0.025em;
}

.statement > div,
.about > div {
  max-width: 800px;
}

.statement p:not(.index),
.about p:not(.index),
.map-head p {
  font-size: 19px;

  line-height: 1.65;
}


/* =========================================================
   NYC SECTION
   ========================================================= */

.nyc-section {
  padding:
    110px
    0;

  border-top:
    1px solid
    var(--line);
}

.nyc-heading {
  display: grid;

  grid-template-columns:
    220px
    1fr;

  gap: 50px;

  margin-bottom: 55px;
}

.nyc-heading > div {
  max-width: 900px;
}

.nyc-heading h2 {
  margin:
    0
    0
    28px;

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(
      55px,
      8vw,
      110px
    );

  font-weight: 400;

  line-height: 0.88;

  letter-spacing: -0.035em;
}

.nyc-heading p:not(.index) {
  max-width: 650px;

  margin: 0;

  color: var(--muted);

  font-size: 18px;

  line-height: 1.6;
}


/* =========================================================
   NYC CANVAS
   ========================================================= */

.nyc-experience {
  position: relative;

  width: 100%;

  height:
    min(
      78vw,
      760px
    );

  min-height: 540px;

  overflow: hidden;

  border:
    1px solid
    var(--ink);

  background:
    #cdeeff;

  isolation: isolate;
}

#nycCanvas {
  position: absolute;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  /*
   * Vertical swipes scroll the page on phones;
   * horizontal drags rotate the city.
   */
  touch-action: pan-y;
}

.nyc-top-ui {
  position: absolute;

  top: 20px;
  left: 20px;
  right: 20px;

  display: flex;

  justify-content:
    space-between;

  gap: 20px;

  z-index: 5;

  pointer-events: none;

  font:
    10px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing:
    0.08em;
}

.nyc-controls {
  position: absolute;

  bottom: 20px;
  left: 20px;

  display: flex;

  gap: 22px;

  z-index: 5;

  pointer-events: none;

  font:
    9px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing:
    0.08em;

  opacity: 0.55;
}

.nyc-coordinates {
  position: absolute;

  top: 50%;
  left: 20px;

  display: flex;

  flex-direction: column;

  gap: 4px;

  transform:
    translateY(-50%);

  z-index: 5;

  pointer-events: none;

  font:
    8px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  opacity: 0.35;
}


/* =========================================================
   NYC INFO
   ========================================================= */

.nyc-info {
  position: absolute;

  right: 22px;
  bottom: 22px;

  width:
    min(
      370px,
      calc(100% - 44px)
    );

  padding: 25px;

  border:
    1px solid
    var(--ink);

  background:
    rgba(
      242,
      240,
      233,
      0.96
    );

  backdrop-filter:
    blur(12px);

  transform:
    translateY(
      calc(
        100% + 60px
      )
    );

  opacity: 0;

  pointer-events: none;

  z-index: 20;

  transition:
    transform
    0.45s
    cubic-bezier(
      .2,
      .8,
      .2,
      1
    ),
    opacity
    0.35s
    ease;
}

.nyc-info.open {
  transform:
    translateY(0);

  opacity: 1;

  pointer-events: auto;
}

.nyc-info > span {
  font:
    9px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing:
    0.1em;
}

.nyc-info h3 {
  margin:
    18px
    0
    12px;

  font:
    36px / 0.98
    Georgia,
    serif;
}

.nyc-info p {
  margin: 0;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.6;
}

.nyc-info button {
  margin-top: 22px;

  padding: 0;

  border: 0;

  background: transparent;

  font:
    9px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;
}


/* =========================================================
   MAP
   ========================================================= */

.map-head {
  display: grid;

  grid-template-columns:
    1.2fr
    0.8fr;

  gap: 40px;
}

.growth-equation {
  margin-top: 50px;

  padding:
    20px
    0;

  display: flex;

  align-items: center;
  justify-content:
    space-between;

  gap: 10px;

  border-top:
    1px solid
    var(--ink);

  border-bottom:
    1px solid
    var(--ink);

  font:
    10px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing:
    0.07em;
}

.growth-equation i {
  font-style: normal;

  opacity: 0.35;
}


/* =========================================================
   MAP NODES
   ========================================================= */

.nodes {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  margin-top: 28px;

  border-top:
    1px solid
    var(--ink);

  border-left:
    1px solid
    var(--ink);
}

/* ---------------------------------------------------------
   MBA PROGRESS
   --------------------------------------------------------- */

.mba-progress {
  margin-top: 50px;
}

.mba-progress-label {
  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  gap: 8px 20px;

  margin: 0 0 12px;

  font:
    10px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.08em;
}

.mba-progress-track {
  height: 3px;

  background:
    rgba(21, 21, 21, 0.12);
}

.mba-progress-fill {
  height: 100%;

  background: var(--ink);

  transition:
    width
    1.2s
    cubic-bezier(.2, .8, .2, 1);
}


/* ---------------------------------------------------------
   SUBJECT CARDS
   --------------------------------------------------------- */

.nodes .subject {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 12px;

  min-height: 170px;

  padding: 20px;

  border: 0;

  border-right:
    1px solid
    var(--ink);

  border-bottom:
    1px solid
    var(--ink);

  background: transparent;

  color: var(--ink);

  text-align: left;

  transition:
    background
    0.2s
    ease,
    padding
    0.2s
    ease;
}

.subject-code,
.subject-meta {
  font:
    10px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.08em;
}

.subject-name {
  flex: 1;

  font:
    26px / 1.02
    Georgia,
    serif;
}

.subject-meta {
  color: var(--muted);
}

.subject.is-done .subject-meta,
.subject.is-current .subject-meta {
  color: var(--ink);
}

.nodes .subject:hover,
.nodes .subject:focus-visible {
  padding-left: 27px;

  background: var(--acid);

  outline: none;
}


/* Guide card at the end of the grid */

.nodes .subject-guide {
  background: var(--ink);

  color: var(--paper);
}

.subject-guide .subject-name {
  font-size: 22px;
}

.subject-guide .subject-code,
.subject-guide .subject-meta {
  color: var(--acid);
}

/* Not clickable, so no hover highlight */
.nodes .subject-guide:hover {
  padding-left: 20px;

  background: var(--ink);
}


/* Not taken yet: quieter */

.nodes .subject.is-next {
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0 9px,
      rgba(21, 21, 21, 0.035) 9px 10px
    );
}

.subject.is-next .subject-name,
.subject.is-next .subject-code {
  color: var(--muted);
}

.nodes .subject.is-next:hover,
.nodes .subject.is-next:focus-visible {
  background:
    rgba(21, 21, 21, 0.05);
}


/* ---------------------------------------------------------
   NOTES PANEL
   --------------------------------------------------------- */

.notes-panel {
  width: min(760px, calc(100% - 32px));
  max-height: min(88vh, 900px);

  margin: auto;
  padding: 0;

  border: 1px solid var(--ink);

  background: var(--paper);

  color: var(--ink);

  overflow-y: auto;
}

.notes-panel::backdrop {
  background:
    rgba(21, 21, 21, 0.45);

  backdrop-filter: blur(4px);
}

.notes-panel[open] {
  animation:
    notes-in
    0.45s
    cubic-bezier(.2, .8, .2, 1);
}

@keyframes notes-in {
  from {
    opacity: 0;

    transform: translateY(24px);
  }
}

.notes-inner {
  position: relative;

  padding: 34px 36px 40px;
}

.notes-close {
  position: absolute;

  top: 28px;
  right: 30px;

  padding: 0;

  border: 0;

  background: transparent;

  font:
    10px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.1em;
}

.notes-meta {
  margin: 0 90px 0 0;

  font:
    10px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.08em;
}

.notes-panel h3 {
  margin: 18px 0 30px;

  font:
    clamp(38px, 6vw, 58px) / 0.95
    Georgia,
    serif;

  letter-spacing: -0.02em;
}

.notes-block {
  padding: 22px 0;

  border-top: 1px solid var(--line);
}

.notes-block h4 {
  margin: 0 0 12px;

  font:
    10px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.1em;
}

.notes-block p {
  margin: 0;

  font-size: 17px;

  line-height: 1.6;
}

.notes-takeaways {
  margin: 0;

  padding-left: 22px;

  font-size: 16px;

  line-height: 1.6;
}

.notes-takeaways li + li {
  margin-top: 6px;
}

.notes-block .notes-empty,
.notes-empty {
  color: var(--muted);

  font-size: 15px;
}

.notes-gallery {
  display: grid;

  grid-template-columns:
    repeat(auto-fill, minmax(180px, 1fr));

  gap: 14px;
}

.notes-gallery figure {
  margin: 0;
}

.notes-gallery a {
  display: block;

  border: 1px solid var(--line);
}

.notes-gallery img {
  display: block;

  width: 100%;

  aspect-ratio: 3 / 4;

  object-fit: cover;
}

.notes-gallery figcaption {
  margin-top: 6px;

  color: var(--muted);

  font-size: 12px;
}

@media (max-width: 760px) {

  .notes-inner {
    padding: 26px 20px 30px;
  }

  .notes-close {
    top: 22px;
    right: 20px;
  }

  .subject-name {
    font-size: 22px;
  }

  .nodes .subject {
    min-height: 150px;

    padding: 16px;
  }

}


/*
 * The panel sits in the browser's top layer, above the
 * custom cursor, so use the normal cursor while it's open.
 */
html.notes-open.notes-open,
html.notes-open.notes-open * {
  cursor: auto !important;
}

html.notes-open.notes-open a,
html.notes-open.notes-open button {
  cursor: pointer !important;
}

html.notes-open .custom-cursor-dot,
html.notes-open .custom-cursor-ring {
  visibility: hidden;
}


/* =========================================================
   ARTICLES
   ========================================================= */

.articles {
  display: grid;
}

.articles article {
  display: grid;

  grid-template-columns:
    1fr
    2fr
    2fr;

  gap: 35px;

  padding:
    28px
    0;

  border-top:
    1px solid
    var(--line);
}

.articles article:last-child {
  border-bottom:
    1px solid
    var(--line);
}

article h3 {
  margin: 0;

  font:
    38px / 1.05
    Georgia,
    serif;
}

article p {
  margin: 0;

  color: var(--muted);

  line-height: 1.5;
}


/* =========================================================
   ABOUT
   ========================================================= */

.about {
  padding-bottom: 150px;
}

.text-link {
  display: inline-block;

  margin-top: 20px;

  padding-bottom: 5px;

  border-bottom:
    1px solid;

  font-size: 14px;
  font-weight: 600;

  text-decoration: none;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer {
  display: flex;

  justify-content:
    space-between;

  gap: 20px;

  padding:
    28px
    0
    45px;

  border-top:
    1px solid
    var(--line);
}


/* =========================================================
   HERO HEADLINE — CURSOR WIND
   ========================================================= */

/* Letters measure their offsets from the heading */
.hero-intro h1 {
  position: relative;
}

.wind-word {
  display: inline-block;

  white-space: nowrap;
}

.wind-letter {
  display: inline-block;

  will-change: transform;
}


/* =========================================================
   SECTION REVEALS
   ========================================================= */

.reveal-section {
  opacity: 0;

  transform:
    translateY(30px);

  transition:
    opacity
    0.8s
    cubic-bezier(
      .2,
      .8,
      .2,
      1
    ),
    transform
    0.8s
    cubic-bezier(
      .2,
      .8,
      .2,
      1
    );
}

.reveal-section.visible {
  opacity: 1;

  transform: none;
}


/* =========================================================
   CUSTOM CURSOR
   ========================================================= */

/*
 * Dot: exact pointer position.
 * Ring: a trailing blob that inverts whatever is
 * under it (difference blend), stretches with speed,
 * and becomes an acid label ("FLIP", "DRAG"...) over
 * interactive things.
 */

.custom-cursor-dot,
.custom-cursor-ring {
  position: fixed;

  top: 0;
  left: 0;

  width: 0;
  height: 0;

  pointer-events: none;

  z-index: 99999;

  opacity: 0;

  mix-blend-mode: difference;

  transition:
    opacity
    0.25s
    ease;

  will-change:
    transform;
}

.custom-cursor-dot::before {
  content: "";

  position: absolute;

  width: 6px;
  height: 6px;

  margin:
    -3px
    0
    0
    -3px;

  border-radius: 50%;

  background: #fff;

  transition:
    transform
    0.2s
    ease;
}

.cursor-blob {
  --size: 22px;

  position: absolute;

  width: var(--size);
  height: var(--size);

  margin:
    calc(var(--size) / -2)
    0
    0
    calc(var(--size) / -2);

  border-radius: 50%;

  background: #fff;

  transition:
    width
    0.35s
    cubic-bezier(.2, .8, .2, 1),
    height
    0.35s
    cubic-bezier(.2, .8, .2, 1),
    margin
    0.35s
    cubic-bezier(.2, .8, .2, 1),
    background
    0.2s
    ease;
}

.cursor-label {
  position: absolute;

  transform:
    translate(-50%, -50%)
    scale(0.6);

  opacity: 0;

  color: var(--ink);

  font:
    500
    10px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.1em;

  white-space: nowrap;

  transition:
    opacity
    0.2s
    ease,
    transform
    0.3s
    cubic-bezier(.2, .8, .2, 1);
}


/* Plain links/buttons: bigger inverting blob */

.custom-cursor-ring.is-hovering .cursor-blob {
  --size: 64px;
}

.custom-cursor-ring.is-hovering + .custom-cursor-dot::before,
.custom-cursor-dot.is-hidden::before {
  transform: scale(0);
}


/* Labelled targets: solid acid circle with text */

.custom-cursor-ring.has-label {
  mix-blend-mode: normal;
}

.custom-cursor-ring.has-label .cursor-blob {
  --size: 78px;

  background: var(--acid);
}

.custom-cursor-ring.has-label .cursor-label {
  opacity: 1;

  transform:
    translate(-50%, -50%)
    scale(1);
}


.custom-cursor-ring.is-clicking .cursor-blob {
  --size: 14px;
}

.custom-cursor-ring.has-label.is-clicking .cursor-blob {
  --size: 64px;
}

.magnetic {
  display: inline-block;

  transition:
    transform
    0.3s
    cubic-bezier(
      .2,
      .8,
      .2,
      1
    );
}

@media (pointer: fine) {

  html.has-custom-cursor,
  html.has-custom-cursor body,
  html.has-custom-cursor a,
  html.has-custom-cursor button,
  html.has-custom-cursor .morph-card,
  html.has-custom-cursor #nycCanvas {
    cursor: none !important;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

  .wrap {
    width:
      min(
        100% - 30px,
        1180px
      );
  }

  .nav {
    width:
      calc(
        100% - 30px
      );
  }

  .brand {
    flex-shrink: 0;

    margin-right: 16px;
  }

  /*
   * All links stay available; the row
   * swipes sideways if it doesn't fit.
   */
  .nav nav {
    min-width: 0;

    gap: 8px;

    /* room so the pills' shadows aren't clipped while scrolling */
    padding: 4px 4px 6px 2px;

    overflow-x: auto;

    white-space: nowrap;

    scrollbar-width: none;
  }

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

  .nav nav a {
    font-size: 12px;
  }

  .morph-section {
    height: 280vh;
  }

  .campaigns-anchor {
    top: calc((260vh - 100vh) * 0.79);
  }

  .hero-intro h1 {
    font-size: 62px;
  }

  .hero-subtitle {
    font-size: 15px;
  }

  .hero-reveal {
    top: 25%;
  }

  .hero-reveal h2 {
    font-size: 50px;
  }

  .morph-card {
    width: 58px;
    height: 82px;
  }

  .card-front strong {
    font-size: 10px;
  }

  .card-back span {
    font-size: 8px;
  }

  .statement,
  .map,
  .writing,
    .about {
    grid-template-columns:
      1fr;

    gap: 28px;

    padding:
      72px
      0;
  }

  .nyc-section {
    padding:
      72px
      0;
  }

  .nyc-heading {
    grid-template-columns:
      1fr;

    gap: 25px;

    margin-bottom: 35px;
  }

  .nyc-heading h2 {
    font-size: 58px;
  }

  .nyc-experience {
    height: 600px;

    min-height: 0;
  }

  .nyc-controls {
    flex-direction:
      column;

    gap: 5px;
  }

  .nyc-coordinates {
    display: none;
  }

  .map-head {
    grid-template-columns:
      1fr;
  }

  .growth-equation {
    flex-wrap: wrap;

    justify-content:
      flex-start;
  }

  .nodes {
    grid-template-columns:
      repeat(
        2,
        1fr
      );
  }

  .articles article {
    grid-template-columns:
      1fr;

    gap: 12px;
  }

  article h3 {
    font-size: 34px;
  }

  footer {
    flex-direction:
      column;
  }

}


/* =========================================================
   TOUCH
   ========================================================= */

@media (pointer: coarse) {

  .custom-cursor-dot,
  .custom-cursor-ring {
    display: none;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

  html {
    scroll-behavior: auto;
  }

  html,
  body,
  a,
  button {
    cursor: auto !important;
  }

  .reveal-section {
    opacity: 1;

    transform: none;

    transition: none;
  }

  .custom-cursor-dot,
  .custom-cursor-ring {
    display: none;
  }

}

/* =========================================================
   COLOUR WORLD
   The hero starts black and white. As the cards arrive,
   a pastel wash fades in and ~30 shapes pop into the scene
   at different depths (built in script.js: createWorld).
   ========================================================= */

.world {
  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  overflow: hidden;
}

/* Soft pastel wash behind everything */
.world::before {
  content: "";

  position: absolute;

  inset: -10%;

  background:
    radial-gradient(circle at 12% 20%, #ffd6e0 0%, transparent 34%),
    radial-gradient(circle at 88% 18%, #d9f2ff 0%, transparent 32%),
    radial-gradient(circle at 80% 85%, #fff1b8 0%, transparent 36%),
    radial-gradient(circle at 18% 82%, #d8f8e4 0%, transparent 34%),
    radial-gradient(circle at 50% 50%, #efe4ff 0%, transparent 46%);

  opacity: var(--wash, 0);
}

.shape {
  position: absolute;

  width: var(--size);
  height: var(--size);

  opacity: 0;

  color: var(--c);

  will-change: transform, opacity;

  /* smooth fade when passing behind the headline text */
  transition: opacity 0.4s ease;
}

.shape-circle {
  border-radius: 50%;

  background: var(--c);
}

.shape-ring {
  border: calc(var(--size) * 0.16) solid var(--c);

  border-radius: 50%;
}

.shape-square {
  border-radius: 22%;

  background: var(--c);
}

.shape-triangle {
  background: var(--c);

  clip-path: polygon(50% 4%, 96% 92%, 4% 92%);
}

.shape-star {
  background: var(--c);

  clip-path:
    polygon(
      50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
      50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%
    );
}

.shape-pill {
  width: calc(var(--size) * 1.8);
  height: calc(var(--size) * 0.7);

  border-radius: 999px;

  background: var(--c);
}

.shape-plus {
  background:
    linear-gradient(var(--c), var(--c)) center / 30% 100% no-repeat,
    linear-gradient(var(--c), var(--c)) center / 100% 30% no-repeat;
}

.shape-half {
  height: calc(var(--size) / 2);

  border-radius: var(--size) var(--size) 0 0;

  background: var(--c);
}

/* Patterned tile: dots on colour */
.shape-tile {
  border-radius: 14%;

  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.85) 22%, transparent 24%) 0 0 / 25% 25%,
    var(--c);
}

.shape-squiggle {
  width: calc(var(--size) * 2.2);
  height: calc(var(--size) * 0.7);
}

.shape-squiggle svg {
  display: block;

  width: 100%;
  height: 100%;

  overflow: visible;
}

.shape-squiggle path {
  fill: none;

  stroke: currentColor;

  stroke-width: 7;

  stroke-linecap: round;
}

@media (max-width: 760px) {

  /* Fewer, smaller shapes on phones */
  .shape:nth-child(n + 19) {
    display: none;
  }

  .shape {
    width: calc(var(--size) * 0.7);
    height: calc(var(--size) * 0.7);
  }

}


/* =========================================================
   COLOURFUL CARDS
   Each card: its own colour (--card-color, set in
   script.js) + one of six patterns. The title sits on a
   paper label so it always reads.
   ========================================================= */

.card-front {
  background: var(--card-color, var(--paper));

  color: var(--card-ink, var(--ink));

  border-color: rgba(21, 21, 21, 0.85);
}

/* Pattern layer */
.card-front::before {
  content: "";

  position: absolute;

  inset: 0;

  opacity: 0.32;

  pointer-events: none;
}

/* dots */
.pattern-0 .card-front::before {
  background:
    radial-gradient(circle, #fff 22%, transparent 24%) 0 0 / 12px 12px;
}

/* stripes */
.pattern-1 .card-front::before {
  background:
    repeating-linear-gradient(45deg, #fff 0 4px, transparent 4px 11px);
}

/* grid */
.pattern-2 .card-front::before {
  background:
    linear-gradient(#fff 1.5px, transparent 1.5px) 0 0 / 11px 11px,
    linear-gradient(90deg, #fff 1.5px, transparent 1.5px) 0 0 / 11px 11px;
}

/* checks */
.pattern-3 .card-front::before {
  background:
    conic-gradient(#fff 25%, transparent 0 50%, #fff 0 75%, transparent 0) 0 0 / 16px 16px;

  opacity: 0.22;
}

/* zig-zag */
.pattern-4 .card-front::before {
  background:
    linear-gradient(135deg, #fff 25%, transparent 25%) -7px 0 / 14px 14px,
    linear-gradient(225deg, #fff 25%, transparent 25%) -7px 0 / 14px 14px;
}

/* rings */
.pattern-5 .card-front::before {
  background:
    repeating-radial-gradient(circle at 30% 30%, #fff 0 2px, transparent 2px 9px);
}

.card-number {
  z-index: 1;

  opacity: 0.8;
}

/* Title on a paper label */
.card-front strong {
  position: relative;

  z-index: 1;

  padding: 4px 6px;

  border-radius: 3px;

  background: var(--paper);

  color: var(--ink);

  box-shadow: 2px 2px 0 rgba(21, 21, 21, 0.85);
}

/* Back: paper with a thick colour frame */
.card-back {
  background: var(--paper);

  color: var(--ink);

  box-shadow:
    inset 0 0 0 5px var(--card-color, var(--ink));
}

.card-back small {
  color: var(--ink);
}

.morph-card.is-campaign .card-back {
  background: var(--card-color);

  color: var(--card-ink);

  box-shadow: none;
}

.morph-card.is-campaign .card-back small {
  color: var(--card-ink);
}

/* Playful wobble while hovered (on top of the zoom) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {

  .morph-card:hover .card-face {
    animation: card-wobble 0.6s ease-in-out;
  }

}

@keyframes card-wobble {
  25% {
    rotate: -4deg;
  }

  60% {
    rotate: 3deg;
  }
}


/* "business." — dark text with a sunflower highlighter (same
   style as the other headings); sweeps in as the text appears */

.hero-reveal h2 em {
  padding: 0 0.05em;

  background-image:
    linear-gradient(
      transparent 60%,
      #ffd166 60%,
      #ffd166 90%,
      transparent 90%
    );

  background-repeat: no-repeat;

  background-size: 0% 100%;

  transition: background-size 1.1s cubic-bezier(.2, .8, .2, 1) 0.15s;
}

.hero-reveal.is-shown h2 em {
  background-size: 100% 100%;
}

/* Rainbow progress bar */

.progress-fill {
  background:
    linear-gradient(
      90deg,
      #ff5a5f, #ffb400, #3ddc97, #4cc9f0, #7b61ff, #f72585
    );
}

.progress-track {
  height: 3px;

  border-radius: 3px;
}

.progress-fill {
  border-radius: 3px;
}

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

  .hero-reveal h2 em {
    background-size: 100% 100%;

    transition: none;
  }

}




/* =========================================================
   COLOUR THROUGH THE SITE
   Every section has its own colour mood:
     --sec-bg      soft full-width background
     --sec-accent  pills, highlighter, details
   ========================================================= */

#statement {
  --sec-bg: #fff0ea;
  --sec-accent: #ff7a6b;
}

#nyc {
  --sec-bg: #fff7d6;
  --sec-accent: #ffc233;
}

#map {
  --sec-bg: #f1edff;
  --sec-accent: #a18cff;
}

#writing {
  --sec-bg: #e7faf1;
  --sec-accent: #4fe0b0;
}

#about {
  --sec-bg: #fff0f7;
  --sec-accent: #ff8fc7;
}


/*
 * Full-width colour bands: the box-shadow paints the colour
 * past the 1180px column to the screen edges; clip-path keeps
 * it (and the margin shapes) from spilling into the next band.
 */
.statement,
.nyc-section,
.map,
.writing,
.about {
  position: relative;

  background: var(--sec-bg);

  box-shadow: 0 0 0 100vmax var(--sec-bg);

  clip-path: inset(0 -100vmax);

  border-top: 0;
}


/* Section labels become colour pills */
.statement > .index,
.nyc-heading .index,
.map > .index,
.writing > .index,
.about > .index {
  justify-self: start;
  align-self: start;

  margin: 0;

  padding: 7px 12px;

  border: 1px solid var(--ink);

  border-radius: 999px;

  background: var(--sec-accent);

  box-shadow: 0 1px 3px rgba(21, 21, 21, 0.08), 0 6px 18px rgba(21, 21, 21, 0.07);
}


/*
 * Highlighter on the italic words (magic, market, growth,
 * Vinayak, hawa hawa). It sweeps in when the section appears.
 */
.statement em,
.nyc-heading em,
.map-head em,
.about h2 em {
  padding: 0 0.06em;

  background-image:
    linear-gradient(
      transparent 58%,
      var(--sec-accent) 58%,
      var(--sec-accent) 90%,
      transparent 90%
    );

  background-repeat: no-repeat;

  background-size: 0% 100%;

  transition: background-size 1.1s cubic-bezier(.2, .8, .2, 1) 0.35s;
}

.reveal-section.visible em {
  background-size: 100% 100%;
}


/* NYC: sky frame with a bold border */
.nyc-experience {
  border: 2px solid var(--ink);

  border-radius: 14px;

  box-shadow: 0 1px 3px rgba(21, 21, 21, 0.08), 0 6px 18px rgba(21, 21, 21, 0.07);
}

.growth-equation {
  border-color: var(--ink);
}

.growth-equation span {
  padding: 5px 9px;

  border-radius: 999px;

  background: #fff;
}

.growth-equation span:nth-of-type(1) { background: #ffd6e0; }
.growth-equation span:nth-of-type(2) { background: #fff1b8; }
.growth-equation span:nth-of-type(3) { background: #d8f8e4; }
.growth-equation span:nth-of-type(4) { background: #d9f2ff; }
.growth-equation span:nth-of-type(5) { background: #efe4ff; }


/* ---------- Marketing Map: colourful subjects ---------- */

.nodes {
  border-color: var(--ink);
}

.nodes .subject.is-done {
  background:
    color-mix(in srgb, var(--subj-color) 32%, #fff);
}

.nodes .subject.is-done::before {
  content: "";

  display: block;

  width: 34px;
  height: 6px;

  border-radius: 6px;

  background: var(--subj-color);
}

.nodes .subject.is-done:hover,
.nodes .subject.is-done:focus-visible {
  background: var(--subj-color);

  color: var(--subj-ink);
}

.nodes .subject-guide,
.nodes .subject-guide:hover {
  background:
    linear-gradient(135deg, #7b61ff, #f72585);

  color: #fff;
}

.subject-guide .subject-code,
.subject-guide .subject-meta {
  color: #fff3b0;
}

.mba-progress-track {
  height: 6px;

  border-radius: 6px;

  background: rgba(21, 21, 21, 0.1);
}

.mba-progress-fill {
  border-radius: 6px;

  background:
    linear-gradient(90deg, #ff5a5f, #ffb400, #3ddc97, #4cc9f0, #7b61ff);
}

.notes-panel {
  border-radius: 14px;

  border-top: 10px solid #a18cff;
}


/* ---------- Field notes: colour tags, rows light up ---------- */

.articles article {
  position: relative;

  border-top-color: rgba(21, 21, 21, 0.18);

  transition:
    background 0.3s ease,
    padding 0.3s cubic-bezier(.2, .8, .2, 1);
}

.articles article:last-child {
  border-bottom-color: rgba(21, 21, 21, 0.18);
}

.articles article > span {
  justify-self: start;
  align-self: start;

  padding: 6px 10px;

  border: 1px solid var(--ink);

  border-radius: 999px;

  background: var(--tag, #fff);
}

.articles article:nth-child(3n + 1) { --tag: #ffd6e0; }
.articles article:nth-child(3n + 2) { --tag: #fff1b8; }
.articles article:nth-child(3n + 3) { --tag: #d9f2ff; }

.articles article:hover {
  padding-left: 18px;
  padding-right: 18px;

  background: color-mix(in srgb, var(--tag) 70%, #fff);
}


/* ---------- About + footer ---------- */

.about .text-link {
  padding: 8px 14px;

  border: 1px solid var(--ink);

  border-radius: 999px;

  background: var(--sec-accent);

  box-shadow: 0 1px 3px rgba(21, 21, 21, 0.08), 0 6px 18px rgba(21, 21, 21, 0.07);
}

footer {
  position: relative;

  border-top: 0;
}

footer::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  height: 5px;

  border-radius: 5px;

  background:
    linear-gradient(90deg, #ff5a5f, #ffb400, #3ddc97, #4cc9f0, #7b61ff, #f72585);
}


/* ---------- Nav: colour on hover ---------- */

.brand {
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.brand:hover {
  background: #ffd166;

  box-shadow: 0 1px 3px rgba(21, 21, 21, 0.08), 0 6px 18px rgba(21, 21, 21, 0.07);
}

/*
 * Menu links as small pills, like the hero's eyebrow tag.
 * Each wears a soft tint of its section's colour; hover
 * lifts it and fills the full colour.
 */
.nav nav {
  align-items: center;

  gap: 10px;
}

.nav nav a {
  --pill: #ffffff;
  --pill-strong: #ffd166;

  padding: 6px 12px;

  border: 1px solid var(--ink);

  border-radius: 999px;

  background: var(--pill);

  box-shadow: 0 1px 3px rgba(21, 21, 21, 0.08), 0 6px 18px rgba(21, 21, 21, 0.07);

  font-size: 13px;

  line-height: 1;

  white-space: nowrap;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.nav nav a:hover,
.nav nav a:focus-visible {
  transform: translate(-1px, -1px);

  background: var(--pill-strong);

  box-shadow: 0 1px 3px rgba(21, 21, 21, 0.08), 0 6px 18px rgba(21, 21, 21, 0.07);

  text-decoration: none;
}

.nav nav a[href="#campaigns"] { --pill: #dcecff; --pill-strong: #9ec9ff; }
.nav nav a[href="#statement"] { --pill: #ffe1db; --pill-strong: #ff9d90; }
.nav nav a[href="#nyc"]       { --pill: #fff2c4; --pill-strong: #ffd166; }
.nav nav a[href="#map"]       { --pill: #ebe5ff; --pill-strong: #bfb0ff; }
.nav nav a[href="#writing"]   { --pill: #d9f7ea; --pill-strong: #8be6c0; }
.nav nav a[href="#about"]     { --pill: #ffe3f0; --pill-strong: #ffaed4; }
.nav nav a[href*="linkedin"]  { --pill: #ffffff; --pill-strong: #cfe3ff; }


/* ---------- Margin shapes beside each section ---------- */

.section-shape {
  z-index: 0;

  opacity: 0.9;

  pointer-events: none;
}

@media (max-width: 760px) {

  .section-shape {
    display: none;
  }

}

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

  .statement em,
  .nyc-heading em,
  .map-head em,
  .about h2 em {
    background-size: 100% 100%;

    transition: none;
  }

}


/*
 * Margin shapes must never make the page scroll sideways.
 * "clip" (not "hidden") on both, so neither becomes a scroll
 * box and the sticky hero keeps working.
 */
html,
body {
  overflow-x: clip;
}


/* =========================================================
   OPENING SCREEN IN COLOUR
   Same style as the sections below: tinted background,
   pill label, highlighter on the italic word.
   ========================================================= */

.morph-section {
  --hero-bg: #f4f1ff;

  background: var(--hero-bg);
}

/* "VINAYAK PATEL / MARKETING × BUSINESS" as a pill */
.hero-intro .eyebrow {
  display: inline-block;

  margin: 0;

  padding: 7px 14px;

  border: 1px solid var(--ink);

  border-radius: 999px;

  background: #ffd166;

  box-shadow: 0 1px 3px rgba(21, 21, 21, 0.08), 0 6px 18px rgba(21, 21, 21, 0.07);
}

/* Green highlighter on "grow?" — sweeps in on load */
.hero-intro h1 em {
  padding: 0 0.04em;

  background-image:
    linear-gradient(
      transparent 60%,
      #7fe0a6 60%,
      #7fe0a6 90%,
      transparent 90%
    );

  background-repeat: no-repeat;

  background-size: 100% 100%;

  animation: hero-highlight 1.2s cubic-bezier(.2, .8, .2, 1) 0.5s backwards;
}

@keyframes hero-highlight {
  from {
    background-size: 0% 100%;
  }
}

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

  .hero-intro h1 em {
    animation: none;
  }

}


/* =========================================================
   RAINBOW TRAIL CURSOR
   Head: a colour-changing dot (colour set from script.js
   as --cursor-color). Tail: 10 colourful dots that chase it.
   Over links the tail tucks in and the head becomes a ring;
   over cards/towers/subjects it becomes a sticker pill.
   ========================================================= */

.custom-cursor-dot {
  display: none !important;
}

.custom-cursor-ring {
  mix-blend-mode: normal;
}

.cursor-blob {
  --size: 18px;

  background: var(--cursor-color, #ff5a5f);

  border: 2px solid var(--ink);

  transition:
    width 0.3s cubic-bezier(.2, .8, .2, 1),
    height 0.3s cubic-bezier(.2, .8, .2, 1),
    margin 0.3s cubic-bezier(.2, .8, .2, 1),
    background 0.35s ease,
    box-shadow 0.3s ease,
    opacity 0.2s ease;
}

/* Over a link: an outlined ring in the current colour */
.custom-cursor-ring.is-hovering .cursor-blob {
  --size: 46px;

  background: transparent;

  box-shadow: inset 0 0 0 5px var(--cursor-color, #ff5a5f);
}

/* Over cards, towers, subjects: a sticker pill with the label */
.custom-cursor-ring.has-label .cursor-blob {
  --size: 10px;

  opacity: 0;
}

.custom-cursor-ring.has-label .cursor-label {
  padding: 8px 13px;

  border: 2px solid var(--ink);

  border-radius: 999px;

  background:
    color-mix(in srgb, var(--cursor-color, #ff5a5f) 45%, #fff);

  color: var(--ink);

  box-shadow: 0 1px 3px rgba(21, 21, 21, 0.08), 0 6px 18px rgba(21, 21, 21, 0.07);

  rotate: -6deg;
}

.custom-cursor-ring.is-clicking .cursor-blob {
  --size: 12px;
}


/* ---------- Trail ---------- */

.cursor-trail-layer {
  position: fixed;

  inset: 0;

  z-index: 99998;

  pointer-events: none;

  opacity: 0;

  transition: opacity 0.25s ease;
}

.cursor-trail {
  position: absolute;

  top: 0;
  left: 0;

  width: var(--s);
  height: var(--s);

  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);

  border-radius: 50%;

  background: var(--c);

  transition:
    opacity 0.25s ease,
    scale 0.25s ease;

  will-change: transform;
}

.cursor-trail-layer.is-tucked .cursor-trail {
  opacity: 0;

  scale: 0.2;
}


/* ---------- Confetti on click ---------- */

.cursor-confetti {
  position: fixed;

  z-index: 99997;

  width: 0;
  height: 0;

  pointer-events: none;
}

.cursor-confetti span {
  position: absolute;

  width: 8px;
  height: 8px;

  margin: -4px;

  background: var(--c);

  border: 1px solid var(--ink);

  animation: cursor-confetti 0.75s cubic-bezier(.2, .8, .2, 1) forwards;
}

.cursor-confetti span.is-round {
  border-radius: 50%;
}

@keyframes cursor-confetti {
  to {
    transform:
      translate(var(--x), var(--y))
      rotate(var(--r));

    opacity: 0;
  }
}

@media (pointer: coarse), (prefers-reduced-motion: reduce) {

  .cursor-trail-layer,
  .cursor-confetti {
    display: none;
  }

}


/* =========================================================
   SECTION SHAPES BOB GENTLY ON THEIR OWN
   (uses translate/rotate so it adds to the scroll drift)
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {

  .section-shape {
    animation: shape-bob 6s ease-in-out infinite;
  }

  .section-shape:nth-of-type(2n) {
    animation-duration: 7.5s;
    animation-delay: -2s;
  }

  .section-shape:nth-of-type(3n) {
    animation-duration: 5s;
    animation-delay: -3.5s;
  }

}

@keyframes shape-bob {
  50% {
    translate: 0 -16px;

    rotate: 10deg;
  }
}


/* =========================================================
   SMOOTH HAND-OFF FROM THE HERO
   ========================================================= */

/* Less pinned time, so the cards never sit idle */
.morph-section {
  height: 300vh;
}

@media (max-width: 760px) {

  .morph-section {
    height: 260vh;
  }

}

/* Peach veil (same colour as "Before AI") that fades in at
   the end of the hero — opacity is set from script.js */
.hero-fade {
  position: absolute;

  inset: 0;

  z-index: 40;

  background: #fff0ea;

  opacity: 0;

  pointer-events: none;
}

/* The section after the hero starts on the same peach,
   with no hard line */
#statement {
  border-top: 0;
}


/* Lenis smooth scrolling: let it control the scroll */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}


/*
 * Section reveal: fade/slide the CONTENT, not the section,
 * so the coloured backgrounds stay solid and the seams
 * between sections never flash.
 */
.reveal-section {
  opacity: 1;

  transform: none;

  transition: none;
}

.reveal-section > * {
  opacity: 0;

  transform: translateY(30px);

  transition:
    opacity 0.8s cubic-bezier(.2, .8, .2, 1),
    transform 0.8s cubic-bezier(.2, .8, .2, 1);
}

.reveal-section.visible > * {
  opacity: 1;

  transform: none;
}

/* Margin shapes keep their own transform (set in script.js) */
.reveal-section > .section-shape {
  transform: none;
}

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

  .reveal-section > * {
    opacity: 1;

    transform: none;

    transition: none;
  }

}


/* =========================================================
   CALMER HERO (cards page)
   Plain lavender (same as the Marketing Map), no pastel
   wash, softer card patterns.
   ========================================================= */

.morph-section {
  --hero-bg: #fff0ea;   /* same peach as "Before AI" */
}

.world::before {
  display: none;
}

.card-front::before {
  opacity: 0.18;
}

.pattern-3 .card-front::before {
  opacity: 0.12;
}


/* =========================================================
   NAVY INSTEAD OF RAINBOW
   ========================================================= */

.progress-fill,
.mba-progress-fill,
footer::before {
  background: #1f3a5f;
}


/* =========================================================
   NYC — FITS ON ONE SCREEN
   Compact heading; the 3D city fills the rest of the screen.
   ========================================================= */

.nyc-section {
  min-height: 100vh;

  padding: 48px 0;

  box-sizing: border-box;
}

.nyc-heading {
  align-items: start;

  margin-bottom: 22px;
}

.nyc-heading h2 {
  margin-bottom: 10px;

  font-size: clamp(40px, 4.4vw, 66px);
}

.nyc-heading h2 br {
  display: none;
}

.nyc-heading p:not(.index) {
  font-size: 16px;
}

.nyc-experience {
  height: calc(100vh - 250px);

  min-height: 400px;
}


/* =========================================================
   MARKETING MAP — FULL WIDTH, ONE SCREEN
   Label on top, subjects 4 per row (11 + guide = 3 rows).
   ========================================================= */

@media (min-width: 761px) {

  .map {
    grid-template-columns: 1fr;

    gap: 18px;

    min-height: 100vh;

    padding: 48px 0;

    box-sizing: border-box;
  }

  .map h2, .map h1 {
    margin: 0;

    font-size: clamp(40px, 4.4vw, 66px);
  }

  .map-head {
    grid-template-columns: 1.4fr 0.8fr;

    align-items: end;
  }

  .map-head p {
    margin: 0;

    font-size: 16px;
  }

  .growth-equation {
    margin-top: 20px;

    padding: 12px 0;
  }

  .mba-progress {
    margin-top: 20px;
  }

  .nodes {
    grid-template-columns: repeat(4, 1fr);

    margin-top: 14px;
  }

  .nodes .subject {
    min-height: 112px;

    gap: 8px;

    padding: 14px 16px;
  }

  .subject-name {
    font-size: 21px;
  }

  .subject-guide .subject-name {
    font-size: 18px;
  }

}

@media (max-width: 760px) {

  .nyc-experience {
    height: 62vh;

    min-height: 0;
  }

}


/* =========================================================
   TIGHTER HERO ENDING + BRIGHT CARDS
   ========================================================= */

/* Shorter pinned hero: no long scroll after the arc */
.morph-section {
  height: 210vh;
}

/* "Campaigns" menu link: where the arc has settled */
.campaigns-anchor {
  top: calc((210vh - 100vh) * 0.66);
}

@media (max-width: 760px) {

  .morph-section {
    height: 190vh;
  }

  .campaigns-anchor {
    top: calc((190vh - 100vh) * 0.66);
  }

}

/* "Before AI" follows right behind the cards */
#statement {
  padding-top: 64px;
}

/* Patterns read well on the brighter colours */
.card-front::before {
  opacity: 0.24;
}

.pattern-3 .card-front::before {
  opacity: 0.16;
}


/* =========================================================
   CURTAIN HAND-OFF
   "Before AI" overlaps the last stretch of the pinned hero
   and slides up over it (same peach, so its edge is
   invisible) while the cards lift and fade out. No empty
   screen, no lingering half-faded cards, shorter scroll.
   ========================================================= */

.morph-section {
  height: 240vh;
}

#statement {
  z-index: 5;

  margin-top: -42vh;
}

.campaigns-anchor {
  top: calc((240vh - 100vh) * 0.58);
}

@media (max-width: 760px) {

  .morph-section {
    height: 210vh;
  }

  #statement {
    margin-top: -36vh;
  }

  .campaigns-anchor {
    top: calc((210vh - 100vh) * 0.58);
  }

}


/* =========================================================
   BALANCED OPENING SCREEN
   The headline scales with the screen width so it fills
   the space (no big empty sides) with comfortable margins.
   ========================================================= */

.hero-intro {
  width: min(1400px, calc(100% - 40px));

  /* centred between the menu and the progress bar */
  top: calc(50% + 20px);
}

.hero-intro h1 {
  font-size: clamp(56px, 9.2vw, 176px);

  /* Georgia needs a little more air than a condensed serif */
  line-height: 0.95;

  letter-spacing: -0.03em;
}

.hero-subtitle {
  max-width: 760px;

  font-size: clamp(17px, 1.45vw, 22px);
}

@media (max-width: 760px) {

  .hero-intro h1 {
    font-size: 46px;
  }

  .hero-subtitle {
    font-size: 15px;
  }

}


/* =========================================================
   MBA NOTES PANEL — typed class notes by topic
   ========================================================= */

.notes-topics {
  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

  gap: 14px;
}

.notes-topic {
  padding: 16px 18px;

  border: 1px solid var(--ink);

  border-radius: 12px;

  background: #fff;

  box-shadow: 3px 3px 0 #a18cff;
}

.notes-topic h5 {
  margin: 0 0 10px;

  font:
    22px / 1.05
    Georgia,
    serif;
}

.notes-topic ul {
  margin: 0;

  padding-left: 18px;

  font-size: 15px;

  line-height: 1.55;
}

.notes-topic li + li {
  margin-top: 5px;
}

/* Notes panel scrolls up/down only */
.notes-panel {
  overflow-x: hidden;
}


/* =========================================================
   MBA NOTES PANEL — short explanation in pages (01 02 03)
   ========================================================= */

.notes-tabs {
  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

  gap: 8px;

  margin-bottom: 22px;
}

.notes-tab {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 4px;

  padding: 10px 12px;

  border: 1px solid var(--ink);

  border-radius: 10px;

  background: #fff;

  color: var(--ink);

  text-align: left;

  transition: background 0.2s ease, transform 0.2s ease;
}

.notes-tab:hover {
  transform: translateY(-2px);
}

.notes-tab.is-active {
  background: #a18cff;

  box-shadow: 0 1px 3px rgba(21, 21, 21, 0.08), 0 6px 18px rgba(21, 21, 21, 0.07);
}

.notes-tab-number {
  font:
    10px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.1em;
}

.notes-tab-title {
  font:
    17px / 1.1
    Georgia,
    serif;
}

.notes-page {
  animation: notes-page-in 0.4s cubic-bezier(.2, .8, .2, 1);
}

@keyframes notes-page-in {
  from {
    opacity: 0;

    transform: translateY(10px);
  }
}

.notes-page-title {
  margin: 0 0 14px;

  font:
    30px / 1.05
    Georgia,
    serif;

  letter-spacing: 0;
}

.notes-page > p {
  margin: 0 0 14px;

  font-size: 16px;

  line-height: 1.65;
}

.notes-items {
  display: grid;

  gap: 12px;

  margin-top: 6px;
}

.notes-item {
  padding: 14px 16px;

  border: 1px solid var(--ink);

  border-radius: 12px;

  background: #fff;

  box-shadow: 3px 3px 0 #a18cff;
}

.notes-item h5 {
  margin: 0 0 6px;

  font:
    20px / 1.1
    Georgia,
    serif;
}

.notes-item p {
  margin: 0;

  font-size: 15px;

  line-height: 1.6;
}

.notes-closing {
  margin: 20px 0 0;

  padding-left: 14px;

  border-left: 4px solid #a18cff;

  font:
    italic
    22px / 1.25
    Georgia,
    serif;
}

.notes-nav {
  display: flex;

  justify-content: space-between;

  margin-top: 24px;
}

.notes-nav-button {
  padding: 9px 14px;

  border: 1px solid var(--ink);

  border-radius: 999px;

  background: #fff;

  color: var(--ink);

  font:
    10px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.1em;
}

.notes-nav-button:not(:disabled):hover {
  background: #a18cff;
}

.notes-nav-button:disabled {
  opacity: 0.35;
}


/* =========================================================
   BRAND SYMBOLS ON CAMPAIGN CARDS
   Plain, one colour, unaltered — black, or white on dark
   brand colours.
   ========================================================= */

.card-logo {
  position: relative;

  z-index: 1;

  display: block;

  width: 36%;
  height: auto;

  margin-bottom: 9px;

  pointer-events: none;
}

/* wordmarks (e.g. Michelin) are wide and short */
.card-logo.is-wide {
  width: 78%;
}

.card-logo.is-light {
  filter: brightness(0) invert(1);
}

/* Trademark note under the footer */
footer {
  flex-wrap: wrap;
}

.footer-legal {
  flex-basis: 100%;

  margin: 4px 0 0;

  font:
    11px / 1.5
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0;

  opacity: 0.55;
}


/* =========================================================
   NYC — FLOATING BUSINESS TAGS ABOVE THE TOWERS
   Positioned every frame by nyc.js (translate x/y).
   ========================================================= */

.nyc-labels {
  position: absolute;

  inset: 0;

  z-index: 4;

  overflow: hidden;

  pointer-events: none;
}

.nyc-label {
  position: absolute;

  top: 0;
  left: 0;

  padding: 6px 10px;

  border: 1px solid var(--ink);

  border-radius: 999px;

  background: #fff;

  color: var(--ink);

  box-shadow: 0 1px 3px rgba(21, 21, 21, 0.08), 0 6px 18px rgba(21, 21, 21, 0.07);

  font:
    10px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.08em;

  white-space: nowrap;

  transition:
    opacity 0.25s ease,
    background 0.2s ease;

  will-change: transform;
}

/* small pointer down to the tower */
.nyc-label::after {
  content: "";

  position: absolute;

  top: 100%;
  left: 50%;

  width: 1.5px;
  height: 14px;

  background: var(--ink);

  transform: translateX(-50%);
}

/* gentle hover-in-the-air motion (on the text, not the
   positioned element, so it doesn't fight nyc.js) */
@media (prefers-reduced-motion: no-preference) {

  .nyc-label {
    animation: nyc-label-bob 2.6s ease-in-out infinite;
  }

}

@keyframes nyc-label-bob {
  50% {
    translate: 0 -5px;
  }
}

.nyc-label.is-active {
  background: #ffc233;
}

/* Brand colour (set per business in nyc.js): a colour dot,
   a brand-coloured shadow, and a full brand fill on hover */
.nyc-label[style*="--brand"] {
  box-shadow: 0 1px 3px rgba(21, 21, 21, 0.08), 0 6px 18px rgba(21, 21, 21, 0.07);
}

.nyc-label[style*="--brand"]::before {
  content: "";

  display: inline-block;

  width: 8px;
  height: 8px;

  margin-right: 7px;

  border: 1px solid var(--ink);

  border-radius: 50%;

  background: var(--brand);

  vertical-align: -0.5px;
}

.nyc-label[style*="--brand"].is-active {
  background: var(--brand);

  color: #ffffff;

  box-shadow: 0 1px 3px rgba(21, 21, 21, 0.08), 0 6px 18px rgba(21, 21, 21, 0.07);
}

.nyc-label[style*="--brand"].is-active::before {
  background: #ffffff;
}

.nyc-label.is-soon {
  padding: 4px 8px;

  border-style: dashed;

  box-shadow: none;

  background: rgba(255, 255, 255, 0.7);

  opacity: 0.85;
}

@media (max-width: 760px) {

  .nyc-label {
    padding: 4px 7px;

    font-size: 8px;
  }

}


/* =========================================================
   NYC BUSINESS STORY (in the notes panel)
   ========================================================= */

.biz-hook {
  margin: -12px 0 22px;

  font:
    italic
    24px / 1.25
    Georgia,
    serif;
}

.biz-stats {
  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

  gap: 10px;

  margin-bottom: 18px;
}

.biz-stat {
  display: flex;

  flex-direction: column;

  gap: 6px;

  padding: 12px 14px;

  border: 1px solid var(--ink);

  border-radius: 12px;

  background: #fff7d6;
}

.biz-stat-value {
  font:
    34px / 1
    Georgia,
    serif;
}

.biz-stat-label {
  font:
    10px / 1.4
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.06em;

  text-transform: uppercase;
}

.biz-sources {
  margin-top: 18px;
}

.biz-sources ol {
  margin: 0 0 12px;

  padding-left: 18px;

  font-size: 13px;

  line-height: 1.8;
}

.biz-sources a {
  color: inherit;
}

.biz-note {
  margin: 0;

  font-size: 12px;

  opacity: 0.65;
}


/* =========================================================
   01 — THE IDEA MAKERS
   Five New York agencies as an editorial index: each row
   opens into what they do, their brands and one idea.
   ========================================================= */

.agencies-head {
  display: grid;

  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);

  align-items: end;

  gap: 40px;

  margin-bottom: 34px;
}

.agencies .agencies-head h2, .agencies-head h1 {
  margin: 0;

  font-size: clamp(42px, 5.6vw, 76px);
}

.agencies .agencies-head p {
  margin: 0;

  font-size: 17px;

  line-height: 1.6;
}

.agency-list {
  border-bottom: 1px solid var(--ink);
}

.agency {
  border-top: 1px solid var(--ink);

  transition: background 0.4s ease;
}

.agency.is-open {
  background: color-mix(in srgb, var(--agency) 14%, transparent);
}

/* the row */
.agency-row {
  width: 100%;

  display: grid;

  grid-template-columns: 46px minmax(0, 1fr) minmax(0, 1.3fr) auto 34px;

  align-items: center;

  gap: 18px;

  padding: 16px 12px;

  border: 0;

  background: none;

  color: var(--ink);

  font: inherit;

  text-align: left;

  cursor: pointer;
}

.agency-num {
  display: grid;

  place-items: center;

  width: 38px;
  height: 38px;

  border: 1px solid var(--ink);

  border-radius: 50%;

  background: var(--agency);

  color: var(--agency-ink);

  font:
    11px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  transition: transform 0.4s cubic-bezier(.3, 1.6, .5, 1);
}

.agency-name {
  font:
    400
    clamp(30px, 3.6vw, 46px) / 1
    Georgia,
    serif;

  letter-spacing: -0.02em;

  transition: transform 0.4s ease;
}

.agency-teaser {
  font-size: 15px;

  opacity: 0.75;
}

.agency-since {
  font:
    10px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.12em;

  opacity: 0.7;
}

.agency-toggle {
  display: grid;

  place-items: center;

  width: 30px;
  height: 30px;

  border: 1px solid var(--ink);

  border-radius: 50%;

  font-size: 18px;

  line-height: 1;

  transition:
    rotate 0.4s ease,
    background 0.3s ease;
}

.agency-row:hover .agency-name {
  transform: translateX(8px);
}

.agency-row:hover .agency-num {
  transform: rotate(-12deg) scale(1.08);
}

.agency.is-open .agency-toggle {
  rotate: 45deg;

  background: var(--agency);
}

.agency-row:focus-visible {
  outline: 2px solid var(--ink);

  outline-offset: -2px;
}

/* the panel: slides open by animating the grid row */
.agency-panel {
  display: grid;

  grid-template-rows: 0fr;

  transition: grid-template-rows 0.5s cubic-bezier(.3, .9, .3, 1);
}

.agency.is-open .agency-panel {
  grid-template-rows: 1fr;
}

.agency-inner {
  min-height: 0;

  overflow: hidden;

  display: grid;

  grid-template-columns: 1fr 0.8fr 1.4fr;

  gap: 28px;

  padding: 0 12px 0 76px;
}

.agency.is-open .agency-inner {
  padding-bottom: 24px;
}

.agency-col h4 {
  margin: 0 0 10px;

  font:
    10px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.12em;

  opacity: 0.7;
}

.agency-col p {
  margin: 0 0 10px;

  font-size: 14.5px;

  line-height: 1.6;
}

.agency-now {
  font:
    10px / 1.5
    "Helvetica Neue", Helvetica, Arial,
    sans-serif !important;

  letter-spacing: 0.1em;
}

.agency-clients {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin: 0;
  padding: 0;

  list-style: none;
}

.agency-clients li {
  padding: 6px 12px;

  border: 1px solid var(--ink);

  border-radius: 999px;

  background: #ffffff;

  font-size: 13px;
}

/* the idea gets a card in the agency's colour */
.agency-idea {
  padding: 18px 20px;

  border: 1px solid var(--ink);

  border-radius: 16px;

  background: #ffffff;

  box-shadow: 0 1px 3px rgba(21, 21, 21, 0.08), 0 6px 18px rgba(21, 21, 21, 0.07);
}

.agency-idea h5 {
  margin: 0 0 8px;

  font:
    italic
    400
    28px / 1.05
    Georgia,
    serif;
}

.agency-why {
  margin: 0 !important;

  padding-top: 10px;

  border-top: 1px dashed var(--line);

  font-weight: 600;
}

.agency-sources {
  grid-column: 1 / -1;

  margin: 0;

  font-size: 11px;

  line-height: 1.6;

  opacity: 0.65;
}

.agency-sources span {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

  letter-spacing: 0.1em;
}

.agency-sources a {
  color: inherit;
}

@media (max-width: 900px) {

  .agencies-head {
    grid-template-columns: 1fr;

    gap: 16px;
  }

  .agency-row {
    grid-template-columns: 38px minmax(0, 1fr) 30px;

    gap: 12px;

    padding: 14px 4px;
  }

  .agency-num {
    width: 32px;
    height: 32px;
  }

  /* teaser drops under the name on small screens */
  .agency-teaser {
    grid-column: 2 / 3;

    grid-row: 2;

    font-size: 13px;
  }

  .agency-since {
    display: none;
  }

  .agency-toggle {
    grid-column: 3;

    grid-row: 1;
  }

  .agency-inner {
    grid-template-columns: 1fr;

    gap: 18px;

    padding: 0 4px;
  }

}

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

  .agency-panel,
  .agency-name,
  .agency-num,
  .agency-toggle {
    transition: none;
  }

}

/* Beat the older ".statement" text rules (19px, 800px cap) */
.agencies > div {
  max-width: none;
}

.agencies .agency-col p {
  font-size: 14.5px;

  line-height: 1.6;
}

.agencies p.agency-sources {
  font-size: 11px;
}


/* =========================================================
   CV LINKS (nav pill + About button)
   The PDF lives at cv/Vinayak-Patel-CV.pdf
   ========================================================= */

/* the CV pill is the one fully coloured link in the menu */
.nav nav .nav-cv {
  --pill: #ffc233;
  --pill-strong: #ffb000;

  font-weight: 600;
}

.about-links {
  display: flex;

  flex-wrap: wrap;

  gap: 14px;
}


/* =========================================================
   TAGLINE TICKER (hero)
   A slow ribbon of the 20 campaigns above the progress bar.
   Hover pauses it; each line opens its campaign.
   ========================================================= */

.tagline-ticker {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 62px;

  z-index: 45;

  overflow: hidden;

  padding: 8px 0;

  border-top: 1px solid rgba(21, 21, 21, 0.18);
  border-bottom: 1px solid rgba(21, 21, 21, 0.18);

  /* soft fade at both edges */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);

  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ticker-track {
  display: flex;

  width: max-content;

  animation: ticker-scroll 90s linear infinite;
}

.tagline-ticker:hover .ticker-track,
.tagline-ticker:focus-within .ticker-track {
  animation-play-state: paused;
}

@keyframes ticker-scroll {
  to {
    transform: translateX(-50%);
  }
}

.ticker-item {
  display: inline-flex;

  align-items: baseline;

  gap: 10px;

  padding: 2px 26px;

  color: var(--ink);

  text-decoration: none;

  white-space: nowrap;
}

/* a dot in the campaign's colour between lines */
.ticker-item::before {
  content: "";

  align-self: center;

  width: 9px;
  height: 9px;

  border: 1px solid var(--ink);

  border-radius: 50%;

  background: var(--tick);
}

.ticker-brand {
  font:
    10px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  opacity: 0.7;
}

.ticker-line {
  font:
    italic
    400
    20px / 1
    Georgia,
    serif;

  transition: color 0.2s ease;
}

.ticker-item:hover .ticker-line,
.ticker-item:focus-visible .ticker-line {
  color: var(--tick);
}

@media (max-width: 760px) {

  .tagline-ticker {
    bottom: 56px;
  }

  .ticker-line {
    font-size: 17px;
  }

}

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

  /* no motion: a still row you can scroll sideways */
  .tagline-ticker {
    overflow-x: auto;
  }

  .ticker-track {
    animation: none;
  }

}


/* =========================================================
   NOTE MODELS — live mini-models inside the MBA notes
   Colour code from BUSA 630: inputs grey, decisions yellow,
   objective blue, constraints green.
   ========================================================= */

.note-model {
  --m-input: #d9d6cf;
  --m-decision: #ffd84d;
  --m-objective: #7ab8ff;
  --m-constraint: #6fd6a0;

  display: grid;

  gap: 16px;

  margin-top: 8px;

  padding: 20px;

  border: 1px solid var(--ink);

  border-radius: 18px;

  background: #ffffff;

  box-shadow: 0 1px 3px rgba(21, 21, 21, 0.08), 0 6px 18px rgba(21, 21, 21, 0.07);
}

.model-formula {
  margin: 0;

  font:
    italic
    24px / 1.1
    Georgia,
    serif;
}

.model-controls {
  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

  gap: 12px 20px;
}

.model-slider {
  display: grid;

  gap: 6px;

  padding: 10px 12px;

  border-radius: 12px;

  border-left: 6px solid var(--m-input);

  background: #f7f6f2;
}

.model-slider.is-decision {
  border-left-color: var(--m-decision);
}

.model-slider-top {
  display: flex;

  justify-content: space-between;

  gap: 10px;

  font-size: 13px;
}

.model-slider-top strong {
  font:
    500
    13px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;
}

.model-slider input {
  width: 100%;

  accent-color: var(--ink);

  cursor: pointer;
}

.model-results {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 12px;
}

.model-results.is-three {
  grid-template-columns: repeat(3, 1fr);
}

.model-result {
  display: grid;

  gap: 4px;

  padding: 12px 14px;

  border: 1px solid var(--ink);

  border-radius: 12px;

  background: var(--m-objective);

  transition: background 0.3s ease;
}

.model-result.is-constraint {
  background: var(--m-constraint);
}

.model-result.is-input {
  background: var(--m-input);
}

.model-result.is-loss {
  background: #ff9b8f;
}

.model-result span {
  font:
    10px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.1em;
}

.model-result strong {
  font:
    400
    clamp(22px, 3vw, 30px) / 1
    Georgia,
    serif;
}

/* break-even chart */
.model-chart {
  width: 100%;

  height: auto;

  overflow: visible;
}

.model-chart .axis {
  stroke: var(--ink);

  stroke-width: 1;
}

.model-chart .cost-line {
  stroke: #8a8780;

  stroke-width: 3;
}

.model-chart .revenue-line {
  stroke: #3a8ee6;

  stroke-width: 3;
}

.model-chart .plan-line {
  stroke: #e0b400;

  stroke-width: 2;

  stroke-dasharray: 4 4;
}

.model-chart .even-dot {
  fill: var(--m-constraint);

  stroke: var(--ink);

  stroke-width: 1.5;
}

.model-chart .chart-label {
  font:
    8px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.08em;

  fill: var(--ink);
}

/* surplus split bar */
.model-split {
  display: flex;

  height: 30px;

  overflow: hidden;

  border: 1px solid var(--ink);

  border-radius: 999px;
}

.model-split span {
  display: grid;

  place-items: center;

  font:
    9px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.12em;

  transition: width 0.3s ease;
}

.model-split-cost {
  background: var(--m-input);
}

.model-split-surplus {
  background: var(--m-constraint);
}

.model-verdict {
  margin: 0;

  padding: 10px 14px;

  border-radius: 10px;

  background: #f7f6f2;

  font-size: 14px;

  line-height: 1.55;
}

@media (max-width: 600px) {

  .model-results,
  .model-results.is-three {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   04 — NUDGE
   Calm and tactile: lever buttons like keys on a board, a
   card that swaps in softly, and a small "nudge" push on
   the chosen key. Mint accent from the section colour.
   ========================================================= */

.nudge > div {
  max-width: none;
}

.nudge-head {
  display: grid;

  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);

  align-items: end;

  gap: 40px;

  margin-bottom: 30px;
}

.nudge .nudge-head h2, .nudge-head h1 {
  margin: 0;

  font-family: Georgia, serif;

  font-size: clamp(38px, 5vw, 66px);

  font-weight: 400;

  line-height: 0.95;

  letter-spacing: -0.02em;
}

.nudge .nudge-head p {
  margin: 0;

  font-size: 16px;

  line-height: 1.6;
}

/* the board: levers left, card right */
.nudge-board {
  display: grid;

  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);

  gap: 24px;

  align-items: start;
}

.nudge-levers {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 10px;
}

.nudge-lever {
  position: relative;

  display: grid;

  gap: 8px;

  justify-items: start;

  min-height: 92px;

  padding: 12px;

  border: 1px solid var(--ink);

  border-radius: 14px;

  background: #ffffff;

  color: var(--ink);

  box-shadow: 0 1px 3px rgba(21, 21, 21, 0.08), 0 6px 18px rgba(21, 21, 21, 0.07);

  font: inherit;

  text-align: left;

  cursor: pointer;

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.25s ease;
}

.nudge-lever:hover {
  transform: translateY(-2px);

  box-shadow: 0 1px 3px rgba(21, 21, 21, 0.08), 0 6px 18px rgba(21, 21, 21, 0.07);
}

/* pressed: the key goes down */
.nudge-lever.is-active {
  background: var(--sec-accent);

  transform: translateY(3px);

  box-shadow: 0 1px 3px rgba(21, 21, 21, 0.08), 0 6px 18px rgba(21, 21, 21, 0.07);
}

.nudge-lever:focus-visible {
  outline: 2px solid var(--ink);

  outline-offset: 3px;
}

.nudge-lever-icon {
  font-size: 22px;

  line-height: 1;
}

.nudge-lever-name {
  font:
    400
    19px / 1
    Georgia,
    serif;
}

.nudge-lever-num {
  position: absolute;

  top: 10px;
  right: 12px;

  font:
    9px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  opacity: 0.55;
}

/* a small sideways push when a lever is chosen */
.nudge-lever.is-nudged {
  animation: nudge-push 0.45s cubic-bezier(.3, 1.6, .5, 1);
}

@keyframes nudge-push {
  30% {
    translate: 6px 0;
  }

  60% {
    translate: -3px 0;
  }
}

/* the card */
.nudge-card {
  position: sticky;

  top: 90px;
}

.nudge-card-inner {
  padding: 24px 26px;

  border: 1px solid var(--ink);

  border-radius: 20px;

  background: #ffffff;

  box-shadow: 0 1px 3px rgba(21, 21, 21, 0.08), 0 6px 18px rgba(21, 21, 21, 0.07);

  animation: nudge-card-in 0.4s ease;
}

@keyframes nudge-card-in {
  from {
    opacity: 0;

    translate: 0 10px;
  }
}

.nudge-card-head {
  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 10px;
}

.nudge-card-icon {
  display: grid;

  place-items: center;

  width: 44px;
  height: 44px;

  border: 1px solid var(--ink);

  border-radius: 50%;

  background: var(--sec-accent);

  font-size: 22px;
}

.nudge-card-label {
  font:
    10px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.14em;
}

.nudge .nudge-rule {
  margin: 0 0 16px;

  font:
    italic
    400
    clamp(24px, 2.6vw, 32px) / 1.12
    Georgia,
    serif;
}

.nudge-sub {
  margin: 14px 0 6px;

  font:
    10px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.12em;

  opacity: 0.65;
}

.nudge .nudge-why {
  margin: 0;

  font-size: 15px;

  line-height: 1.55;
}

.nudge-brands {
  display: grid;

  gap: 8px;
}

.nudge-brand {
  display: grid;

  gap: 2px;

  padding: 10px 12px;

  border-radius: 12px;

  background: #f3f8f5;

  color: var(--ink);

  text-decoration: none;

  font-size: 14px;

  line-height: 1.45;

  transition: background 0.2s ease;
}

a.nudge-brand:hover {
  background: color-mix(in srgb, var(--sec-accent) 35%, #ffffff);
}

.nudge-steps {
  margin: 0;

  padding-left: 20px;

  font-size: 14.5px;

  line-height: 1.6;
}

/* the engine */
.nudge-engine {
  margin-top: 40px;

  padding: 26px;

  border: 1px dashed var(--ink);

  border-radius: 22px;

  background: rgba(255, 255, 255, 0.55);
}

.engine-title {
  margin: 0 0 4px;

  font:
    10px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.16em;
}

.engine-heading {
  margin: 0 0 18px;

  font:
    400
    clamp(26px, 3vw, 36px) / 1.05
    Georgia,
    serif;
}

.engine-group {
  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 8px;

  margin-bottom: 12px;
}

.engine-label {
  min-width: 150px;

  font:
    10px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.12em;
}

.engine-chip {
  padding: 7px 14px;

  border: 1px solid var(--ink);

  border-radius: 999px;

  background: #ffffff;

  color: var(--ink);

  font:
    500
    13px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  cursor: pointer;

  transition:
    background 0.2s ease,
    transform 0.15s ease;
}

.engine-chip:hover {
  transform: translateY(-1px);
}

.engine-chip.is-chosen {
  background: var(--ink);

  color: #ffffff;
}

.engine-result {
  margin-top: 18px;
}

.nudge .engine-verdict {
  margin: 0 0 14px;

  font:
    400
    clamp(20px, 2.2vw, 26px) / 1.2
    Georgia,
    serif;
}

.engine-verdict em {
  padding: 0 0.1em;

  background: var(--sec-accent);

  font-style: italic;
}

.engine-plans {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 14px;
}

.engine-plan {
  display: grid;

  gap: 8px;

  align-content: start;

  padding: 16px 18px;

  border: 1px solid var(--ink);

  border-radius: 16px;

  background: #ffffff;

  animation: nudge-card-in 0.35s ease;
}

.engine-plan-num {
  font:
    10px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.12em;
}

.nudge .engine-plan p {
  margin: 0;

  font-size: 15px;

  line-height: 1.55;
}

.engine-plan small {
  font-size: 12.5px;

  line-height: 1.45;

  opacity: 0.7;
}

.engine-open {
  justify-self: start;

  padding: 0;

  border: 0;

  background: none;

  color: var(--ink);

  font:
    11px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.08em;

  text-decoration: underline;

  cursor: pointer;
}

.nudge .engine-sources {
  margin: 18px 0 0;

  font-size: 11px;

  opacity: 0.6;
}

.engine-sources a {
  color: inherit;
}

@media (max-width: 900px) {

  .nudge-head,
  .nudge-board,
  .engine-plans {
    grid-template-columns: 1fr;
  }

  .nudge-head {
    gap: 14px;
  }

  .nudge-card {
    position: static;
  }

  .nudge-levers {
    grid-template-columns: repeat(3, 1fr);

    gap: 8px;
  }

  .nudge-lever {
    min-height: 74px;

    padding: 10px;
  }

  .nudge-lever-name {
    font-size: 16px;
  }

  .engine-label {
    min-width: 100%;
  }

  .nudge-engine {
    padding: 18px;
  }

}

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

  .nudge-lever,
  .nudge-lever.is-nudged,
  .nudge-card-inner,
  .engine-plan,
  .engine-chip {
    animation: none;

    transition: none;
  }

}


/* =========================================================
   PAPER TEXTURE
   A very faint grain over the whole page so it feels
   printed rather than flat-digital. Purely decorative.
   ========================================================= */

body::after {
  content: "";

  position: fixed;

  inset: 0;

  z-index: 9998;

  pointer-events: none;

  opacity: 0.06;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  mix-blend-mode: multiply;
}

@media print {
  body::after {
    display: none;
  }
}


/* =========================================================
   GEORGIA SIZING
   Georgia is wider than the old condensed display serif, so
   the big headings come down a step to keep their line
   breaks (2–3 lines instead of 4–5).
   ========================================================= */

.statement h2, .statement h1,
.map h2, .map h1,
.about h2 {
  font-size: clamp(38px, 5.2vw, 68px);

  line-height: 1;

  letter-spacing: -0.02em;
}

.agencies .agencies-head h2, .agencies-head h1 {
  font-size: clamp(32px, 4.1vw, 56px);
}

.nudge .nudge-head h2, .nudge-head h1 {
  font-size: clamp(30px, 3.7vw, 50px);

  line-height: 1.02;
}

.nyc-heading h2 {
  letter-spacing: -0.02em;
}


/* =========================================================
   NARROW SCREENS (folded foldables, small phones)
   Grid columns may shrink below their longest word, long
   subject names wrap, and under 360px the subjects stack.
   ========================================================= */

.statement > div,
.map > div,
.writing > div,
.about > div {
  min-width: 0;
}

.nodes {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nodes .subject-name {
  overflow-wrap: break-word;

  hyphens: auto;
}

@media (max-width: 760px) {

  .nodes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 360px) {

  .nodes {
    grid-template-columns: minmax(0, 1fr);
  }

}

.nudge-levers {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nudge-lever-name {
  overflow-wrap: break-word;
}

@media (max-width: 360px) {

  .nudge-levers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}


/* =========================================================
   HERO HEADLINE — the one playful font
   "Why do some businesses grow?" keeps the narrow, expressive
   Instrument Serif at its original size; the rest of the site
   stays in Georgia + Helvetica.
   ========================================================= */

.hero-intro h1 {
  font-family: "Instrument Serif", Georgia, serif;

  font-size: clamp(72px, 12.4vw, 240px);

  line-height: 0.85;

  letter-spacing: -0.045em;
}

@media (max-width: 760px) {

  .hero-intro h1 {
    font-size: 62px;
  }

}


/* Custom cursor is switched off (script.js USE_CUSTOM_CURSOR): hide its pieces on every page */
.custom-cursor-ring,
.custom-cursor-dot {
  display: none;
}

button,
.morph-card,
.agency-row {
  cursor: pointer;
}