:root {
  --ink: #211d1b;
  --paper: #f5f0e8;
  --paper-deep: #ece3d8;
  --blush: #d9a6a0;
  --sage: #aeb7a3;
  --line: rgba(33, 29, 27, 0.22);
  --muted: #746d67;
  --accent: #c56f70;
}

body {
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

.site-header {
  height: 74px;
  background: rgba(245, 240, 232, 0.9);
  border-bottom-color: var(--ink);
}

.brand {
  font-family: "DM Serif Display", "Noto Serif SC", serif;
  font-size: 21px;
  font-weight: 400;
}

.site-header nav a,
.eyebrow,
.card-info small,
.visual small {
  letter-spacing: 0.16em;
}

.site-header nav {
  gap: clamp(15px, 1.75vw, 32px);
}

.site-header nav a {
  font-size: clamp(13px, 1.02vw, 16px);
}

.hero {
  min-height: calc(100vh - 74px);
  grid-template-columns: minmax(0, 1.55fr) minmax(310px, 0.45fr);
  padding-top: clamp(70px, 10vh, 120px);
  border-bottom: 1px solid var(--ink);
}

.hero::before {
  content: "PORTFOLIO / 2026";
  position: absolute;
  top: 28px;
  right: var(--pad);
  font-size: 9px;
  letter-spacing: 0.18em;
  writing-mode: vertical-rl;
}

.hero h1,
.section-head h2,
.page-hero h1,
.project-hero h1,
.quote h2,
.next-project h2,
.card-info h3,
.cap-item h3,
.about-copy h2,
.case-section header h2,
.recognition h2 {
  font-family: "DM Serif Display", "Noto Serif SC", serif;
  font-weight: 400;
}

.hero h1 {
  font-size: clamp(64px, 8.7vw, 138px);
  line-height: 0.85;
  letter-spacing: -0.055em;
  max-width: 1240px;
}

.hero h1 span {
  display: inline-block;
  max-width: 1000px;
  margin-top: 24px;
  color: var(--ink);
  font-size: 0.54em;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.lede {
  margin: 34px 0 30px 17%;
  max-width: 530px;
  padding-left: 18px;
  border-left: 1px solid var(--ink);
}

.button {
  border-radius: 0;
  border-width: 1px;
  background: rgba(255, 255, 255, 0.12);
}

.hero-art {
  min-height: 440px;
}

.monogram {
  right: -2vw;
  bottom: 5%;
  color: var(--blush);
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  opacity: 0.88;
}

.orbit {
  right: 8%;
  border-color: rgba(33, 29, 27, 0.55);
}

.dot {
  width: 11px;
  height: 11px;
  background: var(--accent);
}

.section {
  padding-top: clamp(100px, 12vw, 180px);
  padding-bottom: clamp(100px, 12vw, 180px);
}

.section-head {
  grid-template-columns: 0.55fr 1.45fr;
  align-items: start;
  margin-bottom: 85px;
}

.section-head h2 {
  line-height: 0.96;
  letter-spacing: -0.035em;
}

.capabilities {
  border-top: 0;
}

.cap-grid {
  border-top: 1px solid var(--ink);
}

.cap-item {
  grid-template-columns: 90px 1.15fr 1fr 40px;
  padding: 38px 12px;
}

.cap-item::before {
  background: var(--paper-deep);
}

.cap-item h3 {
  font-size: clamp(28px, 3vw, 46px);
}

.featured {
  max-width: none;
  padding-left: var(--pad);
  padding-right: var(--pad);
  background: var(--paper-deep);
  border-top: 1px solid var(--ink);
}

.featured > * {
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
}

.project-grid {
  grid-template-columns: repeat(12, 1fr);
  gap: 120px 28px;
}

.project-card {
  grid-column: span 7;
}

.project-card:nth-child(even) {
  grid-column: 8 / span 5;
  margin-top: 150px;
}

.project-card:nth-child(3n) {
  grid-column: 2 / span 10;
  margin-top: 10px;
}

.project-card:nth-child(5) {
  grid-column: 1 / span 6;
}

.project-card-magazine {
  grid-column: span 6;
}

.project-card-motion {
  grid-column: span 7;
}

.listing-magazine-cover {
  position: relative;
  margin: 0;
  min-height: 500px;
  display: grid;
  place-items: center;
  padding: clamp(24px, 3vw, 44px);
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 18%, rgba(217, 166, 160, .36) 0 18%, transparent 18.2%),
    linear-gradient(135deg, #f6e8df 0%, #ede2d5 100%);
  border: 1px solid rgba(33, 29, 27, .48);
  box-shadow: 10px 12px 0 rgba(33, 29, 27, .06);
}

.listing-magazine-cover::after {
  content: "GlamBold";
  position: absolute;
  right: 22px;
  top: 18px;
  color: rgba(197, 111, 112, .92);
  font-family: "Caveat", cursive;
  font-size: clamp(25px, 3vw, 42px);
  transform: rotate(4deg);
}

.listing-magazine-cover img {
  width: min(100%, 390px);
  height: min(100%, 560px);
  object-fit: contain;
  display: block;
  filter: saturate(.98) contrast(1.01);
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
}

.listing-magazine-cover span {
  position: absolute;
  left: clamp(20px, 2.8vw, 36px);
  bottom: clamp(18px, 2.5vw, 30px);
  color: transparent;
  -webkit-text-stroke: 1px var(--ink);
  font-family: "DM Serif Display", serif;
  font-size: clamp(72px, 10vw, 142px);
  line-height: .8;
  opacity: .26;
}

.project-card-magazine:hover .listing-magazine-cover img {
  transform: scale(1.018) rotate(-.45deg);
}

.listing-motion-cover {
  position: relative;
  margin: 0;
  min-height: 430px;
  overflow: hidden;
  border: 1px solid rgba(33, 29, 27, .48);
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 212, 113, .28) 0 16%, transparent 16.2%),
    linear-gradient(135deg, #d8eeee 0%, #f5e7c4 100%);
  box-shadow: 10px 12px 0 rgba(33, 29, 27, .06);
}

.listing-motion-cover img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 430px;
  object-fit: cover;
  object-position: 50% 56%;
  filter: saturate(1.06) contrast(1.02);
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
}

.listing-motion-cover span {
  position: absolute;
  left: clamp(20px, 2.8vw, 36px);
  bottom: clamp(18px, 2.5vw, 30px);
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 250, 242, .9);
  font-family: "DM Serif Display", serif;
  font-size: clamp(72px, 10vw, 142px);
  line-height: .8;
  opacity: .62;
}

.listing-motion-cover em {
  position: absolute;
  right: clamp(14px, 2.4vw, 28px);
  top: clamp(14px, 2.2vw, 26px);
  padding: 8px 12px;
  border: 1px solid rgba(33, 29, 27, .18);
  background: rgba(255, 250, 242, .78);
  color: #2d4f55;
  font-family: "Caveat", cursive;
  font-size: clamp(22px, 2.6vw, 34px);
  font-style: normal;
  transform: rotate(4deg);
}

.project-card-motion:hover .listing-motion-cover img {
  transform: scale(1.045);
}

.visual {
  padding: clamp(24px, 3vw, 46px);
  border: 1px solid rgba(33, 29, 27, 0.48);
  box-shadow: 10px 12px 0 rgba(33, 29, 27, 0.06);
}

.visual::after {
  content: "";
  position: absolute;
  inset: 10% 7% 12% 38%;
  z-index: -2;
  border: 1px solid currentColor;
  opacity: 0.34;
  transform: rotate(2.5deg);
}

.visual > span {
  max-width: 72%;
  font-family: "DM Serif Display", "Noto Serif SC", serif;
  font-weight: 400;
  font-size: clamp(38px, 5.5vw, 82px);
  line-height: 0.88;
}

.visual > b {
  right: auto;
  left: clamp(24px, 3vw, 46px);
  top: auto;
  bottom: 52px;
  font-family: "DM Serif Display", serif;
  font-size: clamp(72px, 10vw, 150px);
  font-weight: 400;
  color: transparent;
  -webkit-text-stroke: 1px currentColor;
  opacity: 0.32;
}

.visual small {
  left: auto;
  right: 22px;
  writing-mode: vertical-rl;
}

.editorial-rule {
  position: absolute;
  width: 31%;
  height: 20%;
  right: 7%;
  top: 16%;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  opacity: 0.58;
}

.shape.s1 {
  width: 45%;
  height: 50%;
  right: -4%;
  bottom: -3%;
  border-width: 1px;
  border-radius: 50% 42% 56% 45%;
  transform: rotate(-18deg) skewX(8deg);
  opacity: 0.7;
}

.shape.s2 {
  width: 18%;
  height: 26%;
  right: 21%;
  bottom: 18%;
  clip-path: none;
  opacity: 0.13;
  transform: rotate(7deg);
}

.acid { background: #c7c4ad; color: #25221d; }
.blue { background: #8fa3aa; color: #172327; }
.orange { background: #c58f70; color: #2d1c14; }
.pink { background: #d7aaa6; color: #321e1e; }
.green { background: #9eaa98; color: #1c281f; }

.card-info {
  padding-top: 24px;
}

.card-info h3 {
  margin-top: 10px;
  font-size: clamp(28px, 3vw, 44px);
}

.page-hero {
  position: relative;
  max-width: none;
  padding-left: var(--pad);
  background: linear-gradient(90deg, transparent 0 66%, var(--paper-deep) 66%);
  border-bottom-color: var(--ink);
}

.page-hero::after {
  content: "";
  position: absolute;
  width: 130px;
  height: 64px;
  right: 11%;
  top: 25%;
  border: 1px solid var(--ink);
  border-radius: 50%;
  transform: rotate(-12deg);
  opacity: 0.4;
}

.page-hero h1,
.project-hero h1 {
  letter-spacing: -0.045em;
}

.listing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 6vw, 90px);
  align-items: center;
}

.listing-hero-copy {
  position: relative;
  z-index: 1;
}

.graphic-listing-hero {
  grid-template-columns: minmax(0, .92fr) minmax(320px, .68fr);
  overflow: hidden;
  background:
    radial-gradient(circle at 90% 18%, rgba(197, 111, 112, .18) 0 18%, transparent 18.2%),
    linear-gradient(90deg, transparent 0 59%, rgba(236, 227, 216, .92) 59%);
}

.graphic-listing-hero h1 {
  color: #b85f60;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .32);
}

.graphic-listing-hero .listing-hero-copy > p:last-child {
  color: #695f52;
}

.motion-listing-hero {
  grid-template-columns: minmax(0, .9fr) minmax(300px, .54fr);
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 18%, rgba(131, 193, 201, .24) 0 18%, transparent 18.2%),
    radial-gradient(circle at 76% 86%, rgba(255, 212, 113, .22) 0 15%, transparent 15.2%),
    linear-gradient(90deg, transparent 0 58%, rgba(219, 233, 231, .94) 58%);
}

.motion-listing-hero h1 {
  color: #2d6d76;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .32);
}

.motion-listing-hero .listing-hero-copy > p:last-child {
  max-width: 660px;
  color: #59665e;
}

.graphic-hero-art {
  position: relative;
  z-index: 1;
  width: min(100%, 560px);
  margin: 0 0 0 auto;
  padding: clamp(12px, 1.8vw, 22px);
  border: 1px solid rgba(33, 29, 27, .22);
  background: rgba(255, 250, 242, .82);
  box-shadow: 12px 14px 0 rgba(197, 111, 112, .12);
  transform: rotate(1.4deg);
}

.graphic-hero-art::before {
  content: "";
  position: absolute;
  inset: 12px -10px -12px 14px;
  z-index: -1;
  border: 1px solid rgba(33, 29, 27, .16);
  background: rgba(174, 183, 163, .26);
  transform: rotate(-2.2deg);
}

.graphic-hero-art img {
  display: block;
  width: 100%;
  max-height: min(42vh, 410px);
  object-fit: contain;
}

.graphic-hero-art figcaption {
  margin-top: 9px;
  font-size: 10px;
  letter-spacing: .18em;
  color: rgba(33, 29, 27, .55);
  text-align: right;
}

.motion-hero-art {
  position: relative;
  z-index: 1;
  width: min(100%, 390px);
  margin: 0 6% 0 auto;
  padding: clamp(10px, 1.6vw, 18px);
  border: 1px solid rgba(33, 29, 27, .2);
  border-radius: 44% 56% 42% 58% / 4% 5% 5% 4%;
  background: rgba(255, 250, 242, .8);
  box-shadow: 12px 14px 0 rgba(45, 109, 118, .12);
  transform: rotate(2.3deg);
}

.motion-hero-art::before {
  content: "";
  position: absolute;
  inset: 14px -10px -12px 12px;
  z-index: -1;
  border: 1px solid rgba(33, 29, 27, .14);
  border-radius: 42% 58% 48% 52% / 5% 4% 5% 4%;
  background: rgba(255, 212, 113, .34);
  transform: rotate(-3.6deg);
}

.motion-hero-art img {
  display: block;
  width: 100%;
  max-height: min(58vh, 560px);
  border-radius: 30% 70% 34% 66% / 4% 5% 5% 4%;
  object-fit: contain;
}

.motion-hero-art figcaption {
  width: fit-content;
  margin: 10px 0 0 auto;
  padding: 6px 10px;
  background: #f7d985;
  color: #2d4f55;
  font-family: "Caveat", cursive;
  font-size: 24px;
  transform: rotate(-4deg);
}

.project-index {
  font-family: "DM Serif Display", serif;
  color: transparent;
  -webkit-text-stroke: 1px var(--ink);
}

.about-grid .portrait {
  transform: rotate(-1.2deg);
}

.about-copy::before {
  content: "personal notes";
  display: block;
  margin: 0 0 38px 62%;
  font-family: "Caveat", cursive;
  font-size: 25px;
  color: var(--accent);
  transform: rotate(-5deg);
}

.skills-map {
  border-bottom: 1px solid var(--ink);
}

.skills-map h3 {
  font-family: "DM Serif Display", serif;
  font-size: 29px;
}

footer {
  background: var(--ink);
  color: var(--paper);
}

.footer-mark {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
}

.footer-mark span {
  color: var(--blush);
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(54px, 12vw, 90px); }
  .hero-art { opacity: 0.5; }
  .lede { margin-left: 0; }
  .graphic-listing-hero {
    grid-template-columns: minmax(0, 1fr);
    background: linear-gradient(180deg, transparent 0 62%, rgba(236, 227, 216, .9) 62%);
  }
  .motion-listing-hero {
    grid-template-columns: minmax(0, 1fr);
    background: linear-gradient(180deg, transparent 0 58%, rgba(219, 233, 231, .92) 58%);
  }
  .graphic-hero-art {
    width: min(100%, 680px);
    margin: 0 auto;
    transform: rotate(-.8deg);
  }
  .motion-hero-art {
    width: min(100%, 430px);
    margin: 0 auto;
    transform: rotate(-.8deg);
  }
  .graphic-hero-art img {
    max-height: none;
  }
  .motion-hero-art img {
    max-height: none;
  }
  .project-grid { grid-template-columns: minmax(0, 1fr); }
  .project-card,
  .project-card:nth-child(even),
  .project-card:nth-child(3n),
  .project-card:nth-child(5),
  .project-card-magazine,
  .project-card-motion {
    grid-column: 1;
    margin-top: 0;
    min-width: 0;
  }
  .cap-item { grid-template-columns: 48px 1fr 30px; }
}

@media (max-width: 560px) {
  .hero h1 { font-size: 50px; }
  .hero h1 span { font-size: 0.58em; }
  .hero::before { display: none; }
  .section-head { margin-bottom: 55px; }
  .project-grid { gap: 75px; }
  .visual { box-shadow: 6px 7px 0 rgba(33, 29, 27, 0.06); }
  .page-hero { background: linear-gradient(180deg, transparent 0 72%, var(--paper-deep) 72%); }
  .page-hero::after { display: none; }
  .graphic-listing-hero {
    padding-right: 22px;
    background: linear-gradient(180deg, transparent 0 58%, rgba(236, 227, 216, .9) 58%);
  }
  .motion-listing-hero {
    padding-right: 22px;
    background: linear-gradient(180deg, transparent 0 56%, rgba(219, 233, 231, .92) 56%);
  }
  .graphic-listing-hero h1 {
    font-size: clamp(58px, 17vw, 76px);
  }
  .motion-listing-hero h1 {
    font-size: clamp(52px, 15vw, 72px);
  }
  .graphic-hero-art {
    padding: 10px;
    box-shadow: 7px 8px 0 rgba(197, 111, 112, .12);
  }
  .motion-hero-art {
    padding: 10px;
    box-shadow: 7px 8px 0 rgba(45, 109, 118, .12);
  }
  .graphic-hero-art::before {
    inset: 8px -6px -8px 8px;
  }
  .motion-hero-art::before {
    inset: 8px -6px -8px 8px;
  }
}

/* Qinshu AI motion case study */
.qinshu-case {
  overflow-x: hidden;
  background:
    radial-gradient(circle at 10% 12%, rgba(255, 212, 113, .38) 0 11%, transparent 11.2%),
    radial-gradient(circle at 88% 8%, rgba(131, 193, 201, .32) 0 14%, transparent 14.2%),
    linear-gradient(180deg, #f7efd9 0%, #e6f1ee 42%, #f6eadc 100%);
}

.qinshu-hero {
  min-height: calc(100vh - 74px);
  padding: clamp(82px, 10vw, 150px) var(--pad) clamp(70px, 8vw, 120px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, .72fr);
  gap: clamp(42px, 7vw, 110px);
  align-items: center;
  border-bottom: 1px solid rgba(33, 29, 27, .28);
}

.qinshu-hero h1,
.qinshu-section-head h2,
.qinshu-final h2 {
  font-family: "DM Serif Display", "Noto Serif SC", serif;
  font-weight: 400;
  letter-spacing: -.05em;
}

.qinshu-hero h1 {
  max-width: 1040px;
  margin: 26px 0 28px;
  font-size: clamp(58px, 8.4vw, 132px);
  line-height: .92;
  color: #b75f54;
}

.qinshu-hero-copy > p:last-child {
  max-width: 620px;
  margin-left: clamp(0px, 6vw, 92px);
  font-size: clamp(20px, 2.2vw, 34px);
  line-height: 1.35;
  color: #4f665f;
}

.motion-hero {
  grid-template-columns: minmax(0, .9fr) minmax(320px, .62fr);
  background:
    radial-gradient(circle at 4% 16%, rgba(255, 212, 113, .34) 0 12%, transparent 12.2%),
    radial-gradient(circle at 92% 78%, rgba(131, 193, 201, .34) 0 16%, transparent 16.2%);
}

.motion-hero h2 {
  width: fit-content;
  margin: -6px 0 28px clamp(0px, 5vw, 78px);
  padding: 9px 15px 11px;
  border: 1px solid rgba(33, 29, 27, .2);
  border-radius: 999px;
  background: rgba(255, 250, 240, .76);
  color: #4f827b;
  font-family: "Caveat", cursive;
  font-size: clamp(26px, 3.3vw, 46px);
  font-weight: 500;
  transform: rotate(-2deg);
}

.motion-hand-note {
  display: inline-block;
  margin: 28px 0 0 clamp(0px, 10vw, 150px);
  padding: 8px 12px;
  border: 1px solid rgba(33, 29, 27, .18);
  background: #f7d985;
  color: #b75f54;
  font-family: "Caveat", cursive;
  font-size: clamp(22px, 2.5vw, 34px);
  transform: rotate(4deg);
}

.motion-video-preview {
  position: relative;
  width: min(100%, 450px);
  margin: 0 auto;
  padding: clamp(12px, 2vw, 18px);
  border: 1px solid rgba(33, 29, 27, .2);
  background: rgba(255, 250, 240, .78);
  box-shadow: 14px 16px 0 rgba(183, 95, 84, .13);
  transform: rotate(1.6deg);
}

.motion-video-preview::before {
  content: "";
  position: absolute;
  inset: 18px -12px -14px 14px;
  z-index: -1;
  border: 1px solid rgba(33, 29, 27, .14);
  background: rgba(185, 222, 218, .4);
  transform: rotate(-3deg);
}

.motion-video-preview video {
  display: block;
  width: 100%;
  max-height: min(70vh, 720px);
  aspect-ratio: 9 / 16;
  object-fit: contain;
  background: #111;
}

.motion-video-preview span {
  position: absolute;
  right: -16px;
  top: 34px;
  padding: 8px 12px;
  border: 1px solid rgba(33, 29, 27, .18);
  background: #f4d2ca;
  color: #2d4f55;
  font-family: "Caveat", cursive;
  font-size: 26px;
  transform: rotate(8deg);
}

.motion-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, .72fr);
  gap: clamp(24px, 4vw, 54px);
  align-items: start;
}

.motion-copy-card,
.motion-ability-card {
  border: 1px solid rgba(33, 29, 27, .18);
  background: rgba(255, 250, 240, .74);
  box-shadow: 9px 10px 0 rgba(33, 29, 27, .045);
}

.motion-copy-card {
  padding: clamp(26px, 4vw, 46px);
}

.motion-copy-card h2,
.motion-ability-card h3 {
  margin: 16px 0 22px;
  font-family: "DM Serif Display", "Noto Serif SC", serif;
  font-size: clamp(36px, 4.6vw, 72px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.04em;
  color: #b75f54;
}

.motion-copy-card > p {
  max-width: 820px;
  color: #5f665e;
  font-size: clamp(17px, 1.55vw, 21px);
  line-height: 1.75;
}

.motion-copy-card small {
  display: block;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px dashed rgba(33, 29, 27, .24);
  color: #776d62;
  line-height: 1.7;
}

.motion-ability-card {
  padding: clamp(24px, 3vw, 36px);
  background: #f4d2ca;
  transform: rotate(1.2deg);
}

.motion-ability-card h3 {
  color: #2d4f55;
  font-size: clamp(32px, 3.6vw, 54px);
}

.motion-ability-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.motion-ability-card li {
  padding: 17px 0;
  border-top: 1px solid rgba(33, 29, 27, .16);
  color: #514e48;
  line-height: 1.55;
}

.motion-info-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding-top: clamp(28px, 5vw, 70px);
  padding-bottom: clamp(70px, 8vw, 110px);
}

.motion-info-strip article {
  padding: 22px;
  border: 1px solid rgba(33, 29, 27, .18);
  background: rgba(255, 250, 240, .72);
}

.motion-info-strip article:nth-child(2) {
  background: #dbe9e7;
  transform: rotate(-1deg);
}

.motion-info-strip article:nth-child(3) {
  background: #f7d985;
  transform: rotate(1deg);
}

.motion-info-strip span {
  display: block;
  margin-bottom: 12px;
  font-size: 11px;
  letter-spacing: .16em;
  color: rgba(33, 29, 27, .58);
  text-transform: uppercase;
}

.motion-info-strip p {
  margin: 0;
  color: #403d38;
  line-height: 1.55;
}

.qinshu-character {
  position: relative;
  min-height: 540px;
  display: grid;
  place-items: center;
}

.qinshu-character::before {
  content: "";
  position: absolute;
  inset: 12% 8% 6%;
  border: 1px solid rgba(33, 29, 27, .2);
  border-radius: 48% 52% 46% 54% / 56% 43% 57% 44%;
  background:
    linear-gradient(145deg, rgba(255, 211, 112, .62), rgba(130, 202, 213, .48)),
    rgba(255, 250, 240, .42);
  box-shadow: 16px 18px 0 rgba(33, 29, 27, .06);
  transform: rotate(3deg);
}

.qinshu-character img {
  position: relative;
  z-index: 1;
  width: min(86%, 410px);
  max-height: 560px;
  object-fit: contain;
  filter: drop-shadow(0 22px 26px rgba(33, 29, 27, .16));
}

.qinshu-character span,
.qinshu-character i,
.qinshu-character b {
  position: absolute;
  z-index: 2;
  padding: 8px 12px;
  border: 1px solid rgba(33, 29, 27, .18);
  background: rgba(255, 250, 240, .78);
  font-family: "Caveat", cursive;
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 500;
  color: #b75f54;
  box-shadow: 7px 8px 0 rgba(255, 212, 113, .26);
}

.qinshu-character span {
  top: 10%;
  left: 2%;
  transform: rotate(-7deg);
}

.qinshu-character i {
  right: 0;
  bottom: 18%;
  color: #4f827b;
  transform: rotate(5deg);
}

.qinshu-character b {
  left: 6%;
  bottom: 7%;
  color: #7a7650;
  transform: rotate(-3deg);
}

.qinshu-note {
  padding-top: clamp(44px, 6vw, 72px);
  padding-bottom: clamp(44px, 6vw, 72px);
}

.qinshu-note p {
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid rgba(33, 29, 27, .18);
  background: rgba(255, 250, 240, .72);
  color: #665f55;
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.75;
}

.qinshu-section-head {
  display: grid;
  grid-template-columns: .45fr minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
  margin-bottom: clamp(46px, 7vw, 86px);
}

.qinshu-section-head h2 {
  margin: 0;
  max-width: 980px;
  font-size: clamp(46px, 6.6vw, 104px);
  line-height: 1;
  color: #2d4f55;
}

.qinshu-section-head > p:last-child {
  grid-column: 2;
  max-width: 760px;
  margin: -36px 0 0;
  color: #5f6a62;
  font-size: clamp(17px, 1.7vw, 23px);
  line-height: 1.62;
}

.qinshu-traits {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 22px;
}

.qinshu-trait {
  min-height: 230px;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(33, 29, 27, .18);
  background: rgba(255, 250, 240, .76);
  box-shadow: 8px 9px 0 rgba(33, 29, 27, .05);
}

.qinshu-trait:nth-child(1) { grid-column: span 5; background: #f7d985; transform: rotate(-1deg); }
.qinshu-trait:nth-child(2) { grid-column: span 3; background: #b9deda; transform: rotate(1.6deg); }
.qinshu-trait:nth-child(3) { grid-column: span 4; background: #f4d2ca; transform: rotate(-.6deg); }
.qinshu-trait:nth-child(4) { grid-column: 4 / span 6; background: #dfe8bd; transform: rotate(1deg); }

.qinshu-trait span,
.itinerary-card span,
.prompt-card span {
  display: block;
  margin-bottom: 18px;
  font-size: 11px;
  letter-spacing: .18em;
  color: rgba(33, 29, 27, .58);
}

.qinshu-trait h3,
.itinerary-card h3,
.prompt-card h3 {
  margin: 0 0 14px;
  font-family: "DM Serif Display", "Noto Serif SC", serif;
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 400;
  line-height: 1;
}

.qinshu-trait p,
.itinerary-card p,
.prompt-card li {
  color: #5c5b53;
  line-height: 1.55;
}

.qinshu-itinerary {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(20px, 3vw, 34px);
}

.itinerary-card {
  border: 1px solid rgba(33, 29, 27, .18);
  background: rgba(255, 250, 240, .78);
  box-shadow: 10px 11px 0 rgba(33, 29, 27, .05);
  overflow: hidden;
}

.itinerary-card figure {
  margin: 0;
  background: linear-gradient(135deg, rgba(255, 212, 113, .35), rgba(131, 193, 201, .35));
}

.itinerary-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.itinerary-card div {
  padding: clamp(18px, 2.4vw, 28px);
}

.itinerary-1 { grid-column: span 7; transform: rotate(-.8deg); }
.itinerary-2 { grid-column: span 5; margin-top: 54px; transform: rotate(1.2deg); }
.itinerary-3 { grid-column: span 4; transform: rotate(1deg); }
.itinerary-4 { grid-column: span 5; margin-top: -18px; transform: rotate(-1.4deg); }
.itinerary-5 { grid-column: span 3; transform: rotate(1.6deg); }

.process-chain {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid rgba(33, 29, 27, .18);
  background: rgba(255, 250, 240, .66);
}

.process-chain span {
  padding: 12px 16px;
  border-radius: 999px;
  background: #f7d985;
  color: #30312a;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.process-chain span:nth-of-type(even) {
  background: #b9deda;
}

.process-chain i {
  color: #b75f54;
  font-family: "Caveat", cursive;
  font-size: 28px;
}

.prompt-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.prompt-card {
  min-height: 420px;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid rgba(33, 29, 27, .18);
  background: rgba(255, 250, 240, .78);
  box-shadow: 8px 9px 0 rgba(33, 29, 27, .05);
}

.prompt-card:nth-child(2) {
  margin-top: 36px;
  background: #f4d2ca;
}

.prompt-card:nth-child(3) {
  margin-top: 10px;
  background: #dbe9e7;
}

.prompt-card ul {
  margin: 22px 0 0;
  padding-left: 18px;
}

.prompt-card li + li {
  margin-top: 10px;
}

.final-film-frame {
  width: min(100%, 520px);
  margin: 0 auto;
  padding: 16px;
  border: 1px solid rgba(33, 29, 27, .2);
  background: rgba(255, 250, 240, .78);
  box-shadow: 14px 16px 0 rgba(183, 95, 84, .14);
  transform: rotate(-1deg);
}

.final-film-frame video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: contain;
  background: #111;
}

@media (max-width: 900px) {
  .qinshu-hero,
  .qinshu-section-head {
    grid-template-columns: 1fr;
  }

  .motion-overview,
  .motion-info-strip {
    grid-template-columns: 1fr;
  }

  .qinshu-hero {
    padding-top: 82px;
  }

  .qinshu-hero-copy > p:last-child,
  .qinshu-section-head > p:last-child {
    margin-left: 0;
    grid-column: auto;
  }

  .qinshu-character {
    min-height: 430px;
  }

  .motion-video-preview {
    width: min(100%, 420px);
  }

  .qinshu-trait,
  .qinshu-trait:nth-child(n),
  .itinerary-card,
  .itinerary-card:nth-child(n) {
    grid-column: 1 / -1;
    margin-top: 0;
  }

  .prompt-grid {
    grid-template-columns: 1fr;
  }

  .prompt-card:nth-child(n) {
    margin-top: 0;
  }
}

@media (max-width: 560px) {
  .qinshu-hero {
    padding-left: 22px;
    padding-right: 22px;
  }

  .qinshu-hero h1 {
    font-size: clamp(48px, 13.8vw, 68px);
  }

  .motion-hero h2,
  .motion-hand-note {
    margin-left: 0;
  }

  .motion-video-preview {
    transform: rotate(-.8deg);
  }

  .motion-video-preview span {
    right: 6px;
    top: -18px;
    font-size: 22px;
  }

  .qinshu-character span,
  .qinshu-character i,
  .qinshu-character b {
    font-size: 22px;
  }

  .qinshu-character b {
    left: 0;
  }

  .qinshu-character i {
    right: 0;
    bottom: 8%;
  }

  .qinshu-traits,
  .qinshu-itinerary {
    grid-template-columns: 1fr;
  }

  .itinerary-card img {
    aspect-ratio: 4 / 3;
  }
}

/* GlamBold magazine case study */
.magazine-case {
  background:
    radial-gradient(circle at 8% 8%, rgba(217, 166, 160, .28) 0 12%, transparent 12.2%),
    linear-gradient(180deg, var(--paper) 0%, #f3e7df 52%, var(--paper) 100%);
  overflow-x: hidden;
}

.magazine-hero {
  min-height: calc(100vh - 74px);
  padding: clamp(82px, 10vw, 150px) var(--pad) clamp(70px, 8vw, 120px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .72fr);
  gap: clamp(42px, 7vw, 112px);
  align-items: end;
  border-bottom: 1px solid var(--ink);
}

.magazine-hero h1 {
  max-width: 980px;
  margin: 28px 0 0;
  font-family: "DM Serif Display", "Noto Serif SC", serif;
  font-size: clamp(58px, 8vw, 128px);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.055em;
}

.magazine-hero h2 {
  width: fit-content;
  margin: 24px 0 34px clamp(22px, 5vw, 90px);
  padding: 8px 14px 10px;
  background: rgba(217, 166, 160, .58);
  font-family: "Caveat", cursive;
  font-size: clamp(25px, 3vw, 42px);
  font-weight: 400;
  transform: rotate(-2deg);
}

.magazine-hero-copy > p:last-of-type {
  max-width: 720px;
  margin: 0 0 28px clamp(18px, 5vw, 82px);
  padding-left: 18px;
  border-left: 1px solid var(--ink);
  color: #504842;
  font-size: clamp(17px, 1.45vw, 22px);
  line-height: 1.72;
}

.magazine-keywords,
.magazine-pdf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.magazine-keywords {
  margin-left: clamp(18px, 5vw, 82px);
}

.magazine-keywords span {
  padding: 8px 13px;
  border: 1px solid rgba(33, 29, 27, .28);
  border-radius: 999px;
  background: rgba(255, 250, 241, .55);
  color: #5d554e;
  font-size: 12px;
}

.magazine-page {
  position: relative;
  margin: 0;
}

.magazine-page img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(33, 29, 27, .38);
  background: #fffaf1;
  box-shadow: 12px 14px 0 rgba(33, 29, 27, .07);
}

.magazine-page figcaption {
  width: fit-content;
  margin: 12px 0 0 auto;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .15em;
}

.magazine-page.cover {
  max-width: min(460px, 100%);
  margin-left: auto;
  transform: rotate(1.4deg);
}

.magazine-cover-note {
  width: fit-content;
  max-width: 310px;
  margin: 0 0 18px auto;
  padding: 8px 13px;
  background: rgba(255, 250, 241, .72);
  border: 1px solid rgba(33, 29, 27, .2);
  color: #6a5f58;
  font-family: "Caveat", cursive;
  font-size: clamp(22px, 2.3vw, 31px);
  line-height: 1.05;
  transform: rotate(-3deg);
}

.magazine-page.cover::before {
  content: "cover";
  position: absolute;
  z-index: 2;
  left: -18px;
  top: 9%;
  padding: 5px 12px;
  background: var(--accent);
  color: #fffaf1;
  font-family: "Caveat", cursive;
  font-size: 25px;
  transform: rotate(-8deg);
}

.magazine-overview {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: clamp(42px, 8vw, 120px);
  border-bottom: 1px solid var(--line);
}

.magazine-overview-visual {
  position: relative;
  align-self: center;
}

.magazine-overview-visual > p {
  position: relative;
  z-index: 3;
  width: fit-content;
  margin: 0 0 16px 9%;
  padding: 7px 13px 8px;
  background: rgba(255, 250, 241, .8);
  border: 1px solid rgba(33, 29, 27, .2);
  color: var(--accent);
  font-family: "Caveat", cursive;
  font-size: clamp(23px, 2.4vw, 34px);
  line-height: 1;
  transform: rotate(-5deg);
}

.magazine-overview-visual .magazine-page {
  transform: rotate(-1.8deg);
}

.magazine-overview-visual .magazine-page::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 16px -14px -18px 18px;
  background: rgba(255, 250, 241, .72);
  border: 1px solid rgba(33, 29, 27, .18);
  transform: rotate(3deg);
}

.magazine-overview-visual .magazine-page img {
  width: 100%;
  object-fit: contain;
}

.magazine-overview-visual .magazine-page figcaption {
  margin-right: 12px;
}

.magazine-overview h2,
.magazine-selected h2,
.magazine-pdf h2 {
  margin: 0;
  font-family: "DM Serif Display", "Noto Serif SC", serif;
  font-size: clamp(42px, 5.5vw, 86px);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.04em;
}

.magazine-overview p,
.magazine-pdf p {
  max-width: 780px;
  margin: 0;
  color: #514a43;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.72;
}

.magazine-overview dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 42px 0 0;
}

.magazine-overview dl div {
  padding: 18px 16px;
  border: 1px solid rgba(33, 29, 27, .2);
  background: rgba(255, 250, 241, .48);
}

.magazine-overview dt {
  margin-bottom: 22px;
  color: var(--accent);
  font-size: 10px;
  letter-spacing: .16em;
}

.magazine-overview dd {
  margin: 0;
  font-family: "DM Serif Display", "Noto Serif SC", serif;
  font-size: clamp(21px, 2vw, 31px);
  line-height: 1.1;
}

.magazine-selected {
  max-width: none;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.magazine-selected > * {
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
}

.magazine-selected header {
  display: grid;
  grid-template-columns: .42fr 1fr;
  gap: 40px;
  margin-bottom: clamp(55px, 8vw, 118px);
}

.magazine-spread-wall {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(70px, 9vw, 150px) 28px;
}

.magazine-spread {
  display: grid;
  gap: 24px;
  align-items: start;
}

.spread-copy {
  position: relative;
  z-index: 2;
  max-width: 430px;
  padding: 24px;
  background: rgba(255, 250, 241, .78);
  border: 1px solid rgba(33, 29, 27, .22);
  box-shadow: 8px 9px 0 rgba(33, 29, 27, .055);
}

.spread-copy span {
  color: var(--accent);
  font-size: 11px;
  letter-spacing: .16em;
}

.spread-copy h3 {
  margin: 18px 0 14px;
  font-family: "DM Serif Display", "Noto Serif SC", serif;
  font-size: clamp(30px, 3vw, 48px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.035em;
}

.spread-copy p {
  margin: 0;
  color: #5f5751;
  line-height: 1.65;
}

.spread-1 {
  grid-column: 1 / span 8;
}

.spread-1 .magazine-page {
  width: 94%;
}

.spread-2 {
  grid-column: 5 / span 8;
}

.spread-2 .spread-copy {
  margin-left: auto;
  transform: rotate(1.2deg);
}

.spread-3 {
  grid-column: 1 / span 7;
}

.spread-4 {
  grid-column: 7 / span 6;
  margin-top: -50px;
}

.spread-4 .spread-copy {
  margin-left: 8%;
}

.spread-5 {
  grid-column: 2 / span 10;
}

.spread-5 .spread-copy {
  max-width: 520px;
  transform: rotate(-1.2deg);
}

.spread-6 {
  grid-column: 1 / span 12;
}

.spread-6 .spread-copy {
  margin-left: auto;
  margin-right: 7%;
  border-color: rgba(197, 111, 112, .45);
  background: rgba(217, 166, 160, .18);
}

.spread-6 .magazine-page img {
  box-shadow: 14px 16px 0 rgba(197, 111, 112, .11);
}

.magazine-pdf {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 36px;
  align-items: end;
  background: var(--paper-deep);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.magazine-pdf h2 {
  margin-bottom: 24px;
}

.magazine-pdf-actions {
  justify-content: flex-end;
}

.magazine-pdf-actions .button {
  background: var(--ink);
  color: var(--paper);
}

.magazine-pdf-actions .button:hover {
  background: var(--accent);
  border-color: var(--accent);
}

@media (max-width: 900px) {
  .magazine-hero,
  .magazine-overview,
  .magazine-selected header,
  .magazine-pdf {
    grid-template-columns: 1fr;
  }

  .magazine-overview-visual {
    max-width: 720px;
    margin: 0 auto;
  }

  .magazine-overview-visual .magazine-page {
    transform: rotate(-.7deg);
  }

  .magazine-page.cover {
    margin: 0 auto;
  }

  .magazine-overview dl {
    grid-template-columns: 1fr;
  }

  .magazine-spread-wall {
    display: grid;
    grid-template-columns: 1fr;
  }

  .magazine-spread,
  .spread-1,
  .spread-2,
  .spread-3,
  .spread-4,
  .spread-5,
  .spread-6 {
    grid-column: 1;
    margin-top: 0;
  }

  .spread-1 .magazine-page,
  .magazine-page {
    width: 100%;
  }

  .spread-copy,
  .spread-2 .spread-copy,
  .spread-4 .spread-copy,
  .spread-5 .spread-copy,
  .spread-6 .spread-copy {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    transform: none;
  }

  .magazine-pdf-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .magazine-hero {
    padding-top: 74px;
  }

  .magazine-hero h1 {
    font-size: clamp(48px, 14vw, 62px);
    line-height: .94;
  }

  .magazine-hero h2,
  .magazine-hero-copy > p:last-of-type,
  .magazine-keywords {
    margin-left: 0;
  }

  .magazine-page img {
    box-shadow: 6px 7px 0 rgba(33, 29, 27, .06);
  }

  .listing-magazine-cover {
    min-height: 430px;
    padding: 24px;
  }

  .listing-magazine-cover img {
    width: min(100%, 300px);
    height: 382px;
  }

  .magazine-overview-visual > p {
    margin-left: 0;
  }

  .magazine-overview-visual .magazine-page::before {
    inset: 10px -8px -12px 10px;
  }

  .magazine-overview,
  .magazine-selected,
  .magazine-pdf {
    padding-left: 22px;
    padding-right: 22px;
  }

  .magazine-pdf-actions .button {
    width: 100%;
    justify-content: space-between;
  }
}

/* #SafeStreetsSydney case study */
.safe-case {
  --safe-night: #20263f;
  --safe-blue: #9fb8c9;
  --safe-pink: #dfa4ad;
  --safe-yellow: #f0d37b;
  --safe-lilac: #d5c9e6;
  background:
    radial-gradient(circle at 12% 8%, rgba(223, 164, 173, .42), transparent 28%),
    radial-gradient(circle at 82% 14%, rgba(159, 184, 201, .34), transparent 30%),
    linear-gradient(180deg, #f6efe5 0%, #f3eadf 48%, #efe5da 100%);
  overflow-x: clip;
}

.safe-case .section {
  padding-top: clamp(74px, 10vw, 132px);
  padding-bottom: clamp(74px, 10vw, 132px);
}

.safe-hero {
  min-height: calc(100vh - 74px);
  padding: clamp(86px, 10vw, 138px) var(--pad) clamp(64px, 8vw, 110px);
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, .72fr);
  gap: clamp(36px, 6vw, 86px);
  align-items: center;
  position: relative;
  overflow: hidden;
}

.safe-hero::before {
  content: "#SafeStreetsSydney";
  position: absolute;
  left: -3vw;
  top: 84px;
  color: rgba(197, 111, 112, .12);
  font-family: "DM Serif Display", "Noto Serif SC", serif;
  font-size: clamp(76px, 13vw, 190px);
  letter-spacing: -.055em;
  white-space: nowrap;
  pointer-events: none;
}

.safe-hero-copy {
  position: relative;
  z-index: 1;
}

.safe-hero h1,
.safe-section-head h2,
.safe-key-message,
.safe-gap-card strong {
  font-family: "DM Serif Display", "Noto Serif SC", serif;
  font-weight: 400;
}

.safe-hero h1 {
  max-width: 980px;
  margin: 28px 0 24px;
  color: var(--safe-night);
  font-size: clamp(56px, 7.7vw, 126px);
  line-height: 1.12;
  letter-spacing: -.055em;
}

.safe-hero h2 {
  width: fit-content;
  margin: 0 0 14px clamp(20px, 5vw, 92px);
  padding: 9px 15px 8px;
  border: 1px solid rgba(32, 38, 63, .42);
  border-radius: 999px;
  background: rgba(240, 211, 123, .5);
  color: var(--safe-night);
  font-size: clamp(22px, 3vw, 42px);
  transform: rotate(-2deg);
}

.safe-hero h3 {
  max-width: 580px;
  margin: 0 0 26px;
  color: var(--accent);
  font-size: clamp(22px, 2.5vw, 34px);
  font-weight: 500;
  line-height: 1.18;
}

.safe-hero-copy > p:last-child {
  max-width: 680px;
  color: #564f4b;
  font-size: clamp(17px, 1.7vw, 22px);
  line-height: 1.75;
}

.safe-hero-visual {
  position: relative;
  margin: 0;
  padding: clamp(16px, 2vw, 24px);
  border: 1px solid rgba(32, 38, 63, .25);
  border-radius: 34px;
  background: rgba(255, 249, 238, .72);
  box-shadow: 16px 18px 0 rgba(32, 38, 63, .08);
  transform: rotate(2deg);
}

.safe-hero-visual::before {
  content: "share / tag / tell why";
  position: absolute;
  top: -22px;
  right: 28px;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--safe-pink);
  color: var(--safe-night);
  font-family: "Caveat", cursive;
  font-size: 24px;
  transform: rotate(5deg);
}

.safe-hero-visual img,
.safe-data-visual img,
.safe-post img,
.visual-task img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.safe-hero-visual img {
  border-radius: 24px;
  max-height: min(72vh, 760px);
  background: rgba(255, 250, 240, .64);
}

.safe-hero-visual figcaption {
  margin-top: 13px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.safe-section-head {
  max-width: 950px;
  margin-bottom: clamp(34px, 5vw, 70px);
}

.safe-section-head h2 {
  margin: 14px 0 0;
  color: var(--safe-night);
  font-size: clamp(42px, 6.2vw, 96px);
  line-height: 1.14;
  letter-spacing: -.045em;
}

.safe-section-head > p:last-child {
  max-width: 680px;
  margin-top: 22px;
  color: #5d5651;
  font-size: 18px;
  line-height: 1.72;
}

.safe-insight-grid {
  display: grid;
  grid-template-columns: minmax(280px, .82fr) minmax(320px, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

.safe-data-visual {
  margin: 0;
  padding: 16px;
  border: 1px solid rgba(32, 38, 63, .18);
  border-radius: 30px;
  background: rgba(255, 251, 242, .76);
  transform: rotate(-2.2deg);
  box-shadow: 12px 14px 0 rgba(197, 111, 112, .12);
}

.safe-data-visual img {
  border-radius: 22px;
  max-height: 640px;
  background: rgba(255, 250, 240, .64);
}

.safe-gap-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid rgba(32, 38, 63, .22);
  border-radius: 36px;
  background:
    linear-gradient(135deg, rgba(32, 38, 63, .95), rgba(48, 55, 84, .94)),
    var(--safe-night);
  color: var(--paper);
}

.safe-gap-card div {
  padding: 20px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .08);
}

.safe-gap-card strong {
  display: block;
  color: var(--safe-yellow);
  font-size: clamp(58px, 7vw, 102px);
  line-height: .9;
}

.safe-gap-card span {
  font-size: 11px;
  letter-spacing: .18em;
}

.safe-gap-card p {
  grid-column: 1 / -1;
  margin: 14px 0 0;
  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.55;
}

.safe-idea {
  background: rgba(223, 164, 173, .16);
}

.safe-mechanism {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-bottom: 34px;
}

.safe-mechanism span {
  padding: 14px 18px;
  border: 1px solid rgba(32, 38, 63, .22);
  border-radius: 999px;
  background: rgba(255, 250, 240, .76);
  color: var(--safe-night);
  font-size: clamp(13px, 1.3vw, 16px);
  font-weight: 700;
  letter-spacing: .08em;
}

.safe-mechanism i {
  color: var(--accent);
  font-family: "DM Serif Display", serif;
  font-size: 34px;
  font-style: normal;
}

.safe-key-message {
  max-width: 850px;
  margin: 0;
  padding: clamp(28px, 4vw, 52px);
  border-radius: 34px;
  background: var(--safe-yellow);
  color: var(--safe-night);
  font-size: clamp(38px, 5.4vw, 84px);
  line-height: 1.14;
  letter-spacing: -.04em;
  transform: rotate(-.8deg);
}

.safe-strategy-map {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  align-items: stretch;
}

.safe-strategy-map article {
  min-height: 210px;
  padding: 22px;
  border: 1px solid rgba(32, 38, 63, .18);
  border-radius: 28px;
  background: rgba(255, 250, 240, .68);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.safe-strategy-map article:nth-child(even) {
  margin-top: 34px;
  background: rgba(159, 184, 201, .28);
}

.safe-strategy-map span {
  color: var(--accent);
  font-family: "DM Serif Display", serif;
  font-size: 42px;
}

.safe-strategy-map p {
  margin: 0;
  color: var(--safe-night);
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.18;
}

.safe-content {
  background:
    linear-gradient(rgba(32, 38, 63, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32, 38, 63, .045) 1px, transparent 1px);
  background-size: 34px 34px;
}

.safe-calendar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(34px, 5vw, 58px);
}

.safe-calendar span {
  padding: 10px 13px;
  border: 1px solid rgba(32, 38, 63, .18);
  border-radius: 999px;
  background: rgba(213, 201, 230, .46);
  color: var(--safe-night);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
}

.safe-post-wall {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(14px, 2vw, 24px);
  align-items: start;
}

.safe-post {
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(32, 38, 63, .15);
  border-radius: 26px;
  background: rgba(255, 250, 240, .78);
  box-shadow: 8px 9px 0 rgba(32, 38, 63, .055);
}

.safe-post img {
  border-radius: 18px;
  background: rgba(255, 250, 240, .64);
}

.post-1 { grid-column: 1 / span 3; transform: rotate(-1.4deg); }
.post-2 { grid-column: 4 / span 3; margin-top: 42px; transform: rotate(1deg); }
.post-3 { grid-column: 7 / span 6; transform: rotate(-.7deg); }
.post-4 { grid-column: 1 / span 4; margin-top: -6px; transform: rotate(2deg); }
.post-5 { grid-column: 5 / span 3; margin-top: 42px; transform: rotate(1.4deg); }
.post-6 { grid-column: 8 / span 3; margin-top: 14px; transform: rotate(-1deg); }
.post-7 { grid-column: 3 / span 6; margin-top: 22px; transform: rotate(-1.2deg); }

.safe-visual-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 3vw, 34px);
}

.visual-task {
  padding: 16px;
  border: 1px solid rgba(32, 38, 63, .17);
  border-radius: 30px;
  background: rgba(255, 250, 240, .74);
}

.visual-task figure {
  margin: 0 0 18px;
}

.visual-task img {
  border-radius: 22px;
  max-height: 480px;
  background: rgba(255, 250, 240, .64);
}

.visual-task span,
.safe-video-card span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
}

.visual-task h3 {
  margin: 8px 0;
  color: var(--safe-night);
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.06;
}

.visual-task p {
  color: #625b55;
  line-height: 1.6;
}

.safe-videos {
  background: rgba(32, 38, 63, .92);
  color: var(--paper);
}

.safe-videos .safe-section-head h2,
.safe-videos .eyebrow {
  color: var(--paper);
}

.safe-video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 3vw, 32px);
}

.safe-video-card {
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 30px;
  background: rgba(255, 255, 255, .08);
}

.safe-video-card video {
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 22px;
  background: #111827;
  object-fit: cover;
}

.safe-video-card p {
  margin: 10px 0 4px;
  color: rgba(245, 240, 232, .82);
  line-height: 1.55;
}

.safe-network {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(240, 211, 123, .34), transparent 26%),
    radial-gradient(circle at 82% 34%, rgba(213, 201, 230, .36), transparent 28%),
    rgba(255, 250, 240, .46);
}

.safe-network::before {
  content: "proposed network";
  position: absolute;
  top: 42px;
  right: var(--pad);
  color: rgba(197, 111, 112, .22);
  font-family: "Caveat", cursive;
  font-size: clamp(34px, 5vw, 74px);
  transform: rotate(4deg);
  pointer-events: none;
}

.network-proposed-label {
  display: inline-flex;
  margin: 0 0 clamp(30px, 5vw, 58px);
  padding: 11px 16px;
  border: 1px solid rgba(32, 38, 63, .24);
  border-radius: 999px;
  background: rgba(240, 211, 123, .68);
  color: var(--safe-night);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
}

.creator-map {
  position: relative;
  min-height: 820px;
}

.creator-map::before,
.creator-map::after {
  content: "";
  position: absolute;
  inset: 110px 12% 130px;
  border: 1.5px dashed rgba(32, 38, 63, .2);
  border-radius: 48% 52% 44% 56%;
  pointer-events: none;
}

.creator-map::after {
  inset: 190px 21% 210px;
  border-color: rgba(197, 111, 112, .25);
  transform: rotate(-7deg);
}

.creator-center {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: clamp(430px, 43vw, 560px);
  padding: clamp(30px, 4vw, 52px) clamp(34px, 4.8vw, 64px);
  border: 1px solid rgba(32, 38, 63, .24);
  border-radius: 44px 38px 48px 34px;
  background: linear-gradient(135deg, var(--safe-pink), #f1c9c9 54%, var(--safe-yellow));
  color: var(--safe-night);
  text-align: center;
  transform: translate(-50%, -50%) rotate(-2deg);
  box-shadow: 14px 16px 0 rgba(32, 38, 63, .08);
}

.creator-center span {
  display: block;
  font-family: "DM Serif Display", "Noto Serif SC", serif;
  font-size: clamp(42px, 4vw, 62px);
  line-height: 1.08;
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
}

.creator-center p {
  max-width: 270px;
  margin: 18px auto 0;
  color: rgba(32, 38, 63, .76);
  line-height: 1.55;
}

.creator-center i {
  position: absolute;
  right: 24px;
  bottom: 16px;
  font-style: normal;
}

.network-node {
  position: absolute;
  z-index: 3;
  width: min(318px, 25vw);
  padding: 22px;
  border: 1px solid rgba(32, 38, 63, .2);
  border-radius: 30px;
  background: rgba(255, 250, 240, .82);
  box-shadow: 10px 11px 0 rgba(32, 38, 63, .055);
}

.network-node::before {
  content: "";
  position: absolute;
  width: 72px;
  height: 1.5px;
  background: rgba(32, 38, 63, .28);
  transform-origin: left center;
}

.network-node small {
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}

.network-node h3 {
  margin: 12px 0 14px;
  color: var(--safe-night);
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.08;
}

.network-node ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 16px;
  padding: 0;
  list-style: none;
}

.creator-type-label {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 8px;
  padding: 7px 10px;
  border: 1px solid rgba(197, 111, 112, .28);
  border-radius: 999px;
  background: rgba(223, 164, 173, .34);
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}

.network-node li {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .62);
  color: var(--safe-night);
  font-size: 12px;
  font-weight: 700;
}

.network-node p {
  color: #5d5651;
  line-height: 1.58;
}

.network-node em {
  display: block;
  margin-top: 14px;
  color: var(--safe-night);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .04em;
}

.network-node b {
  position: absolute;
  right: 18px;
  top: 16px;
  font-size: 24px;
}

.node-1 {
  left: 0;
  top: 24px;
  background: rgba(213, 201, 230, .72);
  transform: rotate(-2.2deg);
}

.node-1::before {
  right: -54px;
  top: 56%;
  transform: rotate(18deg);
}

.node-2 {
  right: 0;
  top: 18px;
  background: rgba(223, 164, 173, .62);
  transform: rotate(1.8deg);
}

.node-2::before {
  left: -50px;
  top: 56%;
  transform: rotate(160deg);
}

.node-3 {
  left: 1%;
  bottom: 32px;
  background: rgba(159, 184, 201, .5);
  transform: rotate(1.4deg);
}

.node-3::before {
  right: -54px;
  top: 38%;
  transform: rotate(-20deg);
}

.node-4 {
  right: 2%;
  bottom: 24px;
  background: rgba(240, 211, 123, .62);
  transform: rotate(-1.6deg);
}

.node-4::before {
  left: -50px;
  top: 38%;
  transform: rotate(198deg);
}

.safe-campaign-note {
  padding-top: clamp(56px, 8vw, 104px);
  padding-bottom: clamp(64px, 9vw, 118px);
  background: linear-gradient(135deg, rgba(159, 184, 201, .22), rgba(213, 201, 230, .26));
}

.campaign-note-card {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(30px, 5vw, 58px);
  border: 1px solid rgba(32, 38, 63, .22);
  border-radius: 38px;
  background: rgba(255, 250, 240, .78);
  box-shadow: 12px 14px 0 rgba(32, 38, 63, .06);
}

.note-clip {
  position: absolute;
  right: clamp(24px, 4vw, 50px);
  top: -18px;
  width: 38px;
  height: 60px;
  border: 3px solid rgba(32, 38, 63, .32);
  border-left-color: transparent;
  border-radius: 999px;
  transform: rotate(12deg);
}

.campaign-note-card > strong {
  display: inline-flex;
  margin: 12px 0 20px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--safe-yellow);
  color: var(--safe-night);
  font-size: 11px;
  letter-spacing: .16em;
}

.campaign-note-card h2 {
  max-width: 780px;
  margin: 0 0 24px;
  color: var(--safe-night);
  font-family: "DM Serif Display", "Noto Serif SC", serif;
  font-size: clamp(38px, 5.5vw, 78px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.04em;
}

.campaign-note-card p:not(.eyebrow) {
  max-width: 780px;
  color: #56504b;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.72;
}

.campaign-note-card i {
  position: absolute;
  right: clamp(24px, 5vw, 72px);
  bottom: 28px;
  color: var(--accent);
  font-family: "Caveat", cursive;
  font-size: clamp(28px, 4vw, 46px);
  font-style: normal;
  transform: rotate(-5deg);
}

.safe-case .next-project {
  margin-top: 0;
}

@media (hover: hover) {
  .safe-post,
  .visual-task,
  .safe-video-card {
    transition: transform .25s ease, background-color .25s ease;
  }

  .safe-post:hover,
  .visual-task:hover,
  .safe-video-card:hover {
    transform: translateY(-6px) rotate(0deg);
    background: rgba(255, 251, 242, .92);
  }
}

@media (max-width: 980px) {
  .safe-hero,
  .safe-insight-grid {
    grid-template-columns: 1fr;
  }

  .safe-hero-visual {
    max-width: 540px;
    margin: 0 auto;
  }

  .safe-strategy-map,
  .safe-visual-cards,
  .safe-video-grid {
    grid-template-columns: 1fr;
  }

  .creator-map {
    display: grid;
    gap: 18px;
    min-height: 0;
    overflow: hidden;
  }

  .creator-map::before {
    inset: 120px auto 72px 28px;
    width: 1.5px;
    border: 0;
    border-left: 2px dashed rgba(32, 38, 63, .22);
    border-radius: 0;
  }

  .creator-map::after {
    display: none;
  }

  .creator-center,
  .network-node {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
    transform: none;
  }

  .creator-center {
    justify-self: start;
    max-width: 560px;
    text-align: left;
  }

  .creator-center p {
    margin-left: 0;
    margin-right: 0;
  }

  .network-node {
    margin-left: 38px;
    max-width: calc(100% - 38px);
  }

  .network-node::before {
    left: -38px;
    top: 36px;
    width: 24px;
    transform: none;
  }

  .safe-strategy-map article,
  .safe-strategy-map article:nth-child(even) {
    min-height: auto;
    margin-top: 0;
  }

  .safe-post-wall {
    grid-template-columns: repeat(6, 1fr);
  }

  .post-1,
  .post-2,
  .post-3,
  .post-4,
  .post-5,
  .post-6,
  .post-7,
  .post-8 {
    grid-column: span 3;
    margin-top: 0;
  }

  .safe-video-card {
    display: grid;
    grid-template-columns: minmax(170px, 260px) 1fr;
    gap: 18px;
    align-items: center;
  }
}

@media (max-width: 560px) {
  .safe-hero {
    padding-top: 78px;
  }

  .safe-hero::before {
    top: 78px;
    font-size: 72px;
    white-space: normal;
  }

  .safe-hero h1 {
    font-size: clamp(45px, 13vw, 62px);
    line-height: 1.16;
  }

  .safe-hero h2 {
    margin-left: 0;
  }

  .safe-hero-visual {
    transform: rotate(.8deg);
    box-shadow: 8px 10px 0 rgba(32, 38, 63, .08);
  }

  .safe-hero-visual::before {
    right: 12px;
    font-size: 20px;
  }

  .safe-section-head h2,
  .safe-key-message {
    font-size: clamp(37px, 11vw, 54px);
    line-height: 1.18;
  }

  .safe-gap-card {
    grid-template-columns: 1fr;
  }

  .safe-gap-card p {
    grid-column: auto;
  }

  .safe-mechanism {
    display: grid;
    grid-template-columns: 1fr;
  }

  .safe-mechanism i {
    line-height: .6;
  }

  .safe-post-wall {
    grid-template-columns: 1fr;
  }

  .post-1,
  .post-2,
  .post-3,
  .post-4,
  .post-5,
  .post-6,
  .post-7,
  .post-8 {
    grid-column: 1;
    transform: none;
  }

  .safe-post img {
    max-width: 100%;
  }

  .safe-video-card {
    display: block;
  }

  .safe-network::before {
    top: 22px;
    right: 22px;
    font-size: 36px;
  }

  .network-proposed-label {
    max-width: 100%;
    line-height: 1.45;
    white-space: normal;
  }

  .creator-center,
  .network-node,
  .campaign-note-card {
    border-radius: 28px;
  }

  .creator-center {
    padding: 28px 24px;
    width: 100%;
  }

  .creator-center span {
    font-size: clamp(32px, 9.6vw, 48px);
    line-height: 1.1;
    overflow-wrap: anywhere;
  }

  .network-node {
    margin-left: 28px;
    padding: 20px;
    width: calc(100% - 28px);
  }

  .network-node h3 {
    font-size: 25px;
  }

  .network-node li {
    font-size: 11px;
  }

  .campaign-note-card i {
    position: static;
    display: block;
    margin-top: 20px;
  }
}

/* #LessBetterLonger — Brand Strategy flagship case study */
.less-case {
  --less-ink: #251f1b;
  --less-brown: #3f322d;
  --less-rose: #c96f72;
  --less-deep-rose: #9f5756;
  --less-dusty: #d79a9b;
  --less-blush: #f1d9d4;
  --less-butter: #f2df9b;
  --less-sage: #9ea88f;
  --less-sand: #f6efe5;
  --less-mist: #e9e3dc;
  --less-grey: #80746e;
  background:
    radial-gradient(circle at 8% 8%, rgba(242, 223, 155, .46), transparent 24vw),
    radial-gradient(circle at 92% 22%, rgba(217, 166, 160, .34), transparent 25vw),
    linear-gradient(180deg, #f8f1e8 0%, #f3eadf 48%, #f7f0e7 100%);
  color: var(--less-ink);
  overflow: hidden;
}

.less-case :is(h1, h2, h3, p) {
  text-wrap: pretty;
}

.less-case .nowrap {
  white-space: nowrap;
}

.less-case .title-accent {
  color: var(--less-deep-rose);
}

.less-case .title-accent.sage {
  color: #758269;
}

.less-case .section {
  border-top: 1px solid rgba(37, 31, 27, .16);
  padding-top: clamp(76px, 8vw, 132px);
  padding-bottom: clamp(76px, 8vw, 132px);
}

.less-case .eyebrow {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(241, 217, 212, .55);
  color: var(--less-deep-rose);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .15em;
}

.less-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .98fr) minmax(340px, .72fr);
  gap: clamp(38px, 6vw, 110px);
  align-items: center;
  min-height: calc(100vh - 74px);
  padding: clamp(96px, 12vw, 160px) var(--pad) clamp(62px, 8vw, 110px);
}

.less-hero::before {
  content: "#LessBetterLonger";
  position: absolute;
  left: -5vw;
  top: 110px;
  color: rgba(201, 111, 114, .065);
  font-family: "DM Serif Display", "Noto Serif SC", serif;
  font-size: clamp(76px, 13vw, 205px);
  line-height: .9;
  letter-spacing: -.06em;
  pointer-events: none;
  white-space: nowrap;
}

.less-hero-copy {
  position: relative;
  z-index: 1;
}

.less-hero h1 {
  max-width: 940px;
  margin: 22px 0 20px;
  color: var(--less-brown);
  font-family: "DM Serif Display", "Noto Serif SC", serif;
  font-size: clamp(48px, 5.7vw, 92px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -.035em;
}

.less-hero h1 > .hero-line {
  display: block;
  margin-top: .18em;
  color: var(--less-brown);
  font-size: .76em;
  line-height: 1.24;
  letter-spacing: -.025em;
}

.less-hero h2 {
  margin: 0 0 28px 9%;
  color: var(--less-rose);
  font-family: "DM Serif Display", "Noto Serif SC", serif;
  font-size: clamp(38px, 5vw, 86px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.04em;
  overflow-wrap: anywhere;
}

.less-hero-copy > p:not(.eyebrow) {
  max-width: 760px;
  color: #5d514b;
  font-size: clamp(18px, 1.5vw, 23px);
  line-height: 1.82;
}

.less-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 720px;
  margin: 34px 0 28px;
}

.less-tags span,
.coding-tags span,
.vibe-steps span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 13px;
  border: 1px solid rgba(37, 31, 27, .2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .34);
  color: #4b403a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.less-live {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border: 1px solid rgba(37, 31, 27, .3);
  border-radius: 999px;
  background: var(--less-ink);
  color: #fffaf3;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: transform .25s ease, background .25s ease;
}

.less-live:hover {
  transform: translateY(-3px) rotate(-1deg);
  background: var(--less-rose);
}

.less-browser {
  position: relative;
  margin: 0;
  padding: 46px 18px 22px;
  border: 1px solid rgba(37, 31, 27, .22);
  border-radius: 34px;
  background:
    linear-gradient(90deg, rgba(242, 223, 155, .52), rgba(241, 217, 212, .58)),
    rgba(255, 255, 255, .32);
  box-shadow: 18px 22px 0 rgba(37, 31, 27, .07);
  transform: rotate(1.3deg);
}

.less-browser::before {
  content: "● ● ●";
  position: absolute;
  left: 22px;
  top: 18px;
  color: var(--less-rose);
  font-size: 12px;
  letter-spacing: .38em;
}

.less-browser > span {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(37, 31, 27, .56);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.less-browser img {
  display: block;
  width: 100%;
  max-height: 690px;
  object-fit: contain;
  border-radius: 22px;
  background: #fffaf7;
}

.less-browser figcaption {
  position: absolute;
  right: -16px;
  bottom: 42px;
  max-width: 190px;
  padding: 12px 15px;
  border-radius: 999px;
  background: #fff7c9;
  color: #7b4d45;
  font-family: "Caveat", "Bradley Hand", cursive;
  font-size: 22px;
  line-height: 1;
  transform: rotate(-8deg);
  box-shadow: 0 8px 18px rgba(37, 31, 27, .08);
}

.less-note article,
.less-disclosure article {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(30px, 4vw, 54px);
  border: 1px solid rgba(37, 31, 27, .2);
  border-radius: 34px;
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(37, 31, 27, .045) 32px),
    rgba(255, 250, 244, .72);
  box-shadow: 10px 14px 0 rgba(201, 111, 114, .11);
}

.less-note article::before,
.less-disclosure article::before {
  content: "concept note";
  position: absolute;
  right: clamp(18px, 4vw, 48px);
  top: -18px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--less-blush);
  color: #874b4d;
  font-family: "Caveat", "Bradley Hand", cursive;
  font-size: 24px;
  transform: rotate(2deg);
}

.less-note h2,
.less-disclosure h2 {
  max-width: 760px;
  margin: 0 0 24px;
  color: var(--less-rose);
  font-family: "DM Serif Display", "Noto Serif SC", serif;
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 400;
  line-height: 1.14;
}

.less-note p,
.less-disclosure p,
.less-section-head p,
.finding-copy,
.less-gap > p,
.vibe-copy p {
  color: #5f544f;
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.78;
}

.less-section-head {
  display: grid;
  grid-template-columns: minmax(230px, .34fr) minmax(0, 1fr);
  gap: clamp(32px, 5.5vw, 94px);
  align-items: start;
  margin-bottom: clamp(42px, 6vw, 88px);
}

.less-section-head h2,
.less-targets > h2 {
  margin: 0;
  max-width: 960px;
  color: var(--less-brown);
  font-family: "DM Serif Display", "Noto Serif SC", serif;
  font-size: clamp(36px, 4.45vw, 72px);
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: -.028em;
}

.less-section-head > p:not(.eyebrow) {
  max-width: 740px;
  align-self: end;
}

.market-story {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.5vw, 34px);
}

.market-story article,
.pattern-notes article,
.less-better-longer article,
.less-targets article,
.measure-stack article,
.ecosystem-map article,
.audit-metrics,
.zero-card,
.gap-compare article,
.strategy-shift article,
.output-stage > div,
.vibe-copy {
  border: 1px solid rgba(37, 31, 27, .18);
  border-radius: 30px;
  background: rgba(255, 250, 244, .58);
  box-shadow: 8px 10px 0 rgba(37, 31, 27, .045);
}

.market-story article {
  min-height: 220px;
  padding: clamp(26px, 3vw, 40px);
}

.market-story article:nth-child(2) {
  background: var(--less-blush);
  transform: rotate(-1.4deg);
}

.market-story article:nth-child(3) {
  margin-top: 38px;
  background: rgba(242, 223, 155, .5);
  transform: rotate(1.3deg);
}

.market-story span,
.benchmark-names b,
.pattern-notes strong,
.audit-metrics span,
.gap-compare span,
.strategy-shift span,
.ecosystem-map article span,
.output-stage span,
.measure-stack span {
  display: block;
  margin-bottom: 14px;
  color: var(--less-rose);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.market-story p {
  margin: 0;
  color: #51463f;
  font-size: clamp(20px, 2vw, 31px);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -.02em;
}

.market-story b {
  display: block;
  margin-top: 28px;
  color: #6b5a52;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: .12em;
}

.market-data {
  display: grid;
  grid-template-columns: max-content 1fr max-content 1fr;
  gap: 12px 18px;
  align-items: baseline;
  margin-top: 34px;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(121, 77, 64, .18);
  border-radius: 34px;
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 248, 209, .95), transparent 210px),
    linear-gradient(115deg, #7a4a43 0%, #c98983 48%, #f2df9b 100%);
  color: #fffaf3;
  box-shadow: 12px 14px 0 rgba(121, 77, 64, .1);
}

.market-data strong {
  color: #fffaf3;
  font-family: "DM Serif Display", "Noto Serif SC", serif;
  font-size: clamp(32px, 5vw, 78px);
  font-weight: 400;
  line-height: .95;
}

.market-data p {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
}

.market-data em {
  grid-column: 1 / -1;
  max-width: 760px;
  color: rgba(52, 39, 34, .72);
  font-weight: 600;
  font-style: normal;
  line-height: 1.65;
}

.benchmark-wall {
  display: grid;
  grid-template-columns: minmax(240px, .42fr) 1fr;
  gap: clamp(24px, 4vw, 72px);
  align-items: start;
}

.benchmark-names {
  display: grid;
  gap: 14px;
  padding: 28px;
  border-radius: 28px;
  border: 1px solid rgba(90, 74, 55, .18);
  background:
    radial-gradient(circle at 14% 8%, rgba(242, 223, 155, .72), transparent 180px),
    linear-gradient(145deg, #6f745f 0%, #b3ac87 52%, #edd9c7 100%);
  color: #fffaf2;
  box-shadow: 12px 14px 0 rgba(92, 96, 76, .11);
  transform: rotate(-1.2deg);
}

.benchmark-names span {
  display: block;
  padding: 16px 18px;
  border: 1px solid rgba(255, 250, 242, .42);
  border-radius: 18px;
  background: rgba(255, 250, 242, .16);
  color: #fffaf2;
  font-family: "DM Serif Display", "Noto Serif SC", serif;
  font-size: clamp(26px, 2.7vw, 40px);
}

.pattern-notes {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.pattern-notes article {
  min-height: 190px;
  padding: 22px;
}

.pattern-notes article:nth-child(even) {
  margin-top: 36px;
  background: rgba(242, 223, 155, .42);
}

.pattern-notes p,
.ecosystem-map article p,
.measure-stack p,
.output-stage p {
  color: #665a54;
  line-height: 1.62;
}

.less-benchmark blockquote {
  margin: 54px 0 0 auto;
  max-width: 760px;
  padding: clamp(24px, 3.5vw, 42px);
  border: 1px solid rgba(201, 111, 114, .2);
  border-radius: 30px;
  background: rgba(241, 217, 212, .34);
  color: var(--less-deep-rose);
  font-family: "DM Serif Display", "Noto Serif SC", serif;
  font-size: clamp(28px, 3.1vw, 48px);
  line-height: 1.24;
  letter-spacing: -.025em;
}

.audit-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px 18px;
  padding: clamp(24px, 4vw, 44px);
  background: rgba(241, 217, 212, .42);
}

.audit-metrics span,
.audit-metrics em {
  grid-column: 1 / -1;
}

.audit-metrics strong {
  color: var(--less-rose);
  font-family: "DM Serif Display", "Noto Serif SC", serif;
  font-size: clamp(42px, 7vw, 98px);
  font-weight: 400;
  line-height: .9;
}

.audit-metrics p {
  margin: 0;
  color: #665a54;
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.35;
}

.audit-metrics em {
  margin-top: 18px;
  color: #65584f;
  font-style: normal;
  line-height: 1.7;
}

.coding-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.less-finding {
  display: grid;
  grid-template-columns: minmax(260px, .42fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 84px);
  align-items: center;
}

.zero-card {
  position: relative;
  padding: clamp(32px, 5vw, 62px);
  background:
    radial-gradient(circle at 80% 12%, rgba(242, 223, 155, .55), transparent 160px),
    var(--less-blush);
  transform: rotate(-1.3deg);
}

.zero-card::after {
  content: "research finding";
  position: absolute;
  right: 22px;
  bottom: 22px;
  font-family: "Caveat", "Bradley Hand", cursive;
  font-size: 26px;
  color: #995a5c;
  transform: rotate(-7deg);
}

.zero-card strong {
  display: block;
  color: #fff8ee;
  font-family: "DM Serif Display", "Noto Serif SC", serif;
  font-size: clamp(110px, 18vw, 260px);
  font-weight: 400;
  line-height: .76;
  letter-spacing: -.08em;
  text-shadow: 0 2px 0 rgba(37, 31, 27, .07);
}

.zero-card p {
  max-width: 340px;
  margin: 28px 0 40px;
  color: #563f3f;
  font-size: clamp(19px, 2vw, 29px);
  line-height: 1.28;
}

.bar-chart {
  display: grid;
  gap: 18px;
}

.bar-chart article {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) minmax(220px, .9fr);
  gap: 16px;
  align-items: center;
}

.bar-chart span {
  color: #806f66;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
}

.bar-chart b {
  position: relative;
  display: block;
  min-width: 76px;
  padding: 10px 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--less-rose) var(--w), rgba(201, 111, 114, .15) var(--w));
  color: #fffaf2;
  font-size: 13px;
  text-align: right;
}

.bar-chart p {
  margin: 0;
  color: #5c514c;
  font-size: 14px;
  line-height: 1.35;
}

.finding-copy {
  margin-top: 28px;
  max-width: 760px;
}

.gap-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(24px, 4vw, 58px);
  align-items: stretch;
}

.gap-compare article {
  display: flex;
  min-height: 280px;
  flex-direction: column;
  justify-content: center;
  padding: clamp(30px, 4.5vw, 54px);
}

.gap-compare article:first-child {
  background: rgba(255, 250, 244, .72);
}

.gap-compare article:last-child {
  background: rgba(241, 217, 212, .52);
}

.gap-compare p {
  margin: 0;
  color: #4f433d;
  font-size: clamp(22px, 2.7vw, 39px);
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: -.02em;
}

.gap-compare b {
  align-self: center;
  color: rgba(201, 111, 114, .72);
  font-family: "DM Serif Display", serif;
  font-size: clamp(42px, 5vw, 74px);
  font-weight: 400;
}

.less-gap h3 {
  width: fit-content;
  margin: 46px 0 22px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--less-butter);
  color: #6c4a35;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .14em;
}

.less-gap > p {
  max-width: 850px;
}

.strategy-shift {
  display: grid;
  grid-template-columns: 1fr minmax(260px, .62fr) 1fr;
  gap: clamp(20px, 3vw, 38px);
  align-items: center;
}

.strategy-shift article {
  min-height: 250px;
  padding: clamp(30px, 4vw, 48px);
}

.strategy-shift article:last-child {
  background: rgba(242, 223, 155, .38);
}

.strategy-shift p {
  color: #51463f;
  font-size: clamp(22px, 2.35vw, 35px);
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: -.02em;
}

.strategy-shift b {
  display: grid;
  gap: 16px;
  justify-items: center;
  color: var(--less-deep-rose);
  font-family: "DM Serif Display", "Noto Serif SC", serif;
  font-size: clamp(22px, 2.3vw, 34px);
  font-weight: 400;
  line-height: 1.22;
  text-align: center;
}

.strategy-shift i {
  color: var(--less-ink);
  font-style: normal;
  font-size: 44px;
}

.less-better-longer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 3vw, 34px);
}

.less-better-longer article {
  min-height: 280px;
  padding: clamp(24px, 4vw, 44px);
}

.less-better-longer article:nth-child(2) {
  margin-top: 42px;
  background: rgba(242, 223, 155, .42);
}

.less-better-longer article:nth-child(3) {
  background: rgba(241, 217, 212, .5);
}

.less-better-longer strong {
  display: block;
  color: var(--less-rose);
  font-family: "DM Serif Display", serif;
  font-size: clamp(56px, 8vw, 124px);
  font-weight: 400;
  line-height: .86;
  letter-spacing: -.07em;
}

.less-opportunity .less-section-head,
.less-response .less-section-head,
.less-ecosystem .less-section-head,
.less-outputs .less-section-head,
.less-vibe .less-section-head {
  margin-bottom: clamp(34px, 4.5vw, 62px);
}

.less-opportunity .less-section-head h2,
.less-response .less-section-head h2,
.less-ecosystem .less-section-head h2,
.less-outputs .less-section-head h2,
.less-vibe .less-section-head h2 {
  max-width: 820px;
  font-size: clamp(34px, 4vw, 64px);
  line-height: 1.26;
}

.less-better-longer p {
  margin-top: 26px;
  color: #594e49;
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.62;
}

.ecosystem-map {
  display: grid;
  grid-template-columns: minmax(280px, .55fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 84px);
  align-items: center;
}

.ecosystem-map figure {
  margin: 0;
  padding: 18px;
  border: 1px solid rgba(37, 31, 27, .18);
  border-radius: 36px;
  background: rgba(255, 250, 244, .62);
  transform: rotate(-1deg);
}

.ecosystem-map img,
.output-stage img,
.carousel-track img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ecosystem-map > div {
  position: relative;
  display: grid;
  gap: 16px;
}

.ecosystem-map > div::before {
  content: "";
  position: absolute;
  inset: 72px auto 72px 28px;
  border-left: 2px dashed rgba(201, 111, 114, .45);
}

.ecosystem-map > div > strong {
  position: relative;
  z-index: 1;
  display: block;
  width: fit-content;
  padding: 18px 24px;
  border-radius: 999px;
  background: var(--less-rose);
  color: #fffaf3;
  font-family: "DM Serif Display", serif;
  font-size: clamp(28px, 4vw, 58px);
  font-weight: 400;
  line-height: 1;
  overflow-wrap: anywhere;
}

.ecosystem-map article {
  position: relative;
  z-index: 1;
  margin-left: 44px;
  padding: 18px 22px;
}

.live-site-collage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(260px, .62fr);
  grid-template-areas:
    "main wide"
    "main tall"
    "flow tall";
  gap: clamp(18px, 3vw, 34px);
  align-items: start;
}

.live-shot {
  position: relative;
  margin: 0;
  padding: 44px 14px 14px;
  border: 1px solid rgba(37, 31, 27, .18);
  border-radius: 30px;
  background: rgba(255, 250, 244, .72);
  box-shadow: 10px 12px 0 rgba(37, 31, 27, .05);
}

.live-shot::before {
  content: "● ● ●";
  position: absolute;
  top: 17px;
  left: 20px;
  color: var(--less-rose);
  font-size: 11px;
  letter-spacing: .34em;
}

.live-shot span {
  position: absolute;
  top: 14px;
  right: 18px;
  max-width: 58%;
  color: #695d57;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .11em;
  line-height: 1.35;
  text-align: right;
  text-transform: uppercase;
}

.live-shot img {
  display: block;
  width: 100%;
  max-height: 760px;
  object-fit: contain;
  border-radius: 20px;
  background: #fffaf6;
}

.live-shot.main {
  grid-area: main;
  transform: rotate(-1deg);
}

.live-shot.wide {
  grid-area: wide;
  background: rgba(242, 223, 155, .34);
  transform: rotate(1deg);
}

.live-shot.tall {
  grid-area: tall;
  background: rgba(241, 217, 212, .46);
  transform: rotate(.6deg);
}

.live-flow {
  grid-area: flow;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 20px 24px;
  border: 1px dashed rgba(201, 111, 114, .52);
  border-radius: 999px;
  background: rgba(255, 250, 244, .5);
}

.live-flow b {
  color: #5f514b;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.live-flow i {
  color: var(--less-rose);
  font-family: "DM Serif Display", serif;
  font-size: 25px;
  font-style: normal;
  line-height: 1;
}

.vibe-live-grid {
  display: grid;
  grid-template-columns: minmax(220px, .42fr) minmax(0, .76fr) minmax(280px, .62fr);
  gap: clamp(20px, 3.6vw, 54px);
  align-items: center;
}

.early-concept {
  align-self: start;
  max-width: 360px;
  transform: rotate(-2deg);
}

.early-concept::after {
  content: "CONCEPT → ITERATE / PROMPT / BUILD → LIVE PROTOTYPE";
  display: block;
  margin-top: 14px;
  color: #7b6259;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .11em;
  line-height: 1.55;
}

.vibe-live-shots {
  display: grid;
  gap: 24px;
}

.vibe-live-shots .less-browser {
  padding: 42px 14px 16px;
  transform: rotate(.7deg);
}

.vibe-live-shots .less-browser:nth-child(2) {
  margin-left: clamp(0px, 3vw, 42px);
  transform: rotate(-1deg);
}

.vibe-live-grid .less-browser img {
  max-height: 540px;
}

.vibe-flow {
  margin: 0 0 22px;
  padding: 12px 16px;
  border-radius: 999px;
  background: var(--less-ink);
  color: #fff8ec !important;
  font-size: 12px !important;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.5 !important;
  text-transform: uppercase;
}

.less-outputs .less-section-head {
  margin-bottom: 34px;
}

.carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 330px);
  gap: 18px;
  overflow-x: auto;
  padding: 10px 4px 24px;
  scroll-snap-type: x proximity;
}

.carousel-track figure {
  margin: 0;
  padding: 14px;
  border: 1px solid rgba(37, 31, 27, .15);
  border-radius: 28px;
  background: rgba(255, 250, 244, .72);
  scroll-snap-align: start;
}

.carousel-track figure:nth-child(even) {
  transform: translateY(18px) rotate(.8deg);
}

.output-stage {
  display: grid;
  grid-template-columns: minmax(240px, .55fr) minmax(220px, .48fr) minmax(220px, .48fr);
  gap: clamp(18px, 3vw, 34px);
  align-items: start;
  margin-top: clamp(44px, 6vw, 82px);
}

.output-stage.after {
  grid-template-columns: minmax(240px, .6fr) minmax(220px, .42fr) minmax(220px, .58fr);
}

.output-stage > div {
  position: sticky;
  top: 96px;
  padding: clamp(24px, 4vw, 42px);
}

.output-stage h2 {
  margin: 0 0 18px;
  color: var(--less-rose);
  font-family: "DM Serif Display", "Noto Serif SC", serif;
  font-size: clamp(38px, 5vw, 80px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.04em;
}

.output-stage.during h2 {
  font-size: clamp(30px, 3.55vw, 58px);
  line-height: 1.24;
  letter-spacing: -.028em;
}

.output-stage ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 22px 0 0;
  list-style: none;
}

.output-stage li {
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--less-butter);
  color: #6b4a36;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .09em;
}

.output-stage figure {
  margin: 0;
  padding: 15px;
  border: 1px solid rgba(37, 31, 27, .16);
  border-radius: 30px;
  background: rgba(255, 250, 244, .7);
}

.output-stage figure:nth-child(2) {
  transform: rotate(-1deg);
}

.output-stage figure:nth-child(3) {
  transform: rotate(1.2deg);
}

.output-stage .tall {
  max-width: 430px;
}

.vibe-grid {
  display: grid;
  grid-template-columns: minmax(280px, .62fr) minmax(0, .78fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}

.vibe-grid .less-browser {
  transform: rotate(-1.2deg);
}

.vibe-copy {
  padding: clamp(24px, 4vw, 44px);
  background: rgba(242, 223, 155, .35);
}

.vibe-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 24px 0;
}

.vibe-copy strong {
  display: block;
  margin-top: 22px;
  color: var(--less-rose);
  font-size: 12px;
  letter-spacing: .14em;
}

.less-targets {
  background:
    radial-gradient(circle at 8% 20%, rgba(241, 217, 212, .72), transparent 260px),
    rgba(255, 250, 244, .25);
}

.less-targets > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
  margin-top: 38px;
}

.less-targets article {
  min-height: 190px;
  padding: 22px;
}

.less-targets article:nth-child(odd) {
  margin-top: 32px;
  background: rgba(241, 217, 212, .52);
}

.less-targets strong {
  display: block;
  color: var(--less-rose);
  font-family: "DM Serif Display", serif;
  font-size: clamp(38px, 5vw, 76px);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.05em;
}

.less-targets p {
  color: #5f544f;
  font-size: 14px;
  line-height: 1.62;
}

.measure-stack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(14px, 2vw, 22px);
}

.measure-stack article {
  min-height: 240px;
  padding: 22px;
}

.measure-stack article:nth-child(even) {
  margin-top: 48px;
  background: rgba(242, 223, 155, .36);
}

.measure-stack h3 {
  margin: 0 0 18px;
  font-family: "DM Serif Display", "Noto Serif SC", serif;
  font-size: clamp(26px, 2.5vw, 42px);
  font-weight: 400;
  line-height: 1.16;
}

.less-disclosure article {
  background:
    radial-gradient(circle at 88% 18%, rgba(242, 223, 155, .48), transparent 190px),
    rgba(232, 224, 239, .58);
}

.less-disclosure strong {
  display: inline-block;
  margin-bottom: 22px;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--less-ink);
  color: #fff8ec;
  font-size: 11px;
  letter-spacing: .11em;
  line-height: 1.45;
}

@media (max-width: 1180px) {
  .less-hero,
  .less-section-head,
  .less-finding,
  .ecosystem-map,
  .live-site-collage,
  .vibe-live-grid,
  .vibe-grid {
    grid-template-columns: 1fr;
  }

  .less-hero {
    min-height: auto;
  }

  .less-browser {
    max-width: 640px;
  }

  .less-section-head {
    gap: 18px;
  }

  .live-site-collage {
    grid-template-areas:
      "main"
      "wide"
      "tall"
      "flow";
  }

  .early-concept {
    max-width: 520px;
  }

  .pattern-notes,
  .measure-stack {
    grid-template-columns: repeat(2, 1fr);
  }

  .less-targets > div {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 860px) {
  .less-hero h1,
  .less-section-head h2,
  .less-targets > h2 {
    line-height: 1.2;
  }

  .less-hero h2 {
    margin-left: 0;
  }

  .market-story,
  .benchmark-wall,
  .gap-compare,
  .strategy-shift,
  .less-better-longer,
  .output-stage,
  .output-stage.after {
    grid-template-columns: 1fr;
  }

  .market-story article:nth-child(3),
  .pattern-notes article:nth-child(even),
  .less-better-longer article:nth-child(2),
  .less-targets article:nth-child(odd),
  .measure-stack article:nth-child(even) {
    margin-top: 0;
  }

  .market-data {
    grid-template-columns: 1fr 1fr;
    border-radius: 34px;
  }

  .market-data strong {
    grid-column: span 1;
  }

  .pattern-notes,
  .audit-metrics,
  .less-targets > div,
  .measure-stack {
    grid-template-columns: 1fr;
  }

  .bar-chart article {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .bar-chart b {
    text-align: left;
  }

  .gap-compare b {
    text-align: center;
    line-height: .5;
  }

  .output-stage > div {
    position: relative;
    top: auto;
  }

  .live-shot,
  .vibe-live-shots .less-browser,
  .vibe-live-shots .less-browser:nth-child(2),
  .early-concept {
    margin-left: 0;
    transform: none;
  }

  .live-flow {
    border-radius: 28px;
  }

  .output-stage .tall {
    max-width: 100%;
  }

  .carousel-track {
    grid-auto-columns: minmax(210px, 76vw);
  }
}

@media (max-width: 560px) {
  .less-hero {
    padding-top: 86px;
  }

  .less-hero::before {
    top: 76px;
    white-space: normal;
    font-size: 64px;
  }

  .less-hero h1 {
    font-size: clamp(39px, 10.8vw, 54px);
    line-height: 1.22;
  }

  .less-hero h1 span {
    font-size: .82em;
    line-height: 1.24;
  }

  .less-hero h2,
  .ecosystem-map > div > strong {
    font-size: clamp(31px, 9vw, 45px);
  }

  .less-section-head h2,
  .less-targets > h2 {
    font-size: clamp(33px, 9.2vw, 48px);
    line-height: 1.22;
  }

  .less-browser {
    padding: 42px 12px 16px;
    border-radius: 26px;
    box-shadow: 8px 10px 0 rgba(37, 31, 27, .07);
    transform: rotate(.5deg);
  }

  .less-browser figcaption {
    position: static;
    display: inline-block;
    margin-top: 12px;
    transform: rotate(-4deg);
  }

  .less-note article,
  .less-disclosure article,
  .market-story article,
  .audit-metrics,
  .zero-card,
  .gap-compare article,
  .strategy-shift article,
  .less-better-longer article,
  .output-stage > div,
  .vibe-copy,
  .less-targets article,
  .measure-stack article {
    border-radius: 24px;
  }

  .market-story p,
  .gap-compare p,
  .strategy-shift p {
    font-size: clamp(19px, 5.35vw, 28px);
    line-height: 1.48;
  }

  .gap-compare article,
  .strategy-shift article {
    min-height: auto;
  }

  .market-data {
    grid-template-columns: 1fr;
  }

  .zero-card strong {
    font-size: clamp(106px, 36vw, 150px);
  }

  .zero-card::after {
    position: static;
    display: block;
    margin-top: 16px;
  }

  .ecosystem-map > div::before {
    inset: 68px auto 68px 17px;
  }

  .ecosystem-map article {
    margin-left: 28px;
  }

  .carousel-track {
    grid-auto-columns: minmax(210px, 82vw);
  }

  .output-stage figure,
  .carousel-track figure,
  .ecosystem-map figure,
  .live-shot {
    padding: 10px;
    border-radius: 22px;
  }

  .live-shot {
    padding-top: 42px;
  }

  .live-shot span {
    right: 14px;
    max-width: 68%;
    font-size: 10px;
  }

  .vibe-flow {
    border-radius: 22px;
  }

  .less-disclosure strong {
    line-height: 1.6;
  }
}