:root {
  --primary: #452e29;
  --secondary: #f5cbd9;
  --paper: #f4eee8;
  --ink: #241916;
  --white: #fffaf8;
  --line: rgba(69, 46, 41, 0.2);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", sans-serif;
  background: var(--paper);
  color: var(--primary);
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 4vw;
  color: var(--white);
  mix-blend-mode: normal;
  transition: background 0.3s ease, color 0.3s ease;
}

.site-header.scrolled {
  background: rgba(69, 46, 41, 0.94);
  backdrop-filter: blur(12px);
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  letter-spacing: -0.04em;
}

.brand-main {
  font-size: 1.55rem;
  font-weight: 600;
}

.brand-sub {
  font-size: 0.65rem;
  letter-spacing: 0.23em;
}

.nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 0.77rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.nav-cta {
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
}

.menu-toggle {
  display: none;
  border: 0;
  background: transparent;
  color: inherit;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--primary);
  color: var(--white);
  padding: 145px 4vw 42px;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  right: -8vw;
  bottom: -20vw;
  width: 48vw;
  height: 48vw;
  border-radius: 50%;
  background: var(--secondary);
  opacity: 0.92;
}

.hero::before {
  content: "";
  position: absolute;
  right: 19vw;
  top: 13vh;
  width: 12vw;
  height: 12vw;
  border: 1px solid rgba(245,203,217,.55);
  border-radius: 50%;
}

.hero-noise {
  position: absolute;
  inset: 0;
  opacity: 0.12;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 70px 70px;
}

.hero-kicker {
  position: relative;
  z-index: 2;
  margin-bottom: 25px;
  font-size: .72rem;
  letter-spacing: .22em;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 980px;
}

.hero h1 {
  font-size: clamp(4.5rem, 9.5vw, 10rem);
  line-height: .84;
  font-weight: 500;
  letter-spacing: -.075em;
  max-width: 1100px;
}

.hero h1 em,
.statement h2 em,
.contact h2 em {
  font-family: "Playfair Display", serif;
  font-weight: 500;
  color: var(--secondary);
}

.hero-content > p {
  max-width: 560px;
  margin-top: 40px;
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255,250,248,.78);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 34px;
}

.button {
  display: inline-flex;
  padding: 15px 20px;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.button-light {
  background: var(--secondary);
  color: var(--primary);
}

.text-link {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .11em;
}

.hero-meta {
  position: absolute;
  z-index: 2;
  left: 4vw;
  right: 4vw;
  bottom: 32px;
  display: flex;
  justify-content: space-between;
  font-size: .67rem;
  letter-spacing: .2em;
  color: rgba(255,250,248,.6);
}

.section {
  padding: 110px 4vw;
}

.section-label {
  font-size: .65rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.manifesto {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 5vw;
  border-bottom: 1px solid var(--line);
}

.manifesto-copy {
  max-width: 900px;
}

.eyebrow {
  margin-bottom: 20px;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 1.2rem;
}

.manifesto h2,
.section-head h2,
.services-intro h2,
.about h2 {
  font-size: clamp(3rem, 6vw, 6.5rem);
  line-height: .95;
  letter-spacing: -.06em;
  font-weight: 500;
}

.body-copy {
  max-width: 680px;
  margin-top: 36px;
  font-size: 1.12rem;
  line-height: 1.7;
}

.work {
  background: var(--secondary);
}

.section-head {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: end;
  margin-bottom: 55px;
}

.section-head .section-label {
  margin-bottom: 22px;
}

.section-head > p {
  max-width: 360px;
  line-height: 1.6;
  font-size: .9rem;
}

.work-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 20px;
}

.project-large {
  grid-row: span 2;
}

.project-image {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  background: var(--primary);
}

.project-large .project-image {
  min-height: 720px;
}

.image-one {
  background:
    linear-gradient(180deg, rgba(69,46,41,.05), rgba(69,46,41,.28)),
    url('assets/alex-horton.webp') center 20% / cover no-repeat;
}

.image-two {
  background:
    linear-gradient(145deg, rgba(245,203,217,.15), rgba(69,46,41,.8)),
    linear-gradient(90deg, #61413a, #2c1d19);
}

.image-three {
  background:
    linear-gradient(30deg, rgba(245,203,217,.35), transparent),
    #4b322c;
}

.project-placeholder {
  position: absolute;
  left: 24px;
  bottom: 24px;
  color: var(--white);
  font-size: .72rem;
  letter-spacing: .18em;
}

.project-info {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0 24px;
  border-bottom: 1px solid rgba(69,46,41,.25);
}

.project-info h3 {
  font-size: 1rem;
  font-weight: 500;
}

.project-info p,
.project-info span {
  margin-top: 6px;
  font-size: .72rem;
  opacity: .7;
}

.services-wrap {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 7vw;
}

.services-intro p {
  max-width: 420px;
  margin-top: 30px;
  line-height: 1.6;
}

.service-list {
  border-top: 1px solid var(--line);
}

.service-item {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 10px;
  padding: 25px 0;
  border-bottom: 1px solid var(--line);
}

.service-item > span {
  font-size: .7rem;
  opacity: .65;
}

.service-item h3 {
  font-size: 1.35rem;
  font-weight: 500;
}

.service-item p {
  margin-top: 9px;
  line-height: 1.6;
  font-size: .88rem;
  max-width: 580px;
}

.statement {
  background: var(--primary);
  color: var(--white);
  padding: 130px 4vw;
}

.statement-inner p {
  font-size: .7rem;
  letter-spacing: .22em;
  margin-bottom: 24px;
}

.statement h2 {
  font-size: clamp(3.7rem, 8vw, 8.5rem);
  line-height: .92;
  letter-spacing: -.065em;
  font-weight: 500;
}

.about {
  border-bottom: 1px solid var(--line);
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8vw;
  margin-top: 45px;
}

.about-right {
  padding-top: 8px;
}

.about-right p {
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: 22px;
}

.founder {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 45px;
}

.founder span {
  font-size: .64rem;
  letter-spacing: .2em;
}

.founder strong {
  font-size: 1.4rem;
  font-weight: 500;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 42px;
}

.process-card {
  min-height: 300px;
  padding: 26px;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}

.process-card span {
  font-size: .7rem;
  opacity: .65;
}

.process-card h3 {
  margin-top: auto;
  font-size: 1.6rem;
  font-weight: 500;
  max-width: 250px;
}

.process-card p {
  margin-top: 14px;
  line-height: 1.55;
  font-size: .85rem;
}

.contact {
  min-height: 85vh;
  background: var(--secondary);
  padding: 50px 4vw 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.contact-top,
.contact-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.contact-top > p {
  font-size: .67rem;
  letter-spacing: .17em;
}

.contact-main {
  padding: 80px 0;
}

.contact h2 {
  font-size: clamp(4rem, 9vw, 9rem);
  line-height: .9;
  letter-spacing: -.07em;
  font-weight: 500;
}

.contact h2 em {
  color: var(--primary);
}

.contact-email {
  display: inline-block;
  margin-top: 45px;
  font-size: clamp(1.1rem, 2vw, 1.8rem);
  border-bottom: 1px solid var(--primary);
  padding-bottom: 6px;
}

.footer-links {
  display: flex;
  gap: 20px;
  font-size: .75rem;
}

.contact-bottom > p {
  font-size: .72rem;
}

@media (max-width: 900px) {
  .menu-toggle {
    display: block;
  }

  .nav {
    display: none;
    position: absolute;
    top: 80px;
    left: 4vw;
    right: 4vw;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    background: var(--primary);
    border: 1px solid rgba(255,255,255,.15);
  }

  .nav.open {
    display: flex;
  }

  .hero {
    padding-top: 130px;
  }

  .hero h1 {
    font-size: clamp(4rem, 16vw, 7rem);
  }

  .hero::after {
    width: 80vw;
    height: 80vw;
    right: -30vw;
    bottom: -20vw;
  }

  .manifesto,
  .services-wrap,
  .about-grid {
    grid-template-columns: 1fr;
  }

  .manifesto {
    gap: 40px;
  }

  .section-head {
    flex-direction: column;
    align-items: flex-start;
  }

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

  .project-large {
    grid-row: auto;
  }

  .project-large .project-image,
  .project-image {
    min-height: 520px;
  }

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

  .process-card {
    min-height: 240px;
  }
}

@media (max-width: 640px) {
  .site-header {
    padding: 20px;
  }

  .hero,
  .section,
  .statement,
  .contact {
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero {
    min-height: 92vh;
  }

  .hero h1 {
    font-size: 15vw;
  }

  .hero-content > p {
    font-size: .93rem;
  }

  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-meta {
    left: 20px;
    right: 20px;
    gap: 14px;
    flex-wrap: wrap;
  }

  .section {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .project-large .project-image,
  .project-image {
    min-height: 390px;
  }

  .contact-top,
  .contact-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .contact-bottom {
    gap: 14px;
  }
}


/* --- Founder section: small editorial accents only --- */
.founder-editorial {
  margin-top: 46px;
  display: grid;
  grid-template-columns: 140px minmax(220px, 420px);
  gap: 24px;
  align-items: start;
  max-width: 620px;
}

.founder-image {
  margin: 0;
  width: 100%;
}

.founder-image img {
  width: 100% !important;
  max-width: 100% !important;
  display: block;
  object-fit: cover;
}

.founder-image-primary {
  width: 140px;
}

.founder-image-primary img {
  width: 140px !important;
  height: 175px !important;
  object-position: center 12%;
}

.founder-image-secondary {
  width: 120px;
  margin-top: 70px;
}

.founder-image-secondary img {
  width: 120px !important;
  height: 150px !important;
  object-position: center 12%;
}

.founder-image figcaption {
  margin-top: 8px;
  font-size: .52rem;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .65;
}

.founder-editorial-copy {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 2px;
}

.micro-label {
  font-size: .55rem;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.founder-editorial-copy > p {
  max-width: 390px;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.25rem, 1.8vw, 1.8rem);
  line-height: 1.12;
  letter-spacing: -.025em;
}

@media (max-width: 900px) {  .founder-editorial {
    grid-template-columns: 140px minmax(200px, 1fr);
    max-width: 600px;
    gap: 20px;
  }

  .founder-image-primary,
  .founder-image-primary img {
    width: 140px !important;
  }

  .founder-image-primary img {
    height: 175px !important;
  }

  .founder-image-secondary {
    display: none;
  }
}

@media (max-width: 640px) {  .founder-editorial {
    grid-template-columns: 110px 1fr;
    gap: 18px;
    margin-top: 36px;
  }

  .founder-image-primary,
  .founder-image-primary img {
    width: 110px !important;
  }

  .founder-image-primary img {
    height: 138px !important;
  }

  .founder-editorial-copy {
    min-height: 138px;
  }

  .founder-editorial-copy > p {
    font-size: 1.15rem;
  }

  .founder-image figcaption {
    display: none;
  }
}


/* SOLA vector navbar logo */
.logo-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.site-logo-svg {
  display: block;
  width: 38px !important;
  height: auto !important;
  max-width: none !important;
}

/* Alex Horton featured project image — rendered directly in HTML for reliability */
.alex-project {
  position: relative;
  background: #2e1f1b !important;
}

.alex-project-photo {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  z-index: 0;
}

.project-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(69,46,41,.02), rgba(69,46,41,.22));
  z-index: 1;
  pointer-events: none;
}

.alex-project .project-placeholder {
  z-index: 2;
}

/* --- Refined Alex Horton featured project --- */
.project-large .project-image.alex-project {
  min-height: 0 !important;
  height: auto !important;
  background: transparent !important;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 28px 0 10px;
  overflow: visible;
}

.alex-project-photo {
  position: relative !important;
  inset: auto !important;
  width: min(100%, 500px) !important;
  max-width: 500px !important;
  height: auto !important;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 18%;
  display: block;
  z-index: 0;
}

.alex-project .project-image-overlay {
  display: none !important;
}

.alex-project .project-placeholder {
  left: 18px;
  bottom: 24px;
  z-index: 2;
  background: rgba(69, 46, 41, .88);
  color: var(--white);
  padding: 8px 10px;
  font-size: .6rem;
  letter-spacing: .15em;
}

/* Slightly larger SOLA navbar logo */
.site-logo-svg {
  width: 48px !important;
  max-width: 48px !important;
}

@media (max-width: 900px) {
  .alex-project-photo {
    width: min(100%, 420px) !important;
    max-width: 420px !important;
  }

  .site-logo-svg {
    width: 46px !important;
    max-width: 46px !important;
  }
}

@media (max-width: 640px) {
  .project-large .project-image.alex-project {
    padding-top: 16px;
  }

  .alex-project-photo {
    width: min(100%, 320px) !important;
    max-width: 320px !important;
  }

  .site-logo-svg {
    width: 44px !important;
    max-width: 44px !important;
  }
}

/* HARD FIX VERSION 3 */
@media (max-width: 640px) {
  .alex-project > div {
    width: 280px !important;
    max-width: 82vw !important;
  }
  .alex-project img {
    width: 280px !important;
    max-width: 82vw !important;
  }
}


/* =========================================================
   SELECTED WORK — EDITORIAL ARTICLE RAIL (v4)
   ========================================================= */

#work.work {
  overflow: hidden;
}

#work .section-head {
  margin-bottom: 38px;
}

.editorial-rail-shell {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
}

.editorial-rail {
  flex: 1;
  display: flex;
  gap: 34px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px 0 8px;
  overscroll-behavior-inline: contain;
  touch-action: pan-x;
}

.editorial-rail::-webkit-scrollbar {
  display: none;
}

.editorial-card {
  flex: 0 0 calc((100% - 68px) / 3);
  min-width: 0;
  scroll-snap-align: start;
}

.editorial-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5.15;
  overflow: hidden;
  border: 5px solid var(--primary);
  background: var(--primary);
}

.editorial-frame img {
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover !important;
  max-width: none !important;
}

.editorial-card:first-child .editorial-frame img {
  object-position: center 18% !important;
}

.editorial-card:nth-child(2) .editorial-frame img {
  object-position: center 10% !important;
}

.editorial-number {
  position: absolute;
  top: 10px;
  left: 11px;
  z-index: 3;
  font-size: .58rem;
  letter-spacing: .12em;
  color: var(--white);
  background: var(--primary);
  padding: 5px 6px;
}

.editorial-caption {
  padding: 10px 4px 0;
  text-align: center;
  color: var(--primary);
}

.editorial-caption h3 {
  font-size: .72rem;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: .025em;
}

.editorial-caption p {
  margin-top: 3px;
  font-size: .66rem;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.rail-arrow {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--primary);
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  transition: transform .2s ease, opacity .2s ease;
}

.rail-arrow:hover {
  transform: scale(1.12);
}

.rail-arrow:disabled {
  opacity: .22;
  cursor: default;
  transform: none;
}

.editorial-placeholder {
  display: flex;
  align-items: flex-end;
  padding: 18px;
}

.cover-type {
  position: relative;
  z-index: 2;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.65rem, 2.3vw, 2.8rem);
  line-height: .86;
  letter-spacing: -.055em;
  color: var(--secondary);
}

.editorial-placeholder::before,
.editorial-placeholder::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.editorial-placeholder::before {
  width: 55%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(245,203,217,.5);
  right: -18%;
  top: 10%;
}

.editorial-placeholder::after {
  inset: 0;
  opacity: .18;
  background-image:
    linear-gradient(rgba(245,203,217,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,203,217,.18) 1px, transparent 1px);
  background-size: 28px 28px;
}

.cover-03 { background: #35241f; }
.cover-04 { background: linear-gradient(145deg,#704e46,#35241f 64%); }
.cover-05 { background: linear-gradient(25deg,#452e29 62%,#f5cbd9 62%); }
.cover-06 { background: #291c19; }
.cover-07 { background: linear-gradient(180deg,#523730,#2e1f1b); }
.cover-08 { background: linear-gradient(135deg,#f5cbd9 0 22%,#452e29 22%); }
.cover-09 { background: radial-gradient(circle at 70% 24%,#f5cbd9 0 12%,transparent 12.5%),#392620; }
.cover-10 { background: linear-gradient(90deg,#452e29 0 52%,#65443c 52%); }

.rail-progress {
  margin: 18px 60px 0;
  display: grid;
  grid-template-columns: auto minmax(100px, 1fr) auto;
  align-items: center;
  gap: 15px;
  font-size: .52rem;
  letter-spacing: .16em;
}

.rail-progress-line {
  position: relative;
  display: block;
  height: 1px;
  background: rgba(69,46,41,.22);
  overflow: hidden;
}

.rail-progress-line i {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  width: 25%;
  background: var(--primary);
  transform-origin: left center;
}

@media (max-width: 900px) {
  .editorial-rail-shell {
    gap: 10px;
  }

  .editorial-rail {
    gap: 18px;
  }

  .editorial-card {
    flex-basis: calc((100% - 18px) / 2);
  }

  .rail-arrow {
    flex-basis: 32px;
    width: 32px;
  }

  .rail-progress {
    margin-left: 42px;
    margin-right: 42px;
  }
}

@media (max-width: 640px) {
  #work .section-head {
    margin-bottom: 28px;
  }

  .editorial-rail-shell {
    display: block;
  }

  .editorial-rail {
    gap: 14px;
    padding-right: 18vw;
  }

  .editorial-card {
    flex-basis: 72vw;
  }

  .editorial-frame {
    border-width: 4px;
  }

  .rail-arrow {
    display: none;
  }

  .rail-progress {
    margin: 15px 0 0;
  }

  .editorial-caption h3 {
    font-size: .68rem;
  }

  .editorial-caption p {
    font-size: .6rem;
  }
}


/* Uploaded SVG SOLA logos */
.logo-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.sola-wordmark {
  display: block;
  height: auto;
  max-width: none;
}
.sola-wordmark-header {
  width: 220px !important;
}
.sola-wordmark-footer {
  width: 165px !important;
  filter: brightness(0) saturate(100%) invert(18%) sepia(14%) saturate(920%) hue-rotate(323deg) brightness(92%) contrast(88%);
}
@media (max-width: 900px) {
  .sola-wordmark-header { width: 165px !important; }
  .sola-wordmark-footer { width: 130px !important; }
}
@media (max-width: 640px) {
  .sola-wordmark-header { width: 90px !important; }
  .sola-wordmark-footer { width: 90px !important; }
}


/* v9 authoritative SOLA logo sizing */
.site-header .sola-wordmark-header {
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  height: auto !important;
  display: block !important;
}
.contact-bottom .sola-wordmark-footer {
  width: 165px !important;
  min-width: 165px !important;
  max-width: 165px !important;
  height: auto !important;
  display: block !important;
  filter: brightness(0) saturate(100%) invert(18%) sepia(14%) saturate(920%) hue-rotate(323deg) brightness(92%) contrast(88%);
}
@media (max-width: 900px) {
  .site-header .sola-wordmark-header {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
  }
  .contact-bottom .sola-wordmark-footer {
    width: 125px !important;
    min-width: 125px !important;
    max-width: 125px !important;
  }
}
@media (max-width: 640px) {
  .site-header .sola-wordmark-header {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
  }
  .contact-bottom .sola-wordmark-footer {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
  }
}


/* v10 — mobile hero spacing refinement */
@media (max-width: 640px) {
  /* Keep the pink circle as a background accent instead of letting it sit behind the CTA. */
  .hero::after {
    width: 76vw !important;
    height: 76vw !important;
    right: -46vw !important;
    bottom: -13vw !important;
  }

  .hero-actions {
    position: relative;
    z-index: 3;
    gap: 26px;
  }

  .hero-actions .button-light {
    width: fit-content !important;
    max-width: calc(100vw - 92px) !important;
    padding: 14px 18px !important;
    font-size: .70rem !important;
    white-space: nowrap;
  }

  .hero-actions .text-link {
    position: relative;
    z-index: 3;
  }
}


/* v12 — founder portrait + alignment refinement */
.founder-image-primary img {
  width: 140px !important;
  height: 175px !important;
  object-fit: cover !important;
  object-position: 50% 18% !important;
}

/* Match the copy block to the photo height so the statement ends at the photo baseline. */
.founder-editorial-copy {
  min-height: 175px !important;
  height: 175px;
  padding-top: 2px;
  justify-content: space-between;
}

@media (max-width: 900px) {
  .founder-image-primary img {
    width: 140px !important;
    height: 175px !important;
  }

  .founder-editorial-copy {
    min-height: 175px !important;
    height: 175px;
  }
}

@media (max-width: 640px) {
  .founder-image-primary img {
    width: 110px !important;
    height: 138px !important;
    object-position: 50% 16% !important;
  }

  .founder-editorial-copy {
    min-height: 138px !important;
    height: 138px;
  }
}

/* v13 — corrected founder headshot crop */
.founder-image-primary img {
  width: 140px !important;
  height: 175px !important;
  object-fit: cover !important;
  object-position: center center !important;
}

@media (max-width: 640px) {
  .founder-image-primary img {
    width: 110px !important;
    height: 138px !important;
    object-position: center center !important;
  }
}


/* =========================================================
   v15 — centered SOLA header + split navigation
   ========================================================= */

.centered-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 36px;
  padding: 22px 4vw !important;
}

.centered-header .header-logo-center {
  grid-column: 2;
  justify-self: center;
  position: relative;
  z-index: 3;
}

.centered-header .nav-left {
  grid-column: 1;
  justify-self: start;
}

.centered-header .nav-right {
  grid-column: 3;
  justify-self: end;
}

.centered-header .nav-left,
.centered-header .nav-right {
  display: flex;
  align-items: center;
  gap: 30px;
}

.centered-header .nav-mobile {
  display: none;
}

.centered-header .menu-toggle {
  display: none;
}

/* Keep logo prominent but balanced in the center */
.centered-header .sola-wordmark-header {
  width: 170px !important;
  max-width: 170px !important;
  height: auto !important;
}

@media (max-width: 900px) {
  .centered-header {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px !important;
  }

  .centered-header .header-logo-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .centered-header .sola-wordmark-header {
    width: 112px !important;
    max-width: 112px !important;
  }

  .centered-header .nav-left,
  .centered-header .nav-right {
    display: none !important;
  }

  .centered-header .menu-toggle {
    display: block !important;
    margin-left: auto;
    position: relative;
    z-index: 4;
  }

  .centered-header .nav-mobile {
    display: none;
    position: absolute;
    top: 72px;
    left: 20px;
    right: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    padding: 24px;
    background: var(--primary);
    border: 1px solid rgba(255,255,255,.14);
    z-index: 20;
  }

  .centered-header .nav-mobile.open {
    display: flex;
  }
}

@media (max-width: 640px) {
  .centered-header .sola-wordmark-header {
    width: 92px !important;
    max-width: 92px !important;
  }
}


/* v16 — restore normal left-aligned SOLA header */
.site-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  grid-template-columns: none !important;
  gap: 20px;
}

.site-header .logo-brand {
  position: static !important;
  transform: none !important;
  justify-self: auto !important;
  display: inline-flex;
  align-items: center;
}

.site-header .sola-wordmark-header {
  width: 220px !important;
  max-width: 220px !important;
  height: auto !important;
}

.site-header .nav {
  display: flex !important;
  align-items: center;
  gap: 30px;
  position: static;
}

@media (max-width: 900px) {
  .site-header {
    padding: 18px 20px !important;
  }

  .site-header .sola-wordmark-header {
    width: 150px !important;
    max-width: 150px !important;
  }

  .site-header .menu-toggle {
    display: block !important;
    margin-left: auto;
  }

  .site-header .nav {
    display: none !important;
    position: absolute;
    top: 72px;
    left: 20px;
    right: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    padding: 24px;
    background: var(--primary);
    border: 1px solid rgba(255,255,255,.14);
  }

  .site-header .nav.open {
    display: flex !important;
  }
}

@media (max-width: 640px) {
  .site-header .sola-wordmark-header {
    width: 92px !important;
    max-width: 92px !important;
  }
}


/* =========================================================
   v18 — approach section imagery
   ========================================================= */

.process-grid {
  gap: 20px;
}

.process-card {
  min-height: 390px;
  padding: 0;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(255,255,255,.18);
}

.process-visual {
  position: relative;
  height: 150px;
  overflow: hidden;
  background: #d9d4cf;
  border-bottom: 1px solid var(--line);
}

.process-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(69,46,41,.06) 0%, rgba(69,46,41,.18) 100%);
  pointer-events: none;
}

.process-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(.9) contrast(1.02);
}

.process-card:nth-child(1) .process-visual img {
  object-position: center 48%;
}

.process-card:nth-child(2) .process-visual img {
  object-position: center 46%;
}

.process-card:nth-child(3) .process-visual img {
  object-position: center 52%;
}

.process-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px 24px 26px;
}

.process-card-body span {
  font-size: .7rem;
  opacity: .65;
}

.process-card-body h3 {
  margin-top: auto;
  font-size: 1.6rem;
  font-weight: 500;
  max-width: 250px;
}

.process-card-body p {
  margin-top: 14px;
  line-height: 1.55;
  font-size: .85rem;
}

@media (max-width: 900px) {
  .process-card {
    min-height: 0;
  }

  .process-visual {
    height: 170px;
  }
}

@media (max-width: 640px) {
  .process-visual {
    height: 160px;
  }

  .process-card-body {
    padding: 20px 20px 24px;
  }
}


/* =========================================================
   v19 — Selected Work moving progress indicator
   ========================================================= */

.rail-progress-line i {
  width: 18% !important;
  left: 0;
  right: auto !important;
  transition: left .18s ease-out;
  will-change: left;
}


/* v20 — hard-fixed selected work scroll progress */
.rail-progress-line {
  position: relative !important;
  overflow: hidden !important;
}
.rail-progress-line #workProgress {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 18% !important;
  background: var(--primary) !important;
  transform: translate3d(0,0,0);
  transition: transform .08s linear !important;
  will-change: transform;
}


/* v23 — cinematic hero intro */
.hero-line {
  display: block;
  overflow: hidden;
  padding-bottom: .04em;
}
.hero-line > span,
.hero-line > em {
  display: inline-block;
}

body.intro-ready .site-header-animate,
body.intro-ready .hero-kicker-animate,
body.intro-ready .hero-copy-animate,
body.intro-ready .hero-actions-animate,
body.intro-ready .hero-meta-animate {
  opacity: 0;
}

body.intro-ready .site-header-animate { transform: translateY(-12px); }
body.intro-ready .hero-kicker-animate,
body.intro-ready .hero-copy-animate,
body.intro-ready .hero-actions-animate,
body.intro-ready .hero-meta-animate { transform: translateY(18px); }

body.intro-ready .hero-line > span,
body.intro-ready .hero-line > em {
  opacity: .15;
  transform: translateY(115%);
}

body.intro-ready .hero::after {
  opacity: 0;
  transform: scale(.82);
}

body.intro-ready .hero::before {
  opacity: 0;
  transform: scale(.72);
}

body.intro-ready .hero-noise { opacity: 0; }

body.intro-play .site-header-animate {
  animation: solaHeaderIn .7s cubic-bezier(.22,.76,.22,1) .06s forwards;
}
body.intro-play .hero-kicker-animate {
  animation: solaFadeUp .72s cubic-bezier(.22,.76,.22,1) .20s forwards;
}
body.intro-play .hero-line-one > span {
  animation: solaTitleIn .9s cubic-bezier(.16,.82,.2,1) .30s forwards;
}
body.intro-play .hero-line-two > em {
  animation: solaTitleSoft 1s cubic-bezier(.16,.82,.2,1) .48s forwards;
}
body.intro-play .hero-copy-animate {
  animation: solaFadeUp .78s cubic-bezier(.22,.76,.22,1) .72s forwards;
}
body.intro-play .hero-actions-animate {
  animation: solaFadeUp .8s cubic-bezier(.22,.76,.22,1) .88s forwards;
}
body.intro-play .hero-meta-animate {
  animation: solaFadeUp .72s cubic-bezier(.22,.76,.22,1) 1.04s forwards;
}
body.intro-play .hero::after {
  animation: solaCircleIn 1.4s cubic-bezier(.18,.72,.18,1) .38s forwards;
}
body.intro-play .hero::before {
  animation: solaCircleSoft 1.25s cubic-bezier(.18,.72,.18,1) .56s forwards;
}
body.intro-play .hero-noise {
  animation: solaNoiseIn 1.2s ease .16s forwards;
}

@keyframes solaHeaderIn {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes solaFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes solaTitleIn {
  from { opacity: .15; transform: translateY(115%); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes solaTitleSoft {
  from { opacity: .1; transform: translateY(115%) skewY(1.5deg); }
  to { opacity: 1; transform: translateY(0) skewY(0); }
}
@keyframes solaCircleIn {
  from { opacity: 0; transform: scale(.82); }
  to { opacity: .92; transform: scale(1); }
}
@keyframes solaCircleSoft {
  from { opacity: 0; transform: scale(.72); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes solaNoiseIn {
  from { opacity: 0; }
  to { opacity: .12; }
}

@media (prefers-reduced-motion: reduce) {
  body.intro-ready .site-header-animate,
  body.intro-ready .hero-kicker-animate,
  body.intro-ready .hero-copy-animate,
  body.intro-ready .hero-actions-animate,
  body.intro-ready .hero-meta-animate,
  body.intro-ready .hero-line > span,
  body.intro-ready .hero-line > em,
  body.intro-ready .hero::after,
  body.intro-ready .hero::before,
  body.intro-ready .hero-noise {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}


/* v25 — Selected Work desktop wheel + white secondary hero action */
.hero-actions .text-link {
  color: #fffaf8 !important;
}

.editorial-rail {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
}


/* v27 — fluid Selected Work scrolling */
@media (min-width: 901px) {
  .editorial-rail {
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
  }

  .editorial-card {
    scroll-snap-align: none !important;
  }
}

/* Keep touch/swipe snapping on smaller screens where it feels natural. */
@media (max-width: 900px) {
  .editorial-rail {
    scroll-snap-type: x proximity !important;
  }
}


/* v28 — force hero secondary CTA to white */
.hero-actions .text-link,
.hero-actions .text-link:visited,
.hero-actions .text-link:hover,
.hero-actions .text-link:active {
  color: #fffaf8 !important;
}


/* v29 — make 'Work With SOLA' a white rectangular button */
.hero-actions {
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.hero-actions .secondary-button,
.hero-actions .secondary-button:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 22px;
  background: #fffaf8 !important;
  color: #452e29 !important;
  border: 1px solid #fffaf8 !important;
  text-decoration: none !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .9rem;
  font-weight: 500;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.hero-actions .secondary-button:hover,
.hero-actions .secondary-button:focus-visible {
  background: #f7f1ee !important;
  color: #452e29 !important;
  border-color: #f7f1ee !important;
  transform: translateY(-1px);
}

.hero-actions .secondary-button span {
  display: inline-block;
  line-height: 1;
}

@media (max-width: 640px) {
  .hero-actions .secondary-button {
    width: auto;
    min-height: 50px;
    padding: 0 18px;
  }
}


/* v30 — equalize hero button sizing */
.hero-actions {
  align-items: stretch;
}

.hero-actions .button,
.hero-actions .secondary-button {
  min-height: 52px;
  box-sizing: border-box;
}

.hero-actions .secondary-button {
  justify-content: center;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .hero-actions .secondary-button {
    width: auto !important;
  }
}


/* v31 — center primary hero button text */
.hero-actions .button-light {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}


/* v32 — mobile hero buttons exactly matched */
@media (max-width: 640px) {
  .hero-actions {
    align-items: flex-start !important;
  }

  .hero-actions .button-light,
  .hero-actions .secondary-button {
    width: 369px !important;
    max-width: calc(100vw - 82px) !important;
    min-height: 0 !important;
    height: 96px !important;
    padding: 0 18px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    font-size: .70rem !important;
  }
}


/* v33 — restore the original compact mobile hero buttons */
@media (max-width: 640px) {
  .hero-actions {
    align-items: flex-start !important;
    gap: 16px !important;
  }

  .hero-actions .button-light,
  .hero-actions .secondary-button {
    width: auto !important;
    max-width: calc(100vw - 92px) !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 14px 18px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    font-size: .70rem !important;
    line-height: 1.2 !important;
  }
}


/* v34 — tighten mobile hero vertical spacing */
@media (max-width: 640px) {
  .hero {
    justify-content: flex-start !important;
    padding-top: 108px !important;
    padding-bottom: 30px !important;
    min-height: 92vh;
  }

  .hero-kicker {
    margin-top: 8px !important;
    margin-bottom: 18px !important;
  }

  .hero-content > p {
    margin-top: 28px !important;
  }

  .hero-actions {
    margin-top: 28px !important;
  }

  .hero-meta {
    bottom: 18px !important;
  }
}


/* v36 — clickable selected work cards */
.editorial-card-link {
  display: block;
  flex: 0 0 auto;
  color: inherit;
  text-decoration: none;
}
.editorial-card-link .editorial-card { transition: transform .28s ease; }
.editorial-card-link:hover .editorial-card { transform: translateY(-5px); }
.editorial-card-link:focus-visible { outline: 2px solid var(--secondary); outline-offset: 7px; }

/* v36 — Alex Horton case study */
.case-body { background:#f3efe9; color:#452e29; }
.case-header {
  background:rgba(243,239,233,.93);
  border-bottom:1px solid rgba(69,46,41,.08);
  backdrop-filter:blur(12px);
}
.case-header .nav a, .case-header .menu-toggle { color:#452e29; }
.case-page { overflow:hidden; }
.alex-case-hero {
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(340px,.75fr);
  gap:clamp(36px,6vw,84px);
  align-items:center;
  padding:160px 5vw 90px;
  position:relative;
}
.alex-case-intro { max-width:760px; }
.case-back {
  display:inline-block;
  margin:20px 0 32px;
  color:#765e56;
  text-decoration:none;
  font-size:.72rem;
  letter-spacing:.16em;
}
.alex-case-hero h1 {
  margin:0;
  font-size:clamp(4.2rem,8.7vw,9.2rem);
  line-height:.84;
  letter-spacing:-.075em;
  font-weight:500;
}
.alex-case-hero h1 em {
  display:block;
  font-family:"Playfair Display",serif;
  font-weight:500;
  color:#b77f91;
}
.alex-case-deck {
  max-width:620px;
  margin-top:34px;
  font-size:1.08rem;
  line-height:1.65;
  color:#66524c;
}
.alex-case-hero-image { margin:0; }
.alex-case-hero-image img { width:100%; display:block; box-shadow:0 28px 80px rgba(44,25,21,.14); }
.alex-case-meta {
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
  padding-top:20px;
  border-top:1px solid rgba(69,46,41,.14);
}
.alex-case-meta span { display:block; margin-bottom:8px; font-size:.66rem; letter-spacing:.16em; color:#8b746d; }
.alex-case-meta strong { font-size:.9rem; line-height:1.45; }
.case-statement-block { padding:110px 5vw; }
.case-statement-grid {
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(280px,.7fr);
  gap:6vw;
  align-items:end;
}
.case-statement-grid h2 {
  margin:24px 0 0;
  font-size:clamp(3rem,6vw,6.3rem);
  line-height:.94;
  letter-spacing:-.06em;
  font-weight:500;
}
.case-statement-grid p { margin:0; line-height:1.75; color:#66524c; }
.alex-case-gallery { padding:0 5vw 110px; display:flex; flex-direction:column; gap:32px; }
.alex-case-gallery figure { margin:0; }
.alex-case-gallery img { width:100%; display:block; }
.gallery-pair, .gallery-feature-pair, .gallery-wide-pair, .gallery-closing { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; }
.gallery-editorial-split {
  display:grid;
  grid-template-columns:minmax(260px,.7fr) minmax(360px,1fr);
  gap:5vw;
  align-items:end;
  padding:34px 0;
}
.gallery-copy { max-width:560px; }
.gallery-copy h3 {
  margin:18px 0;
  font-size:clamp(2.2rem,4vw,4.2rem);
  line-height:.96;
  letter-spacing:-.05em;
  font-weight:500;
}
.gallery-copy p { margin:0; line-height:1.7; color:#66524c; }
.gallery-triptych { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.gallery-impact { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.8fr); gap:32px; align-items:start; }
.gallery-impact-side { display:grid; gap:32px; }
.gallery-copy-dark { padding:34px; background:#452e29; color:#fffaf8; }
.gallery-copy-dark p { color:rgba(255,250,248,.72); }
.gallery-copy-dark .section-label { color:#f5cbd9; }
.case-pullquote { padding:70px 0; }
.case-pullquote p {
  margin:0;
  max-width:17ch;
  font-family:"Playfair Display",serif;
  font-style:italic;
  color:#a96f82;
  font-size:clamp(2.6rem,5vw,5.4rem);
  line-height:1;
  letter-spacing:-.04em;
}
.case-deliverables { padding:100px 5vw; background:#452e29; color:#fffaf8; }
.case-deliverables-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; margin-top:44px; }
.case-deliverables-grid > div { border-top:1px solid rgba(255,255,255,.22); padding-top:18px; }
.case-deliverables-grid span { color:#f5cbd9; font-size:.68rem; letter-spacing:.16em; }
.case-deliverables-grid h3 { margin:16px 0 12px; font-size:1.25rem; }
.case-deliverables-grid p { margin:0; color:rgba(255,250,248,.68); line-height:1.6; font-size:.92rem; }
.case-next-project { padding:100px 5vw; display:flex; align-items:flex-end; justify-content:space-between; gap:30px; }
.case-next-project h2 { margin:18px 0 0; font-size:clamp(3rem,5.5vw,5.8rem); line-height:.94; letter-spacing:-.055em; }
.case-next-project .button-light { background:#f5cbd9; color:#452e29; }
.case-contact { background:#f3efe9; color:#452e29; border-top:1px solid rgba(69,46,41,.1); }
.case-contact .contact-email, .case-contact .footer-links a, .case-contact .contact-top p, .case-contact .contact-bottom p, .case-contact .section-label, .case-contact .contact-main h2 { color:#452e29; }
.case-contact .contact-main h2 em { color:#a96f82; }
.case-contact .contact-bottom { border-top:1px solid rgba(69,46,41,.12); }

@media (max-width:900px) {
  .alex-case-hero { grid-template-columns:1fr; padding-top:130px; }
  .alex-case-hero-image { max-width:620px; }
  .alex-case-meta { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .case-statement-grid, .gallery-editorial-split, .gallery-impact { grid-template-columns:1fr; }
  .case-deliverables-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px) {
  .alex-case-hero { padding:112px 20px 58px; gap:28px; }
  .alex-case-hero h1 { font-size:3.25rem; }
  .alex-case-deck { font-size:.96rem; margin-top:24px; }
  .alex-case-meta { grid-template-columns:1fr; gap:16px; }
  .case-statement-block { padding:76px 20px; }
  .case-statement-grid h2 { font-size:2.7rem; }
  .alex-case-gallery { padding:0 20px 76px; gap:18px; }
  .gallery-pair, .gallery-feature-pair, .gallery-wide-pair, .gallery-closing, .gallery-triptych { grid-template-columns:1fr; gap:18px; }
  .gallery-editorial-split { padding:20px 0; gap:24px; }
  .gallery-copy h3 { font-size:2rem; }
  .gallery-impact { gap:18px; }
  .gallery-impact-side { gap:18px; }
  .gallery-copy-dark { padding:24px; }
  .case-pullquote { padding:52px 0; }
  .case-pullquote p { font-size:2.5rem; }
  .case-deliverables { padding:72px 20px; }
  .case-deliverables-grid { grid-template-columns:1fr; }
  .case-next-project { padding:72px 20px; flex-direction:column; align-items:flex-start; }
  .case-next-project h2 { font-size:2.8rem; }
}


/* v37 — keep clickable Alex card exactly the same size as every original Selected Work card */
.editorial-rail > .editorial-card-link {
  flex: 0 0 calc((100% - 68px) / 3) !important;
  min-width: 0 !important;
  width: auto !important;
  scroll-snap-align: start;
}
.editorial-card-link > .editorial-card {
  width: 100% !important;
  min-width: 0 !important;
  flex: none !important;
}
.editorial-card-link { cursor: pointer; }

@media (max-width: 900px) {
  .editorial-rail > .editorial-card-link {
    flex-basis: var(--editorial-card-basis, 72vw) !important;
  }
}

@media (max-width: 1100px) and (min-width: 641px) {
  .editorial-rail > .editorial-card-link { flex: 0 0 calc((100% - 34px) / 2) !important; }
}
@media (max-width: 640px) {
  .editorial-rail > .editorial-card-link { flex: 0 0 82% !important; }
}


/* v39 — WHO WE ARE alignment + mobile scale */

/* Desktop only: center the manifesto copy while preserving the section label at left. */
@media (min-width: 901px) {
  .manifesto-copy {
    max-width: 980px !important;
    width: 100%;
    justify-self: center;
    text-align: center;
  }

  .manifesto-copy .eyebrow {
    text-align: center;
  }

  .manifesto-copy .body-copy {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}

/* Phone only: give 01 / WHO WE ARE more presence again. */
@media (max-width: 640px) {
  .manifesto.section {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
    gap: 46px !important;
  }

  .manifesto .section-label {
    font-size: .72rem !important;
  }

  .manifesto .eyebrow {
    font-size: 1.3rem !important;
    margin-bottom: 22px !important;
  }

  .manifesto h2 {
    font-size: clamp(3.35rem, 14.5vw, 4.35rem) !important;
    line-height: .94 !important;
  }

  .manifesto .body-copy {
    margin-top: 32px !important;
    font-size: 1.02rem !important;
    line-height: 1.68 !important;
  }
}


/* v40 — image-first portfolio page */
.portfolio-body {
  margin: 0;
  background: #f5cbd9;
  color: #452e29;
}

.portfolio-header {
  background: rgba(245, 203, 217, .93);
  border-bottom: 1px solid rgba(69, 46, 41, .12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.portfolio-header .nav a,
.portfolio-header .menu-toggle {
  color: #452e29;
}

.portfolio-page {
  background: #f5cbd9;
  min-height: 100vh;
  padding-top: 105px;
}

.portfolio-intro {
  padding: 26px 28px 22px;
}

.portfolio-intro-top,
.portfolio-title-row,
.portfolio-end {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.portfolio-intro-top {
  margin-bottom: 22px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .7rem;
}

.portfolio-back {
  color: inherit;
  text-decoration: none;
}

.portfolio-title-row {
  align-items: flex-end;
}

.portfolio-title-row h1 {
  margin: 0;
  font-size: clamp(3rem, 7vw, 7.4rem);
  line-height: .86;
  letter-spacing: -.065em;
  font-weight: 500;
}

.portfolio-title-row p {
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .72rem;
}

.portfolio-wall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 14px;
  padding: 0 14px 14px;
}

.portfolio-tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: rgba(69,46,41,.08);
  min-height: 320px;
}

.portfolio-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}

.portfolio-tile:hover img {
  transform: scale(1.018);
}

.portfolio-tile figcaption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0,0,0,.35);
  font-size: .72rem;
}

.portfolio-tile figcaption strong {
  letter-spacing: .03em;
}

.portfolio-tile figcaption span::before {
  content: '·';
  margin-right: 8px;
}

.tile-tall { min-height: 690px; }
.tile-medium { min-height: 520px; }
.tile-short { min-height: 390px; }
.tile-wide {
  grid-column: span 2;
  min-height: 520px;
}

.portfolio-end {
  padding: 34px 28px 48px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .72rem;
}

.portfolio-end a {
  color: inherit;
  text-decoration: none;
}

@media (max-width: 1000px) {
  .portfolio-wall {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .portfolio-page {
    padding-top: 94px;
  }

  .portfolio-intro {
    padding: 20px 12px 16px;
  }

  .portfolio-intro-top {
    margin-bottom: 14px;
    font-size: .56rem;
  }

  .portfolio-title-row {
    align-items: flex-end;
    gap: 10px;
  }

  .portfolio-title-row h1 {
    font-size: clamp(2.4rem, 12vw, 3.6rem);
  }

  .portfolio-title-row p {
    max-width: 130px;
    text-align: right;
    font-size: .5rem;
    line-height: 1.35;
  }

  .portfolio-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 0 8px 8px;
  }

  .portfolio-tile {
    min-height: 220px;
  }

  .tile-tall { min-height: 355px; }
  .tile-medium { min-height: 285px; }
  .tile-short { min-height: 230px; }
  .tile-wide {
    grid-column: span 1;
    min-height: 300px;
  }

  .portfolio-tile figcaption {
    left: 10px;
    right: 10px;
    bottom: 10px;
    font-size: .54rem;
    line-height: 1.3;
  }

  .portfolio-end {
    padding: 24px 12px 36px;
    font-size: .56rem;
  }
}


/* v41 — Build-in-Amsterdam-inspired opening wall for case studies */
.portfolio-reference-body {
  margin: 0;
  background: #f5cbd9;
  color: #452e29;
}

.portfolio-reference-page {
  min-height: 100vh;
  background: #f5cbd9;
}

/* Overlay navigation so the gallery begins at the very top of the page. */
.portfolio-overlay-header {
  position: fixed;
  z-index: 1000;
  inset: 0 0 auto 0;
  height: 88px;
  pointer-events: none;
}

.portfolio-overlay-logo,
.portfolio-menu-toggle,
.portfolio-nav {
  pointer-events: auto;
}

.portfolio-overlay-logo {
  position: absolute;
  top: 24px;
  left: 25px;
  display: block;
  z-index: 3;
}

.portfolio-overlay-logo img {
  display: block;
  width: 118px;
  height: auto;
  filter: brightness(0) saturate(100%) invert(18%) sepia(14%) saturate(920%) hue-rotate(323deg) brightness(92%) contrast(88%);
}

.portfolio-menu-toggle {
  position: fixed;
  right: 26px;
  top: 24px;
  z-index: 1002;
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  background: rgba(69,46,41,.84);
  color: #fffaf8;
  text-transform: uppercase;
  letter-spacing: .12em;
  font: inherit;
  font-size: .68rem;
  cursor: pointer;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.portfolio-nav {
  position: fixed;
  top: 72px;
  right: 26px;
  z-index: 1001;
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  padding: 16px 18px;
  background: rgba(69,46,41,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.portfolio-nav.is-open { display: flex; }
.portfolio-nav a { color: #fffaf8 !important; }

.portfolio-reference-wall {
  column-count: 4;
  column-gap: 14px;
  padding: 0 14px 14px;
}

.portfolio-reference-wall:first-of-type {
  padding-top: 0;
}

.ref-tile {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 14px;
  overflow: hidden;
  break-inside: avoid;
  background: rgba(69,46,41,.08);
}

.ref-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
}

.ref-tile:hover img { transform: scale(1.018); }

.ref-ratio-tall { aspect-ratio: .70 / 1; }
.ref-ratio-portrait { aspect-ratio: .82 / 1; }
.ref-ratio-square { aspect-ratio: 1 / 1; }
.ref-ratio-landscape { aspect-ratio: 1.05 / 1; }

.ref-caption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
  font-size: clamp(.66rem, .75vw, .88rem);
  line-height: 1.28;
}

.ref-caption-light {
  color: #fffaf8;
  text-shadow: 0 1px 12px rgba(0,0,0,.45);
}

.ref-caption span::before {
  content: '·';
  margin-right: 7px;
}

.ref-pill {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(69,46,41,.58);
  color: #fffaf8;
  font-size: .64rem;
  line-height: 1;
  letter-spacing: .05em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.portfolio-reference-info {
  padding: 88px clamp(28px, 5vw, 78px) 96px;
  background: #f5cbd9;
  border-top: 1px solid rgba(69,46,41,.1);
  border-bottom: 1px solid rgba(69,46,41,.1);
}

.ref-info-kicker {
  margin-bottom: 30px;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ref-info-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .7fr);
  gap: clamp(40px, 8vw, 120px);
  align-items: end;
}

.ref-info-grid h1 {
  margin: 0;
  font-weight: 500;
  font-size: clamp(3.5rem, 7vw, 7.2rem);
  line-height: .88;
  letter-spacing: -.065em;
}

.ref-info-grid h1 em {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 500;
}

.ref-info-copy {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.ref-info-copy p {
  margin: 0;
  max-width: 46ch;
  font-size: 1.03rem;
  line-height: 1.65;
}

.ref-info-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.ref-info-meta span {
  border: 1px solid rgba(69,46,41,.2);
  border-radius: 999px;
  padding: 8px 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .62rem;
}

.portfolio-reference-wall-second {
  padding-top: 14px;
}

.portfolio-reference-end {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 34px 28px 48px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .72rem;
}

.portfolio-reference-end a { color: inherit; text-decoration: none; }

@media (max-width: 980px) {
  .portfolio-reference-wall { column-count: 3; }
  .ref-info-grid { grid-template-columns: 1fr; }
  .ref-info-copy { max-width: 620px; }
}

@media (max-width: 640px) {
  .portfolio-overlay-header { height: 72px; }
  .portfolio-overlay-logo { top: 17px; left: 16px; }
  .portfolio-overlay-logo img { width: 78px; }

  /* Floating menu echoes the reference without taking space away from the image wall. */
  .portfolio-menu-toggle {
    top: auto;
    right: 50%;
    bottom: 24px;
    transform: translateX(50%);
    width: 78px;
    height: 78px;
    padding: 0;
    display: grid;
    place-items: center;
    background: #452e29;
    border-radius: 50%;
    font-size: .58rem;
  }

  .portfolio-nav {
    top: auto;
    right: 50%;
    bottom: 112px;
    transform: translateX(50%);
    align-items: center;
    min-width: 160px;
  }

  .portfolio-reference-wall {
    column-count: 2;
    column-gap: 8px;
    padding: 0 8px 8px;
  }

  .ref-tile { margin-bottom: 8px; }
  .ref-ratio-tall { aspect-ratio: .72 / 1; }
  .ref-ratio-portrait { aspect-ratio: .82 / 1; }
  .ref-ratio-square { aspect-ratio: .94 / 1; }
  .ref-ratio-landscape { aspect-ratio: .9 / 1; }

  .ref-caption {
    left: 10px;
    right: 10px;
    bottom: 10px;
    gap: 4px;
    font-size: .54rem;
  }
  .ref-caption span::before { margin-right: 4px; }
  .ref-pill {
    top: 8px;
    right: 8px;
    padding: 6px 9px;
    font-size: .5rem;
  }

  .portfolio-reference-info {
    padding: 66px 20px 72px;
  }
  .ref-info-kicker { margin-bottom: 22px; font-size: .58rem; }
  .ref-info-grid { gap: 26px; }
  .ref-info-grid h1 { font-size: clamp(2.9rem, 13vw, 4.2rem); }
  .ref-info-copy p { font-size: .95rem; }
  .ref-info-meta { gap: 7px; }
  .ref-info-meta span { padding: 7px 9px; font-size: .52rem; }
  .portfolio-reference-wall-second { padding-top: 8px; }
  .portfolio-reference-end { padding: 26px 14px 108px; font-size: .56rem; }
}


/* v42 — give Selected Work more scale and breathing room on phones */
@media (max-width: 640px) {
  #work.section {
    padding-top: 112px !important;
    padding-bottom: 118px !important;
  }

  #work .section-head {
    margin-bottom: 42px !important;
  }

  #work .section-label {
    font-size: .74rem !important;
    margin-bottom: 24px !important;
  }

  #work .section-head h2 {
    font-size: clamp(3.55rem, 15.8vw, 4.7rem) !important;
    line-height: .93 !important;
  }

  #work .editorial-rail {
    gap: 18px !important;
    padding-right: 12vw !important;
  }

  #work .editorial-card {
    flex-basis: 86vw !important;
  }

  #work .editorial-rail > .editorial-card-link {
    flex: 0 0 86vw !important;
  }

  #work .editorial-caption {
    padding-top: 13px !important;
  }

  #work .editorial-caption h3 {
    font-size: .76rem !important;
  }

  #work .editorial-caption p {
    font-size: .66rem !important;
  }

  #work .rail-progress {
    margin-top: 24px !important;
  }
}


/* v43 — portfolio opening: real header bar + uncropped first gallery row */

/* Anchor the portfolio navigation in a proper SOLA header instead of floating it. */
.portfolio-overlay-header {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  height: 92px !important;
  padding: 0 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #452e29 !important;
  border-bottom: 1px solid rgba(245,203,217,.18) !important;
  pointer-events: auto !important;
  z-index: 1000 !important;
  box-sizing: border-box !important;
}

.portfolio-overlay-logo {
  position: static !important;
  display: block !important;
  z-index: 3 !important;
}

.portfolio-overlay-logo img {
  display: block !important;
  width: 126px !important;
  height: auto !important;
  filter: none !important;
}

.portfolio-menu-toggle {
  position: static !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
  padding: 10px 15px !important;
  border: 1px solid rgba(245,203,217,.28) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #f5cbd9 !important;
  font-size: .66rem !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.portfolio-nav {
  top: 76px !important;
  right: 28px !important;
  bottom: auto !important;
  transform: none !important;
}

/* The first image wall starts below the header. */
.portfolio-reference-wall:first-of-type {
  padding-top: 106px !important;
}

/*
  First opening wall: show every photograph at its natural 2:3 ratio.
  No faces/heads/arms are cropped by arbitrary tile ratios on page load.
*/
.portfolio-reference-wall:first-of-type .ref-tile {
  aspect-ratio: auto !important;
  overflow: visible !important;
}

.portfolio-reference-wall:first-of-type .ref-tile img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Ratio helper classes no longer force crops in the opening wall. */
.portfolio-reference-wall:first-of-type .ref-ratio-tall,
.portfolio-reference-wall:first-of-type .ref-ratio-portrait,
.portfolio-reference-wall:first-of-type .ref-ratio-square,
.portfolio-reference-wall:first-of-type .ref-ratio-landscape {
  aspect-ratio: auto !important;
}

/* Keep captions/pills visually attached to the natural image tile. */
.portfolio-reference-wall:first-of-type .ref-tile {
  position: relative !important;
}

/* Mobile version gets a compact proper header and natural first-wall images too. */
@media (max-width: 640px) {
  .portfolio-overlay-header {
    height: 78px !important;
    padding: 0 18px !important;
  }

  .portfolio-overlay-logo {
    position: static !important;
  }

  .portfolio-overlay-logo img {
    width: 92px !important;
  }

  .portfolio-menu-toggle {
    position: static !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    padding: 9px 13px !important;
    border-radius: 999px !important;
    font-size: .58rem !important;
  }

  .portfolio-nav {
    top: 68px !important;
    right: 18px !important;
    bottom: auto !important;
    transform: none !important;
    align-items: flex-end !important;
  }

  .portfolio-reference-wall:first-of-type {
    padding-top: 88px !important;
  }

  .portfolio-reference-wall:first-of-type .ref-tile img {
    height: auto !important;
    object-fit: contain !important;
  }
}


/* v44 — portfolio image lightbox */
.portfolio-lightbox-trigger {
  cursor: zoom-in !important;
}

.portfolio-lightbox {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 56px);
  background: rgba(40, 24, 21, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  opacity: 0;
  transition:
    opacity .32s cubic-bezier(.22,.61,.36,1),
    background-color .32s ease,
    backdrop-filter .32s ease,
    -webkit-backdrop-filter .32s ease;
}

.portfolio-lightbox.is-open {
  display: flex;
}

.portfolio-lightbox.is-visible {
  opacity: 1;
  background: rgba(40, 24, 21, .58);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.portfolio-lightbox-stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.portfolio-lightbox-image {
  display: block;
  width: auto;
  height: auto;
  max-width: min(88vw, 1200px);
  max-height: 88vh;
  object-fit: contain;
  box-shadow: 0 30px 90px rgba(34, 17, 15, .28);
  opacity: 0;
  transform: scale(.88) translateY(16px);
  transition:
    transform .38s cubic-bezier(.2,.8,.2,1),
    opacity .28s ease;
  will-change: transform, opacity;
}

.portfolio-lightbox.is-visible .portfolio-lightbox-image {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.portfolio-lightbox-close {
  position: absolute;
  top: 22px;
  right: 24px;
  z-index: 2;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 999px;
  background: rgba(69,46,41,.55);
  color: #fffaf8;
  font-family: Inter, sans-serif;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.portfolio-lightbox-close:hover {
  background: rgba(69,46,41,.78);
}

html.portfolio-lightbox-open,
body.portfolio-lightbox-open {
  overflow: hidden !important;
}

@media (max-width: 640px) {
  .portfolio-lightbox {
    padding: 62px 14px 24px;
  }

  .portfolio-lightbox-image {
    max-width: 94vw;
    max-height: 82vh;
  }

  .portfolio-lightbox-close {
    top: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-lightbox,
  .portfolio-lightbox-image {
    transition: none !important;
  }
}




/* v48 — clean aligned portfolio grid, clickable label chips, scrollable lightbox */

/* TRUE GRID: no masonry staggering at all. */
.portfolio-reference-wall {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  column-count: unset !important;
  column-gap: 14px !important;
  row-gap: 14px !important;
  gap: 14px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 14px !important;
}

.portfolio-reference-wall:first-of-type {
  padding-top: 106px !important;
}

.portfolio-reference-wall .ref-tile,
.portfolio-reference-wall:first-of-type .ref-tile,
.portfolio-reference-wall-second .ref-tile {
  width: 100% !important;
  margin: 0 !important;
  transform: none !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  break-inside: auto !important;
}

.portfolio-reference-wall .ref-tile img,
.portfolio-reference-wall:first-of-type .ref-tile img,
.portfolio-reference-wall-second .ref-tile img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
}

/* Pink info chips now match labels used on the images. */
.ref-info-image-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px !important;
}

.ref-info-image-links .ref-info-chip {
  appearance: none;
  border: 1px solid rgba(69,46,41,.22);
  border-radius: 999px;
  background: transparent;
  color: #452e29;
  padding: 10px 16px;
  font: inherit;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.ref-info-image-links .ref-info-chip:hover,
.ref-info-image-links .ref-info-chip:focus-visible {
  background: #452e29;
  color: #f5cbd9;
  border-color: #452e29;
  transform: translateY(-1px);
}

/* Scrollable / swipeable expanded-image viewer. */
.portfolio-lightbox {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: none;
  background: rgba(35,20,18,.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  transition: opacity .28s ease;
}

.portfolio-lightbox.is-open {
  display: block;
}

.portfolio-lightbox.is-visible {
  opacity: 1;
}

.portfolio-lightbox-track {
  position: absolute;
  inset: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(34vw, 570px);
  gap: 7vw;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-inline: max(24px, calc((100vw - min(34vw, 570px)) / 2));
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.portfolio-lightbox-track::-webkit-scrollbar {
  display: none;
}

.portfolio-lightbox-slide {
  margin: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  transition: transform .34s cubic-bezier(.2,.8,.2,1), opacity .28s ease;
  transform: scale(.92);
  opacity: .5;
}

.portfolio-lightbox-slide img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 86vh;
  object-fit: contain;
  filter: blur(8px) brightness(.55) saturate(.72);
  transition: filter .34s ease, transform .34s ease, opacity .28s ease;
  box-shadow: 0 24px 70px rgba(22,10,9,.18);
}

.portfolio-lightbox-slide.is-active {
  transform: scale(1);
  opacity: 1;
}

.portfolio-lightbox-slide.is-active img {
  filter: none;
}

.portfolio-lightbox-close {
  position: fixed !important;
  top: 20px !important;
  right: 22px !important;
  z-index: 5100 !important;
}

.portfolio-lightbox-hint {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 5100;
  transform: translateX(-50%);
  color: rgba(255,250,248,.72);
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  pointer-events: none;
}

html.portfolio-lightbox-open,
body.portfolio-lightbox-open {
  overflow: hidden !important;
}

@media (max-width: 980px) {
  .portfolio-reference-wall {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .portfolio-lightbox-track {
    grid-auto-columns: 52vw;
    gap: 9vw;
    padding-inline: 24vw;
  }
}

@media (max-width: 640px) {
  .portfolio-reference-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding-bottom: 8px !important;
  }

  .portfolio-reference-wall:first-of-type {
    padding-top: 88px !important;
  }

  .ref-info-image-links {
    gap: 7px !important;
  }

  .ref-info-image-links .ref-info-chip {
    padding: 8px 11px;
    font-size: .52rem;
  }

  .portfolio-lightbox-track {
    grid-auto-columns: 78vw;
    gap: 16px;
    padding-inline: 11vw;
  }

  .portfolio-lightbox-slide img {
    max-height: 80vh;
  }

  .portfolio-lightbox-close {
    top: 15px !important;
    right: 15px !important;
  }

  .portfolio-lightbox-hint {
    bottom: 16px;
    font-size: .52rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-lightbox,
  .portfolio-lightbox-track,
  .portfolio-lightbox-slide,
  .portfolio-lightbox-slide img,
  .ref-info-image-links .ref-info-chip {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}


/* v49 — WHO WE ARE vision copy */
.manifesto h2 em {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 500;
  color: #7d5f68;
}

.manifesto-focus {
  margin-top: 26px;
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(69,46,41,.55);
}

@media (min-width: 901px) {
  .manifesto-focus {
    text-align: center;
  }
}

@media (max-width: 640px) {
  .manifesto-focus {
    margin-top: 24px;
    font-size: .58rem;
    line-height: 1.6;
  }
}


/* v50 — ABOUT SOLA vision */
.about-kicker {
  margin: 0 0 18px;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 1.08rem;
  color: #7d5f68;
}

.about-right p + p {
  margin-top: 20px;
}

.founder-editorial-about .founder-editorial-copy {
  justify-content: flex-start;
  gap: 16px;
}

.founder-editorial-about .founder-editorial-copy > p {
  margin: 0;
  max-width: 360px;
}

.founder-detail {
  display: block;
  max-width: 440px;
  font-family: Inter, sans-serif;
  font-size: .78rem;
  line-height: 1.65;
  letter-spacing: 0;
  color: rgba(69,46,41,.68);
}

@media (max-width: 640px) {
  .about-kicker {
    font-size: 1rem;
    margin-bottom: 16px;
  }

  .founder-detail {
    font-size: .74rem;
    line-height: 1.6;
  }
}


/* v51 — Selected Work + Clients */
.work-context {
  max-width: 560px;
  margin-top: 22px;
  font-size: .9rem;
  line-height: 1.55;
  color: rgba(69,46,41,.68);
}

.client-cover {
  position: relative;
  overflow: hidden;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  isolation: isolate;
}

.client-cover::before,
.client-cover::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.client-cover-kicker {
  position: absolute;
  top: 28px;
  left: 28px;
  font-size: .55rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  opacity: .72;
}

.client-cover-title {
  position: relative;
  z-index: 2;
  max-width: 82%;
  font-size: clamp(2rem, 3.3vw, 3.9rem);
  line-height: .9;
  letter-spacing: -.06em;
  font-weight: 500;
}

.client-cover-mark {
  position: absolute;
  right: -8px;
  bottom: -20px;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: clamp(7rem, 12vw, 13rem);
  line-height: .75;
  opacity: .08;
}

.client-cover-tnc {
  background: #452e29;
  color: #f5cbd9;
}

.client-cover-tnc::before {
  inset: 0;
  background-image:
    linear-gradient(rgba(245,203,217,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,203,217,.08) 1px, transparent 1px);
  background-size: 54px 54px;
}

.client-cover-tnc::after {
  width: 52%;
  aspect-ratio: 1;
  border: 1px solid rgba(245,203,217,.38);
  border-radius: 50%;
  right: -22%;
  top: 14%;
}

.client-cover-lance {
  background: #f3e9e4;
  color: #452e29;
}

.client-cover-lance::before {
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #f5cbd9;
  right: -23%;
  top: -10%;
  opacity: .92;
}

.client-cover-lance::after {
  width: 38%;
  aspect-ratio: 1;
  border: 1px solid rgba(69,46,41,.28);
  border-radius: 50%;
  left: -8%;
  bottom: 13%;
}

@media (max-width: 640px) {
  .work-context {
    margin-top: 20px;
    max-width: 34ch;
    font-size: .82rem;
  }

  .client-cover {
    padding: 20px;
  }

  .client-cover-kicker {
    top: 20px;
    left: 20px;
    font-size: .48rem;
  }

  .client-cover-title {
    font-size: clamp(2.2rem, 10.5vw, 3.5rem);
  }
}


/* v52 — WHO WE ARE subtle visual refinement */
.manifesto-copy {
  position: relative;
}

@media (min-width: 901px) {
  .manifesto-copy {
    max-width: 940px !important;
  }

  .manifesto-copy .eyebrow {
    margin-bottom: 24px !important;
  }

  .manifesto h2 {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    line-height: .9 !important;
  }

  .manifesto .body-copy {
    max-width: 700px !important;
    margin-top: 42px !important;
    line-height: 1.68 !important;
  }

  .manifesto-focus {
    margin-top: 30px !important;
    padding-top: 18px;
    position: relative;
  }

  .manifesto-focus::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 46px;
    height: 1px;
    transform: translateX(-50%);
    background: rgba(125,95,104,.38);
  }
}

@media (max-width: 640px) {
  .manifesto h2 {
    letter-spacing: -.055em !important;
  }

  .manifesto .body-copy {
    margin-top: 30px !important;
  }

  .manifesto-focus {
    padding-top: 16px;
    position: relative;
  }

  .manifesto-focus::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 38px;
    height: 1px;
    background: rgba(125,95,104,.38);
  }
}

/* v52 — hide the browser scrollbar while preserving normal scrolling */
html {
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}


/* v53 — cinematic SOLA boot / logo dock animation */
.site-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #452e29;
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
}

.site-splash.is-visible {
  opacity: 1;
}

.site-splash.is-exiting {
  opacity: 0;
  transition-delay: .30s;
  transition-duration: .28s;
}

.site-splash-logo {
  display: block;
  width: min(50vw, 760px);
  max-width: calc(100vw - 72px);
  height: auto;
  opacity: 0;
  transform: scale(.94);
  transform-origin: center center;
  will-change: transform, opacity;
  transition:
    opacity .26s ease,
    transform .62s cubic-bezier(.22,.75,.22,1);
}

.site-splash-logo.is-visible {
  opacity: 1;
  transform: scale(1);
}

.site-splash-logo.is-docking {
  transform:
    translate3d(var(--splash-x), var(--splash-y), 0)
    scale(var(--splash-scale));
}

html.splash-active {
  overflow: hidden !important;
}

html.splash-active body > .site-header,
html.splash-active body > main {
  opacity: 0;
}

html.splash-finished body > .site-header,
html.splash-finished body > main {
  animation: solaPageReveal .46s cubic-bezier(.22,.75,.22,1) both;
}

@keyframes solaPageReveal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 640px) {
  .site-splash-logo {
    width: min(64vw, 430px);
    max-width: calc(100vw - 48px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-splash,
  .site-splash-logo,
  html.splash-finished body > .site-header,
  html.splash-finished body > main {
    transition: none !important;
    animation: none !important;
  }
}


/* v54 — seamless splash handoff / eliminate white frame */

/* Keep the initial document itself SOLA brown so even a browser paint between
   layers can never expose a white canvas. */
html,
body {
  background-color: #452e29;
}

/* Normal light sections provide their own backgrounds already. */
main {
  background: #f3efe9;
}

.hero {
  background-color: #452e29;
}

/* During boot, the real page is hidden but its canvas stays brown. */
html.splash-active body > .site-header,
html.splash-active body > main {
  opacity: 0 !important;
  visibility: visible !important;
}

/* Reveal the actual page beneath the still-visible splash with no transform,
   which prevents a frame exposing the body background. */
html.splash-page-ready body > .site-header,
html.splash-page-ready body > main,
html.splash-finished body > .site-header,
html.splash-finished body > main {
  opacity: 1 !important;
  transform: none !important;
}

/* Override the previous page reveal animation; the splash itself now provides
   all of the motion, so the underlying page stays completely stable. */
html.splash-finished body > .site-header,
html.splash-finished body > main {
  animation: none !important;
}

.site-splash {
  background: #452e29 !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

/* Fade only the overlay opacity after the homepage has already painted. */
.site-splash.is-exiting {
  opacity: 0 !important;
  transition: opacity .28s ease !important;
  transition-delay: 0s !important;
}

/* v55 — real client image cards */
#lanceCaseCard .editorial-frame img{object-position:center 18%;}
.portfolio-reference-end a{text-decoration:none;}
@media(max-width:640px){#lanceCaseCard .editorial-frame img{object-position:center 16%;}}


/* v56 — WHO WE ARE left-side accent composition */
.manifesto {
  position: relative;
  overflow: hidden;
}

.manifesto-accent {
  position: absolute;
  left: 4vw;
  top: 50%;
  width: min(30vw, 430px);
  height: 62%;
  transform: translateY(-48%);
  pointer-events: none;
}

.manifesto-accent-disc {
  position: absolute;
  left: 9%;
  top: 22%;
  width: clamp(100px, 11vw, 190px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #f5cbd9;
  opacity: .9;
}

.manifesto-accent-ring {
  position: absolute;
  left: 34%;
  top: 4%;
  width: clamp(140px, 15vw, 250px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(69,46,41,.28);
}

.manifesto-accent-line {
  position: absolute;
  left: 0;
  bottom: 18%;
  width: 72%;
  height: 1px;
  background: rgba(69,46,41,.24);
}

.manifesto-accent-word {
  position: absolute;
  left: 3%;
  bottom: 6%;
  font-family: Inter, sans-serif;
  font-size: clamp(2.6rem, 5.4vw, 6.6rem);
  font-weight: 600;
  letter-spacing: -.06em;
  color: #452e29;
  opacity: .055;
}

@media (min-width: 901px) {
  .manifesto {
    min-height: 760px;
  }

  .manifesto .section-label {
    position: relative;
    z-index: 2;
  }

  .manifesto-copy {
    position: relative;
    z-index: 2;
  }
}

@media (max-width: 900px) {
  .manifesto-accent {
    display: none;
  }
}

/* v56 — ensure Lance's first portfolio image shows naturally */
.portfolio-reference-wall:first-of-type .ref-tile:first-child img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
}


/* v57 — hero meta color split */
.hero-meta .hero-meta-pink {
  color: #f5cbd9 !important;
  opacity: 1 !important;
}

.hero-meta .hero-meta-brown {
  color: #452e29 !important;
  opacity: 1 !important;
}


/* v58 — prevent grid row stretching so first Lance image shows at full natural height */
.portfolio-reference-wall,
.portfolio-reference-wall-second {
  align-items: start !important;
}

.portfolio-reference-wall .ref-tile,
.portfolio-reference-wall:first-of-type .ref-tile,
.portfolio-reference-wall-second .ref-tile {
  align-self: start !important;
}


/* v59 — mobile hero labels all visible */
@media (max-width: 640px) {
  .hero-meta {
    left: 20px !important;
    right: 20px !important;
    bottom: 18px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    align-items: center !important;
    width: auto !important;
  }

  .hero-meta span {
    min-width: 0 !important;
    text-align: center !important;
    font-size: .52rem !important;
    letter-spacing: .11em !important;
    white-space: nowrap !important;
  }

  .hero-meta span:first-child {
    text-align: left !important;
  }

  .hero-meta span:last-child {
    text-align: right !important;
  }
}

/* v59 — obvious swipe cue for Selected Work on phones */
.mobile-work-swipe-cue {
  display: none;
}

@media (max-width: 640px) {
  .mobile-work-swipe-cue {
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    color: #452e29;
    font-size: .56rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .72;
  }

  .mobile-work-swipe-cue strong {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(69,46,41,.28);
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    animation: solaSwipeCue 1.8s ease-in-out infinite;
  }

  /* Keep desktop rail arrows hidden on mobile; this cue is cleaner. */
  #work .rail-arrow {
    display: none !important;
  }
}

@keyframes solaSwipeCue {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-work-swipe-cue strong {
    animation: none !important;
  }
}


/* v61 — mobile hero labels: guarantee ATHLETES / LEAGUES / TOURS / CAMPAIGNS all show */
@media (max-width: 640px) {
  .hero-meta {
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
    bottom: 18px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    align-items: center !important;
  }

  .hero-meta span {
    display: block !important;
    min-width: 0 !important;
    max-width: none !important;
    font-size: .43rem !important;
    letter-spacing: .055em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
  }

  .hero-meta span:first-child {
    text-align: left !important;
  }

  .hero-meta span:last-child {
    text-align: right !important;
  }
}

/* v61 — replace text swipe cue with a compact circle arrow */
.mobile-work-swipe-cue {
  display: none !important;
}

.mobile-work-arrow-cue {
  display: none;
}

@media (max-width: 640px) {
  .mobile-work-arrow-cue {
    display: flex !important;
    justify-content: flex-end;
    margin-top: -54px;
    margin-right: 10px;
    margin-bottom: 18px;
    position: relative;
    z-index: 6;
    pointer-events: none;
  }

  .mobile-work-arrow-cue span {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #452e29;
    color: #f5cbd9;
    font-size: 1.05rem;
    line-height: 1;
    box-shadow: 0 5px 16px rgba(69,46,41,.14);
    animation: solaArrowNudge 1.8s ease-in-out infinite;
  }

  #work .rail-arrow {
    display: none !important;
  }
}

@keyframes solaArrowNudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-work-arrow-cue span {
    animation: none !important;
  }
}


/* v62 — smaller mobile Selected Work arrow, positioned in right-side pink space */
@media (max-width: 640px) {
  #work .rail-shell {
    position: relative !important;
    overflow: visible !important;
  }

  .mobile-work-arrow-cue {
    position: absolute !important;
    top: 46% !important;
    right: 6px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 7;
    pointer-events: none;
  }

  .mobile-work-arrow-cue span {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    background: #452e29 !important;
    color: #f5cbd9 !important;
    font-size: .72rem !important;
    box-shadow: none !important;
  }

  /* Leave a touch more breathing room at the right edge of the rail
     so the cue sits in pink space instead of over the image. */
  #work .editorial-rail {
    padding-right: 14vw !important;
  }
}


/* v63 — The Next Chapter card uses uploaded logo image */
#tncCaseCard .editorial-frame {
  background: #e6c1d0;
}
#tncCaseCard .editorial-frame img {
  object-fit: contain !important;
  object-position: center center !important;
  padding: clamp(18px, 4vw, 44px);
  background: #e6c1d0;
}


/* v65 — force the new TNC artwork to fill card cleanly */
#tncCaseCard .editorial-frame {
  background: #e6c1d0 !important;
  padding: 0 !important;
}
#tncCaseCard .editorial-frame img {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: #e6c1d0 !important;
}

/* v65 — Graphic Design Selected Work card */
.graphic-design-cover {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  overflow: hidden;
  background: #f5cbd9 !important;
  color: #452e29;
}
.graphic-design-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(69,46,41,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(69,46,41,.08) 1px, transparent 1px);
  background-size: 40px 40px;
}
.graphic-design-cover::after {
  content: "";
  position: absolute;
  width: 68%;
  aspect-ratio: 1;
  border: 1px solid rgba(69,46,41,.35);
  border-radius: 50%;
  top: 8%;
  right: -23%;
}
.graphic-design-kicker {
  position: absolute;
  top: 28px;
  left: 28px;
  z-index: 2;
  font-size: .55rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.graphic-design-title {
  position: relative;
  z-index: 2;
  font-size: clamp(2.2rem, 3.8vw, 4.3rem);
  line-height: .88;
  letter-spacing: -.065em;
  font-weight: 500;
}
.graphic-design-ghost {
  position: absolute;
  right: -9%;
  bottom: -7%;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: clamp(9rem, 16vw, 17rem);
  line-height: .7;
  opacity: .07;
}

/* v65 — Graphic Design portfolio scaffold */
.design-portfolio-body { background:#f5cbd9; }
.design-portfolio-page { background:#f5cbd9; color:#452e29; min-height:100vh; }
.design-portfolio-hero {
  position:relative;
  min-height:100vh;
  padding:150px clamp(28px,6vw,92px) 70px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border-bottom:1px solid rgba(69,46,41,.13);
}
.design-hero-grid {
  position:absolute; inset:92px 0 0;
  opacity:.12;
  background-image:linear-gradient(rgba(69,46,41,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(69,46,41,.18) 1px,transparent 1px);
  background-size:72px 72px;
  pointer-events:none;
}
.design-hero-ring { position:absolute; border:1px solid rgba(69,46,41,.26); border-radius:50%; pointer-events:none; }
.design-hero-ring-a { width:min(34vw,520px); aspect-ratio:1; right:-8%; top:18%; }
.design-hero-ring-b { width:min(22vw,330px); aspect-ratio:1; left:7%; top:24%; opacity:.55; }
.design-hero-kicker { position:relative; z-index:2; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; }
.design-hero-copy { position:relative; z-index:2; max-width:1100px; margin-left:auto; text-align:right; }
.design-hero-copy h1 { margin:0; font-size:clamp(4.4rem,9vw,9.5rem); line-height:.83; letter-spacing:-.07em; font-weight:500; }
.design-hero-copy h1 em { font-family:"Playfair Display",serif; font-style:italic; font-weight:500; color:#7d5f68; }
.design-hero-copy p { max-width:620px; margin:38px 0 0 auto; font-size:1rem; line-height:1.7; }
.design-hero-tags { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:9px; margin-top:28px; }
.design-hero-tags span { border:1px solid rgba(69,46,41,.22); border-radius:999px; padding:8px 12px; font-size:.61rem; letter-spacing:.09em; }
.design-work-coming { padding:90px clamp(28px,6vw,92px) 110px; background:#f3efe9; }
.design-work-label { font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:46px; }
.design-work-coming-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:end; }
.design-work-coming h2 { margin:0; font-size:clamp(3.4rem,7vw,7.2rem); line-height:.88; letter-spacing:-.06em; font-weight:500; }
.design-work-coming h2 em { font-family:"Playfair Display",serif; font-style:italic; color:#7d5f68; }
.design-work-coming-grid p { max-width:520px; margin:0; line-height:1.7; }
@media(max-width:640px){
  .graphic-design-cover{padding:20px}.graphic-design-kicker{top:20px;left:20px}.graphic-design-title{font-size:2.5rem}
  .design-portfolio-hero{min-height:82vh;padding:116px 22px 54px}.design-hero-grid{inset:78px 0 0;background-size:42px 42px}
  .design-hero-ring-a{width:65vw;right:-26%;top:16%}.design-hero-ring-b{width:46vw;left:-18%;top:31%}
  .design-hero-copy{text-align:left;margin:0}.design-hero-copy h1{font-size:clamp(3.8rem,16vw,5.8rem)}.design-hero-copy p{margin:28px 0 0;max-width:34ch}
  .design-hero-tags{justify-content:flex-start}.design-work-coming{padding:72px 22px 88px}.design-work-coming-grid{grid-template-columns:1fr;gap:30px}
}


/* v67 — fixed standalone Graphic Design feature */
.graphic-design-feature {
  position: relative;
  overflow: hidden;
  background: #452e29;
  color: #f5cbd9;
  border-top: 1px solid rgba(245,203,217,.16);
  border-bottom: 1px solid rgba(245,203,217,.16);
}

.graphic-design-feature-inner {
  max-width: 1600px;
  min-height: 390px;
  margin: 0 auto;
  padding: 58px clamp(34px,5vw,82px);
  display: grid;
  grid-template-columns: minmax(0,1.3fr) minmax(260px,.58fr);
  gap: clamp(42px,6vw,94px);
  align-items: center;
}

.graphic-design-feature .section-label {
  color: rgba(245,203,217,.66) !important;
  margin: 0 0 20px;
}

.graphic-design-feature-copy h2 {
  margin: 0 0 18px;
  max-width: 760px;
  color: #fffaf8;
  font-size: clamp(2.7rem,4.8vw,5.4rem);
  line-height: .92;
  letter-spacing: -.055em;
  font-weight: 500;
}

.graphic-design-feature-copy h2 em {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 500;
  color: #f5cbd9;
}

.graphic-design-feature-copy > p {
  max-width: 670px;
  margin: 0;
  color: rgba(255,250,248,.72);
  font-size: .93rem;
  line-height: 1.62;
}

.graphic-design-feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 26px;
}

.graphic-design-feature-tags span {
  border: 1px solid rgba(245,203,217,.30);
  border-radius: 999px;
  padding: 8px 11px;
  color: #f5cbd9;
  font-size: .55rem;
  line-height: 1;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.graphic-design-feature-button {
  display: inline-flex !important;
  width: auto !important;
  min-height: 46px !important;
  padding: 13px 18px !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #f5cbd9 !important;
  border: 1px solid #f5cbd9 !important;
  color: #452e29 !important;
  text-decoration: none !important;
  font-size: .66rem !important;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.graphic-design-feature-art {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 4.4;
  max-height: 285px;
  min-height: 250px;
  overflow: hidden;
  border: 1px solid rgba(245,203,217,.22);
  background-color: rgba(245,203,217,.025);
  background-image:
    linear-gradient(rgba(245,203,217,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,203,217,.07) 1px, transparent 1px);
  background-size: 34px 34px;
}

.gd-feature-number {
  position: absolute;
  left: 20px;
  top: 18px;
  font-size: .54rem;
  letter-spacing: .17em;
  color: rgba(245,203,217,.75);
}

.gd-feature-ring {
  position: absolute;
  border: 1px solid rgba(245,203,217,.36);
  border-radius: 50%;
  aspect-ratio: 1;
}

.gd-feature-ring-one {
  width: 62%;
  right: -14%;
  top: -14%;
}

.gd-feature-ring-two {
  width: 48%;
  left: -16%;
  bottom: -24%;
  opacity: .58;
}

.gd-feature-line {
  position: absolute;
  left: 10%;
  top: 55%;
  width: 43%;
  height: 1px;
  background: rgba(245,203,217,.28);
}

.gd-feature-word {
  position: absolute;
  right: 3%;
  bottom: -3%;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: clamp(4rem,7vw,7rem);
  line-height: .8;
  color: #f5cbd9;
  opacity: .11;
}

/* Graphic Design detail page */
.design-approach-section {
  padding: 84px clamp(28px,5vw,78px);
  background: #f3efe9;
  color: #452e29;
}
.design-section-label { font-size:.64rem; letter-spacing:.16em; margin-bottom:34px; }
.design-approach-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.design-approach-grid article { padding:28px; min-height:260px; background:#f5cbd9; border:1px solid rgba(69,46,41,.12); }
.design-approach-grid article span { font-size:.58rem; letter-spacing:.14em; }
.design-approach-grid h2 { font-size:1.55rem; line-height:1.05; margin:54px 0 16px; font-weight:500; letter-spacing:-.035em; }
.design-approach-grid p { margin:0; font-size:.86rem; line-height:1.6; color:rgba(69,46,41,.72); }
.design-work-explainer { max-width:560px; }
.design-work-note { margin-top:18px !important; font-size:.78rem !important; opacity:.58; }
.design-category-wall { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:54px; }
.design-category-card { min-height:360px; padding:22px; position:relative; overflow:hidden; background:#452e29; color:#f5cbd9; display:flex; flex-direction:column; justify-content:flex-end; }
.design-category-card::before { content:""; position:absolute; width:72%; aspect-ratio:1; border:1px solid rgba(245,203,217,.25); border-radius:50%; right:-28%; top:8%; }
.design-category-card > span { position:absolute; top:20px; left:20px; font-size:.58rem; letter-spacing:.12em; }
.design-category-card strong { font-size:clamp(1.5rem,2.4vw,2.6rem); line-height:.9; letter-spacing:-.04em; font-weight:500; }
.design-category-card small { margin-top:16px; font-size:.54rem; letter-spacing:.14em; opacity:.6; }

@media (max-width: 900px) {
  .graphic-design-feature-inner {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 30px;
  }
  .graphic-design-feature-art {
    max-width: 430px;
    min-height: 220px;
  }
  .design-approach-grid { grid-template-columns:1fr; }
  .design-category-wall { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 640px) {
  .graphic-design-feature-inner {
    padding: 54px 22px 58px;
    gap: 28px;
  }
  .graphic-design-feature-copy h2 {
    font-size: clamp(2.7rem, 12vw, 3.8rem);
    max-width: 10ch;
  }
  .graphic-design-feature-copy > p {
    font-size: .86rem;
  }
  .graphic-design-feature-tags {
    margin: 20px 0 24px;
  }
  .graphic-design-feature-art {
    min-height: 175px;
    max-height: 190px;
  }
  .graphic-design-feature-button {
    min-height: 44px !important;
    padding: 12px 15px !important;
  }
  .design-approach-section { padding:64px 22px; }
  .design-category-wall { grid-template-columns:1fr 1fr; gap:8px; }
  .design-category-card { min-height:235px; padding:16px; }
}


/* v68 — real Graphic Design portfolio */
.design-portfolio-hero-real {
  min-height: 72vh;
}

.design-featured-work,
.design-gallery-section,
.design-philosophy {
  padding: clamp(72px, 8vw, 130px) clamp(22px, 5vw, 76px);
}

.design-featured-work {
  background: #f5cbd9;
  color: #452e29;
}

.design-featured-intro {
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(280px,.65fr);
  gap: clamp(36px,8vw,120px);
  align-items: end;
  margin: 28px 0 52px;
}

.design-featured-intro h2,
.design-gallery-heading h2,
.design-philosophy h2 {
  margin: 0;
  font-weight: 500;
  letter-spacing: -.055em;
}

.design-featured-intro h2 {
  font-size: clamp(3.2rem,6vw,6.8rem);
  line-height: .9;
}

.design-featured-intro h2 em,
.design-gallery-heading h2 em,
.design-philosophy h2 em {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 500;
}

.design-featured-intro p {
  margin: 0;
  max-width: 48ch;
  font-size: 1rem;
  line-height: 1.65;
}

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

.design-feature-card {
  margin: 0;
  background: #452e29;
  position: relative;
  overflow: hidden;
  min-width: 0;
}

.design-feature-card img {
  display: block;
  width: 100%;
  height: auto;
  cursor: zoom-in;
  transition: transform .4s ease;
}

.design-feature-card:hover img {
  transform: scale(1.012);
}

.design-feature-card.design-feature-wide {
  grid-column: span 2;
}

.design-feature-meta {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  padding: 14px 16px 17px;
  color: #f5cbd9;
}

.design-feature-meta > span {
  font-size: .56rem;
  letter-spacing: .13em;
  opacity: .7;
  padding-top: 3px;
}

.design-feature-meta div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.design-feature-meta strong {
  font-size: .85rem;
  font-weight: 500;
}

.design-feature-meta small {
  font-size: .62rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .7;
}

.design-gallery-section {
  background: #f3efe9;
  color: #452e29;
}

.design-gallery-tnc {
  border-top: 1px solid rgba(69,46,41,.12);
}

.design-gallery-misc {
  background: #452e29;
  color: #f5cbd9;
}

.design-gallery-heading {
  display: grid;
  grid-template-columns: .55fr 1.2fr .8fr;
  gap: 30px;
  align-items: end;
  margin-bottom: 42px;
}

.design-gallery-heading > span,
.design-philosophy > span {
  align-self: start;
  font-size: .62rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: .66;
}

.design-gallery-heading h2 {
  font-size: clamp(2.8rem,5vw,5.8rem);
  line-height: .92;
}

.design-gallery-heading p {
  margin: 0;
  max-width: 42ch;
  line-height: 1.6;
  font-size: .9rem;
}

.design-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 12px;
}

.design-gallery-card {
  margin: 0;
  min-width: 0;
}

.design-gallery-card img {
  display: block;
  width: 100%;
  height: auto;
  cursor: zoom-in;
}

.design-gallery-card figcaption {
  padding: 9px 2px 18px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: .62rem;
}

.design-gallery-card figcaption strong {
  font-weight: 500;
}

.design-gallery-card figcaption span {
  opacity: .55;
  text-align: right;
}

.design-philosophy {
  background: #f5cbd9;
  color: #452e29;
  display: grid;
  grid-template-columns: .45fr 1.3fr .8fr;
  gap: 34px;
  align-items: start;
}

.design-philosophy h2 {
  font-size: clamp(2.7rem,5vw,5.6rem);
  line-height: .93;
}

.design-philosophy p {
  margin: 0;
  max-width: 44ch;
  line-height: 1.7;
}

/* Home Graphic Design section preview uses real work */
.graphic-design-preview-stack {
  position: relative;
  width: 100%;
  min-height: 330px;
}

.graphic-design-preview-stack img {
  position: absolute;
  width: 43%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border: 4px solid #452e29;
  box-shadow: 0 14px 38px rgba(69,46,41,.15);
}

.graphic-design-preview-stack img:nth-child(1) {
  left: 5%;
  top: 4%;
  transform: rotate(-4deg);
}

.graphic-design-preview-stack img:nth-child(2) {
  left: 31%;
  top: 12%;
  z-index: 2;
}

.graphic-design-preview-stack img:nth-child(3) {
  right: 2%;
  top: 2%;
  transform: rotate(4deg);
}

@media (max-width: 900px) {
  .design-featured-intro,
  .design-gallery-heading,
  .design-philosophy {
    grid-template-columns: 1fr;
  }

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

  .design-feature-card.design-feature-wide {
    grid-column: span 1;
  }

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

@media (max-width: 640px) {
  .design-portfolio-hero-real {
    min-height: auto;
  }

  .design-featured-work,
  .design-gallery-section,
  .design-philosophy {
    padding: 64px 18px;
  }

  .design-featured-intro {
    margin: 22px 0 32px;
    gap: 20px;
  }

  .design-featured-intro h2 {
    font-size: 3.25rem;
  }

  .design-feature-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .design-feature-meta {
    padding: 10px 8px 12px;
    gap: 7px;
  }

  .design-feature-meta strong {
    font-size: .68rem;
  }

  .design-feature-meta small {
    font-size: .48rem;
  }

  .design-gallery-heading {
    margin-bottom: 26px;
    gap: 12px;
  }

  .design-gallery-heading h2 {
    font-size: 3rem;
  }

  .design-gallery-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
  }

  .design-gallery-card figcaption {
    flex-direction: column;
    gap: 3px;
    font-size: .53rem;
    padding-bottom: 12px;
  }

  .design-gallery-card figcaption span {
    text-align: left;
  }

  .design-philosophy {
    gap: 18px;
  }

  .design-philosophy h2 {
    font-size: 3rem;
  }

  .graphic-design-preview-stack {
    min-height: 220px;
  }
}


/* v69 — more restrained Featured 5 graphic-design layout */
@media (min-width: 901px) {
  .design-featured-intro {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
  }

  .design-feature-grid {
    width: min(100%, 1180px);
    margin-left: auto;
    margin-right: auto;
    gap: 16px;
  }
}

/* v69 — cinematic internal page transitions */
.page-transition-layer {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  pointer-events: none;
  background: #452e29;
  transform: translate3d(100%,0,0);
  will-change: transform;
  overflow: hidden;
}

.page-transition-layer::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 7px;
  background: #f5cbd9;
}

.page-transition-layer::after {
  content: "SOLA";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  color: #f5cbd9;
  font-family: Inter, sans-serif;
  font-size: clamp(2.4rem, 6vw, 7rem);
  font-weight: 600;
  letter-spacing: -.055em;
  opacity: .12;
}

.page-transition-layer.is-covering {
  transform: translate3d(0,0,0);
  transition: transform .46s cubic-bezier(.76,0,.24,1);
}

html.page-transition-pending .page-transition-layer {
  transform: translate3d(0,0,0);
}

html.page-transition-reveal .page-transition-layer {
  transform: translate3d(-100%,0,0);
  transition: transform .56s cubic-bezier(.76,0,.24,1);
}

html.page-transition-pending body {
  background: #452e29 !important;
}

@media (max-width: 640px) {
  .page-transition-layer::before { width: 4px; }
  .page-transition-layer::after { font-size: 3.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .page-transition-layer,
  .page-transition-layer.is-covering,
  html.page-transition-reveal .page-transition-layer {
    transition: none !important;
  }
}

/* v70 patch — Featured Five fills the viewport before the next section */
.design-featured-work {
  min-height: 100vh !important;
  width: 100% !important;
}

@media (min-width: 901px) {
  .design-featured-work {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

@media (max-width: 900px) {
  .design-featured-work {
    min-height: 100svh !important;
  }
}


/* =========================================================
   v75 — clean rebuild: featured six + visible split viewer
   ========================================================= */

/* Featured section itself is full width, while intro copy remains contained. */
.design-featured-work {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  overflow-x: clip !important;
}

.design-featured-work .design-feature-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;

  /* Break out of the section padding and use nearly the full viewport. */
  width: calc(100vw - 24px) !important;
  max-width: none !important;
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
}

.design-featured-work .design-feature-card,
.design-featured-work .design-feature-card.design-feature-wide {
  grid-column: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  cursor: zoom-in !important;
}

.design-featured-work .design-feature-card img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
}

/* New featured viewer: completely separate from the normal gallery viewer. */
.sola-feature-viewer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9000000 !important;
  box-sizing: border-box !important;
  padding: 34px 54px !important;

  display: none !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;

  background: rgba(38, 22, 19, .72) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .24s ease !important;
}

.sola-feature-viewer[aria-hidden="false"] {
  display: grid !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.sola-feature-viewer[aria-hidden="false"].is-active {
  opacity: 1 !important;
}

.sola-feature-stage {
  width: min(92vw, 1500px) !important;
  height: min(86vh, 920px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr) !important;
  gap: clamp(26px, 4vw, 66px) !important;
  align-items: center !important;

  opacity: 0 !important;
  transform: translateY(16px) scale(.975) !important;
  transition: opacity .32s ease, transform .38s cubic-bezier(.2,.8,.2,1) !important;
}

.sola-feature-viewer.is-active .sola-feature-stage {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

.sola-feature-art {
  height: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.sola-feature-art img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 84vh !important;
  object-fit: contain !important;
  box-shadow: 0 30px 90px rgba(20,8,7,.3) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity .16s ease, transform .16s ease !important;
}

.sola-feature-copy {
  background: #f5cbd9 !important;
  color: #452e29 !important;
  min-height: 370px !important;
  box-sizing: border-box !important;
  padding: clamp(30px, 3.5vw, 56px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  box-shadow: 0 24px 70px rgba(20,8,7,.16) !important;
  transition: opacity .16s ease, transform .16s ease !important;
}

.sola-feature-count {
  margin-bottom: 28px !important;
  font-size: .58rem !important;
  letter-spacing: .17em !important;
  text-transform: uppercase !important;
  opacity: .58 !important;
}

.sola-feature-copy h2 {
  margin: 0 !important;
  color: #452e29 !important;
  font-size: clamp(2.25rem, 3.8vw, 4.6rem) !important;
  line-height: .92 !important;
  letter-spacing: -.055em !important;
  font-weight: 500 !important;
}

.sola-feature-meta {
  margin: 16px 0 0 !important;
  color: #452e29 !important;
  font-size: .64rem !important;
  letter-spacing: .13em !important;
  line-height: 1.5 !important;
  text-transform: uppercase !important;
  opacity: .68 !important;
}

.sola-feature-divider {
  display: block !important;
  width: 46px !important;
  height: 1px !important;
  margin: 30px 0 24px !important;
  background: rgba(69,46,41,.35) !important;
}

.sola-feature-description {
  margin: 0 !important;
  max-width: 36ch !important;
  color: #452e29 !important;
  font-size: .94rem !important;
  line-height: 1.7 !important;
}

.sola-feature-close,
.sola-feature-nav {
  position: fixed !important;
  z-index: 9000001 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 1px solid rgba(245,203,217,.45) !important;
  border-radius: 50% !important;
  background: rgba(69,46,41,.78) !important;
  color: #f5cbd9 !important;
  cursor: pointer !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.sola-feature-close {
  top: 20px !important;
  right: 22px !important;
  width: 44px !important;
  height: 44px !important;
  font-size: 1.5rem !important;
}

.sola-feature-nav {
  top: 50% !important;
  width: 42px !important;
  height: 42px !important;
  transform: translateY(-50%) !important;
  font-size: 1rem !important;
}

.sola-feature-prev { left: 16px !important; }
.sola-feature-next { right: 16px !important; }

.sola-feature-viewer.is-changing .sola-feature-art img,
.sola-feature-viewer.is-changing .sola-feature-copy {
  opacity: .16 !important;
  transform: translateY(6px) !important;
}

html.sola-feature-open,
body.sola-feature-open {
  overflow: hidden !important;
}

/* Tablet still gets a 3-column full-width feature grid. */
@media (min-width: 641px) and (max-width: 1000px) {
  .design-featured-work .design-feature-grid {
    width: calc(100vw - 16px) !important;
    gap: 8px !important;
  }
}

/* Phone: two across, then viewer stacks image above info. */
@media (max-width: 640px) {
  .design-featured-work .design-feature-grid {
    width: calc(100vw - 16px) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .sola-feature-viewer {
    padding: 12px !important;
  }

  .sola-feature-stage {
    width: calc(100vw - 24px) !important;
    height: 90vh !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    overflow-y: auto !important;
    padding: 52px 0 16px !important;
  }

  .sola-feature-art {
    justify-content: center !important;
    min-height: 0 !important;
  }

  .sola-feature-art img {
    max-width: 92% !important;
    max-height: 55vh !important;
  }

  .sola-feature-copy {
    width: 92% !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 23px !important;
  }

  .sola-feature-copy h2 {
    font-size: 2.2rem !important;
  }

  .sola-feature-count {
    margin-bottom: 14px !important;
  }

  .sola-feature-divider {
    margin: 18px 0 15px !important;
  }

  .sola-feature-description {
    font-size: .83rem !important;
    line-height: 1.6 !important;
  }

  .sola-feature-nav {
    width: 34px !important;
    height: 34px !important;
    top: 42% !important;
  }

  .sola-feature-prev { left: 6px !important; }
  .sola-feature-next { right: 6px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .sola-feature-viewer,
  .sola-feature-stage,
  .sola-feature-art img,
  .sola-feature-copy {
    transition: none !important;
  }
}


/* =========================================================
   v77 — balanced featured design viewer + aligned intro
   ========================================================= */

/* Intro and grid share the exact same outer left/right edge. */
.design-featured-work .design-section-label,
.design-featured-work .design-featured-intro,
.design-featured-work .design-feature-grid {
  width: calc(100vw - 24px) !important;
  max-width: none !important;
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  box-sizing: border-box !important;
}

.design-featured-work .design-section-label {
  margin-bottom: 34px !important;
}

.design-featured-work .design-featured-intro {
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .55fr) !important;
  gap: clamp(40px, 8vw, 150px) !important;
  align-items: end !important;
  margin-top: 0 !important;
  margin-bottom: 54px !important;
}

.design-featured-work .design-featured-intro h2 {
  margin: 0 !important;
  max-width: 8.4ch !important;
  font-size: clamp(4rem, 7.2vw, 8.2rem) !important;
  line-height: .86 !important;
  letter-spacing: -.065em !important;
}

.design-featured-work .design-featured-intro h2 em {
  display: block !important;
  margin-top: .08em !important;
}

.design-featured-work .design-featured-intro p {
  margin: 0 0 4px !important;
  max-width: 44ch !important;
  font-size: .95rem !important;
  line-height: 1.65 !important;
}

.design-featured-work .design-feature-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 0 !important;
}

/* Stronger framing around the six featured pieces. */
.design-featured-work .design-feature-card {
  border: 8px solid #452e29 !important;
  background: #452e29 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.design-featured-work .design-feature-card img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* Reset and fully define the featured overlay. */
.sola-feature-viewer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999999 !important;
  display: none !important;
  place-items: center !important;
  padding: 30px 64px !important;
  box-sizing: border-box !important;
  background: rgba(36, 20, 18, .76) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .22s ease !important;
}

.sola-feature-viewer[aria-hidden="false"] {
  display: grid !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.sola-feature-viewer[aria-hidden="false"].is-active {
  opacity: 1 !important;
}

.sola-feature-stage {
  width: min(94vw, 1660px) !important;
  height: min(84vh, 900px) !important;
  display: grid !important;
  grid-template-columns: minmax(250px, 330px) minmax(380px, 1fr) minmax(250px, 330px) !important;
  gap: clamp(26px, 3vw, 54px) !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  transform: scale(.975) translateY(10px) !important;
  transition: opacity .28s ease, transform .34s cubic-bezier(.2,.8,.2,1) !important;
}

.sola-feature-viewer.is-active .sola-feature-stage {
  opacity: 1 !important;
  transform: scale(1) translateY(0) !important;
}

.sola-feature-panel {
  width: 100% !important;
  min-height: 430px !important;
  box-sizing: border-box !important;
  padding: clamp(30px, 3vw, 48px) !important;
  background: #f5cbd9 !important;
  color: #452e29 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  box-shadow: 0 24px 70px rgba(18, 8, 7, .16) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.sola-feature-panel-left {
  align-items: flex-start !important;
}

.sola-feature-panel-right {
  align-items: flex-start !important;
}

.sola-feature-panel-kicker,
.sola-feature-count {
  display: block !important;
  margin-bottom: 30px !important;
  font-size: .58rem !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  opacity: .58 !important;
}

.sola-feature-detail-group {
  width: 100% !important;
  padding: 18px 0 !important;
  border-top: 1px solid rgba(69,46,41,.18) !important;
}

.sola-feature-detail-group:first-of-type {
  border-top: 0 !important;
  padding-top: 0 !important;
}

.sola-feature-detail-group span {
  display: block !important;
  margin-bottom: 7px !important;
  font-size: .52rem !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  opacity: .5 !important;
}

.sola-feature-detail-group strong {
  display: block !important;
  font-size: .92rem !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
}

.sola-feature-art {
  min-width: 0 !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.sola-feature-art img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 82vh !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
  box-shadow: 0 28px 80px rgba(16, 7, 6, .28) !important;
}

.sola-feature-panel-right h2 {
  margin: 0 !important;
  color: #452e29 !important;
  font-size: clamp(2.25rem, 3.4vw, 4.15rem) !important;
  line-height: .92 !important;
  letter-spacing: -.055em !important;
  font-weight: 500 !important;
}

.sola-feature-meta {
  margin: 15px 0 0 !important;
  font-size: .59rem !important;
  letter-spacing: .12em !important;
  line-height: 1.5 !important;
  text-transform: uppercase !important;
  opacity: .62 !important;
}

.sola-feature-divider {
  display: block !important;
  width: 44px !important;
  height: 1px !important;
  margin: 29px 0 23px !important;
  background: rgba(69,46,41,.32) !important;
}

.sola-feature-description {
  margin: 0 !important;
  font-size: .9rem !important;
  line-height: 1.7 !important;
}

.sola-feature-close,
.sola-feature-nav {
  position: fixed !important;
  z-index: 10000000 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 1px solid rgba(245,203,217,.42) !important;
  border-radius: 50% !important;
  background: rgba(69,46,41,.82) !important;
  color: #f5cbd9 !important;
  cursor: pointer !important;
}

.sola-feature-close {
  top: 18px !important;
  right: 20px !important;
  width: 44px !important;
  height: 44px !important;
  font-size: 1.45rem !important;
}

.sola-feature-nav {
  top: 50% !important;
  width: 42px !important;
  height: 42px !important;
  transform: translateY(-50%) !important;
}

.sola-feature-prev { left: 12px !important; }
.sola-feature-next { right: 12px !important; }

.sola-feature-viewer.is-changing .sola-feature-stage {
  opacity: .35 !important;
}

html.sola-feature-open,
body.sola-feature-open {
  overflow: hidden !important;
}

@media (max-width: 1000px) {
  .design-featured-work .design-section-label,
  .design-featured-work .design-featured-intro,
  .design-featured-work .design-feature-grid {
    width: calc(100vw - 16px) !important;
  }

  .design-featured-work .design-featured-intro {
    grid-template-columns: 1fr .65fr !important;
    gap: 28px !important;
  }

  .sola-feature-stage {
    width: min(96vw, 960px) !important;
    grid-template-columns: minmax(210px, 250px) minmax(300px, 1fr) minmax(210px, 250px) !important;
    gap: 18px !important;
  }

  .sola-feature-panel {
    min-height: 360px !important;
    padding: 26px !important;
  }
}

@media (max-width: 640px) {
  .design-featured-work .design-featured-intro {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    margin-bottom: 30px !important;
  }

  .design-featured-work .design-featured-intro h2 {
    font-size: 3.15rem !important;
    max-width: 9ch !important;
  }

  .design-featured-work .design-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .design-featured-work .design-feature-card {
    border-width: 5px !important;
  }

  .sola-feature-viewer {
    padding: 8px !important;
  }

  .sola-feature-stage {
    width: calc(100vw - 16px) !important;
    height: 92vh !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    overflow-y: auto !important;
    padding: 54px 0 18px !important;
  }

  .sola-feature-art {
    order: 1 !important;
    height: auto !important;
    min-height: 48vh !important;
  }

  .sola-feature-art img {
    max-height: 52vh !important;
    max-width: 92% !important;
  }

  .sola-feature-panel-right {
    order: 2 !important;
  }

  .sola-feature-panel-left {
    order: 3 !important;
  }

  .sola-feature-panel {
    width: 92% !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 24px !important;
  }

  .sola-feature-panel-right h2 {
    font-size: 2.25rem !important;
  }

  .sola-feature-nav {
    width: 34px !important;
    height: 34px !important;
    top: 40% !important;
  }

  .sola-feature-prev { left: 4px !important; }
  .sola-feature-next { right: 4px !important; }
}


/* =========================================================
   v78 — 05 / THE APPROACH signature redesign
   ========================================================= */

.process-v78 {
  position: relative;
  overflow: hidden;
  background: #452e29;
  color: #fffaf8;
  border-top: 1px solid rgba(245,203,217,.14);
  border-bottom: 1px solid rgba(245,203,217,.14);
}

.process-v78::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .3;
  background-image:
    linear-gradient(rgba(245,203,217,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,203,217,.055) 1px, transparent 1px);
  background-size: 72px 72px;
}

.process-v78::after {
  content: "";
  position: absolute;
  width: 36vw;
  aspect-ratio: 1;
  right: -17vw;
  bottom: -24vw;
  border-radius: 50%;
  background: #f5cbd9;
  opacity: .07;
  pointer-events: none;
}

.process-v78-label {
  position: relative;
  z-index: 3;
  color: #f5cbd9;
}

.process-v78-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(480px, 1.18fr);
  gap: clamp(55px, 8vw, 130px);
  margin-top: 42px;
  min-height: 420px;
}

.process-v78-intro {
  position: relative;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.process-v78-kicker {
  margin: 0 0 22px;
  color: rgba(245,203,217,.68);
  font-size: .58rem;
  line-height: 1.4;
  letter-spacing: .17em;
}

.process-v78-intro h2 {
  position: relative;
  z-index: 3;
  margin: 0;
  max-width: 640px;
  font-size: clamp(3.4rem, 5.45vw, 6.7rem);
  line-height: .88;
  letter-spacing: -.065em;
  font-weight: 500;
}

.process-v78-intro h2 em {
  color: #f5cbd9;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 500;
  white-space: nowrap;
}

.process-v78-summary {
  position: relative;
  z-index: 3;
  max-width: 520px;
  margin: 28px 0 0;
  color: rgba(255,250,248,.7);
  font-size: .88rem;
  line-height: 1.7;
}

/* orbit graphic */
.process-v78-orbit {
  position: absolute;
  width: 245px;
  height: 245px;
  right: -42px;
  bottom: -28px;
  opacity: .9;
  pointer-events: none;
}

.process-v78-orbit-ring,
.process-v78-orbit-core {
  position: absolute;
  border-radius: 50%;
}

.process-v78-orbit-ring-a {
  inset: 0;
  border: 1px solid rgba(245,203,217,.3);
}

.process-v78-orbit-ring-b {
  inset: 44px;
  border: 1px solid rgba(245,203,217,.12);
}

.process-v78-orbit-core {
  width: 14px;
  height: 14px;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  background: #f5cbd9;
  box-shadow: 0 0 0 11px rgba(245,203,217,.07);
}

.process-v78-orbit-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  left: calc(50% - 4.5px);
  top: -4px;
  border-radius: 50%;
  background: #f5cbd9;
  transform-origin: 4.5px 126px;
  animation: solaApproachOrbit 7s linear infinite;
}

.process-v78-orbit-label {
  position: absolute;
  color: rgba(245,203,217,.55);
  font-size: .52rem;
  letter-spacing: .1em;
}

.orbit-label-1 { left: -13px; top: 47%; }
.orbit-label-2 { right: 2px; top: 19%; }
.orbit-label-3 { right: 10px; bottom: 14%; }

@keyframes solaApproachOrbit {
  to { transform: rotate(360deg); }
}

/* stacked interactive steps */
.process-v78-steps {
  height: 420px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.process-v78-step {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 160px 1fr;
  background: rgba(255,250,248,.055);
  border: 1px solid rgba(245,203,217,.14);
  transition:
    flex .48s cubic-bezier(.2,.75,.2,1),
    background-color .3s ease,
    border-color .3s ease,
    transform .3s ease;
}

.process-v78-step:hover {
  flex: 1.34 1 0;
  background: rgba(245,203,217,.09);
  border-color: rgba(245,203,217,.34);
  transform: translateX(-8px);
}

.process-v78-step-image {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.process-v78-step-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(69,46,41,.05), rgba(69,46,41,.42));
  pointer-events: none;
}

.process-v78-step-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.72) contrast(1.07);
  transform: scale(1.08);
  transition:
    transform .8s cubic-bezier(.2,.75,.2,1),
    filter .5s ease;
}

.process-v78-step:nth-child(1) img { object-position: center 45%; }
.process-v78-step:nth-child(2) img { object-position: center 46%; }
.process-v78-step:nth-child(3) img { object-position: center 50%; }

.process-v78-step:hover img {
  transform: scale(1);
  filter: saturate(.95) contrast(1.03);
}

.process-v78-step-copy {
  display: grid;
  grid-template-columns: 42px 1fr 28px;
  gap: 18px;
  align-items: center;
  padding: 18px 21px 18px 18px;
  min-width: 0;
}

.process-v78-number {
  color: #f5cbd9;
  font-size: .62rem;
  letter-spacing: .14em;
  align-self: start;
  padding-top: 4px;
}

.process-v78-mini {
  margin: 0 0 5px !important;
  color: rgba(245,203,217,.56) !important;
  font-size: .48rem !important;
  letter-spacing: .15em;
  line-height: 1.3 !important;
}

.process-v78-step h3 {
  margin: 0;
  max-width: none;
  color: #fffaf8;
  font-size: clamp(1.25rem, 1.65vw, 1.75rem);
  line-height: 1.06;
  letter-spacing: -.03em;
  font-weight: 500;
}

.process-v78-step-copy > div > p:last-child {
  max-width: 560px;
  margin: 8px 0 0;
  color: rgba(255,250,248,.6);
  font-size: .74rem;
  line-height: 1.52;
}

.process-v78-arrow {
  color: #f5cbd9;
  font-size: 1rem;
  opacity: .5;
  transform: translate(-5px, 5px);
  transition: transform .3s ease, opacity .3s ease;
}

.process-v78-step:hover .process-v78-arrow {
  opacity: 1;
  transform: translate(0,0);
}

/* Entrance sequence unique to the approach section */
.sola-scroll-motion .process-v78:not(.sola-in-view) .process-v78-intro h2,
.sola-scroll-motion .process-v78:not(.sola-in-view) .process-v78-kicker,
.sola-scroll-motion .process-v78:not(.sola-in-view) .process-v78-summary {
  opacity: 0;
  transform: translateY(26px);
}

.sola-scroll-motion .process-v78 .process-v78-kicker {
  transition: opacity .55s ease .06s, transform .65s cubic-bezier(.2,.75,.2,1) .06s;
}

.sola-scroll-motion .process-v78 .process-v78-intro h2 {
  transition: opacity .6s ease .13s, transform .7s cubic-bezier(.2,.75,.2,1) .13s;
}

.sola-scroll-motion .process-v78 .process-v78-summary {
  transition: opacity .6s ease .21s, transform .7s cubic-bezier(.2,.75,.2,1) .21s;
}

.sola-scroll-motion .process-v78.sola-in-view .process-v78-intro h2,
.sola-scroll-motion .process-v78.sola-in-view .process-v78-kicker,
.sola-scroll-motion .process-v78.sola-in-view .process-v78-summary {
  opacity: 1;
  transform: translateY(0);
}

.sola-scroll-motion .process-v78:not(.sola-in-view) .process-v78-orbit {
  opacity: 0;
  transform: scale(.82) rotate(-14deg);
}

.sola-scroll-motion .process-v78 .process-v78-orbit {
  transition: opacity .7s ease .26s, transform .9s cubic-bezier(.2,.75,.2,1) .26s;
}

.sola-scroll-motion .process-v78.sola-in-view .process-v78-orbit {
  opacity: .9;
  transform: scale(1) rotate(0);
}

/* =========================================================
   v78 — restrained site-wide scroll animation
   ========================================================= */

.sola-scroll-motion .sola-scroll-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .62s ease var(--sola-reveal-delay, 0ms),
    transform .72s cubic-bezier(.2,.75,.2,1) var(--sola-reveal-delay, 0ms);
}

.sola-scroll-motion .sola-scroll-reveal.sola-in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Cards/photos get a tiny extra scale-in rather than a dramatic animation. */
.sola-scroll-motion .editorial-card.sola-scroll-reveal,
.sola-scroll-motion .design-feature-card.sola-scroll-reveal,
.sola-scroll-motion .design-gallery-card.sola-scroll-reveal {
  transform: translateY(22px) scale(.985);
}

.sola-scroll-motion .editorial-card.sola-scroll-reveal.sola-in-view,
.sola-scroll-motion .design-feature-card.sola-scroll-reveal.sola-in-view,
.sola-scroll-motion .design-gallery-card.sola-scroll-reveal.sola-in-view {
  transform: translateY(0) scale(1);
}

/* Very subtle scroll-linked drift on decorative pieces. */
.sola-scroll-motion .manifesto-accent {
  translate: 0 calc(var(--sola-scroll-y, 0) * -0.006px);
}

.sola-scroll-motion .graphic-design-preview-stack {
  translate: 0 calc(var(--sola-scroll-y, 0) * -0.003px);
}

/* Don't double-animate the process child cards through the generic observer. */
.sola-scroll-motion .process-v78-step.sola-scroll-reveal {
  opacity: 0;
  transform: translateX(28px);
}

.sola-scroll-motion .process-v78-step.sola-scroll-reveal.sola-in-view {
  opacity: 1;
  transform: translateX(0);
}

.process-v78-step:nth-child(1) { --sola-reveal-delay: 90ms !important; }
.process-v78-step:nth-child(2) { --sola-reveal-delay: 170ms !important; }
.process-v78-step:nth-child(3) { --sola-reveal-delay: 250ms !important; }


@media (max-width: 1000px) {
  .process-v78-layout {
    grid-template-columns: 1fr;
    gap: 42px;
    min-height: 0;
  }

  .process-v78-intro {
    min-height: 360px;
    max-width: 760px;
  }

  .process-v78-orbit {
    right: 10px;
  }

  .process-v78-steps {
    height: 390px;
  }

  .process-v78-step {
    grid-template-columns: 145px 1fr;
  }
}

@media (max-width: 640px) {
  .process-v78 {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }

  .process-v78-layout {
    margin-top: 30px;
    gap: 34px;
  }

  .process-v78-intro {
    min-height: 430px;
  }

  .process-v78-intro h2 {
    font-size: 13vw;
    line-height: .9;
  }

  .process-v78-summary {
    max-width: 33ch;
    font-size: .82rem;
  }

  .process-v78-orbit {
    width: 190px;
    height: 190px;
    right: -38px;
    bottom: 0;
  }

  .process-v78-orbit-ring-b {
    inset: 34px;
  }

  .process-v78-orbit-dot {
    transform-origin: 4.5px 98px;
  }

  .process-v78-steps {
    height: auto;
    gap: 10px;
  }

  .process-v78-step,
  .process-v78-step:hover {
    display: grid;
    grid-template-columns: 105px minmax(0,1fr);
    min-height: 160px;
    transform: none;
  }

  .process-v78-step-copy {
    grid-template-columns: 28px 1fr;
    gap: 10px;
    padding: 16px 15px 16px 12px;
  }

  .process-v78-arrow {
    display: none;
  }

  .process-v78-step h3 {
    font-size: 1.08rem;
  }

  .process-v78-step-copy > div > p:last-child {
    font-size: .67rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .process-v78-orbit-dot {
    animation: none !important;
  }

  .sola-scroll-reveal,
  .process-v78-step,
  .process-v78-step-image img,
  .process-v78-orbit,
  .process-v78-kicker,
  .process-v78-intro h2,
  .process-v78-summary {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    translate: none !important;
  }
}


/* =========================================================
   v79 — restore pre-v78 site motion; keep animation isolated to THE APPROACH
   ========================================================= */

/* No global scroll reveals/parallax. Everything outside THE APPROACH renders normally. */
.sola-scroll-motion .sola-scroll-reveal,
.sola-scroll-motion .editorial-card.sola-scroll-reveal,
.sola-scroll-motion .design-feature-card.sola-scroll-reveal,
.sola-scroll-motion .design-gallery-card.sola-scroll-reveal,
.sola-scroll-motion .process-v78-step.sola-scroll-reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.sola-scroll-motion .manifesto-accent,
.sola-scroll-motion .graphic-design-preview-stack {
  translate: none !important;
}

/* Center the orbital graphic inside the left-side Approach region. */
.process-v78-orbit {
  left: 50% !important;
  right: auto !important;
  bottom: -28px !important;
  transform: translateX(-50%) !important;
}

/* Approach-only scroll entrance. */
.approach-motion .process-v78:not(.approach-in-view) .process-v78-kicker,
.approach-motion .process-v78:not(.approach-in-view) .process-v78-intro h2,
.approach-motion .process-v78:not(.approach-in-view) .process-v78-summary {
  opacity: 0 !important;
  transform: translateY(24px) !important;
}

.approach-motion .process-v78 .process-v78-kicker {
  transition: opacity .55s ease .06s, transform .65s cubic-bezier(.2,.75,.2,1) .06s !important;
}
.approach-motion .process-v78 .process-v78-intro h2 {
  transition: opacity .6s ease .13s, transform .7s cubic-bezier(.2,.75,.2,1) .13s !important;
}
.approach-motion .process-v78 .process-v78-summary {
  transition: opacity .6s ease .21s, transform .7s cubic-bezier(.2,.75,.2,1) .21s !important;
}

.approach-motion .process-v78.approach-in-view .process-v78-kicker,
.approach-motion .process-v78.approach-in-view .process-v78-intro h2,
.approach-motion .process-v78.approach-in-view .process-v78-summary {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.approach-motion .process-v78:not(.approach-in-view) .process-v78-orbit {
  opacity: 0 !important;
  transform: translateX(-50%) scale(.82) rotate(-14deg) !important;
}

.approach-motion .process-v78 .process-v78-orbit {
  transition: opacity .7s ease .26s, transform .9s cubic-bezier(.2,.75,.2,1) .26s !important;
}

.approach-motion .process-v78.approach-in-view .process-v78-orbit {
  opacity: .9 !important;
  transform: translateX(-50%) scale(1) rotate(0) !important;
}

/* The three steps retain their staggered reveal inside this section only. */
.approach-motion .process-v78-step {
  opacity: 0 !important;
  transform: translateX(24px) !important;
  transition:
    opacity .58s ease,
    transform .7s cubic-bezier(.2,.75,.2,1),
    flex .48s cubic-bezier(.2,.75,.2,1),
    background-color .3s ease,
    border-color .3s ease !important;
}

.approach-motion .process-v78-step.approach-step-in {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

.approach-motion .process-v78-step.approach-step-in:hover {
  transform: translateX(-8px) !important;
}

@media (max-width: 1000px) {
  .process-v78-orbit {
    left: 50% !important;
    right: auto !important;
  }
}

@media (max-width: 640px) {
  .process-v78-orbit {
    left: 50% !important;
    right: auto !important;
    bottom: 0 !important;
  }

  .approach-motion .process-v78-step.approach-step-in:hover {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .process-v78-orbit,
  .process-v78-step,
  .process-v78-kicker,
  .process-v78-intro h2,
  .process-v78-summary {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .process-v78-orbit {
    transform: translateX(-50%) !important;
  }
}


/* =========================================================
   v80 — WHO WE ARE image art + FOUR-STEP APPROACH refinements
   ========================================================= */

/* 01 / WHO WE ARE — creative image composition replacing circles/type accents */
.manifesto-image-art {
  position: relative;
  width: 100%;
  height: 360px;
  pointer-events: none;
  isolation: isolate;
}

.manifesto-image-backdrop {
  position: absolute;
  inset: 13% 6% 2% 10%;
  background: #f5cbd9;
  transform: rotate(-3deg);
  z-index: 0;
}

.manifesto-image-main {
  position: absolute;
  left: 0;
  top: 0;
  width: 78%;
  height: 88%;
  overflow: hidden;
  z-index: 2;
  background: #452e29;
  clip-path: polygon(0 0, 100% 5%, 93% 100%, 4% 94%);
  box-shadow: 0 22px 50px rgba(69,46,41,.16);
}

.manifesto-image-main img,
.manifesto-image-detail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.78) contrast(1.04);
}

.manifesto-image-main img {
  object-position: center 35%;
}

.manifesto-image-detail {
  position: absolute;
  width: 46%;
  height: 48%;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 3;
  border: 5px solid #f3efe9;
  background: #452e29;
  transform: rotate(4deg);
  box-shadow: 0 18px 38px rgba(69,46,41,.18);
}

.manifesto-image-detail img {
  object-position: 70% center;
  transform: scale(1.55);
}

@media (min-width: 901px) {
  .manifesto-image-art {
    position: absolute;
    left: 4vw;
    top: 205px;
    width: min(25vw, 390px);
    height: 445px;
    z-index: 1;
  }

  .manifesto .section-label,
  .manifesto-copy {
    position: relative;
    z-index: 3;
  }
}

@media (max-width: 900px) {
  .manifesto-image-art {
    grid-column: 1 / -1;
    max-width: 560px;
    height: 390px;
    margin: -8px 0 2px;
  }
}

@media (max-width: 640px) {
  .manifesto-image-art {
    height: 315px;
    margin-top: -10px;
  }

  .manifesto-image-main {
    width: 80%;
    height: 86%;
  }

  .manifesto-image-detail {
    width: 44%;
    height: 44%;
    border-width: 4px;
  }
}


/* 05 / THE APPROACH — four compact steps with orbit moved into clean blank space */
.process-v78-layout {
  grid-template-columns: minmax(0, .84fr) minmax(500px, 1.16fr) !important;
  min-height: 448px !important;
}

.process-v78-intro {
  min-height: 448px !important;
}

.process-v78-summary {
  max-width: min(430px, 62%) !important;
}

/* Orbit lives in the lower-right blank area of the intro instead of behind text. */
.process-v78-orbit {
  width: 182px !important;
  height: 182px !important;
  left: auto !important;
  right: 2px !important;
  top: auto !important;
  bottom: 2px !important;
  transform: none !important;
}

.process-v78-orbit-ring-b {
  inset: 32px !important;
}

.process-v78-orbit-dot {
  transform-origin: 4.5px 94px !important;
}

.orbit-label-1 { left: -10px !important; top: 46% !important; }
.orbit-label-2 { right: 3px !important; top: 16% !important; }
.orbit-label-3 { right: 10px !important; bottom: 12% !important; }
.orbit-label-4 { left: 17px !important; bottom: 12% !important; }

.process-v78-steps {
  height: 448px !important;
  gap: 8px !important;
}

.process-v78-step {
  grid-template-columns: 148px 1fr !important;
  transform-origin: center right;
}

/* Stronger depth / pull-forward hover. */
.process-v78-step:hover {
  flex: 1.42 1 0 !important;
  transform: translateX(-15px) scale(1.022) !important;
  z-index: 8 !important;
  background: rgba(245,203,217,.115) !important;
  border-color: rgba(245,203,217,.46) !important;
  box-shadow: 0 22px 46px rgba(20,8,7,.22) !important;
}

.process-v78-step:nth-child(4) img {
  object-position: center 34% !important;
}

/* Match the entrance animation to the new orbit placement. */
.approach-motion .process-v78:not(.approach-in-view) .process-v78-orbit {
  opacity: 0 !important;
  transform: scale(.78) rotate(-14deg) !important;
}

.approach-motion .process-v78.approach-in-view .process-v78-orbit {
  opacity: .9 !important;
  transform: scale(1) rotate(0deg) !important;
}

.approach-motion .process-v78-step.approach-step-in:hover {
  transform: translateX(-15px) scale(1.022) !important;
}

/* Old manifesto accent motion hooks are intentionally unused now. */
.sola-scroll-motion .manifesto-image-art {
  translate: none !important;
}

@media (max-width: 1100px) and (min-width: 641px) {
  .process-v78-layout {
    grid-template-columns: 1fr !important;
  }

  .process-v78-intro {
    min-height: 370px !important;
  }

  .process-v78-summary {
    max-width: 58ch !important;
  }

  .process-v78-orbit {
    width: 160px !important;
    height: 160px !important;
    right: 6px !important;
    bottom: 0 !important;
  }

  .process-v78-orbit-dot {
    transform-origin: 4.5px 83px !important;
  }

  .process-v78-steps {
    height: 440px !important;
  }
}

@media (max-width: 640px) {
  .process-v78-layout {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  .process-v78-intro {
    min-height: 475px !important;
  }

  .process-v78-summary {
    max-width: 31ch !important;
  }

  .process-v78-orbit {
    width: 145px !important;
    height: 145px !important;
    right: 0 !important;
    bottom: 2px !important;
    left: auto !important;
  }

  .process-v78-orbit-ring-b {
    inset: 26px !important;
  }

  .process-v78-orbit-dot {
    transform-origin: 4.5px 75px !important;
  }

  .process-v78-steps {
    height: auto !important;
  }

  .process-v78-step,
  .process-v78-step:hover {
    grid-template-columns: 98px minmax(0, 1fr) !important;
    min-height: 148px !important;
    transform: none !important;
    box-shadow: none !important;
  }

  .approach-motion .process-v78-step.approach-step-in:hover {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .process-v78-orbit {
    transform: none !important;
  }
}


/* =========================================================
   v81 — WHO WE ARE image composition fix
   One controlled image, no duplicated/stacked photo treatment.
   ========================================================= */

.manifesto-image-art {
  position: relative !important;
  pointer-events: none !important;
  isolation: isolate !important;
}

.manifesto-image-backdrop {
  position: absolute !important;
  background: #f5cbd9 !important;
  z-index: 0 !important;
}

.manifesto-image-main {
  position: absolute !important;
  margin: 0 !important;
  overflow: hidden !important;
  z-index: 2 !important;
  background: #452e29 !important;
  box-shadow: 0 18px 42px rgba(69,46,41,.14) !important;
  clip-path: none !important;
}

.manifesto-image-main img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 34% !important;
  transform: none !important;
  filter: saturate(.82) contrast(1.04) !important;
}

.manifesto-image-detail {
  display: none !important;
}

.manifesto-image-edge {
  position: absolute !important;
  z-index: 3 !important;
  display: block !important;
  width: 48px !important;
  height: 2px !important;
  background: #452e29 !important;
  opacity: .42 !important;
}

/* Desktop — small editorial image living in the open left side. */
@media (min-width: 901px) {
  .manifesto-image-art {
    position: absolute !important;
    left: clamp(38px, 4vw, 72px) !important;
    top: 230px !important;
    width: min(22vw, 315px) !important;
    height: 360px !important;
    margin: 0 !important;
    z-index: 1 !important;
  }

  .manifesto-image-backdrop {
    left: 24px !important;
    top: 22px !important;
    width: calc(100% - 2px) !important;
    height: calc(100% - 8px) !important;
    transform: rotate(3deg) !important;
  }

  .manifesto-image-main {
    left: 0 !important;
    top: 0 !important;
    width: 88% !important;
    height: 88% !important;
    transform: rotate(-2deg) !important;
  }

  .manifesto-image-edge {
    right: 0 !important;
    bottom: 24px !important;
  }
}

/* Tablet — contained horizontal editorial treatment. */
@media (max-width: 900px) and (min-width: 641px) {
  .manifesto-image-art {
    width: min(420px, 72vw) !important;
    height: 300px !important;
    margin: 12px 0 8px !important;
  }

  .manifesto-image-backdrop {
    left: 24px !important;
    top: 18px !important;
    width: 88% !important;
    height: 88% !important;
    transform: rotate(2deg) !important;
  }

  .manifesto-image-main {
    left: 0 !important;
    top: 0 !important;
    width: 82% !important;
    height: 84% !important;
    transform: rotate(-1.5deg) !important;
  }

  .manifesto-image-edge {
    right: 8% !important;
    bottom: 20px !important;
  }
}

/* Phone — one modest image, full-width section still stays text-first. */
@media (max-width: 640px) {
  .manifesto-image-art {
    width: 78vw !important;
    max-width: 315px !important;
    height: 235px !important;
    margin: 10px 0 18px !important;
  }

  .manifesto-image-backdrop {
    left: 18px !important;
    top: 15px !important;
    width: 90% !important;
    height: 88% !important;
    transform: rotate(2.5deg) !important;
  }

  .manifesto-image-main {
    left: 0 !important;
    top: 0 !important;
    width: 84% !important;
    height: 84% !important;
    transform: rotate(-1.5deg) !important;
  }

  .manifesto-image-edge {
    right: 0 !important;
    bottom: 18px !important;
    width: 38px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .manifesto-image-main,
  .manifesto-image-backdrop {
    transform: none !important;
  }
}


/* =========================================================
   v82 — clean SOLA splash-to-header logo handoff
   ========================================================= */

/*
  The actual header logo stays invisible while the splash logo travels toward
  it. It becomes visible only when both logos occupy the same position.
*/
html.splash-active .sola-wordmark-header,
html.splash-page-ready:not(.splash-logo-handoff) .sola-wordmark-header {
  opacity: 0 !important;
}

html.splash-logo-handoff .sola-wordmark-header,
html.splash-finished .sola-wordmark-header {
  opacity: 1 !important;
}

/* Avoid a second opacity animation on the header logo during the handoff. */
.sola-wordmark-header {
  transition: none !important;
}

/* Splash itself appears immediately; no opening layer fade competing with logo. */
.site-splash {
  opacity: 1 !important;
  transition: none !important;
}

/*
  Only the logo's initial appearance is softly eased.
  Once it starts docking, its opacity stays completely solid.
*/
.site-splash-logo {
  opacity: 0 !important;
  transform: scale(.965);
  transition:
    opacity .20s ease-out,
    transform .72s cubic-bezier(.20,.80,.20,1) !important;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.site-splash-logo.is-visible {
  opacity: 1 !important;
  transform: scale(1);
}

.site-splash-logo.is-visible.is-docking {
  opacity: 1 !important;
  transform:
    translate3d(var(--splash-x), var(--splash-y), 0)
    scale(var(--splash-scale)) !important;
}

/*
  The handoff is deliberately instant. The user sees the exact same SVG in the
  exact same spot; only which DOM element owns it changes.
*/
.site-splash-logo.is-handed-off {
  opacity: 0 !important;
  transition: none !important;
}

/*
  No fade-out of the splash after docking. The hero underneath is the same SOLA
  brown, so removing the layer cleanly avoids a muddy/double-logo crossfade.
*/
.site-splash.is-cleared {
  visibility: hidden !important;
  opacity: 0 !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .site-splash-logo,
  .sola-wordmark-header {
    transition: none !important;
  }
}


/* =========================================================
   v83 — mobile design viewer + Graphic Design menu + Lance fix
   ========================================================= */

/* Graphic Design menu entry */
.nav-design-link,
.portfolio-nav-design {
  position: relative;
}

@media (min-width: 641px) {
  .nav-design-link {
    border: 1px solid rgba(245,203,217,.42);
    border-radius: 999px;
    padding: 9px 14px !important;
  }

  .portfolio-nav-design {
    border: 1px solid rgba(245,203,217,.42);
    border-radius: 999px;
    padding: 8px 13px !important;
  }
}

@media (max-width: 640px) {
  .nav.open .nav-design-link,
  .portfolio-nav.is-open .portfolio-nav-design {
    display: inline-flex !important;
    width: fit-content !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 10px !important;
    padding: 12px 18px !important;
    border: 1px solid rgba(245,203,217,.55) !important;
    border-radius: 999px !important;
    color: #f5cbd9 !important;
  }
}


/* Mobile-only project information lives in ONE box. */
.sola-feature-mobile-details {
  display: none;
}

@media (max-width: 640px) {
  .sola-feature-viewer {
    overflow: hidden !important;
    padding: 0 !important;
  }

  .sola-feature-stage {
    width: 100% !important;
    height: 100dvh !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 86px 18px 92px !important;
    box-sizing: border-box !important;
  }

  /* Desktop-only left details panel is removed on phones. */
  .sola-feature-panel-left {
    display: none !important;
  }

  .sola-feature-art {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    margin: 0 0 18px !important;
  }

  .sola-feature-art img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: min(82vw, 430px) !important;
    max-height: 62vh !important;
    object-fit: contain !important;
    margin: 0 auto !important;
  }

  /* One unified pink box below the image. */
  .sola-feature-panel-right {
    flex: 0 0 auto !important;
    width: min(92vw, 540px) !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 26px 25px 28px !important;
    box-sizing: border-box !important;
    background: #f5cbd9 !important;
    color: #452e29 !important;
    display: block !important;
    overflow: visible !important;
    transform: none !important;
  }

  .sola-feature-panel-right .sola-feature-count {
    display: block !important;
    margin: 0 0 14px !important;
    font-size: .62rem !important;
    line-height: 1 !important;
    letter-spacing: .16em !important;
  }

  .sola-feature-panel-right h2 {
    margin: 0 !important;
    max-width: none !important;
    font-size: clamp(2rem, 10.8vw, 3.15rem) !important;
    line-height: .96 !important;
    letter-spacing: -.055em !important;
    overflow-wrap: anywhere !important;
  }

  .sola-feature-panel-right .sola-feature-meta {
    margin: 15px 0 0 !important;
    font-size: .61rem !important;
    line-height: 1.55 !important;
    letter-spacing: .13em !important;
  }

  .sola-feature-panel-right .sola-feature-divider {
    display: block !important;
    width: 42px !important;
    height: 1px !important;
    margin: 22px 0 19px !important;
  }

  .sola-feature-panel-right .sola-feature-description {
    margin: 0 !important;
    max-width: none !important;
    font-size: .88rem !important;
    line-height: 1.58 !important;
  }

  .sola-feature-mobile-details {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    margin-top: 25px !important;
    padding-top: 22px !important;
    border-top: 1px solid rgba(69,46,41,.22) !important;
  }

  .sola-feature-mobile-detail {
    min-width: 0 !important;
  }

  .sola-feature-mobile-detail > span {
    display: block !important;
    margin-bottom: 7px !important;
    color: #452e29 !important;
    font-size: .58rem !important;
    line-height: 1 !important;
    letter-spacing: .15em !important;
    text-transform: uppercase !important;
    opacity: .58 !important;
  }

  .sola-feature-mobile-detail > strong {
    display: block !important;
    color: #452e29 !important;
    font-size: .9rem !important;
    line-height: 1.45 !important;
    font-weight: 500 !important;
    overflow-wrap: anywhere !important;
  }

  /* Keep controls usable but out of the content. */
  .sola-feature-close {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 18px) !important;
    right: 18px !important;
    width: 44px !important;
    height: 44px !important;
    z-index: 9000010 !important;
  }

  .sola-feature-nav {
    position: fixed !important;
    top: 50% !important;
    width: 42px !important;
    height: 42px !important;
    z-index: 9000010 !important;
  }

  .sola-feature-prev { left: 8px !important; }
  .sola-feature-next { right: 8px !important; }
}


/* =========================================================
   v84 — faster splash, four-item mobile hero meta, plain nav
   ========================================================= */

/* Graphic Design should look exactly like every other navigation link. */
.nav-design-link,
.portfolio-nav-design {
  border: 0 !important;
  border-radius: 0 !important;
  padding: inherit !important;
  margin: 0 !important;
  background: transparent !important;
  color: inherit !important;
}

@media (max-width: 640px) {
  .nav.open .nav-design-link,
  .portfolio-nav.is-open .portfolio-nav-design {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: inherit !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: inherit !important;
    background: transparent !important;
  }

  /* Always show all four hero categories on phones. */
  .hero-meta {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: center !important;
    width: 100% !important;
    gap: 4px !important;
  }

  .hero-meta span,
  .hero-meta > * {
    min-width: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    white-space: nowrap !important;
    text-align: center !important;
    font-size: clamp(.42rem, 2vw, .58rem) !important;
    letter-spacing: .08em !important;
  }
}

/*
  Keep the splash layer from visually lingering once the logo has docked.
  The page is already revealed underneath, so clearing immediately feels cleaner.
*/
.site-splash.is-cleared {
  visibility: hidden !important;
  opacity: 0 !important;
  transition: none !important;
  pointer-events: none !important;
}


/* =========================================================
   v85 — true single-box mobile design viewer
   ========================================================= */

.sola-feature-mobile-details { display: none; }

@media (max-width: 900px) {
  .sola-feature-viewer.sola-feature-mobile-single {
    padding: 0 !important;
    overflow: hidden !important;
  }

  .sola-feature-viewer.sola-feature-mobile-single .sola-feature-stage {
    width: 100% !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding:
      calc(env(safe-area-inset-top, 0px) + 82px)
      18px
      calc(env(safe-area-inset-bottom, 0px) + 96px) !important;
  }

  .sola-feature-viewer.sola-feature-mobile-single .sola-feature-panel-left {
    display: none !important;
  }

  .sola-feature-viewer.sola-feature-mobile-single .sola-feature-art {
    order: 1 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }

  .sola-feature-viewer.sola-feature-mobile-single .sola-feature-art img {
    width: auto !important;
    height: auto !important;
    max-width: min(82vw, 470px) !important;
    max-height: 58dvh !important;
    object-fit: contain !important;
    margin: 0 auto !important;
  }

  .sola-feature-viewer.sola-feature-mobile-single .sola-feature-panel-right {
    order: 2 !important;
    flex: 0 0 auto !important;
    width: min(calc(100vw - 36px), 560px) !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 28px 26px 30px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    background: #f5cbd9 !important;
    color: #452e29 !important;
    transform: none !important;
    opacity: 1 !important;
    display: block !important;
  }

  .sola-feature-viewer.sola-feature-mobile-single .sola-feature-panel-right h2 {
    margin: 0 !important;
    font-size: clamp(2rem, 10vw, 3.1rem) !important;
    line-height: .96 !important;
    letter-spacing: -.05em !important;
    overflow-wrap: anywhere !important;
  }

  .sola-feature-viewer.sola-feature-mobile-single .sola-feature-meta {
    margin: 14px 0 0 !important;
    font-size: .61rem !important;
    line-height: 1.5 !important;
    letter-spacing: .13em !important;
  }

  .sola-feature-viewer.sola-feature-mobile-single .sola-feature-description {
    margin: 0 !important;
    max-width: none !important;
    font-size: .88rem !important;
    line-height: 1.58 !important;
  }

  .sola-feature-viewer.sola-feature-mobile-single .sola-feature-mobile-details {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    margin-top: 24px !important;
    padding-top: 22px !important;
    border-top: 1px solid rgba(69,46,41,.22) !important;
  }

  .sola-feature-viewer.sola-feature-mobile-single .sola-feature-mobile-detail > span {
    display: block !important;
    margin-bottom: 7px !important;
    font-size: .58rem !important;
    line-height: 1 !important;
    letter-spacing: .15em !important;
    text-transform: uppercase !important;
    opacity: .58 !important;
  }

  .sola-feature-viewer.sola-feature-mobile-single .sola-feature-mobile-detail > strong {
    display: block !important;
    font-size: .9rem !important;
    line-height: 1.45 !important;
    font-weight: 500 !important;
    overflow-wrap: anywhere !important;
  }
}


/* =========================================================
   v86 — isolated Graphic Design PHONE viewer
   Unique gd-mobile-* classes avoid every old sola-feature rule.
   ========================================================= */

.gd-mobile-viewer {
  display: none;
}

@media (max-width: 700px) {
  html.gd-viewer-open,
  body.gd-viewer-open {
    overflow: hidden !important;
  }

  .gd-mobile-viewer {
    position: fixed !important;
    inset: 0 !important;
    z-index: 20000000 !important;
    display: none !important;
    background: rgba(36,20,18,.84) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .18s ease !important;
  }

  .gd-mobile-viewer[aria-hidden="false"] {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .gd-mobile-viewer[aria-hidden="false"].is-open {
    opacity: 1 !important;
  }

  .gd-mobile-scroll {
    position: absolute !important;
    inset: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
    padding:
      calc(env(safe-area-inset-top, 0px) + 78px)
      18px
      calc(env(safe-area-inset-bottom, 0px) + 92px) !important;
  }

  .gd-mobile-art {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    margin: 0 auto 18px !important;
  }

  .gd-mobile-art img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 84vw !important;
    max-height: 58vh !important;
    object-fit: contain !important;
    box-shadow: 0 22px 60px rgba(0,0,0,.22) !important;
    transition: opacity .12s ease, transform .12s ease !important;
  }

  .gd-mobile-info {
    width: min(100%, 540px) !important;
    margin: 0 auto !important;
    padding: 27px 25px 29px !important;
    box-sizing: border-box !important;
    background: #f5cbd9 !important;
    color: #452e29 !important;
    box-shadow: 0 20px 55px rgba(0,0,0,.16) !important;
    transition: opacity .12s ease, transform .12s ease !important;
  }

  .gd-mobile-count {
    display: block !important;
    margin: 0 0 14px !important;
    font-size: .58rem !important;
    line-height: 1 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    opacity: .58 !important;
  }

  .gd-mobile-info h2 {
    margin: 0 !important;
    color: #452e29 !important;
    font-size: clamp(2.05rem, 10vw, 3.15rem) !important;
    line-height: .96 !important;
    letter-spacing: -.05em !important;
    font-weight: 500 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .gd-mobile-meta {
    margin: 14px 0 0 !important;
    color: #452e29 !important;
    font-size: .6rem !important;
    line-height: 1.5 !important;
    letter-spacing: .13em !important;
    text-transform: uppercase !important;
    opacity: .68 !important;
  }

  .gd-mobile-rule {
    display: block !important;
    width: 42px !important;
    height: 1px !important;
    margin: 21px 0 18px !important;
    background: rgba(69,46,41,.32) !important;
  }

  .gd-mobile-description {
    margin: 0 !important;
    color: #452e29 !important;
    font-size: .88rem !important;
    line-height: 1.6 !important;
  }

  .gd-mobile-detail-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 17px !important;
    margin-top: 23px !important;
    padding-top: 21px !important;
    border-top: 1px solid rgba(69,46,41,.2) !important;
  }

  .gd-mobile-detail-list div {
    min-width: 0 !important;
  }

  .gd-mobile-detail-list span {
    display: block !important;
    margin-bottom: 6px !important;
    color: #452e29 !important;
    font-size: .56rem !important;
    line-height: 1 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    opacity: .56 !important;
  }

  .gd-mobile-detail-list strong {
    display: block !important;
    color: #452e29 !important;
    font-size: .88rem !important;
    line-height: 1.42 !important;
    font-weight: 500 !important;
  }

  .gd-mobile-close,
  .gd-mobile-nav {
    position: fixed !important;
    z-index: 20000010 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 1px solid rgba(245,203,217,.45) !important;
    border-radius: 50% !important;
    background: rgba(69,46,41,.84) !important;
    color: #f5cbd9 !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .gd-mobile-close {
    top: calc(env(safe-area-inset-top, 0px) + 18px) !important;
    right: 18px !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 1.45rem !important;
  }

  .gd-mobile-nav {
    top: 43vh !important;
    width: 40px !important;
    height: 40px !important;
    transform: translateY(-50%) !important;
    font-size: 1rem !important;
  }

  .gd-mobile-prev { left: 7px !important; }
  .gd-mobile-next { right: 7px !important; }

  .gd-mobile-viewer.is-changing .gd-mobile-art img,
  .gd-mobile-viewer.is-changing .gd-mobile-info {
    opacity: .16 !important;
    transform: translateY(4px) !important;
  }

  /* The old featured viewer is desktop-only now, period. */
  .sola-feature-viewer {
    display: none !important;
  }
}

@media (min-width: 701px) {
  .gd-mobile-viewer {
    display: none !important;
  }
}


/* =========================================================
   v87 — continuous mobile swipe behavior
   ========================================================= */
@media (max-width: 700px) {
  .portfolio-lightbox,
  .gd-mobile-viewer {
    touch-action: pan-y !important;
  }

  .portfolio-lightbox img,
  .gd-mobile-art img {
    -webkit-user-drag: none !important;
    user-select: none !important;
  }
}


/* =========================================================
   v88 — actual infinite portfolio lightbox tracks
   ========================================================= */
.portfolio-lightbox-track {
  overscroll-behavior-x: contain !important;
}

.portfolio-lightbox-slide[data-clone] {
  pointer-events: none !important;
}

/* The clone is visually identical to its source slide while crossing the seam. */
.portfolio-lightbox-slide[data-clone] img {
  opacity: inherit;
}


/* =========================================================
   v89 — cinematic splash timing, synchronized hero reveal
   ========================================================= */

/* Header mark stays hidden until the travelling mark reaches it. */
html.splash-active .sola-wordmark-header,
html.splash-page-ready:not(.splash-logo-handoff) .sola-wordmark-header {
  opacity: 0 !important;
}

html.splash-logo-handoff .sola-wordmark-header,
html.splash-finished .sola-wordmark-header {
  opacity: 1 !important;
}

/* No second transition on the real header mark. */
.sola-wordmark-header {
  transition: none !important;
}

/*
  Keep the splash perfectly stable. The only moving object during the intro is
  the SOLA mark itself.
*/
.site-splash {
  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important;
  background: #452e29 !important;
}

.site-splash-logo {
  opacity: 0 !important;
  transform: scale(.965);
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  /*
    Gentle initial appearance + slower docking move.
    The transform timing intentionally matches the original cinematic feel more
    closely than v82-v88.
  */
  transition:
    opacity .34s cubic-bezier(.22,.75,.22,1),
    transform .94s cubic-bezier(.18,.78,.20,1) !important;
}

.site-splash-logo.is-visible {
  opacity: 1 !important;
  transform: scale(1);
}

.site-splash-logo.is-visible.is-docking {
  opacity: 1 !important;
  transform:
    translate3d(var(--splash-x), var(--splash-y), 0)
    scale(var(--splash-scale)) !important;
}

/* Instant DOM handoff once the travelling mark reaches the header. */
.site-splash-logo.is-handed-off {
  opacity: 0 !important;
  transition: none !important;
}

/*
  Critical fix: no brown-screen hold after the logo finishes.
  The splash layer is gone on the exact same beat as the logo handoff.
*/
.site-splash.is-cleared {
  opacity: 0 !important;
  visibility: visible !important;
  pointer-events: none !important;
  transition: opacity .13s ease-out !important;
}

/*
  The hero content is already in its intro-ready state under the splash.
  It starts animating only when JavaScript dispatches sola:splash-complete.
*/
html.splash-page-ready body > main,
html.splash-page-ready body > .site-header {
  opacity: 1 !important;
  visibility: visible !important;
}

@media (prefers-reduced-motion: reduce) {
  .site-splash-logo,
  .sola-wordmark-header {
    transition: none !important;
  }
}


/* =========================================================
   v90 — fade brown splash into homepage
   ========================================================= */

/*
  Keep the splash visible while opacity animates down, then JS removes it.
  This creates a softer blend into the homepage without reintroducing the pause.
*/
.site-splash {
  will-change: opacity !important;
}


/* =========================================================
   v91 — quicker final splash fade
   Logo timing remains unchanged from v90.
   ========================================================= */
.site-splash.is-cleared {
  transition: opacity .13s cubic-bezier(.22,.61,.36,1) !important;
}


/* =========================================================
   v92 — smooth homepage reveal under the splash
   ========================================================= */

/*
  Keep the homepage painted underneath the splash, but slightly softened.
  When the splash docks/clears, the page eases into full visibility instead
  of appearing all at once.
*/
html.splash-page-ready:not(.splash-finished) body > main,
html.splash-page-ready:not(.splash-finished) body > .site-header {
  opacity: .72 !important;
  transform: translateY(5px) !important;
  transition:
    opacity .34s cubic-bezier(.22,.61,.36,1),
    transform .34s cubic-bezier(.22,.61,.36,1) !important;
}

html.splash-finished body > main,
html.splash-finished body > .site-header {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition:
    opacity .34s cubic-bezier(.22,.61,.36,1),
    transform .34s cubic-bezier(.22,.61,.36,1) !important;
}

/*
  Preserve the logo handoff: the header wordmark still becomes visible at the
  exact docking point, while the rest of the page eases in around it.
*/
html.splash-logo-handoff .sola-wordmark-header,
html.splash-finished .sola-wordmark-header {
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html.splash-page-ready body > main,
  html.splash-page-ready body > .site-header,
  html.splash-finished body > main,
  html.splash-finished body > .site-header {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* =========================================================
   v93 — true simultaneous splash/home crossfade
   ========================================================= */

/*
  While the splash is preparing/docking, the actual homepage content is
  completely transparent underneath it. This prevents the sudden "already
  visible" homepage that defeated the v92 fade.
*/
html.splash-active body > main,
html.splash-page-ready:not(.home-reveal-start) body > main {
  opacity: 0 !important;
  transform: translateY(4px) !important;
  transition: none !important;
}

/*
  Header shell can exist underneath so the logo has a precise docking target,
  but its navigation/UI remains invisible until the dock completes.
*/
html.splash-active .site-header .nav,
html.splash-active .site-header .menu-toggle,
html.splash-page-ready:not(.home-reveal-start) .site-header .nav,
html.splash-page-ready:not(.home-reveal-start) .site-header .menu-toggle {
  opacity: 0 !important;
  transition: none !important;
}

/*
  This class is added on the SAME frame as the logo handoff.
  Main content begins fading immediately while the brown overlay fades away.
*/
html.home-reveal-start body > main {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition:
    opacity .38s cubic-bezier(.22,.61,.36,1),
    transform .38s cubic-bezier(.22,.61,.36,1) !important;
}

html.home-reveal-start .site-header .nav,
html.home-reveal-start .site-header .menu-toggle {
  opacity: 1 !important;
  transition: opacity .34s cubic-bezier(.22,.61,.36,1) !important;
}

/*
  Keep the real header SOLA mark excluded from the homepage fade.
  It appears instantly under the travelling logo for the clean dock handoff.
*/
html.splash-logo-handoff .sola-wordmark-header,
html.home-reveal-start .sola-wordmark-header {
  opacity: 1 !important;
  transition: none !important;
}

/*
  Slightly lengthen only the visual fade of the brown layer. It begins
  immediately at dock, so the longer fade reads as a crossfade rather than a
  delay or blank hold.
*/
.site-splash.is-cleared {
  opacity: 0 !important;
  visibility: visible !important;
  pointer-events: none !important;
  transition: opacity .22s cubic-bezier(.22,.61,.36,1) !important;
}

/* Override the v92 partial-opacity reveal completely. */
html.splash-page-ready:not(.splash-finished) body > main,
html.splash-page-ready:not(.splash-finished) body > .site-header {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.splash-active body > main,
  html.splash-page-ready body > main,
  html.home-reveal-start body > main,
  html.home-reveal-start .site-header .nav,
  html.home-reveal-start .site-header .menu-toggle {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* =========================================================
   v97 — even mobile navigation
   ========================================================= */
@media (max-width: 900px) {
  .site-header .nav {
    left: 4vw !important;
    right: 4vw !important;
    top: 80px !important;
    padding: 28px 24px !important;
    gap: 0 !important;
    align-items: stretch !important;
  }

  .site-header .nav.open {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Every link uses exactly the same geometry. */
  .site-header .nav.open > a,
  .site-header .nav.open > a.nav-design-link,
  .site-header .nav.open > a.nav-cta {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 18px 26px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #fffaf8 !important;
    font: inherit !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    text-align: left !important;
    justify-content: flex-start !important;
  }

  .site-header .nav.open > a::before,
  .site-header .nav.open > a::after {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .site-header .nav {
    padding: 24px 20px !important;
  }

  .site-header .nav.open > a,
  .site-header .nav.open > a.nav-design-link,
  .site-header .nav.open > a.nav-cta {
    padding: 17px 24px !important;
    font-size: .96rem !important;
  }
}


/* =========================================================
   v98 — FINAL mobile hero category layout
   ATHLETES / LEAGUES / TOURS / CAMPAIGNS
   ========================================================= */

@media (max-width: 640px) {
  .hero-meta,
  .hero-meta.hero-meta-animate {
    box-sizing: border-box !important;

    /* Do not combine width:100% with left/right positioning. */
    left: 18px !important;
    right: 18px !important;
    width: auto !important;

    bottom: 19px !important;

    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    column-gap: 0 !important;
    row-gap: 0 !important;

    align-items: center !important;
    justify-content: stretch !important;

    overflow: visible !important;
  }

  .hero-meta > span,
  .hero-meta.hero-meta-animate > span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 0.47rem !important;
    line-height: 1 !important;
    letter-spacing: 0.07em !important;
    white-space: nowrap !important;

    text-align: center !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* All four use identical alignment — no special first/last behavior. */
  .hero-meta > span:first-child,
  .hero-meta > span:last-child {
    justify-content: center !important;
    text-align: center !important;
  }
}

/* A little extra breathing room on very narrow phones. */
@media (max-width: 390px) {
  .hero-meta,
  .hero-meta.hero-meta-animate {
    left: 10px !important;
    right: 10px !important;
  }

  .hero-meta > span,
  .hero-meta.hero-meta-animate > span {
    font-size: 0.43rem !important;
    letter-spacing: 0.045em !important;
  }
}


/* =========================================================
   v99 — actual mobile hero-label visibility fix
   Brown TOURS/CAMPAIGNS were invisible on the brown hero.
   ========================================================= */
@media (max-width: 640px) {
  .hero-meta .hero-meta-pink,
  .hero-meta .hero-meta-brown,
  .hero-meta.hero-meta-animate .hero-meta-pink,
  .hero-meta.hero-meta-animate .hero-meta-brown {
    color: #f5cbd9 !important;
    opacity: 1 !important;
  }

  .hero-meta,
  .hero-meta.hero-meta-animate {
    left: 18px !important;
    right: 18px !important;
    width: auto !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
  }

  .hero-meta > span {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    font-size: .47rem !important;
    letter-spacing: .07em !important;
    text-align: center !important;
  }
}

@media (max-width: 390px) {
  .hero-meta > span {
    font-size: .43rem !important;
    letter-spacing: .045em !important;
  }
}


/* =========================================================
   v100 — mobile CAMPAIGNS brown
   ========================================================= */
@media (max-width: 640px) {
  .hero-meta > span:nth-child(4),
  .hero-meta.hero-meta-animate > span:nth-child(4) {
    color: #452e29 !important;
  }
}


/* =========================================================
   v101 — iOS swipe-back / BFCache transition recovery
   ========================================================= */
html.splash-finished:not(.page-transition-pending) .page-transition-layer:not(.is-covering) {
  pointer-events: none !important;
}


/* =========================================================
   v102 — native iOS/touch navigation; no internal page wipe
   ========================================================= */
@media (hover: none), (pointer: coarse) {
  .page-transition-layer,
  .page-transition-layer.is-covering,
  html.page-transition-pending .page-transition-layer,
  html.page-transition-reveal .page-transition-layer {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transform: translate3d(100%,0,0) !important;
    transition: none !important;
    pointer-events: none !important;
  }

  html.page-transition-pending body {
    background: inherit !important;
  }
}


/* =========================================================
   v103 — centered WHO WE ARE editorial composition
   ========================================================= */
@media (min-width: 901px) {
  .manifesto.section {
    box-sizing: border-box !important;
    width: min(100%, 1640px) !important;
    max-width: 1640px !important;
    min-height: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 92px clamp(54px, 5.2vw, 92px) 96px !important;

    display: grid !important;
    grid-template-columns: minmax(330px, .82fr) minmax(620px, 1.18fr) !important;
    grid-template-rows: auto 1fr !important;
    grid-template-areas:
      "label copy"
      "image copy" !important;
    column-gap: clamp(62px, 6vw, 112px) !important;
    row-gap: 24px !important;
    align-items: center !important;
    overflow: visible !important;
  }

  .manifesto .section-label {
    grid-area: label !important;
    position: relative !important;
    align-self: start !important;
    justify-self: start !important;
    margin: 0 !important;
    z-index: 4 !important;
  }

  .manifesto-image-art {
    grid-area: image !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    justify-self: center !important;
    align-self: center !important;

    width: min(100%, 380px) !important;
    height: 410px !important;
    margin: -10px 0 0 !important;
    z-index: 1 !important;
  }

  .manifesto-image-backdrop {
    left: 30px !important;
    top: 28px !important;
    width: calc(100% - 4px) !important;
    height: calc(100% - 14px) !important;
    transform: rotate(2.2deg) !important;
  }

  .manifesto-image-main {
    left: 0 !important;
    top: 0 !important;
    width: 90% !important;
    height: 91% !important;
    transform: rotate(-1.35deg) !important;
    box-shadow: 0 24px 54px rgba(69,46,41,.13) !important;
  }

  .manifesto-copy {
    grid-area: copy !important;
    position: relative !important;
    align-self: center !important;
    justify-self: center !important;
    width: 100% !important;
    max-width: 790px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    z-index: 3 !important;
  }

  .manifesto-copy .eyebrow {
    margin: 0 0 18px !important;
    text-align: center !important;
    font-size: 1.18rem !important;
  }

  .manifesto h2 {
    margin: 0 !important;
    font-size: clamp(4.2rem, 5.7vw, 6.5rem) !important;
    line-height: .9 !important;
    letter-spacing: -.065em !important;
  }

  .manifesto .body-copy {
    max-width: 690px !important;
    margin: 42px auto 0 !important;
    font-size: 1.02rem !important;
    line-height: 1.62 !important;
    text-align: center !important;
  }

  .manifesto-focus {
    margin: 30px auto 0 !important;
    text-align: center !important;
  }
}

/* Keep the composition comfortable on smaller desktop/laptop widths. */
@media (min-width: 901px) and (max-width: 1180px) {
  .manifesto.section {
    grid-template-columns: minmax(280px, .76fr) minmax(520px, 1.24fr) !important;
    column-gap: 50px !important;
    padding-left: 44px !important;
    padding-right: 44px !important;
  }

  .manifesto-image-art {
    width: min(100%, 325px) !important;
    height: 360px !important;
  }

  .manifesto h2 {
    font-size: clamp(4rem, 6.4vw, 5.5rem) !important;
  }
}


/* =========================================================
   v104 — structural WHO WE ARE rebuild
   Fresh classes intentionally bypass old manifesto positioning rules.
   ========================================================= */

@media (min-width: 901px) {
  .manifesto.manifesto-v104 {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 720px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    overflow: hidden !important;
  }

  .manifesto-v104-shell {
    width: min(calc(100% - 10vw), 1480px) !important;
    min-height: 720px !important;
    margin: 0 auto !important;
    padding: 86px 0 92px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  .manifesto-v104-label {
    position: static !important;
    margin: 0 0 38px !important;
    padding: 0 !important;
    align-self: auto !important;
  }

  .manifesto-v104-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(340px, 470px) minmax(560px, 720px) !important;
    justify-content: center !important;
    align-items: center !important;
    column-gap: clamp(72px, 7vw, 124px) !important;
  }

  .manifesto-v104-visual {
    position: relative !important;
    width: 100% !important;
    max-width: 430px !important;
    height: 470px !important;
    margin: 0 !important;
    justify-self: end !important;
  }

  .manifesto-v104-pink {
    position: absolute !important;
    left: 46px !important;
    top: 38px !important;
    width: 350px !important;
    height: 390px !important;
    background: #f5cbd9 !important;
    transform: rotate(2.5deg) !important;
  }

  .manifesto-v104-photo {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 342px !important;
    height: 405px !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #452e29 !important;
    transform: rotate(-1.3deg) !important;
    box-shadow: 0 24px 52px rgba(69,46,41,.14) !important;
  }

  .manifesto-v104-photo img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 34% !important;
    filter: saturate(.86) contrast(1.035) !important;
  }

  .manifesto-v104-index {
    position: absolute !important;
    left: 5px !important;
    bottom: 6px !important;
    font-size: .56rem !important;
    letter-spacing: .16em !important;
    color: rgba(69,46,41,.48) !important;
  }

  .manifesto-v104-copy {
    position: static !important;
    width: 100% !important;
    max-width: 700px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    justify-self: start !important;
  }

  .manifesto-v104-copy .eyebrow {
    margin: 0 0 18px !important;
    text-align: left !important;
    font-size: 1.18rem !important;
  }

  .manifesto-v104-copy h2 {
    margin: 0 !important;
    text-align: left !important;
    font-size: clamp(4.6rem, 5.5vw, 6.4rem) !important;
    line-height: .9 !important;
    letter-spacing: -.065em !important;
  }

  .manifesto-v104-copy .body-copy {
    max-width: 620px !important;
    margin: 38px 0 0 !important;
    text-align: left !important;
    font-size: 1.02rem !important;
    line-height: 1.64 !important;
  }

  .manifesto-v104-copy .manifesto-focus {
    margin: 28px 0 0 !important;
    text-align: left !important;
  }

  .manifesto-v104-copy .manifesto-focus::before {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Laptop */
@media (min-width: 901px) and (max-width: 1180px) {
  .manifesto-v104-shell {
    width: calc(100% - 72px) !important;
  }

  .manifesto-v104-grid {
    grid-template-columns: 320px minmax(480px, 1fr) !important;
    column-gap: 54px !important;
  }

  .manifesto-v104-visual {
    height: 405px !important;
  }

  .manifesto-v104-pink {
    left: 35px !important;
    top: 30px !important;
    width: 285px !important;
    height: 340px !important;
  }

  .manifesto-v104-photo {
    width: 285px !important;
    height: 350px !important;
  }

  .manifesto-v104-copy h2 {
    font-size: clamp(4rem, 6vw, 5.2rem) !important;
  }
}

/* Tablet + mobile retain the existing mobile flow, but use the new markup. */
@media (max-width: 900px) {
  .manifesto.manifesto-v104 {
    display: block !important;
  }

  .manifesto-v104-shell {
    width: 100% !important;
  }

  .manifesto-v104-label {
    margin-bottom: 24px !important;
  }

  .manifesto-v104-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
  }

  .manifesto-v104-visual {
    position: relative !important;
    width: min(78vw, 330px) !important;
    height: 300px !important;
    margin: 0 !important;
  }

  .manifesto-v104-pink {
    position: absolute !important;
    left: 20px !important;
    top: 18px !important;
    width: 90% !important;
    height: 88% !important;
    background: #f5cbd9 !important;
    transform: rotate(2deg) !important;
  }

  .manifesto-v104-photo {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 84% !important;
    height: 84% !important;
    margin: 0 !important;
    overflow: hidden !important;
    transform: rotate(-1deg) !important;
  }

  .manifesto-v104-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 34% !important;
  }

  .manifesto-v104-index {
    position: absolute !important;
    left: 0 !important;
    bottom: 4px !important;
    font-size: .52rem !important;
    letter-spacing: .14em !important;
    opacity: .5 !important;
  }

  .manifesto-v104-copy {
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
  }
}


/* =========================================================
   v108 — SOLA CREATIVE LIBRARY / LAB
   ========================================================= */

.library-page {
  --lib-brown: #452e29;
  --lib-deep: #241513;
  --lib-black: #120b0a;
  --lib-pink: #f5cbd9;
  --lib-cream: #f3eee8;
  --lib-line: rgba(245,203,217,.18);
  --room-x: 0px;
  --room-y: 0px;
  --light-x: 50%;
  margin: 0;
  min-height: 100%;
  background: var(--lib-deep);
  color: var(--lib-cream);
  overflow-x: hidden;
}

.library-page * {
  box-sizing: border-box;
}

.library-page a {
  color: inherit;
}

.library-noise,
.library-vignette,
.library-light-sweep {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
}

.library-noise {
  opacity: .045;
  mix-blend-mode: soft-light;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.55) 0 0.7px, transparent .8px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.35) 0 0.6px, transparent .8px);
  background-size: 5px 5px, 7px 7px;
}

.library-vignette {
  z-index: 998;
  background: radial-gradient(circle at center, transparent 46%, rgba(10,4,3,.28) 100%);
}

.library-light-sweep {
  z-index: 1;
  opacity: .45;
  background:
    radial-gradient(ellipse at var(--light-x) 18%, rgba(245,203,217,.10), transparent 42%),
    linear-gradient(115deg, transparent 35%, rgba(255,255,255,.025) 49%, transparent 62%);
  transition: background-position .3s ease;
}

.library-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 84px;
  padding: 0 clamp(24px, 4vw, 72px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  z-index: 1200;
  border-bottom: 1px solid rgba(245,203,217,.12);
  background: rgba(36,21,19,.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.library-logo-link {
  justify-self: start;
  display: inline-flex;
}

.library-logo {
  display: block;
  width: 104px;
  height: auto;
}

.library-header-meta {
  display: flex;
  gap: 18px;
  align-items: center;
  font-size: .54rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: rgba(243,238,232,.55);
}

.library-header-meta span + span::before {
  content: "/";
  margin-right: 18px;
  opacity: .4;
}

.library-exit {
  justify-self: end;
  font-size: .58rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
}

.library-main {
  position: relative;
  z-index: 10;
}

.library-hero {
  min-height: 100svh;
  padding: 150px clamp(26px, 6vw, 110px) 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.library-hero::before {
  content: "";
  position: absolute;
  width: min(48vw, 760px);
  aspect-ratio: 1;
  right: -12vw;
  top: 19vh;
  border: 1px solid rgba(245,203,217,.16);
  border-radius: 50%;
  box-shadow:
    0 0 0 80px rgba(245,203,217,.018),
    0 0 0 160px rgba(245,203,217,.010);
}

.library-hero-grid {
  width: min(1500px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(220px, .45fr);
  gap: 8vw;
  align-items: end;
}

.library-kicker {
  margin: 0 0 24px;
  font-size: .62rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: rgba(245,203,217,.65);
}

.library-hero h1 {
  margin: 0;
  max-width: 980px;
  font-size: clamp(5rem, 9.5vw, 10.5rem);
  line-height: .82;
  letter-spacing: -.07em;
  font-weight: 500;
}

.library-hero h1 em,
.library-manifesto h2 em {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  color: var(--lib-pink);
}

.library-intro {
  max-width: 610px;
  margin: 42px 0 0;
  font-size: 1.04rem;
  line-height: 1.65;
  color: rgba(243,238,232,.66);
}

.library-hero-index {
  align-self: center;
  justify-self: end;
  min-width: 210px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  border-top: 1px solid rgba(245,203,217,.22);
  padding-top: 18px;
}

.library-hero-index span,
.library-hero-index small {
  font-size: .56rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: rgba(243,238,232,.44);
}

.library-hero-index strong {
  margin: 8px 0 26px;
  font-size: 2.6rem;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -.04em;
}

.library-downcue {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: .5rem;
  letter-spacing: .18em;
  color: rgba(243,238,232,.42);
}

.library-downcue i {
  width: 42px;
  height: 1px;
  background: rgba(245,203,217,.35);
  position: relative;
  overflow: hidden;
}

.library-downcue i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--lib-pink);
  transform: translateX(-100%);
  animation: libraryCue 2.2s cubic-bezier(.6,0,.2,1) infinite;
}

@keyframes libraryCue {
  0% { transform: translateX(-100%); }
  55%,100% { transform: translateX(110%); }
}

.library-room {
  min-height: 100svh;
  padding: 88px clamp(22px, 5vw, 82px) 110px;
  position: relative;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.012), transparent 24%),
    #2b1917;
  border-top: 1px solid rgba(245,203,217,.12);
  overflow: hidden;
}

.library-room-heading {
  width: min(1500px, 100%);
  margin: 0 auto 58px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.library-room-label {
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(245,203,217,.62);
}

.library-room-heading p {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  font-style: italic;
  color: rgba(245,203,217,.72);
}

.library-stage {
  width: min(1500px, 100%);
  height: 620px;
  margin: 0 auto;
  position: relative;
  perspective: 1600px;
  transform: translate3d(var(--room-x), var(--room-y), 0);
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
}

.library-wall-glow {
  position: absolute;
  left: 50%;
  top: 10%;
  width: 68%;
  height: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(245,203,217,.09), transparent 68%);
  filter: blur(20px);
  opacity: .8;
}

.library-shelf-wrap {
  position: absolute;
  left: 50%;
  bottom: 72px;
  width: min(1180px, 88vw);
  transform: translateX(-50%);
}

.library-books {
  height: 472px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(8px, 1.1vw, 16px);
  padding: 0 28px 0;
  position: relative;
  z-index: 4;
}

.library-book {
  --book-color: #4c2c28;
  width: var(--book-w);
  height: var(--book-h);
  flex: 0 0 var(--book-w);
  position: relative;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--lib-cream);
  cursor: pointer;
  transform:
    translate3d(0, 0, 0)
    rotateZ(var(--book-tilt));
  transform-origin: 50% 100%;
  transition:
    transform .52s cubic-bezier(.18,.83,.24,1),
    filter .52s ease;
  filter: drop-shadow(0 14px 9px rgba(6,2,2,.22));
  outline: none;
}

.library-book:nth-child(2n) { --book-color: #efe7df; color: #452e29; }
.library-book:nth-child(3n) { --book-color: #5a3430; }
.library-book:nth-child(4n) { --book-color: #dcaec0; color: #452e29; }

.library-book::before {
  content: "";
  position: absolute;
  inset: 7px -3px 8px 3px;
  background: rgba(0,0,0,.23);
  filter: blur(5px);
  transform: translateZ(-15px);
  z-index: -2;
  opacity: .45;
  transition: opacity .4s ease, transform .4s ease;
}

.book-spine {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background:
    linear-gradient(90deg, rgba(255,255,255,.04), transparent 15%, transparent 78%, rgba(0,0,0,.16)),
    var(--book-color);
  border: 1px solid rgba(245,203,217,.12);
  box-shadow:
    inset 7px 0 10px rgba(255,255,255,.025),
    inset -8px 0 14px rgba(0,0,0,.12);
  overflow: hidden;
}

.book-spine::after {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  top: 44px;
  bottom: 42px;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  opacity: .12;
}

.book-top {
  position: absolute;
  left: 2px;
  right: -7px;
  top: -8px;
  height: 9px;
  background:
    repeating-linear-gradient(to bottom, #e5ddd5 0 1px, #cfc4ba 1px 2px);
  transform: skewX(-42deg);
  transform-origin: left bottom;
  opacity: .9;
}

.book-pages {
  position: absolute;
  top: 4px;
  bottom: 4px;
  right: -7px;
  width: 8px;
  background:
    repeating-linear-gradient(to right, #eee7df 0 1px, #d3c8be 1px 2px);
  border-right: 1px solid rgba(0,0,0,.15);
  transform: skewY(-6deg);
}

.book-number {
  margin-top: 14px;
  font-size: .52rem;
  letter-spacing: .12em;
  opacity: .75;
}

.book-title {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 270px;
  transform: translate(-50%,-50%) rotate(-90deg);
  transform-origin: center;
  text-align: center;
  font-size: clamp(.62rem, .75vw, .86rem);
  line-height: 1.16;
  letter-spacing: .16em;
  font-weight: 600;
}

.book-mark {
  margin-top: auto;
  margin-bottom: 13px;
  font-size: .42rem;
  letter-spacing: .12em;
  opacity: .6;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.library-book:hover,
.library-book:focus-visible {
  transform:
    translate3d(0, -28px, 52px)
    rotateZ(0deg)
    rotateX(-1.5deg)
    scale(1.035);
  z-index: 30;
  filter: drop-shadow(0 34px 19px rgba(6,2,2,.36));
}

.library-book:hover::before,
.library-book:focus-visible::before {
  opacity: .8;
  transform: translate3d(0, 22px, -18px) scaleX(1.15);
}

.library-book:hover + .library-book,
.library-book:focus-visible + .library-book {
  transform: translateX(8px) rotateZ(var(--book-tilt));
}

.library-book:has(+ .library-book:hover),
.library-book:has(+ .library-book:focus-visible) {
  transform: translateX(-8px) rotateZ(var(--book-tilt));
}

.library-shelf {
  height: 34px;
  position: relative;
  z-index: 8;
  background: linear-gradient(to bottom, #5a3530, #35201d);
  border-top: 1px solid rgba(245,203,217,.18);
  box-shadow:
    0 22px 34px rgba(5,2,2,.42),
    inset 0 5px 10px rgba(255,255,255,.025);
}

.shelf-front {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 44px;
  background: linear-gradient(to bottom, #321d1b, #1d1110);
  clip-path: polygon(0 0, 100% 0, 97% 100%, 3% 100%);
}

.shelf-edge {
  position: absolute;
  inset: 5px 14px auto;
  height: 1px;
  background: rgba(245,203,217,.13);
}

.library-shelf-shadow {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: -44px;
  height: 56px;
  background: radial-gradient(ellipse, rgba(0,0,0,.45), transparent 70%);
  filter: blur(8px);
}

.library-hover-card {
  position: absolute;
  z-index: 80;
  width: min(360px, 36vw);
  min-height: 145px;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 36px 1fr;
  column-gap: 14px;
  background: rgba(245,203,217,.97);
  color: #452e29;
  box-shadow: 0 26px 80px rgba(0,0,0,.30);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(.98);
  transition:
    opacity .24s ease,
    transform .34s cubic-bezier(.2,.8,.2,1);
}

.library-hover-card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.hover-card-number {
  font-size: .52rem;
  letter-spacing: .14em;
  opacity: .52;
}

.library-hover-card p {
  margin: 0 0 5px;
  font-size: .55rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  opacity: .58;
}

.library-hover-card h2 {
  margin: 0;
  font-size: 1.48rem;
  line-height: 1;
  letter-spacing: -.045em;
  font-weight: 500;
}

.library-hover-card small {
  display: block;
  margin-top: 12px;
  font-size: .76rem;
  line-height: 1.5;
  opacity: .78;
}

.hover-card-open {
  grid-column: 2;
  margin-top: 17px;
  font-size: .48rem;
  letter-spacing: .14em;
  opacity: .62;
}

.library-floor-line {
  position: absolute;
  left: 3%;
  right: 3%;
  bottom: 8px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(245,203,217,.12), transparent);
}

.library-room .library-book {
  opacity: 0;
  transform: translateY(34px) rotateZ(var(--book-tilt));
}

.library-room.in-view .library-book {
  opacity: 1;
  transform: translateY(0) rotateZ(var(--book-tilt));
}

.library-room.in-view .library-book:nth-child(1) { transition-delay: .05s; }
.library-room.in-view .library-book:nth-child(2) { transition-delay: .10s; }
.library-room.in-view .library-book:nth-child(3) { transition-delay: .15s; }
.library-room.in-view .library-book:nth-child(4) { transition-delay: .20s; }
.library-room.in-view .library-book:nth-child(5) { transition-delay: .25s; }
.library-room.in-view .library-book:nth-child(6) { transition-delay: .30s; }
.library-room.in-view .library-book:nth-child(7) { transition-delay: .35s; }
.library-room.in-view .library-book:nth-child(8) { transition-delay: .40s; }

.library-manifesto {
  min-height: 76svh;
  padding: 120px clamp(26px, 7vw, 120px);
  display: grid;
  grid-template-columns: 80px minmax(0,1fr) 220px;
  gap: 5vw;
  align-items: center;
  border-top: 1px solid rgba(245,203,217,.10);
  background: #211311;
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity .7s ease,
    transform .8s cubic-bezier(.2,.8,.2,1);
}

.library-manifesto.in-view {
  opacity: 1;
  transform: translateY(0);
}

.library-manifesto-number {
  font-size: .58rem;
  letter-spacing: .15em;
  color: rgba(245,203,217,.5);
}

.library-manifesto-copy p {
  margin: 0 0 20px;
  font-size: .58rem;
  letter-spacing: .17em;
  color: rgba(243,238,232,.5);
}

.library-manifesto h2 {
  margin: 0;
  font-size: clamp(3.8rem, 6vw, 7rem);
  line-height: .92;
  letter-spacing: -.06em;
  font-weight: 500;
}

.library-manifesto-side {
  justify-self: end;
  display: grid;
  gap: 14px;
  text-align: right;
  font-size: .55rem;
  letter-spacing: .16em;
  color: rgba(243,238,232,.44);
}

/* READER */
.library-reader-open {
  overflow: hidden !important;
}

.book-reader {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: none;
  background: rgba(18,11,10,0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  opacity: 0;
  transition:
    opacity .34s ease,
    background-color .34s ease,
    backdrop-filter .34s ease;
}

.book-reader.is-mounted {
  display: block;
}

.book-reader.is-visible {
  opacity: 1;
  background: rgba(18,11,10,.88);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.reader-room {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 72px 82px;
  perspective: 1900px;
}

.reader-book-shell {
  width: min(1180px, 83vw);
  height: min(690px, 77vh);
  position: relative;
  transform-style: preserve-3d;
  transform: translateY(30vh) scale(.28) rotateX(12deg);
  opacity: 0;
  transition:
    transform .58s cubic-bezier(.18,.82,.2,1),
    opacity .28s ease;
}

.reader-book-shell.book-lifted {
  transform: translateY(0) scale(1) rotateX(0deg);
  opacity: 1;
}

.reader-book-cover,
.reader-spread {
  position: absolute;
  inset: 0;
}

.reader-book-cover {
  left: 50%;
  width: 50%;
  background:
    linear-gradient(90deg, rgba(255,255,255,.05), transparent 12%, rgba(0,0,0,.14)),
    #4c2c28;
  transform-origin: left center;
  transform: rotateY(0deg);
  z-index: 10;
  border: 1px solid rgba(245,203,217,.16);
  box-shadow: -12px 30px 70px rgba(0,0,0,.36);
  display: flex;
  flex-direction: column;
  padding: 36px;
  transition: transform .72s cubic-bezier(.18,.78,.18,1);
  backface-visibility: hidden;
}

.book-reader[data-accent="cream"] .reader-book-cover {
  background:
    linear-gradient(90deg, rgba(255,255,255,.18), transparent 16%, rgba(0,0,0,.08)),
    #e9dfd7;
  color: #452e29;
}

.reader-cover-number {
  font-size: .62rem;
  letter-spacing: .15em;
  opacity: .65;
}

.reader-cover-title {
  margin: auto 0;
  font-size: clamp(2.5rem, 4vw, 5rem);
  line-height: .9;
  letter-spacing: -.06em;
  max-width: 8ch;
}

.reader-cover-mark {
  font-size: .52rem;
  letter-spacing: .16em;
  opacity: .56;
}

.reader-book-shell.book-opening .reader-book-cover,
.reader-book-shell.book-open .reader-book-cover {
  transform: rotateY(-172deg);
}

.reader-spread {
  display: grid;
  grid-template-columns: minmax(0,1fr) 18px minmax(0,1fr);
  background: #eee7df;
  color: #452e29;
  box-shadow: 0 32px 100px rgba(0,0,0,.36);
  transform: scaleX(.51);
  transform-origin: center;
  opacity: .3;
  transition:
    transform .62s cubic-bezier(.18,.78,.18,1),
    opacity .5s ease;
}

.reader-book-shell.book-open .reader-spread {
  transform: scaleX(1);
  opacity: 1;
}

.reader-page {
  min-width: 0;
  position: relative;
  overflow: hidden;
}

.reader-page-left {
  padding: 26px 18px 26px 26px;
}

.reader-page-right {
  padding: clamp(34px, 4vw, 58px);
  display: flex;
  flex-direction: column;
}

.reader-page-image-wrap {
  width: 100%;
  height: calc(100% - 28px);
  overflow: hidden;
  background: #2b1917;
}

.reader-page-image-wrap img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: opacity .18s ease, transform .28s ease;
}

.reader-page-caption {
  display: block;
  margin-top: 10px;
  font-size: .48rem;
  letter-spacing: .15em;
  color: rgba(69,46,41,.52);
}

.reader-gutter {
  background:
    linear-gradient(90deg, rgba(0,0,0,.11), transparent 45%, rgba(255,255,255,.45));
  box-shadow: inset 0 0 12px rgba(69,46,41,.12);
}

.reader-volume {
  font-size: .55rem;
  letter-spacing: .16em;
  color: rgba(69,46,41,.52);
}

.reader-page-right h2 {
  margin: 28px 0 6px;
  font-size: clamp(3rem, 4.6vw, 5.8rem);
  line-height: .88;
  letter-spacing: -.065em;
  font-weight: 500;
}

.reader-subtitle {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 1.3rem;
  color: #8a626f;
}

.reader-rule {
  width: 48px;
  height: 1px;
  background: rgba(69,46,41,.28);
  margin: 30px 0 22px;
}

.reader-description {
  margin: 0;
  max-width: 48ch;
  font-size: .92rem;
  line-height: 1.67;
}

.reader-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: auto;
  padding-top: 32px;
  border-top: 1px solid rgba(69,46,41,.13);
}

.reader-meta span {
  display: block;
  margin-bottom: 7px;
  font-size: .46rem;
  letter-spacing: .15em;
  color: rgba(69,46,41,.46);
}

.reader-meta strong {
  display: block;
  font-size: .6rem;
  letter-spacing: .08em;
  font-weight: 600;
}

.reader-link {
  margin-top: 28px;
  align-self: flex-start;
  font-size: .54rem;
  letter-spacing: .15em;
  text-decoration: none;
  border-bottom: 1px solid rgba(69,46,41,.42);
  padding-bottom: 5px;
}

.book-reader-close,
.book-reader-nav {
  position: fixed;
  z-index: 5200;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(245,203,217,.34);
  border-radius: 50%;
  background: rgba(69,46,41,.66);
  color: #f5cbd9;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
}

.book-reader-close {
  top: 22px;
  right: 24px;
  width: 46px;
  height: 46px;
  font-size: 1.5rem;
}

.book-reader-nav {
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
}

.book-reader-prev { left: 20px; }
.book-reader-next { right: 20px; }

.reader-progress {
  position: fixed;
  left: 50%;
  bottom: 22px;
  width: min(560px, 58vw);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  gap: 14px;
  align-items: center;
  z-index: 5200;
  font-size: .5rem;
  letter-spacing: .13em;
  color: rgba(245,203,217,.58);
}

.reader-progress i {
  height: 1px;
  background: rgba(245,203,217,.22);
  overflow: hidden;
}

.reader-progress b {
  display: block;
  width: 12.5%;
  height: 100%;
  background: #f5cbd9;
  transition: width .35s cubic-bezier(.2,.8,.2,1);
}

.book-reader.is-changing .reader-page-image-wrap img,
.book-reader.is-changing .reader-page-right {
  opacity: .18;
  transform: translateY(5px);
}

/* nav link */
.nav-lab-link {
  position: relative;
}

/* mobile */
@media (max-width: 760px) {
  .library-header {
    height: 72px;
    padding: 0 18px;
    grid-template-columns: 1fr auto;
  }

  .library-logo { width: 92px; }

  .library-header-meta { display: none; }

  .library-exit {
    grid-column: 2;
    font-size: .52rem;
  }

  .library-hero {
    min-height: 100svh;
    padding: 130px 22px 72px;
  }

  .library-hero-grid {
    display: block;
  }

  .library-hero h1 {
    font-size: clamp(4.2rem, 18vw, 6rem);
    line-height: .85;
  }

  .library-intro {
    margin-top: 34px;
    font-size: .9rem;
  }

  .library-hero-index {
    display: none;
  }

  .library-hero::before {
    width: 90vw;
    right: -45vw;
    top: 25vh;
  }

  .library-downcue {
    left: 22px;
    transform: none;
  }

  .library-room {
    min-height: auto;
    padding: 74px 0 86px;
  }

  .library-room-heading {
    padding: 0 20px;
    margin-bottom: 38px;
  }

  .library-room-heading p {
    display: none;
  }

  .library-stage {
    height: 540px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    perspective: none;
    transform: none;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .library-stage::-webkit-scrollbar { display: none; }

  .library-shelf-wrap {
    width: 870px;
    left: 20px;
    bottom: 62px;
    transform: none;
  }

  .library-books {
    height: 420px;
    justify-content: flex-start;
    padding-left: 28px;
  }

  .library-book {
    transform: rotateZ(var(--book-tilt));
  }

  .library-book:hover,
  .library-book:focus-visible {
    transform: translateY(-16px) rotateZ(0deg) scale(1.02);
  }

  .library-hover-card {
    display: none !important;
  }

  .library-manifesto {
    min-height: 70svh;
    padding: 90px 22px;
    display: block;
  }

  .library-manifesto-number {
    margin-bottom: 60px;
  }

  .library-manifesto h2 {
    font-size: clamp(3.2rem, 13vw, 5rem);
  }

  .library-manifesto-side {
    margin-top: 60px;
    grid-template-columns: repeat(2, 1fr);
    text-align: left;
  }

  .reader-room {
    padding: 76px 14px 88px;
    overflow-y: auto;
    align-items: start;
  }

  .reader-book-shell {
    width: calc(100vw - 28px);
    height: auto;
    min-height: 730px;
    transform: translateY(22vh) scale(.32);
  }

  .reader-book-cover {
    display: none;
  }

  .reader-spread {
    position: relative;
    min-height: 730px;
    display: flex;
    flex-direction: column;
    transform: translateY(18px) scale(.97);
    transform-origin: center;
    opacity: 0;
  }

  .reader-book-shell.book-lifted .reader-spread,
  .reader-book-shell.book-opening .reader-spread,
  .reader-book-shell.book-open .reader-spread {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .reader-gutter {
    display: none;
  }

  .reader-page-left {
    padding: 12px;
    height: 54vh;
    min-height: 390px;
  }

  .reader-page-image-wrap {
    height: calc(100% - 24px);
  }

  .reader-page-right {
    padding: 28px 24px 34px;
  }

  .reader-page-right h2 {
    margin-top: 20px;
    font-size: clamp(2.8rem, 12vw, 4.6rem);
  }

  .reader-description {
    font-size: .86rem;
  }

  .reader-meta {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 30px;
  }

  .book-reader-nav {
    top: 44vh;
    width: 38px;
    height: 38px;
  }

  .book-reader-prev { left: 6px; }
  .book-reader-next { right: 6px; }

  .reader-progress {
    width: calc(100vw - 110px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  }

  .nav.open .nav-lab-link {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: inherit !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: inherit !important;
    background: transparent !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .library-page *,
  .library-page *::before,
  .library-page *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}


/* =========================================================
   v109 — OUR LIBRARY OF WORK
   Direct-to-books, upright shelf, mobile book wall
   ========================================================= */

.library-room-first {
  min-height: 100svh !important;
  padding-top: 128px !important;
}

.library-room-heading-v109 {
  align-items: end !important;
  margin-bottom: 34px !important;
}

.library-room-heading-v109 > div:first-child {
  max-width: 820px !important;
}

.library-room-heading-v109 h1 {
  margin: 18px 0 0 !important;
  font-size: clamp(4.4rem, 6.4vw, 7.8rem) !important;
  line-height: .88 !important;
  letter-spacing: -.065em !important;
  font-weight: 500 !important;
}

.library-room-heading-v109 h1 em {
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 400 !important;
  color: var(--lib-pink) !important;
}

.library-room-intro {
  max-width: 360px !important;
  text-align: right !important;
}

.library-room-intro p {
  margin: 0 0 18px !important;
  font-family: inherit !important;
  font-style: normal !important;
  font-size: .9rem !important;
  line-height: 1.55 !important;
  color: rgba(243,238,232,.62) !important;
}

.library-room-intro span {
  font-size: .5rem !important;
  letter-spacing: .16em !important;
  color: rgba(245,203,217,.48) !important;
}

/* Upright books */
.library-books {
  gap: 8px !important;
}

.library-book,
.library-room .library-book,
.library-room.in-view .library-book {
  transform: translate3d(0,0,0) rotateZ(0deg) !important;
}

.library-book:hover,
.library-book:focus-visible {
  transform: translate3d(0,-24px,52px) rotateZ(0deg) scale(1.03) !important;
}

.library-book:hover + .library-book,
.library-book:focus-visible + .library-book {
  transform: translateX(7px) !important;
}

.library-book:has(+ .library-book:hover),
.library-book:has(+ .library-book:focus-visible) {
  transform: translateX(-7px) !important;
}

/* Faster, smoother opening */
.reader-book-shell {
  transition:
    transform .42s cubic-bezier(.16,.82,.18,1),
    opacity .2s ease !important;
}

.reader-book-cover {
  transition: transform .5s cubic-bezier(.18,.82,.18,1) !important;
}

.reader-spread {
  transition:
    transform .42s cubic-bezier(.18,.82,.18,1),
    opacity .3s ease !important;
}

.book-reader.is-visible {
  transition:
    opacity .2s ease,
    background-color .2s ease,
    backdrop-filter .2s ease !important;
}

/* PHONE: wall of books */
@media (max-width: 760px) {
  .library-room-first {
    min-height: auto !important;
    padding: 108px 18px 72px !important;
  }

  .library-room-heading-v109 {
    display: block !important;
    padding: 0 !important;
    margin-bottom: 38px !important;
  }

  .library-room-heading-v109 h1 {
    font-size: clamp(3.5rem, 15vw, 5.2rem) !important;
    line-height: .87 !important;
    margin-top: 14px !important;
  }

  .library-room-intro {
    max-width: 32ch !important;
    margin-top: 25px !important;
    text-align: left !important;
  }

  .library-room-intro p {
    display: block !important;
    font-size: .84rem !important;
  }

  .library-room-intro span {
    display: block !important;
  }

  .library-stage {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    transform: none !important;
  }

  .library-wall-glow,
  .library-shelf-shadow,
  .library-shelf,
  .library-floor-line {
    display: none !important;
  }

  .library-shelf-wrap {
    position: static !important;
    width: 100% !important;
    transform: none !important;
  }

  .library-books {
    height: auto !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 0 !important;
    align-items: stretch !important;
  }

  .library-book,
  .library-room .library-book,
  .library-room.in-view .library-book,
  .library-book:hover,
  .library-book:focus-visible {
    width: 100% !important;
    height: auto !important;
    min-height: 228px !important;
    aspect-ratio: .68 !important;
    flex: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: drop-shadow(0 14px 15px rgba(5,2,2,.22)) !important;
  }

  .library-book:nth-child(3n) {
    min-height: 248px !important;
  }

  .library-book:nth-child(4n) {
    min-height: 216px !important;
  }

  .book-top,
  .book-pages {
    display: none !important;
  }

  .book-spine {
    inset: 0 !important;
  }

  .book-number {
    align-self: flex-start !important;
    margin: 14px 0 0 14px !important;
  }

  .book-title {
    position: static !important;
    width: auto !important;
    margin: auto 18px !important;
    transform: none !important;
    text-align: left !important;
    align-self: stretch !important;
    font-size: clamp(1.12rem, 5vw, 1.5rem) !important;
    line-height: .98 !important;
    letter-spacing: -.025em !important;
  }

  .book-mark {
    align-self: flex-start !important;
    margin: 0 0 14px 14px !important;
    writing-mode: horizontal-tb !important;
    transform: none !important;
    font-size: .44rem !important;
  }

  .library-book::after {
    content: "OPEN ↗";
    position: absolute;
    right: 13px;
    bottom: 12px;
    font-size: .42rem;
    letter-spacing: .12em;
    opacity: .52;
    z-index: 6;
  }

  .library-book::before {
    inset: 8px 4px -8px 4px !important;
    transform: none !important;
  }
}

@media (max-width: 390px) {
  .library-books {
    gap: 9px !important;
  }

  .library-book,
  .library-room .library-book,
  .library-room.in-view .library-book {
    min-height: 202px !important;
  }
}


/* =========================================================
   v110 — smooth continuous book opening
   ========================================================= */

/*
  The book starts slightly smaller/lower, but not dramatically off-screen.
  That removes the "teleport then wait" feeling.
*/
.reader-book-shell {
  transform:
    translate3d(0, 42px, 0)
    scale(.88)
    rotateX(5deg) !important;
  opacity: 0 !important;
  transform-origin: 50% 58% !important;
  will-change: transform, opacity !important;
  transition:
    transform .72s cubic-bezier(.16,.84,.18,1),
    opacity .22s ease-out !important;
}

/*
  The cover and spread animate at the same time.
  Their durations overlap so the motion reads as one physical action.
*/
.reader-book-cover {
  transform: rotateY(0deg) translateZ(2px) !important;
  transform-origin: left center !important;
  will-change: transform !important;
  transition:
    transform .72s cubic-bezier(.16,.82,.18,1) !important;
}

.reader-spread {
  transform:
    scaleX(.68)
    scaleY(.94)
    translateY(12px) !important;
  transform-origin: center center !important;
  opacity: 0 !important;
  will-change: transform, opacity !important;
  transition:
    transform .68s cubic-bezier(.16,.82,.18,1),
    opacity .34s ease-out !important;
}

/*
  This single class drives the whole opening:
  shell comes forward, cover opens, spread expands.
*/
.reader-book-shell.book-transitioning,
.reader-book-shell.book-open {
  transform:
    translate3d(0, 0, 0)
    scale(1)
    rotateX(0deg) !important;
  opacity: 1 !important;
}

.reader-book-shell.book-transitioning .reader-book-cover,
.reader-book-shell.book-open .reader-book-cover {
  transform:
    rotateY(-176deg)
    translateZ(2px) !important;
}

.reader-book-shell.book-transitioning .reader-spread,
.reader-book-shell.book-open .reader-spread {
  transform:
    scaleX(1)
    scaleY(1)
    translateY(0) !important;
  opacity: 1 !important;
}

/*
  Slight delayed page content settle gives it polish without delaying the book.
*/
.reader-book-shell.book-transitioning .reader-page-left,
.reader-book-shell.book-transitioning .reader-page-right {
  animation: readerPageSettle .58s cubic-bezier(.2,.8,.2,1) both;
}

.reader-book-shell.book-transitioning .reader-page-right {
  animation-delay: .07s;
}

@keyframes readerPageSettle {
  from {
    opacity: .58;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Backdrop appears quickly enough that it feels attached to the click. */
.book-reader {
  transition:
    opacity .22s ease,
    background-color .26s ease,
    backdrop-filter .28s ease !important;
}

/* Smooth reverse when closing */
.reader-book-shell.book-closing {
  transform:
    translate3d(0, 28px, 0)
    scale(.92)
    rotateX(4deg) !important;
  opacity: 0 !important;
  transition:
    transform .46s cubic-bezier(.4,0,.7,.2),
    opacity .28s ease-in !important;
}

.reader-book-shell.book-closing .reader-book-cover {
  transform: rotateY(0deg) translateZ(2px) !important;
  transition:
    transform .42s cubic-bezier(.4,0,.7,.2) !important;
}

.reader-book-shell.book-closing .reader-spread {
  transform:
    scaleX(.76)
    scaleY(.96)
    translateY(8px) !important;
  opacity: 0 !important;
  transition:
    transform .38s cubic-bezier(.4,0,.7,.2),
    opacity .22s ease-in !important;
}

/* Override older stage-specific classes from v108/v109 */
.reader-book-shell.book-lifted:not(.book-transitioning):not(.book-open) {
  transform:
    translate3d(0, 42px, 0)
    scale(.88)
    rotateX(5deg) !important;
  opacity: 0 !important;
}

.reader-book-shell.book-opening:not(.book-transitioning):not(.book-open) .reader-book-cover {
  transform: rotateY(0deg) translateZ(2px) !important;
}

/* Mobile keeps its simpler vertical reader transition. */
@media (max-width: 760px) {
  .reader-book-shell,
  .reader-book-shell.book-transitioning,
  .reader-book-shell.book-open {
    transform: none !important;
    opacity: 1 !important;
  }

  .reader-spread,
  .reader-book-shell.book-transitioning .reader-spread,
  .reader-book-shell.book-open .reader-spread {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
    transition: opacity .28s ease, transform .34s ease !important;
  }

  .reader-book-shell.book-closing {
    transform: translateY(14px) scale(.98) !important;
    opacity: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reader-book-shell,
  .reader-book-cover,
  .reader-spread,
  .book-reader {
    transition: none !important;
    animation: none !important;
  }
}


/* =========================================================
   v113 — restore v110 motion, remove hover info card only
   ========================================================= */

.library-hover-card {
  display: none !important;
}


/* =========================================================
   v114 — slow physical pull from shelf -> center -> open
   ========================================================= */

.library-book.is-source-hidden {
  opacity: 0 !important;
}

.library-pull-layer {
  position: fixed;
  inset: 0;
  z-index: 4750;
  display: none;
  pointer-events: none;
  perspective: 1800px;
}

.library-pull-layer.is-active {
  display: block;
}

.library-pull-book {
  --pull-book-color: #4c2c28;
  --pull-book-text: #f3eee8;

  position: fixed;
  color: var(--pull-book-text);
  transform-style: preserve-3d;
  transform-origin: 50% 70%;
  will-change: left, top, width, height, transform, filter, opacity;

  transform: translate3d(0,0,0) scale(1);
  filter: drop-shadow(0 18px 14px rgba(5,2,2,.30));

  transition:
    left .70s cubic-bezier(.16,.84,.18,1),
    top .70s cubic-bezier(.16,.84,.18,1),
    width .70s cubic-bezier(.16,.84,.18,1),
    height .70s cubic-bezier(.16,.84,.18,1),
    transform .70s cubic-bezier(.16,.84,.18,1),
    filter .70s cubic-bezier(.16,.84,.18,1),
    opacity .22s ease;
}

.pull-book-spine {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;

  background:
    linear-gradient(90deg,
      rgba(255,255,255,.055),
      transparent 16%,
      transparent 78%,
      rgba(0,0,0,.16)),
    var(--pull-book-color);

  border: 1px solid rgba(245,203,217,.16);
  box-shadow:
    inset 7px 0 10px rgba(255,255,255,.025),
    inset -8px 0 14px rgba(0,0,0,.12);
}

.pull-book-top {
  position: absolute;
  left: 2px;
  right: -9px;
  top: -9px;
  height: 10px;
  background:
    repeating-linear-gradient(to bottom,
      #e5ddd5 0 1px,
      #cfc4ba 1px 2px);
  transform: skewX(-42deg);
  transform-origin: left bottom;
}

.pull-book-pages {
  position: absolute;
  top: 4px;
  bottom: 4px;
  right: -9px;
  width: 10px;
  background:
    repeating-linear-gradient(to right,
      #eee7df 0 1px,
      #d3c8be 1px 2px);
  border-right: 1px solid rgba(0,0,0,.15);
  transform: skewY(-6deg);
}

.pull-book-number {
  margin-top: 14px;
  font-size: .52rem;
  letter-spacing: .12em;
  opacity: .72;
}

.pull-book-title {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 280px;
  transform: translate(-50%,-50%) rotate(-90deg);
  transform-origin: center;
  text-align: center;
  font-size: .78rem;
  line-height: 1.14;
  letter-spacing: .16em;
  font-weight: 600;
}

.pull-book-mark {
  margin-top: auto;
  margin-bottom: 14px;
  font-size: .42rem;
  letter-spacing: .12em;
  opacity: .56;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* 1. Withdraw slowly from the shelf. */
.library-pull-book.is-withdrawing:not(.is-centering) {
  transform:
    translate3d(0,-72px,115px)
    rotateX(-2deg)
    scale(1.035);

  filter:
    drop-shadow(0 48px 28px rgba(5,2,2,.46));

  transition-duration: .42s !important;
  transition-timing-function: cubic-bezier(.18,.78,.18,1) !important;
}

/* 2. Glide to exact center. */
.library-pull-book.is-centering {
  transform:
    translate3d(0,0,150px)
    rotateX(0deg)
    rotateY(-3deg)
    scale(1);

  filter:
    drop-shadow(0 46px 32px rgba(5,2,2,.48));

  transition-duration: .70s !important;
  transition-timing-function: cubic-bezier(.16,.84,.18,1) !important;
}

/* 3. Fade into the real opening book beneath it. */
.library-pull-book.is-handoff {
  opacity: 0;
  transform:
    translate3d(0,0,120px)
    rotateY(-10deg)
    scale(1.02);
}

/*
  Reader begins very close to the centered pull-book position.
  This keeps the handoff from looking like a new object suddenly appears.
*/
.reader-book-shell {
  transform:
    translate3d(0,4px,0)
    scale(.985)
    rotateX(1deg) !important;
}

.reader-book-shell.book-transitioning,
.reader-book-shell.book-open {
  transform:
    translate3d(0,0,0)
    scale(1)
    rotateX(0deg) !important;
}

/* Keep touch behavior simple and immediate. */
@media (hover: none), (pointer: coarse) {
  .library-pull-layer {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .library-pull-layer {
    display: none !important;
  }
}


/* =========================================================
   v115 — MOBILE BOOKSHELF WALL
   Desktop untouched. Mobile becomes a framed wall of shelves.
   ========================================================= */

@media (max-width: 760px) {
  .library-room-first {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .library-stage {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    margin-top: 8px !important;
  }

  .library-shelf-wrap {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    min-height: 760px !important;
    padding: 16px 14px 18px !important;
    border: 10px solid var(--lib-pink) !important;
    background: #2b1917 !important;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.03),
      0 20px 50px rgba(0,0,0,.20) !important;
  }

  /* Three shelf openings */
  .library-shelf-wrap::before,
  .library-shelf-wrap::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    height: 10px !important;
    background: var(--lib-pink) !important;
    z-index: 20 !important;
    pointer-events: none !important;
  }

  .library-shelf-wrap::before {
    top: 33.333% !important;
  }

  .library-shelf-wrap::after {
    top: 66.666% !important;
  }

  .library-books {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    width: 100% !important;
    height: 700px !important;
    padding: 0 !important;
    align-items: end !important;
    justify-items: stretch !important;
  }

  .library-book,
  .library-room .library-book,
  .library-room.in-view .library-book,
  .library-book:hover,
  .library-book:focus-visible {
    position: relative !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    flex: none !important;
    align-self: end !important;
    justify-self: stretch !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    margin: 0 !important;
  }

  /* Row 1: 5 books clustered left, empty space right */
  .library-book:nth-child(1) {
    grid-column: 1 / 3 !important;
    grid-row: 1 !important;
    height: 78% !important;
    margin-left: 1px !important;
  }

  .library-book:nth-child(2) {
    grid-column: 3 / 5 !important;
    grid-row: 1 !important;
    height: 88% !important;
  }

  .library-book:nth-child(3) {
    grid-column: 5 / 7 !important;
    grid-row: 1 !important;
    height: 92% !important;
  }

  .library-book:nth-child(4) {
    grid-column: 7 / 8 !important;
    grid-row: 1 !important;
    height: 82% !important;
  }

  .library-book:nth-child(5) {
    grid-column: 8 / 10 !important;
    grid-row: 1 !important;
    height: 70% !important;
  }

  /* Row 2: 3 books, more breathing room */
  .library-book:nth-child(6) {
    grid-column: 2 / 5 !important;
    grid-row: 2 !important;
    height: 92% !important;
  }

  .library-book:nth-child(7) {
    grid-column: 5 / 7 !important;
    grid-row: 2 !important;
    height: 74% !important;
  }

  .library-book:nth-child(8) {
    grid-column: 8 / 11 !important;
    grid-row: 2 !important;
    height: 86% !important;
  }

  /* Bottom shelf intentionally empty for architectural feel */
  .library-book:nth-child(n+9) {
    display: none !important;
  }

  .book-spine {
    position: absolute !important;
    inset: 0 !important;
    border: 1px solid rgba(245,203,217,.18) !important;
    overflow: hidden !important;
  }

  .book-spine::after {
    left: 9px !important;
    right: 9px !important;
    top: 38px !important;
    bottom: 34px !important;
  }

  .book-top {
    display: block !important;
    left: 2px !important;
    right: -6px !important;
    top: -6px !important;
    height: 7px !important;
  }

  .book-pages {
    display: block !important;
    top: 3px !important;
    bottom: 3px !important;
    right: -6px !important;
    width: 7px !important;
  }

  .book-number {
    align-self: center !important;
    margin: 12px 0 0 !important;
    font-size: .42rem !important;
  }

  .book-title {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 190px !important;
    margin: 0 !important;
    transform: translate(-50%,-50%) rotate(-90deg) !important;
    text-align: center !important;
    font-size: clamp(.62rem, 2.7vw, .78rem) !important;
    line-height: 1.05 !important;
    letter-spacing: .12em !important;
  }

  .book-mark {
    margin: auto 0 11px !important;
    writing-mode: vertical-rl !important;
    transform: rotate(180deg) !important;
    font-size: .34rem !important;
    letter-spacing: .1em !important;
  }

  .library-book::after {
    display: none !important;
  }

  .library-book::before {
    display: none !important;
  }

  /* Remove old standalone shelf bar; frame itself is now the shelf wall */
  .library-shelf,
  .library-shelf-shadow,
  .library-wall-glow,
  .library-floor-line {
    display: none !important;
  }

  /* Give the wall a small floor/base trim */
  .library-stage::after {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    height: 10px !important;
    margin-top: -10px !important;
    background: var(--lib-pink) !important;
  }
}

@media (max-width: 390px) {
  .library-shelf-wrap {
    min-height: 700px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    border-width: 8px !important;
  }

  .library-books {
    height: 648px !important;
  }

  .book-title {
    width: 170px !important;
    font-size: .58rem !important;
  }
}


/* =========================================================
   v116 — slow physical extraction from the shelf
   ========================================================= */

.library-pull-book {
  transition:
    left .90s cubic-bezier(.16,.78,.18,1),
    top .90s cubic-bezier(.16,.78,.18,1),
    width .90s cubic-bezier(.16,.78,.18,1),
    height .90s cubic-bezier(.16,.78,.18,1),
    transform .90s cubic-bezier(.16,.78,.18,1),
    filter .90s cubic-bezier(.16,.78,.18,1),
    opacity .30s ease !important;
}

/* Initial click contact — almost no movement. */
.library-pull-book.is-grabbed:not(.is-withdrawing) {
  transform:
    translate3d(0,-4px,10px)
    scale(1.002) !important;
  filter:
    drop-shadow(0 22px 15px rgba(5,2,2,.34)) !important;
  transition-duration: .11s !important;
}

/* Slow slide out of the shelf. */
.library-pull-book.is-withdrawing:not(.is-lifting):not(.is-centering) {
  transform:
    translate3d(0,-58px,58px)
    rotateX(-1deg)
    scale(1.012) !important;
  filter:
    drop-shadow(0 34px 22px rgba(5,2,2,.40)) !important;
  transition-duration: .70s !important;
  transition-timing-function: cubic-bezier(.18,.72,.18,1) !important;
}

/* Once clear, lift it toward the viewer. */
.library-pull-book.is-lifting:not(.is-centering) {
  transform:
    translate3d(0,-78px,145px)
    rotateX(-2deg)
    scale(1.025) !important;
  filter:
    drop-shadow(0 52px 30px rgba(5,2,2,.48)) !important;
  transition-duration: .48s !important;
  transition-timing-function: cubic-bezier(.16,.78,.18,1) !important;
}

/* Long, smooth glide into the exact center. */
.library-pull-book.is-centering {
  transform:
    translate3d(0,0,170px)
    rotateX(0deg)
    rotateY(-2deg)
    scale(1) !important;
  filter:
    drop-shadow(0 48px 34px rgba(5,2,2,.48)) !important;
  transition-duration: .90s !important;
  transition-timing-function: cubic-bezier(.16,.80,.18,1) !important;
}

/* Soft handoff into the opening spread. */
.library-pull-book.is-handoff {
  opacity: 0 !important;
  transform:
    translate3d(0,0,135px)
    rotateY(-8deg)
    scale(1.015) !important;
  transition:
    opacity .30s ease,
    transform .34s cubic-bezier(.2,.8,.2,1) !important;
}

/* The reader itself opens more deliberately after the book has arrived. */
.reader-book-cover {
  transition:
    transform .82s cubic-bezier(.18,.78,.18,1) !important;
}

.reader-spread {
  transition:
    transform .76s cubic-bezier(.18,.78,.18,1),
    opacity .48s ease !important;
}

/* On mobile, still use the same slow physical extraction. */
@media (max-width: 760px) {
  .library-pull-layer {
    display: block !important;
  }

  .library-pull-layer:not(.is-active) {
    display: none !important;
  }

  .library-pull-book.is-withdrawing:not(.is-lifting):not(.is-centering) {
    transform:
      translate3d(0,-44px,46px)
      scale(1.01) !important;
  }

  .library-pull-book.is-lifting:not(.is-centering) {
    transform:
      translate3d(0,-62px,110px)
      scale(1.02) !important;
  }

  .library-pull-book.is-centering {
    transform:
      translate3d(0,0,130px)
      scale(1) !important;
  }
}


/* =========================================================
   v117 — dedicated mobile bookshelf wall rebuild
   Desktop shelf remains untouched.
   ========================================================= */

.mobile-library-wall {
  display: none;
}

@media (max-width: 760px) {

  /*
    Completely remove the desktop shelf implementation on mobile.
    This avoids the legacy transforms/absolute positioning that caused
    the books to collapse into thin horizontal strips.
  */
  .library-stage {
    display: none !important;
  }

  .mobile-library-wall {
    display: block !important;
    width: 100%;
    margin-top: 42px;
  }

  .mobile-library-frame {
    width: 100%;
    padding: 10px 10px 0;
    border: 9px solid var(--lib-pink);
    background: #2b1917;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.025),
      0 26px 60px rgba(0,0,0,.22);
  }

  .mobile-shelf-row {
    position: relative;
    height: 245px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  .mobile-shelf-books {
    position: relative;
    z-index: 3;
    height: calc(100% - 13px);
    display: flex;
    align-items: flex-end;
    gap: 5px;
    padding: 0 5px;
  }

  .mobile-shelf-books-1 {
    justify-content: flex-start;
  }

  .mobile-shelf-books-2 {
    justify-content: flex-start;
  }

  .mobile-shelf-gap {
    width: 16%;
    flex: 0 0 16%;
  }

  .mobile-shelf-board {
    position: relative;
    z-index: 5;
    width: calc(100% + 20px);
    height: 13px;
    margin-left: -10px;
    flex: 0 0 13px;
    background: var(--lib-pink);
    box-shadow:
      0 5px 0 rgba(69,46,41,.28),
      0 10px 18px rgba(0,0,0,.18);
  }

  .mobile-volume {
    --mv-color: #522f2b;
    width: var(--mv-w);
    height: var(--mv-h);
    flex: 0 0 var(--mv-w);
    position: relative;
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #f3eee8;
    cursor: pointer;
    transform-origin: 50% 100%;
    transition:
      transform .35s cubic-bezier(.2,.8,.2,1),
      filter .35s ease;
    filter: drop-shadow(4px 8px 7px rgba(0,0,0,.18));
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-volume-cream {
    --mv-color: #eee6de;
    color: #452e29;
  }

  .mobile-volume-pink {
    --mv-color: #dfaebe;
    color: #452e29;
  }

  .mobile-volume-spine {
    position: absolute;
    inset: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    background:
      linear-gradient(90deg,
        rgba(255,255,255,.06),
        transparent 18%,
        transparent 80%,
        rgba(0,0,0,.14)),
      var(--mv-color);
    border: 1px solid rgba(245,203,217,.14);
    box-shadow:
      inset 5px 0 8px rgba(255,255,255,.025),
      inset -6px 0 10px rgba(0,0,0,.10);
  }

  .mobile-volume-spine::after {
    content: "";
    position: absolute;
    left: 7px;
    right: 7px;
    top: 35px;
    bottom: 35px;
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    opacity: .11;
  }

  .mobile-volume-spine small {
    margin-top: 10px;
    font-size: .42rem;
    line-height: 1;
    letter-spacing: .1em;
    opacity: .67;
  }

  .mobile-volume-spine strong {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 185px;
    transform: translate(-50%,-50%) rotate(-90deg);
    transform-origin: center;
    text-align: center;
    font-size: .68rem;
    line-height: 1.03;
    letter-spacing: .12em;
    font-weight: 600;
  }

  .mobile-volume-spine em {
    margin-top: auto;
    margin-bottom: 10px;
    font-style: normal;
    font-size: .31rem;
    line-height: 1;
    letter-spacing: .1em;
    opacity: .57;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }

  .mobile-volume-pages {
    position: absolute;
    top: -5px;
    left: 4px;
    right: -5px;
    height: 6px;
    background:
      repeating-linear-gradient(
        to bottom,
        #efe8e1 0 1px,
        #cfc5bd 1px 2px
      );
    transform: skewX(-40deg);
    transform-origin: left bottom;
  }

  .mobile-volume:active {
    transform: translateY(-8px) scale(1.01);
  }

  .mobile-shelf-empty {
    height: 225px;
  }

  .mobile-empty-note {
    position: absolute;
    left: 20px;
    bottom: 42px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(245,203,217,.38);
    font-size: .42rem;
    letter-spacing: .14em;
  }

  .mobile-empty-note i {
    width: 42px;
    height: 1px;
    background: rgba(245,203,217,.25);
  }

  /*
    Ensure mobile pull-animation clone is visible and correctly above wall.
  */
  .library-pull-layer.is-active {
    display: block !important;
  }

  .library-pull-book {
    z-index: 9999;
  }
}

@media (max-width: 390px) {
  .mobile-library-frame {
    border-width: 8px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .mobile-shelf-row {
    height: 225px;
  }

  .mobile-shelf-empty {
    height: 205px;
  }

  .mobile-shelf-books {
    gap: 4px;
    padding-left: 3px;
    padding-right: 3px;
  }

  .mobile-volume-spine strong {
    font-size: .62rem;
    width: 170px;
  }
}


/* =========================================================
   v118 — REALISTIC BOOK MOTION
   Forward first -> then up -> then center. No center enlargement.
   ========================================================= */

.library-pull-book {
  transform:
    translate3d(0,0,0)
    scale(1) !important;

  transform-origin: 50% 70% !important;

  transition:
    left .50s cubic-bezier(.18,.78,.18,1),
    top .50s cubic-bezier(.18,.78,.18,1),
    transform .50s cubic-bezier(.18,.78,.18,1),
    filter .50s cubic-bezier(.18,.78,.18,1),
    opacity .22s ease !important;

  will-change: left, top, transform, filter, opacity !important;
}

/*
  1. FORWARD:
  Stay at the identical shelf coordinates.
  Only depth/shadow changes, so it reads as being pulled toward you.
*/
.library-pull-book.is-forward:not(.is-up) {
  transform:
    translate3d(0,0,115px)
    scale(1.035) !important;

  filter:
    drop-shadow(0 34px 25px rgba(5,2,2,.44)) !important;

  transition-duration: .26s !important;
  transition-timing-function: cubic-bezier(.16,.82,.18,1) !important;
}

/*
  2. UP:
  JS changes top only after the forward pull finishes.
  Preserve depth and dimensions.
*/
.library-pull-book.is-up:not(.is-centering) {
  transform:
    translate3d(0,0,125px)
    scale(1.035) !important;

  filter:
    drop-shadow(0 42px 30px rgba(5,2,2,.48)) !important;

  transition-duration: .32s !important;
  transition-timing-function: cubic-bezier(.18,.76,.18,1) !important;
}

/*
  3. CENTER:
  Move the already-lifted book to center WITHOUT changing its size.
*/
.library-pull-book.is-centering {
  transform:
    translate3d(0,0,135px)
    rotateY(-2deg)
    scale(1.035) !important;

  filter:
    drop-shadow(0 44px 32px rgba(5,2,2,.48)) !important;

  transition-duration: .50s !important;
  transition-timing-function: cubic-bezier(.16,.82,.18,1) !important;
}

/*
  Handoff:
  only fade; don't zoom again.
*/
.library-pull-book.is-handoff {
  opacity: 0 !important;
  transform:
    translate3d(0,0,135px)
    rotateY(-5deg)
    scale(1.035) !important;

  transition:
    opacity .22s ease,
    transform .22s ease !important;
}

/*
  The real reader starts smaller so the opening itself creates the expansion,
  rather than the shelf-to-center flight suddenly resizing the book.
*/
.reader-book-shell {
  transform:
    translate3d(0,0,0)
    scale(.90)
    rotateX(1deg) !important;

  opacity: 0 !important;

  transition:
    transform .62s cubic-bezier(.16,.82,.18,1),
    opacity .18s ease !important;
}

.reader-book-shell.book-transitioning,
.reader-book-shell.book-open {
  transform:
    translate3d(0,0,0)
    scale(1)
    rotateX(0deg) !important;

  opacity: 1 !important;
}

/* Keep opening pace closer to the smoother/faster v110 feel. */
.reader-book-cover {
  transition:
    transform .62s cubic-bezier(.16,.82,.18,1) !important;
}

.reader-spread {
  transition:
    transform .58s cubic-bezier(.16,.82,.18,1),
    opacity .36s ease !important;
}

/*
  MOBILE:
  Same forward -> up -> center sequence.
  The dedicated v117 bookshelf wall remains unchanged.
*/
@media (max-width: 760px) {
  .library-pull-layer.is-active {
    display: block !important;
  }

  .library-pull-book.is-forward:not(.is-up) {
    transform:
      translate3d(0,0,70px)
      scale(1.02) !important;
  }

  .library-pull-book.is-up:not(.is-centering) {
    transform:
      translate3d(0,0,82px)
      scale(1.02) !important;
  }

  .library-pull-book.is-centering {
    transform:
      translate3d(0,0,92px)
      scale(1.02) !important;
  }

  .library-pull-book.is-handoff {
    transform:
      translate3d(0,0,92px)
      scale(1.02) !important;
  }

  /*
    Mobile reader doesn't need the desktop scale-up.
    Keep its existing vertical reading treatment.
  */
  .reader-book-shell,
  .reader-book-shell.book-transitioning,
  .reader-book-shell.book-open {
    transform: none !important;
    opacity: 1 !important;
  }
}


/* =========================================================
   v119 — smoother continuous physical motion
   ========================================================= */

.library-pull-book {
  transform: translate3d(0,0,0) scale(1) !important;
  transform-origin: 50% 70% !important;
  transition:
    left .52s cubic-bezier(.22,.72,.16,1),
    top .52s cubic-bezier(.22,.72,.16,1),
    transform .52s cubic-bezier(.22,.72,.16,1),
    filter .52s cubic-bezier(.22,.72,.16,1),
    opacity .20s ease !important;
  will-change: left, top, transform, filter, opacity !important;
}

.library-pull-book.is-forward:not(.is-up) {
  transform: translate3d(0,0,105px) scale(1.022) !important;
  filter: drop-shadow(0 28px 22px rgba(5,2,2,.38)) !important;
  transition-duration: .34s !important;
  transition-timing-function: cubic-bezier(.18,.76,.16,1) !important;
}

.library-pull-book.is-up:not(.is-centering) {
  transform: translate3d(0,0,116px) scale(1.026) !important;
  filter: drop-shadow(0 38px 28px rgba(5,2,2,.44)) !important;
  transition-duration: .40s !important;
  transition-timing-function: cubic-bezier(.18,.74,.16,1) !important;
}

.library-pull-book.is-centering {
  transform: translate3d(0,0,128px) rotateY(-1.4deg) scale(1.024) !important;
  filter: drop-shadow(0 42px 30px rgba(5,2,2,.46)) !important;
  transition-duration: .58s !important;
  transition-timing-function: cubic-bezier(.20,.76,.16,1) !important;
}

.library-pull-book.is-handoff {
  opacity: 0 !important;
  transform: translate3d(0,0,128px) rotateY(-3deg) scale(1.024) !important;
  transition: opacity .20s ease, transform .20s ease !important;
}

.reader-book-shell {
  transform: translate3d(0,0,0) scale(.93) rotateX(.7deg) !important;
  opacity: 0 !important;
  transition:
    transform .58s cubic-bezier(.20,.76,.16,1),
    opacity .18s ease !important;
}

.reader-book-shell.book-transitioning,
.reader-book-shell.book-open {
  transform: translate3d(0,0,0) scale(1) rotateX(0deg) !important;
  opacity: 1 !important;
}

.reader-book-cover {
  transition: transform .60s cubic-bezier(.20,.76,.16,1) !important;
}

.reader-spread {
  transition:
    transform .56s cubic-bezier(.20,.76,.16,1),
    opacity .34s ease !important;
}

@media (max-width: 760px) {
  .library-pull-book.is-forward:not(.is-up) {
    transform: translate3d(0,0,58px) scale(1.014) !important;
  }

  .library-pull-book.is-up:not(.is-centering) {
    transform: translate3d(0,0,68px) scale(1.017) !important;
  }

  .library-pull-book.is-centering {
    transform: translate3d(0,0,76px) scale(1.016) !important;
  }

  .library-pull-book.is-handoff {
    transform: translate3d(0,0,76px) scale(1.016) !important;
  }
}


/* =========================================================
   v120 — MOBILE ARCHIVE WALL
   Premium built-in shelving. Pink becomes accent, not structure.
   ========================================================= */

@media (max-width: 760px) {

  .mobile-library-wall {
    display: block !important;
    width: 100%;
    margin-top: 44px;
    padding: 0 2px;
  }

  .mobile-library-frame {
    position: relative;
    width: 100%;
    padding: 18px 14px 16px;
    border: 0 !important;
    background:
      linear-gradient(90deg, rgba(255,255,255,.018), transparent 18%, transparent 80%, rgba(0,0,0,.12)),
      #261513 !important;
    box-shadow:
      inset 0 0 0 1px rgba(245,203,217,.08),
      inset 0 18px 28px rgba(255,255,255,.012),
      0 28px 70px rgba(0,0,0,.20) !important;
  }

  /* subtle architectural side stiles */
  .mobile-library-frame::before,
  .mobile-library-frame::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 7px;
    background:
      linear-gradient(to right, rgba(255,255,255,.025), transparent),
      #3a211e;
    z-index: 10;
    pointer-events: none;
  }

  .mobile-library-frame::before { left: 0; }
  .mobile-library-frame::after  { right: 0; transform: scaleX(-1); }

  .mobile-shelf-row {
    position: relative;
    height: 236px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: visible;
  }

  /* recessed back panel / lighting */
  .mobile-shelf-row::before {
    content: "";
    position: absolute;
    inset: 10px 8px 18px;
    background:
      radial-gradient(ellipse at 50% 18%, rgba(245,203,217,.055), transparent 58%),
      linear-gradient(to bottom, rgba(255,255,255,.015), transparent 30%),
      #211210;
    box-shadow:
      inset 0 10px 22px rgba(0,0,0,.22),
      inset 0 -16px 24px rgba(0,0,0,.18);
    z-index: 0;
  }

  .mobile-shelf-books {
    position: relative;
    z-index: 3;
    height: calc(100% - 19px);
    display: flex;
    align-items: flex-end;
    gap: 5px;
    padding: 0 12px 0 12px;
  }

  .mobile-shelf-books-1 {
    justify-content: flex-start;
  }

  .mobile-shelf-books-2 {
    justify-content: flex-start;
    padding-left: 24px;
  }

  .mobile-shelf-gap {
    width: 9%;
    flex: 0 0 9%;
  }

  /* true shelf board */
  .mobile-shelf-board {
    position: relative;
    z-index: 6;
    width: calc(100% + 10px);
    height: 19px;
    margin-left: -5px;
    flex: 0 0 19px;
    background:
      linear-gradient(to bottom,
        #56302b 0%,
        #452622 42%,
        #311a18 100%) !important;
    border-top: 1px solid rgba(245,203,217,.14);
    box-shadow:
      0 7px 12px rgba(0,0,0,.34),
      inset 0 1px 0 rgba(255,255,255,.025) !important;
  }

  /* thin pink inlay on shelf edge */
  .mobile-shelf-board::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    top: 3px;
    height: 1px;
    background: rgba(245,203,217,.34);
  }

  .mobile-volume {
    filter: drop-shadow(4px 7px 6px rgba(0,0,0,.22)) !important;
  }

  .mobile-volume-spine {
    border-color: rgba(245,203,217,.10) !important;
  }

  .mobile-shelf-empty {
    height: 205px;
  }

  .mobile-shelf-empty::before {
    inset-bottom: 18px;
  }

  .mobile-empty-note {
    left: 22px !important;
    bottom: 42px !important;
    color: rgba(245,203,217,.34) !important;
  }

  .mobile-empty-note::before {
    content: "ARCHIVE / 03";
    position: absolute;
    left: 0;
    top: -24px;
    font-size: .35rem;
    letter-spacing: .16em;
    color: rgba(245,203,217,.22);
  }

  /* small archive plaques */
  .mobile-shelf-row:nth-child(1)::after,
  .mobile-shelf-row:nth-child(2)::after {
    position: absolute;
    right: 17px;
    top: 19px;
    z-index: 7;
    font-size: .34rem;
    letter-spacing: .16em;
    color: rgba(245,203,217,.27);
  }

  .mobile-shelf-row:nth-child(1)::after {
    content: "ARCHIVE / 01";
  }

  .mobile-shelf-row:nth-child(2)::after {
    content: "ARCHIVE / 02";
  }

  /* make the books look less evenly packed */
  .mobile-shelf-books-1 .mobile-volume:nth-child(1) {
    margin-left: 4px;
  }

  .mobile-shelf-books-1 .mobile-volume:nth-child(3) {
    margin-left: 2px;
  }

  .mobile-shelf-books-1 .mobile-volume:nth-child(5) {
    margin-left: 7px;
  }

  .mobile-shelf-books-2 .mobile-volume:nth-child(3) {
    margin-left: 8px;
  }

  /* slight shelf-wall breathing room from intro */
  .library-room-heading-v109 {
    margin-bottom: 30px !important;
  }
}

@media (max-width: 390px) {
  .mobile-library-frame {
    padding-left: 11px !important;
    padding-right: 11px !important;
  }

  .mobile-shelf-row {
    height: 220px !important;
  }

  .mobile-shelf-empty {
    height: 190px !important;
  }

  .mobile-shelf-books {
    padding-left: 9px !important;
    padding-right: 9px !important;
    gap: 4px !important;
  }

  .mobile-shelf-books-2 {
    padding-left: 18px !important;
  }
}

/* =========================================================
   v128 — FLAT GRAPHIC LIBRARY BOOKS
   Remove page-edge geometry and shift the shelf toward a
   cleaner graphic editorial book look inspired by the user ref.
   ========================================================= */

.library-book.is-source-hidden,
.mobile-volume.is-source-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}

.book-top,
.book-pages,
.pull-book-top,
.pull-book-pages,
.mobile-volume-pages {
  display: none !important;
}

.library-books {
  gap: 10px !important;
  padding: 0 18px 0 !important;
  align-items: end !important;
}

.library-book {
  transform: none !important;
  filter: drop-shadow(0 16px 20px rgba(10, 3, 3, .22)) !important;
  transition:
    transform .34s cubic-bezier(.2,.8,.2,1),
    filter .34s ease,
    opacity .18s ease !important;
}

.library-book:nth-child(1) { --book-color: #4f2d29 !important; color: #f4eee7 !important; }
.library-book:nth-child(2) { --book-color: #efe9e2 !important; color: #452e29 !important; }
.library-book:nth-child(3) { --book-color: #5a3430 !important; color: #f4eee7 !important; }
.library-book:nth-child(4) { --book-color: #e4bdd0 !important; color: #452e29 !important; }
.library-book:nth-child(5) { --book-color: #4a2a26 !important; color: #f4eee7 !important; }
.library-book:nth-child(6) { --book-color: #5b3530 !important; color: rgba(57,33,31,.58) !important; }
.library-book:nth-child(7) { --book-color: #4b2b27 !important; color: #f4eee7 !important; }
.library-book:nth-child(8) { --book-color: #efc8da !important; color: #452e29 !important; }

.library-book::before {
  inset: 10px 2px 6px 2px !important;
  filter: blur(10px) !important;
  opacity: .34 !important;
}

.book-spine,
.pull-book-spine {
  background: linear-gradient(90deg, rgba(255,255,255,.045), transparent 18%, transparent 84%, rgba(0,0,0,.12)), var(--book-color) !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,.08),
    inset -1px 0 0 rgba(0,0,0,.08) !important;
  border-radius: 1px !important;
}

.book-spine::after,
.mobile-volume-spine::after,
.pull-book-spine::after {
  left: 9px !important;
  right: 9px !important;
  top: 46px !important;
  bottom: 46px !important;
  border-top: 1px solid currentColor !important;
  border-bottom: 1px solid currentColor !important;
  opacity: .12 !important;
}

.book-number,
.pull-book-number {
  margin-top: 16px !important;
  font-size: .60rem !important;
  letter-spacing: .16em !important;
  opacity: .72 !important;
}

.book-title,
.pull-book-title {
  width: 305px !important;
  font-size: clamp(.82rem,.96vw,1.12rem) !important;
  letter-spacing: .13em !important;
  line-height: 1.06 !important;
  font-weight: 600 !important;
}

.book-mark,
.pull-book-mark {
  margin-bottom: 16px !important;
  font-size: .50rem !important;
  letter-spacing: .12em !important;
  opacity: .56 !important;
}

.library-book:nth-child(1) { transform: rotate(-1.2deg) !important; }
.library-book:nth-child(2) { transform: rotate(0deg) !important; }
.library-book:nth-child(3) { transform: rotate(0deg) !important; }
.library-book:nth-child(4) { transform: rotate(0deg) !important; }
.library-book:nth-child(5) { transform: rotate(0deg) !important; }
.library-book:nth-child(6) { transform: rotate(0deg) !important; }
.library-book:nth-child(7) { transform: rotate(0deg) !important; }
.library-book:nth-child(8) { transform: rotate(1.6deg) !important; }

.library-book:hover,
.library-book:focus-visible {
  transform: translateY(-14px) scale(1.015) !important;
  z-index: 30 !important;
  filter: drop-shadow(0 28px 24px rgba(10,3,3,.30)) !important;
}

.library-book:hover::before,
.library-book:focus-visible::before {
  opacity: .48 !important;
  transform: translate3d(0, 10px, -10px) scaleX(1.06) !important;
}

.library-book:hover + .library-book,
.library-book:focus-visible + .library-book,
.library-book:has(+ .library-book:hover),
.library-book:has(+ .library-book:focus-visible) {
  transform: none !important;
}

.library-shelf {
  height: 26px !important;
  background: linear-gradient(to bottom, #5a3430, #3b231f) !important;
  border-top: 1px solid rgba(245,203,217,.22) !important;
}

.shelf-front {
  height: 24px !important;
  background: linear-gradient(to bottom, #2d1a18, #1f1211) !important;
  clip-path: polygon(0 0, 100% 0, 98% 100%, 2% 100%) !important;
}

.library-pull-book {
  filter: drop-shadow(0 24px 20px rgba(6,2,2,.32)) !important;
}

@media (max-width: 760px) {
  .mobile-library-wall {
    margin-top: 34px !important;
  }

  .mobile-library-frame {
    padding: 18px 12px 14px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.02), transparent 26%),
      linear-gradient(90deg, rgba(255,255,255,.018), transparent 18%, transparent 82%, rgba(0,0,0,.10)),
      #261513 !important;
    box-shadow:
      inset 0 0 0 1px rgba(245,203,217,.08),
      inset 0 16px 26px rgba(255,255,255,.01),
      0 26px 64px rgba(0,0,0,.20) !important;
  }

  .mobile-shelf-row {
    height: 228px !important;
    margin-bottom: 10px !important;
  }

  .mobile-shelf-empty {
    height: 170px !important;
  }

  .mobile-shelf-books {
    gap: 6px !important;
    padding: 0 6px !important;
    height: calc(100% - 14px) !important;
  }

  .mobile-shelf-gap {
    width: 12% !important;
    flex: 0 0 12% !important;
  }

  .mobile-shelf-board {
    width: calc(100% + 24px) !important;
    margin-left: -12px !important;
    height: 12px !important;
    flex-basis: 12px !important;
    background: linear-gradient(to bottom, #e9bfd2, #cc98ad) !important;
    box-shadow:
      0 4px 0 rgba(69,46,41,.26),
      0 10px 18px rgba(0,0,0,.16) !important;
  }

  .mobile-volume {
    filter: drop-shadow(0 10px 12px rgba(0,0,0,.18)) !important;
    transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .18s ease !important;
  }

  .mobile-volume-spine {
    background: linear-gradient(90deg, rgba(255,255,255,.045), transparent 18%, transparent 84%, rgba(0,0,0,.10)), var(--mv-color) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    box-shadow:
      inset 1px 0 0 rgba(255,255,255,.08),
      inset -1px 0 0 rgba(0,0,0,.08) !important;
  }

  .mobile-volume-spine strong {
    width: 178px !important;
    font-size: .66rem !important;
    line-height: 1.04 !important;
    letter-spacing: .11em !important;
  }

  .mobile-volume-spine small {
    margin-top: 11px !important;
    font-size: .43rem !important;
    letter-spacing: .12em !important;
  }

  .mobile-volume-spine em {
    margin-bottom: 11px !important;
    font-size: .30rem !important;
    letter-spacing: .11em !important;
  }

  .mobile-empty-note {
    bottom: 26px !important;
  }
}

@media (max-width: 390px) {
  .mobile-shelf-row {
    height: 210px !important;
  }

  .mobile-volume-spine strong {
    width: 164px !important;
    font-size: .60rem !important;
  }
}

/* =========================================================
   v129 — PREMIUM SPINE TYPOGRAPHY
   More asymmetrical, editorial, design-book typography
   for desktop + mobile shelf spines.
   ========================================================= */

/* ----- Desktop spine typography system ----- */
.library-book .book-spine {
  overflow: hidden;
}

.library-book .book-number {
  position: absolute;
  top: var(--num-top, 18px);
  left: var(--num-left, 50%);
  right: auto;
  margin: 0 !important;
  transform: translateX(-50%);
  font-size: var(--num-size, .60rem) !important;
  letter-spacing: var(--num-track, .14em) !important;
  font-weight: 500;
  opacity: var(--num-opacity, .7) !important;
}

.library-book .book-title {
  left: var(--title-left, 50%) !important;
  top: var(--title-top, 54%) !important;
  width: var(--title-width, 290px) !important;
  transform: translate(-50%,-50%) rotate(-90deg) !important;
  text-align: var(--title-align, center) !important;
  font-size: var(--title-size, 1rem) !important;
  line-height: var(--title-line, 1.01) !important;
  letter-spacing: var(--title-track, .12em) !important;
  font-weight: var(--title-weight, 650) !important;
}

.library-book .book-mark {
  position: absolute;
  left: var(--mark-left, 50%);
  bottom: var(--mark-bottom, 16px);
  margin: 0 !important;
  transform: translateX(-50%) rotate(180deg) !important;
  font-size: var(--mark-size, .47rem) !important;
  letter-spacing: var(--mark-track, .14em) !important;
  opacity: var(--mark-opacity, .56) !important;
}

.library-book .book-spine::before {
  content: "";
  position: absolute;
  left: var(--accent-left, 11px);
  right: var(--accent-right, 11px);
  top: var(--accent-top, 60px);
  height: 1px;
  background: currentColor;
  opacity: .1;
}

.library-book .book-spine::after {
  left: var(--rule-left, 11px) !important;
  right: var(--rule-right, 11px) !important;
  top: var(--rule-top, 48px) !important;
  bottom: var(--rule-bottom, 46px) !important;
  opacity: .10 !important;
}

/* individual editorial spine layouts */
.library-book:nth-child(1) {
  --title-top: 57%;
  --title-width: 276px;
  --title-size: 1.05rem;
  --title-track: .11em;
  --mark-bottom: 14px;
  --mark-size: .45rem;
  --num-left: 54%;
  --rule-top: 54px;
  --rule-bottom: 52px;
}

.library-book:nth-child(2) {
  --title-top: 55%;
  --title-left: 48%;
  --title-width: 248px;
  --title-size: 1.00rem;
  --title-track: .10em;
  --mark-size: .43rem;
  --num-left: 44%;
  --num-size: .58rem;
}

.library-book:nth-child(3) {
  --title-top: 58%;
  --title-left: 52%;
  --title-width: 322px;
  --title-size: 1.08rem;
  --title-line: .98;
  --title-track: .11em;
  --mark-bottom: 15px;
  --mark-size: .46rem;
  --mark-opacity: .6;
  --num-left: 51%;
  --rule-top: 62px;
  --rule-bottom: 52px;
}

.library-book:nth-child(4) {
  --title-top: 56%;
  --title-width: 238px;
  --title-size: .96rem;
  --title-track: .13em;
  --mark-bottom: 13px;
  --mark-size: .42rem;
  --num-top: 14px;
}

.library-book:nth-child(5) {
  --title-top: 53%;
  --title-width: 264px;
  --title-size: 1.01rem;
  --title-track: .15em;
  --mark-size: .44rem;
  --num-left: 52%;
}

.library-book:nth-child(6) {
  --title-top: 56%;
  --title-width: 300px;
  --title-size: .93rem;
  --title-track: .16em;
  --title-weight: 560;
  --mark-bottom: 15px;
  --mark-opacity: .40;
  --num-left: 53%;
  --num-opacity: .42;
}

.library-book:nth-child(7) {
  --title-top: 57%;
  --title-width: 258px;
  --title-size: 1.02rem;
  --title-track: .14em;
  --mark-size: .43rem;
}

.library-book:nth-child(8) {
  --title-top: 58%;
  --title-width: 248px;
  --title-size: 1.12rem;
  --title-track: .12em;
  --title-weight: 620;
  --mark-bottom: 14px;
  --mark-size: .45rem;
  --num-left: 50%;
}

/* ----- Mobile spine typography system ----- */
@media (max-width: 760px) {
  .mobile-volume-spine small {
    position: absolute;
    top: var(--m-num-top, 10px);
    left: var(--m-num-left, 50%);
    margin: 0 !important;
    transform: translateX(-50%);
    font-size: var(--m-num-size, .43rem) !important;
    letter-spacing: .11em !important;
    opacity: var(--m-num-opacity, .7) !important;
  }

  .mobile-volume-spine strong {
    left: var(--m-title-left, 50%) !important;
    top: var(--m-title-top, 54%) !important;
    width: var(--m-title-width, 178px) !important;
    transform: translate(-50%,-50%) rotate(-90deg) !important;
    text-align: center !important;
    font-size: var(--m-title-size, .66rem) !important;
    line-height: var(--m-title-line, 1.02) !important;
    letter-spacing: var(--m-title-track, .11em) !important;
    font-weight: var(--m-title-weight, 650) !important;
  }

  .mobile-volume-spine em {
    position: absolute;
    left: var(--m-mark-left, 50%);
    bottom: var(--m-mark-bottom, 10px);
    margin: 0 !important;
    transform: translateX(-50%) rotate(180deg) !important;
    font-size: var(--m-mark-size, .31rem) !important;
    letter-spacing: .11em !important;
    opacity: var(--m-mark-opacity, .56) !important;
  }

  .mobile-volume-spine::after {
    left: var(--m-rule-left, 7px) !important;
    right: var(--m-rule-right, 7px) !important;
    top: var(--m-rule-top, 35px) !important;
    bottom: var(--m-rule-bottom, 35px) !important;
  }

  .mobile-shelf-books-1 .mobile-volume:nth-child(1) {
    --m-title-top: 57%; --m-title-width: 176px; --m-title-size: .69rem; --m-mark-size: .30rem;
  }
  .mobile-shelf-books-1 .mobile-volume:nth-child(2) {
    --m-title-top: 55%; --m-title-left: 48%; --m-title-width: 166px; --m-title-size: .67rem; --m-mark-size: .29rem; --m-num-left: 46%;
  }
  .mobile-shelf-books-1 .mobile-volume:nth-child(3) {
    --m-title-top: 58%; --m-title-width: 186px; --m-title-size: .68rem; --m-title-track: .10em;
  }
  .mobile-shelf-books-1 .mobile-volume:nth-child(4) {
    --m-title-top: 56%; --m-title-width: 156px; --m-title-size: .64rem; --m-title-track: .12em;
  }
  .mobile-shelf-books-1 .mobile-volume:nth-child(5) {
    --m-title-top: 53%; --m-title-width: 166px; --m-title-size: .65rem; --m-mark-size: .29rem;
  }

  .mobile-shelf-books-2 .mobile-volume:nth-child(2) {
    --m-title-top: 56%; --m-title-width: 178px; --m-title-size: .62rem; --m-title-track: .14em; --m-num-opacity: .45;
  }
  .mobile-shelf-books-2 .mobile-volume:nth-child(3) {
    --m-title-top: 57%; --m-title-width: 160px; --m-title-size: .66rem;
  }
  .mobile-shelf-books-2 .mobile-volume:nth-child(4) {
    --m-title-top: 58%; --m-title-width: 160px; --m-title-size: .73rem; --m-title-track: .11em;
  }
}

@media (max-width: 390px) {
  .mobile-volume-spine strong {
    width: var(--m-title-width, 160px) !important;
    font-size: var(--m-title-size, .61rem) !important;
  }
}

/* =========================================================
   v130 — CACHE-BUSTED / STRONGER EDITORIAL SPINE SYSTEM
   ========================================================= */

/* Absolutely no faux pages/tops anywhere in library book visuals */
.book-top,
.book-pages,
.pull-book-top,
.pull-book-pages,
.mobile-volume-pages {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* More obviously graphic, flat, reference-inspired shelf */
.library-books {
  gap: 7px !important;
}

.book-spine,
.pull-book-spine {
  border: 0 !important;
  box-shadow: none !important;
  background: var(--book-color) !important;
}

.library-book {
  filter: none !important;
}

/* Remove generic centered rule treatment so each spine can differ */
.book-spine::after {
  display: none !important;
}

/* 01 — asymmetric stacked label */
.library-book:nth-child(1) .book-number {
  top: 20px !important; left: 17px !important; transform:none !important;
  font-size:.58rem !important; letter-spacing:.08em !important;
}
.library-book:nth-child(1) .book-title {
  left: 56% !important; top: 55% !important; width: 280px !important;
  text-align:left !important; font-size:1.02rem !important; letter-spacing:.09em !important;
}
.library-book:nth-child(1) .book-mark {
  left: 18px !important; bottom:18px !important; transform:rotate(180deg) !important;
  font-size:.43rem !important;
}
.library-book:nth-child(1) .book-spine::before {
  content:"SOLA / 01" !important; position:absolute !important; top:68px !important; left:16px !important;
  width:auto !important; height:auto !important; background:none !important; opacity:.34 !important;
  font-size:.40rem !important; letter-spacing:.16em !important; writing-mode:vertical-rl !important;
}

/* 02 — cleaner Swiss-style vertical */
.library-book:nth-child(2) .book-number {
  top: 18px !important; left:50% !important;
}
.library-book:nth-child(2) .book-title {
  top: 58% !important; width:230px !important; font-size:.96rem !important; letter-spacing:.06em !important;
  font-weight:500 !important;
}
.library-book:nth-child(2) .book-mark {
  bottom:20px !important; font-size:.39rem !important; opacity:.62 !important;
}
.library-book:nth-child(2) .book-spine::before {
  content:"TOUR\A INTERNATIONAL" !important; white-space:pre !important; position:absolute !important;
  top:72px !important; left:50% !important; transform:translateX(-50%) rotate(-90deg) !important;
  width:170px !important; height:auto !important; background:none !important; opacity:.30 !important;
  font-size:.37rem !important; letter-spacing:.13em !important; text-align:center !important;
}

/* 03 — oversized type block */
.library-book:nth-child(3) .book-title {
  left:52% !important; top:57% !important; width:330px !important;
  font-size:1.18rem !important; line-height:.90 !important; letter-spacing:.055em !important;
  font-weight:700 !important;
}
.library-book:nth-child(3) .book-number {
  top:17px !important; left:18px !important; transform:none !important;
}
.library-book:nth-child(3) .book-mark {
  left:auto !important; right:15px !important; bottom:18px !important; transform:rotate(180deg) !important;
}
.library-book:nth-child(3) .book-spine::before {
  content:"A WORLD IN MOTION" !important; position:absolute !important; top:64px !important; right:13px !important;
  width:auto !important; height:auto !important; background:none !important; opacity:.28 !important;
  font-size:.39rem !important; letter-spacing:.13em !important; writing-mode:vertical-rl !important;
}

/* 04 — narrow typographic poster spine */
.library-book:nth-child(4) .book-title {
  top:54% !important; width:225px !important; font-size:.92rem !important; letter-spacing:.17em !important;
}
.library-book:nth-child(4) .book-number { top:14px !important; }
.library-book:nth-child(4) .book-mark { bottom:14px !important; font-size:.36rem !important; }
.library-book:nth-child(4) .book-spine::before {
  content:"FORM / TYPE / IMAGE" !important; position:absolute !important; left:50% !important; top:70px !important;
  transform:translateX(-50%) rotate(-90deg) !important; width:160px !important; height:auto !important;
  background:none !important; opacity:.28 !important; font-size:.34rem !important; letter-spacing:.14em !important;
}

/* 05 — editorial small caps */
.library-book:nth-child(5) .book-title {
  top:50% !important; width:255px !important; font-size:.98rem !important; letter-spacing:.18em !important;
  font-weight:600 !important;
}
.library-book:nth-child(5) .book-number { left:18px !important; transform:none !important; }
.library-book:nth-child(5) .book-mark { left:18px !important; transform:rotate(180deg) !important; }
.library-book:nth-child(5) .book-spine::before {
  content:"PROFILE / PERSON / STORY" !important; position:absolute !important; right:14px !important; top:74px !important;
  width:auto !important; height:auto !important; background:none !important; opacity:.26 !important;
  font-size:.35rem !important; letter-spacing:.14em !important; writing-mode:vertical-rl !important;
}

/* 06 — intentionally quiet, like a minimalist art monograph */
.library-book:nth-child(6) .book-title {
  top:60% !important; width:280px !important; font-size:.88rem !important; letter-spacing:.20em !important;
  font-weight:500 !important; opacity:.55 !important;
}
.library-book:nth-child(6) .book-number { top:18px !important; left:16px !important; transform:none !important; opacity:.32 !important; }
.library-book:nth-child(6) .book-mark { bottom:16px !important; opacity:.30 !important; }
.library-book:nth-child(6) .book-spine::before {
  content:"06 / VISUAL SYSTEMS" !important; position:absolute !important; left:50% !important; top:88px !important;
  transform:translateX(-50%) rotate(-90deg) !important; width:180px !important; height:auto !important;
  background:none !important; opacity:.22 !important; font-size:.35rem !important; letter-spacing:.15em !important;
}

/* 07 — bold condensed feeling */
.library-book:nth-child(7) .book-title {
  top:57% !important; width:230px !important; font-size:1.04rem !important; letter-spacing:.14em !important;
  font-weight:700 !important;
}
.library-book:nth-child(7) .book-number { left:17px !important; transform:none !important; }
.library-book:nth-child(7) .book-mark { bottom:15px !important; font-size:.37rem !important; }
.library-book:nth-child(7) .book-spine::before {
  content:"MOMENT → MOMENTUM" !important; position:absolute !important; right:12px !important; top:70px !important;
  width:auto !important; height:auto !important; background:none !important; opacity:.28 !important;
  font-size:.34rem !important; letter-spacing:.12em !important; writing-mode:vertical-rl !important;
}

/* 08 — oversized simple SOLA */
.library-book:nth-child(8) .book-title {
  top:53% !important; width:220px !important; font-size:1.26rem !important; letter-spacing:.18em !important;
  font-weight:600 !important;
}
.library-book:nth-child(8) .book-number { top:18px !important; right:14px !important; left:auto !important; transform:none !important; }
.library-book:nth-child(8) .book-mark { bottom:18px !important; font-size:.40rem !important; }
.library-book:nth-child(8) .book-spine::before {
  content:"THE UNWRITTEN VOLUME" !important; position:absolute !important; left:50% !important; top:77px !important;
  transform:translateX(-50%) rotate(-90deg) !important; width:180px !important; height:auto !important;
  background:none !important; opacity:.28 !important; font-size:.35rem !important; letter-spacing:.16em !important;
}

/* Mobile: same concept, simplified enough to stay legible */
@media (max-width:760px) {
  .mobile-volume-spine::after { display:none !important; }
  .mobile-volume-spine { box-shadow:none !important; border:0 !important; }

  .mobile-volume-spine small {
    top:9px !important; left:10px !important; transform:none !important;
    font-size:.38rem !important; opacity:.62 !important;
  }
  .mobile-volume-spine strong {
    top:56% !important; width:170px !important; font-size:.64rem !important;
    letter-spacing:.10em !important;
  }
  .mobile-volume-spine em {
    bottom:10px !important; left:10px !important; transform:rotate(180deg) !important;
    font-size:.27rem !important;
  }

  .mobile-shelf-books-1 .mobile-volume:nth-child(3) .mobile-volume-spine strong {
    font-size:.70rem !important; letter-spacing:.06em !important; font-weight:700 !important;
  }
  .mobile-shelf-books-1 .mobile-volume:nth-child(4) .mobile-volume-spine strong {
    font-size:.59rem !important; letter-spacing:.15em !important;
  }
  .mobile-shelf-books-2 .mobile-volume:nth-child(2) .mobile-volume-spine strong {
    opacity:.55 !important; letter-spacing:.16em !important; font-weight:500 !important;
  }
  .mobile-shelf-books-2 .mobile-volume:nth-child(4) .mobile-volume-spine strong {
    font-size:.75rem !important; letter-spacing:.16em !important;
  }
}

/* =========================================================
   v131 — FULL-WIDTH DESKTOP LIBRARY SHELF
   Keep books centered; extend the physical shelf edge-to-edge.
   ========================================================= */
@media (min-width: 761px) {
  .library-shelf-wrap {
    width: 100vw !important;
    max-width: none !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .library-books {
    width: min(1180px, 88vw) !important;
    margin: 0 auto !important;
  }

  .library-shelf {
    width: 100% !important;
  }

  .shelf-front {
    width: 100% !important;
    left: 0 !important;
    clip-path: polygon(0 0, 100% 0, 99.25% 100%, .75% 100%) !important;
  }

  .shelf-edge {
    left: 3.5vw !important;
    right: 3.5vw !important;
  }

  .library-shelf-shadow {
    left: 1.5% !important;
    right: 1.5% !important;
  }
}


/* =========================================================
   v132 — visible pull-clone handoff fix
   ========================================================= */

/* The moving clone uses its own color variable; do not inherit --book-color. */
.library-pull-book {
  opacity: 1;
  visibility: visible;
}

.library-pull-book .pull-book-spine {
  background:
    linear-gradient(90deg, rgba(255,255,255,.045), transparent 18%, transparent 84%, rgba(0,0,0,.12)),
    var(--pull-book-color, #4f2d29) !important;
  color: var(--pull-book-text, #f4eee7) !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,.08),
    inset -1px 0 0 rgba(0,0,0,.08) !important;
}

/* Keep source geometry in place while visually hiding it. */
.library-book.is-source-hidden,
.mobile-volume.is-source-hidden {
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Ensure no stale handoff opacity survives from a previous interaction. */
.library-pull-layer.is-active .library-pull-book:not(.is-handoff) {
  opacity: 1 !important;
  visibility: visible !important;
}


/* =========================================================
   v133 — DESKTOP LIBRARY COMPOSITION LIFT
   Bring the books + full-width shelf into the first viewport.
   Mobile remains unchanged.
   ========================================================= */
@media (min-width: 761px) {
  .library-room-first {
    padding-top: 96px !important;
    padding-bottom: 70px !important;
  }

  .library-room-heading-v109 {
    margin-bottom: 0 !important;
  }

  .library-stage {
    height: 560px !important;
    margin-top: -42px !important;
  }

  .library-shelf-wrap {
    bottom: 42px !important;
  }
}


/* =========================================================
   v135 — EXACT FIRST-VIEW DESKTOP FIT
   Restore the preferred original top spacing.
   Anchor the library stage to the viewport bottom.
   The 24px shelf face lands exactly on the bottom edge.
   ========================================================= */
@media (min-width: 761px) {
  .library-room-first {
    height: 100svh !important;
    min-height: 100svh !important;
    padding-top: 128px !important;
    padding-bottom: 0 !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .library-room-heading-v109 {
    margin-bottom: 34px !important;
  }

  .library-stage {
    position: absolute !important;
    left: clamp(22px, 5vw, 82px) !important;
    right: clamp(22px, 5vw, 82px) !important;
    bottom: 0 !important;
    width: auto !important;
    height: clamp(510px, 60svh, 590px) !important;
    margin: 0 !important;
  }

  /* Shelf front is 24px tall, so this makes its lowest pixel
     land exactly at the viewport bottom. */
  .library-shelf-wrap {
    bottom: 24px !important;
  }
}


/* =========================================================
   v136 — FEATURED DESIGN CONTINUOUS 3-UP CAROUSEL
   Desktop: always moving, pauses on hover/focus.
   Mobile: retains the existing static 2-column presentation.
   ========================================================= */
@media (min-width: 641px) {
  .design-featured-work .design-feature-carousel {
    width: calc(100vw - 24px) !important;
    max-width: none !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    overflow: hidden !important;
    margin: 0 !important;
    cursor: default;
  }

  .design-featured-work .design-feature-track {
    display: flex !important;
    align-items: stretch !important;
    gap: 14px !important;
    width: 100% !important;
    will-change: transform !important;
    transform: translate3d(0,0,0);
  }

  .design-featured-work .design-feature-track > .design-feature-card {
    flex: 0 0 calc((100% - 28px) / 3) !important;
    width: calc((100% - 28px) / 3) !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .design-featured-work .design-feature-track > .design-feature-card img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  .design-featured-work .design-feature-clone {
    pointer-events: none !important;
  }
}

@media (max-width: 640px) {
  .design-featured-work .design-feature-carousel {
    width: calc(100vw - 16px) !important;
    max-width: none !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    overflow: visible !important;
  }

  .design-featured-work .design-feature-track {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    transform: none !important;
  }

  .design-featured-work .design-feature-clone {
    display: none !important;
  }
}

/* =========================================================
   v144 — CLEAN HORIZONTAL DESIGN INTRO
   One compact editorial lockup above the 3-up carousel.
   ========================================================= */

@media (min-width: 901px) {
  .design-featured-work {
    padding-top: 54px !important;
    padding-bottom: 24px !important;
  }

  .design-featured-work .design-section-label {
    width: 100% !important;
    margin: 0 auto 24px !important;
    text-align: center !important;
    letter-spacing: .16em !important;
  }

  .design-featured-work .design-featured-intro {
    width: min(1120px, 88vw) !important;
    margin: 0 auto 30px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 720px) minmax(260px, 320px) !important;
    gap: 46px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .design-featured-work .design-featured-intro h2 {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    text-align: center !important;
    font-size: clamp(4.4rem, 5.6vw, 6.35rem) !important;
    line-height: .88 !important;
    letter-spacing: -.055em !important;
    font-weight: 500 !important;
  }

  .design-featured-work .design-featured-intro h2 em {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: .08em 0 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    font-size: .82em !important;
    line-height: .9 !important;
    letter-spacing: -.04em !important;
  }

  .design-featured-work .design-featured-intro p {
    position: relative !important;
    width: 100% !important;
    max-width: 31ch !important;
    margin: 0 !important;
    padding: 18px 0 0 !important;
    align-self: center !important;
    text-align: left !important;
    font-size: .94rem !important;
    line-height: 1.6 !important;
  }

  .design-featured-work .design-featured-intro p::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 42px !important;
    height: 1px !important;
    background: #452e29 !important;
    opacity: .28 !important;
  }

  .design-featured-work .design-feature-carousel {
    margin-top: 0 !important;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .design-featured-work .design-featured-intro {
    width: min(980px, 90vw) !important;
    grid-template-columns: minmax(0, 620px) minmax(250px, 290px) !important;
    gap: 34px !important;
  }

  .design-featured-work .design-featured-intro h2 {
    font-size: clamp(4rem, 6.2vw, 5.5rem) !important;
  }
}

@media (max-width: 900px) {
  .design-featured-work {
    padding-top: 46px !important;
    padding-bottom: 28px !important;
  }

  .design-featured-work .design-section-label {
    text-align: center !important;
    margin-bottom: 22px !important;
  }

  .design-featured-work .design-featured-intro {
    width: min(680px, 90vw) !important;
    margin: 0 auto 28px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
    text-align: center !important;
  }

  .design-featured-work .design-featured-intro h2 {
    max-width: 9ch !important;
    margin: 0 auto !important;
    text-align: center !important;
    line-height: .9 !important;
  }

  .design-featured-work .design-featured-intro h2 em {
    white-space: normal !important;
    margin-top: .08em !important;
  }

  .design-featured-work .design-featured-intro p {
    max-width: 32ch !important;
    margin: 0 auto !important;
    padding-top: 16px !important;
    text-align: center !important;
    line-height: 1.58 !important;
  }

  .design-featured-work .design-featured-intro p::before {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 40px !important;
  }
}


/* =========================================================
   v145 — EXACT DESIGN INTRO MATCH
   Compact centered editorial lockup like approved reference.
   ========================================================= */

@media (min-width: 901px) {
  .design-featured-work {
    padding-top: 28px !important;
    padding-bottom: 18px !important;
  }

  .design-featured-work .design-section-label {
    width: 100% !important;
    margin: 0 auto 16px !important;
    text-align: center !important;
    letter-spacing: .16em !important;
  }

  .design-featured-work .design-featured-intro {
    width: min(1020px, 78vw) !important;
    margin: 0 auto 26px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 590px) minmax(270px, 340px) !important;
    gap: 58px !important;
    align-items: start !important;
    justify-content: center !important;
  }

  .design-featured-work .design-featured-intro h2 {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    text-align: center !important;
    font-size: clamp(4.6rem, 5.25vw, 6.15rem) !important;
    line-height: .86 !important;
    letter-spacing: -.065em !important;
    font-weight: 500 !important;
  }

  .design-featured-work .design-featured-intro h2 em {
    display: block !important;
    width: 100% !important;
    margin: .06em auto 0 !important;
    text-align: center !important;
    font-size: .82em !important;
    line-height: .9 !important;
    letter-spacing: -.045em !important;
    white-space: normal !important;
  }

  .design-featured-work .design-featured-intro p {
    position: relative !important;
    width: 100% !important;
    max-width: 31ch !important;
    margin: 22px 0 0 !important;
    padding: 18px 0 0 !important;
    text-align: left !important;
    font-size: .93rem !important;
    line-height: 1.56 !important;
  }

  .design-featured-work .design-featured-intro p::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 42px !important;
    height: 1px !important;
    background: #452e29 !important;
    opacity: .28 !important;
  }

  .design-featured-work .design-feature-carousel {
    margin-top: 6px !important;
  }
}

@media (min-width: 901px) and (max-width: 1220px) {
  .design-featured-work .design-featured-intro {
    width: min(960px, 84vw) !important;
    grid-template-columns: minmax(0, 520px) minmax(250px, 310px) !important;
    gap: 42px !important;
  }

  .design-featured-work .design-featured-intro h2 {
    font-size: clamp(4rem, 5.4vw, 5.5rem) !important;
  }
}

@media (max-width: 900px) {
  .design-featured-work {
    padding-top: 36px !important;
    padding-bottom: 22px !important;
  }

  .design-featured-work .design-section-label {
    margin-bottom: 18px !important;
    text-align: center !important;
  }

  .design-featured-work .design-featured-intro {
    width: min(680px, 90vw) !important;
    margin: 0 auto 22px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    text-align: center !important;
  }

  .design-featured-work .design-featured-intro h2 {
    max-width: none !important;
    margin: 0 auto !important;
    text-align: center !important;
    font-size: clamp(3.15rem, 12vw, 4.3rem) !important;
    line-height: .9 !important;
    letter-spacing: -.055em !important;
  }

  .design-featured-work .design-featured-intro h2 em {
    display: block !important;
    margin-top: .06em !important;
    white-space: normal !important;
    line-height: .92 !important;
  }

  .design-featured-work .design-featured-intro p {
    max-width: 30ch !important;
    margin: 0 auto !important;
    padding-top: 14px !important;
    text-align: center !important;
    line-height: 1.55 !important;
  }

  .design-featured-work .design-featured-intro p::before {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 38px !important;
  }
}


/* =========================================================
   v146 — BUSINESS PARTNER PREFLIGHT
   Presentation build: hide experimental/placeholder elements,
   polish navigation consistency, preserve approved design.
   ========================================================= */

/* With only three real selected-work cards, keep the rail balanced. */
@media (min-width: 1000px) {
  #workRail {
    padding-right: clamp(28px, 5vw, 78px) !important;
  }
}

/* Portfolio navigation should read consistently on every case page. */
.portfolio-nav .nav-cta {
  white-space: nowrap;
}

/* Do not surface any stale library entry if cached markup survives. */
.nav-lab-link,
.portfolio-nav a[href="library-lab.html"] {
  display: none !important;
}


/* =========================================================
   v147 — PROOF / RESULTS
   Compact business-proof layer between story and portfolio.
   ========================================================= */
.proof-section {
  background: #452e29;
  color: #fffaf8;
  border-top: 1px solid rgba(245,203,217,.18);
  border-bottom: 1px solid rgba(245,203,217,.18);
}

.proof-shell {
  width: min(1500px, calc(100% - 8vw));
  margin: 0 auto;
  padding: clamp(58px, 6vw, 92px) 0;
}

.proof-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 40px;
  margin-bottom: clamp(34px, 4vw, 56px);
}

.proof-heading .section-label {
  color: #f5cbd9;
  margin: 0;
}

.proof-heading p {
  max-width: 46ch;
  margin: 0;
  color: rgba(255,250,248,.72);
  font-size: clamp(.88rem, 1vw, 1.02rem);
  line-height: 1.55;
  text-align: right;
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  border-top: 1px solid rgba(245,203,217,.24);
  border-bottom: 1px solid rgba(245,203,217,.24);
}

.proof-stat {
  min-height: 190px;
  padding: clamp(24px, 2.5vw, 38px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 26px;
  border-right: 1px solid rgba(245,203,217,.20);
}

.proof-stat:last-child {
  border-right: 0;
}

.proof-stat strong {
  display: block;
  color: #f5cbd9;
  font-size: clamp(2.4rem, 3.8vw, 5rem);
  line-height: .92;
  letter-spacing: -.055em;
  font-weight: 500;
}

.proof-stat-wide strong {
  font-size: clamp(1.6rem, 2.2vw, 2.7rem);
  letter-spacing: -.035em;
}

.proof-stat span {
  max-width: 24ch;
  color: rgba(255,250,248,.74);
  font-size: clamp(.72rem, .85vw, .92rem);
  line-height: 1.45;
  letter-spacing: .02em;
}

@media (max-width: 980px) {
  .proof-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .proof-stat:nth-child(2) { border-right: 0; }
  .proof-stat:nth-child(-n+2) { border-bottom: 1px solid rgba(245,203,217,.20); }
}

@media (max-width: 640px) {
  .proof-shell {
    width: calc(100% - 36px);
    padding: 48px 0;
  }
  .proof-heading {
    display: block;
    margin-bottom: 28px;
  }
  .proof-heading p {
    margin-top: 14px;
    text-align: left;
    max-width: 32ch;
  }
  .proof-grid {
    grid-template-columns: 1fr;
  }
  .proof-stat {
    min-height: 150px;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(245,203,217,.20);
  }
  .proof-stat:last-child { border-bottom: 0; }
  .proof-stat:nth-child(-n+2) { border-bottom: 1px solid rgba(245,203,217,.20); }
  .proof-stat strong {
    font-size: clamp(2.8rem, 14vw, 4.4rem);
  }
  .proof-stat-wide strong {
    font-size: clamp(1.65rem, 8vw, 2.3rem);
  }
}


/* v150 — MJM Hoops selected-work card */
#mjmCaseCard .editorial-frame img {
  object-position: center 30%;
}

@media (max-width: 640px) {
  #mjmCaseCard .editorial-frame img {
    object-position: center 28%;
  }
}


/* =========================================================
   v152 — VERIFIED PROOF / RESULTS PRESENTATION STYLING
   ========================================================= */
.proof-section {
  background:#452e29 !important;
  color:#fffaf8 !important;
  border-top:1px solid rgba(245,203,217,.18) !important;
  border-bottom:1px solid rgba(245,203,217,.18) !important;
}
.proof-shell {
  width:min(1500px,92vw) !important;
  margin:0 auto !important;
  padding:clamp(58px,6vw,92px) 0 !important;
}
.proof-heading {
  display:flex !important;
  justify-content:space-between !important;
  align-items:flex-end !important;
  gap:40px !important;
  margin-bottom:clamp(34px,4vw,56px) !important;
}
.proof-heading .section-label { color:#f5cbd9 !important; margin:0 !important; }
.proof-heading p {
  max-width:46ch !important; margin:0 !important; color:rgba(255,250,248,.72) !important;
  font-size:clamp(.88rem,1vw,1.02rem) !important; line-height:1.55 !important; text-align:right !important;
}
.proof-grid {
  display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  border-top:1px solid rgba(245,203,217,.24) !important;
  border-bottom:1px solid rgba(245,203,217,.24) !important;
}
.proof-stat {
  min-height:190px !important; padding:clamp(24px,2.5vw,38px) !important;
  display:flex !important; flex-direction:column !important; justify-content:space-between !important; gap:26px !important;
  border-right:1px solid rgba(245,203,217,.20) !important;
}
.proof-stat:last-child { border-right:0 !important; }
.proof-stat strong {
  display:block !important; color:#f5cbd9 !important; font-size:clamp(2.4rem,3.8vw,5rem) !important;
  line-height:.92 !important; letter-spacing:-.055em !important; font-weight:500 !important;
}
.proof-stat-wide strong { font-size:clamp(1.55rem,2.15vw,2.65rem) !important; letter-spacing:-.035em !important; }
.proof-stat span {
  max-width:24ch !important; color:rgba(255,250,248,.74) !important; font-size:clamp(.72rem,.85vw,.92rem) !important;
  line-height:1.45 !important; letter-spacing:.02em !important;
}
@media (max-width:980px) {
  .proof-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .proof-stat:nth-child(2) { border-right:0 !important; }
  .proof-stat:nth-child(-n+2) { border-bottom:1px solid rgba(245,203,217,.20) !important; }
}
@media (max-width:640px) {
  .proof-shell { width:calc(100% - 36px) !important; padding:48px 0 !important; }
  .proof-heading { display:block !important; margin-bottom:28px !important; }
  .proof-heading p { margin-top:14px !important; text-align:left !important; max-width:32ch !important; }
  .proof-grid { grid-template-columns:1fr !important; }
  .proof-stat { min-height:150px !important; border-right:0 !important; border-bottom:1px solid rgba(245,203,217,.20) !important; }
  .proof-stat:last-child { border-bottom:0 !important; }
  .proof-stat strong { font-size:clamp(2.8rem,14vw,4.4rem) !important; }
  .proof-stat-wide strong { font-size:clamp(1.65rem,8vw,2.3rem) !important; }
}
#tncCaseCard .editorial-frame img { object-fit:cover !important; object-position:center 32% !important; padding:0 !important; }
@media (max-width:640px) { #tncCaseCard .editorial-frame img { object-position:center 30% !important; } }


/* =========================================================
   v153 — RESTORE KNOWN-GOOD WHO WE ARE LAYOUT (v147)
   ========================================================= */

@media (min-width: 901px) {
  .manifesto.manifesto-v104 {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 720px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    overflow: hidden !important;
  }

  .manifesto-v104-shell {
    width: min(calc(100% - 10vw), 1480px) !important;
    min-height: 720px !important;
    margin: 0 auto !important;
    padding: 86px 0 92px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  .manifesto-v104-label {
    position: static !important;
    margin: 0 0 38px !important;
    padding: 0 !important;
    align-self: auto !important;
  }

  .manifesto-v104-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(340px, 470px) minmax(560px, 720px) !important;
    justify-content: center !important;
    align-items: center !important;
    column-gap: clamp(72px, 7vw, 124px) !important;
  }

  .manifesto-v104-visual {
    position: relative !important;
    width: 100% !important;
    max-width: 430px !important;
    height: 470px !important;
    margin: 0 !important;
    justify-self: end !important;
  }

  .manifesto-v104-pink {
    position: absolute !important;
    left: 46px !important;
    top: 38px !important;
    width: 350px !important;
    height: 390px !important;
    background: #f5cbd9 !important;
    transform: rotate(2.5deg) !important;
  }

  .manifesto-v104-photo {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 342px !important;
    height: 405px !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #452e29 !important;
    transform: rotate(-1.3deg) !important;
    box-shadow: 0 24px 52px rgba(69,46,41,.14) !important;
  }

  .manifesto-v104-photo img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 34% !important;
    filter: saturate(.86) contrast(1.035) !important;
  }

  .manifesto-v104-index {
    position: absolute !important;
    left: 5px !important;
    bottom: 6px !important;
    font-size: .56rem !important;
    letter-spacing: .16em !important;
    color: rgba(69,46,41,.48) !important;
  }

  .manifesto-v104-copy {
    position: static !important;
    width: 100% !important;
    max-width: 700px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    justify-self: start !important;
  }

  .manifesto-v104-copy .eyebrow {
    margin: 0 0 18px !important;
    text-align: left !important;
    font-size: 1.18rem !important;
  }

  .manifesto-v104-copy h2 {
    margin: 0 !important;
    text-align: left !important;
    font-size: clamp(4.6rem, 5.5vw, 6.4rem) !important;
    line-height: .9 !important;
    letter-spacing: -.065em !important;
  }

  .manifesto-v104-copy .body-copy {
    max-width: 620px !important;
    margin: 38px 0 0 !important;
    text-align: left !important;
    font-size: 1.02rem !important;
    line-height: 1.64 !important;
  }

  .manifesto-v104-copy .manifesto-focus {
    margin: 28px 0 0 !important;
    text-align: left !important;
  }

  .manifesto-v104-copy .manifesto-focus::before {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .manifesto-v104-shell {
    width: calc(100% - 72px) !important;
  }

  .manifesto-v104-grid {
    grid-template-columns: 320px minmax(480px, 1fr) !important;
    column-gap: 54px !important;
  }

  .manifesto-v104-visual {
    height: 405px !important;
  }

  .manifesto-v104-pink {
    left: 35px !important;
    top: 30px !important;
    width: 285px !important;
    height: 340px !important;
  }

  .manifesto-v104-photo {
    width: 285px !important;
    height: 350px !important;
  }

  .manifesto-v104-copy h2 {
    font-size: clamp(4rem, 6vw, 5.2rem) !important;
  }
}

@media (max-width: 900px) {
  .manifesto.manifesto-v104 {
    display: block !important;
  }

  .manifesto-v104-shell {
    width: 100% !important;
  }

  .manifesto-v104-label {
    margin-bottom: 24px !important;
  }

  .manifesto-v104-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
  }

  .manifesto-v104-visual {
    position: relative !important;
    width: min(78vw, 330px) !important;
    height: 300px !important;
    margin: 0 !important;
  }

  .manifesto-v104-pink {
    position: absolute !important;
    left: 20px !important;
    top: 18px !important;
    width: 90% !important;
    height: 88% !important;
    background: #f5cbd9 !important;
    transform: rotate(2deg) !important;
  }

  .manifesto-v104-photo {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 84% !important;
    height: 84% !important;
    margin: 0 !important;
    overflow: hidden !important;
    transform: rotate(-1deg) !important;
  }

  .manifesto-v104-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 34% !important;
  }

  .manifesto-v104-index {
    position: absolute !important;
    left: 0 !important;
    bottom: 4px !important;
    font-size: .52rem !important;
    letter-spacing: .14em !important;
    opacity: .5 !important;
  }

  .manifesto-v104-copy {
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
  }
}


/* =========================================================
   v154 — MOBILE NAV HIERARCHY CLEANUP
   Graphic Design matches Work / Services / About exactly.
   ========================================================= */
@media (max-width: 900px) {
  .site-header .nav.open > a:not(.nav-cta),
  .site-header .nav.open > a.nav-design-link,
  .portfolio-nav.is-open > a:not(:last-child),
  .portfolio-nav.is-open > a.portfolio-nav-design {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #fffaf8 !important;
    font-family: Inter, sans-serif !important;
    font-size: 1.72rem !important;
    font-weight: 400 !important;
    line-height: 1.18 !important;
    letter-spacing: -.02em !important;
    text-transform: none !important;
    text-align: center !important;
  }

  .site-header .nav.open > a.nav-design-link::before,
  .site-header .nav.open > a.nav-design-link::after,
  .portfolio-nav.is-open > a.portfolio-nav-design::before,
  .portfolio-nav.is-open > a.portfolio-nav-design::after {
    display: none !important;
    content: none !important;
  }

  .site-header .nav.open > a.nav-cta {
    margin-top: 14px !important;
  }
}

@media (max-width: 420px) {
  .site-header .nav.open > a:not(.nav-cta),
  .site-header .nav.open > a.nav-design-link,
  .portfolio-nav.is-open > a:not(:last-child),
  .portfolio-nav.is-open > a.portfolio-nav-design {
    font-size: 1.62rem !important;
    padding: 9px 0 !important;
  }
}


/* v155 — Proof / Results TNC link */
.proof-tnc-link {
  color: inherit !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
  text-decoration-color: currentColor !important;
  transition: opacity .2s ease !important;
}

.proof-tnc-link:hover,
.proof-tnc-link:focus-visible {
  opacity: .68 !important;
}

/* =========================================================
   v156 — WHO WE ARE STRUCTURAL GRID FIX
   Remove stale v103 named-grid placement from the v104 layout.
   ========================================================= */
@media (min-width: 901px) {
  .manifesto.manifesto-v104 {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .manifesto-v104-shell {
    width: min(1480px, calc(100% - 96px)) !important;
    min-height: 720px !important;
    margin: 0 auto !important;
    padding: 78px 0 86px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .manifesto-v104-label {
    display: block !important;
    position: static !important;
    grid-area: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
    margin: 0 0 34px !important;
    padding: 0 !important;
    align-self: stretch !important;
  }

  .manifesto-v104-grid {
    display: grid !important;
    grid-template-columns: minmax(340px, 430px) minmax(0, 720px) !important;
    grid-template-rows: 1fr !important;
    grid-template-areas: none !important;
    justify-content: center !important;
    align-items: center !important;
    column-gap: clamp(76px, 7vw, 130px) !important;
    row-gap: 0 !important;
    width: 100% !important;
    min-height: 500px !important;
  }

  .manifesto-v104-visual {
    grid-area: auto !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    place-self: center !important;
    position: relative !important;
    inset: auto !important;
    width: 430px !important;
    max-width: 100% !important;
    height: 470px !important;
    margin: 0 !important;
    transform: none !important;
  }

  .manifesto-v104-copy,
  .manifesto-copy.manifesto-v104-copy {
    grid-area: auto !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    place-self: center start !important;
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    translate: none !important;
    width: 100% !important;
    max-width: 720px !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  .manifesto-v104-copy .eyebrow {
    margin: 0 0 18px !important;
    text-align: center !important;
  }

  .manifesto-v104-copy h2,
  .manifesto.manifesto-v104 h2 {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    text-align: center !important;
    font-size: clamp(4.35rem, 5.5vw, 6.35rem) !important;
    line-height: .9 !important;
    letter-spacing: -.065em !important;
  }

  .manifesto-v104-copy .body-copy,
  .manifesto.manifesto-v104 .body-copy {
    width: min(100%, 670px) !important;
    max-width: 670px !important;
    margin: 38px auto 0 !important;
    text-align: center !important;
    font-size: 1.02rem !important;
    line-height: 1.64 !important;
  }

  .manifesto-v104-copy .manifesto-focus {
    margin: 26px auto 0 !important;
    text-align: center !important;
  }

  .manifesto-v104-copy .manifesto-focus::before {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .manifesto-v104-shell {
    width: calc(100% - 64px) !important;
  }

  .manifesto-v104-grid {
    grid-template-columns: 320px minmax(0, 1fr) !important;
    column-gap: 54px !important;
  }

  .manifesto-v104-visual {
    width: 320px !important;
    height: 405px !important;
  }
}


/* =========================================================
   v157 — PORTFOLIO DESKTOP NAV MATCHES HOMEPAGE
   Desktop: full horizontal navigation, no dropdown button.
   Mobile: preserve existing Menu interaction.
   ========================================================= */
@media (min-width: 901px) {
  .portfolio-overlay-header {
    height: 92px !important;
    padding: 0 4vw !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 28px !important;
    background: #452e29 !important;
  }

  .portfolio-overlay-logo {
    position: static !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  .portfolio-overlay-logo img {
    width: 220px !important;
    max-width: 220px !important;
    height: auto !important;
  }

  .portfolio-menu-toggle {
    display: none !important;
  }

  .portfolio-nav,
  .portfolio-nav.is-open {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .portfolio-nav > a,
  .portfolio-nav > a.portfolio-nav-design,
  .portfolio-nav > a.nav-cta {
    position: relative !important;
    display: inline-block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 0 5px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #fffaf8 !important;
    font-family: Inter, sans-serif !important;
    font-size: .77rem !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  /* Same left-to-right hover line as the homepage. */
  .portfolio-nav > a::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 1px !important;
    background: currentColor !important;
    transform: scaleX(0) !important;
    transform-origin: left center !important;
    transition: transform .28s cubic-bezier(.2,.8,.2,1) !important;
  }

  .portfolio-nav > a:hover::after,
  .portfolio-nav > a:focus-visible::after {
    transform: scaleX(1) !important;
  }

  .portfolio-nav > a.nav-cta::after {
    transform: scaleX(1) !important;
    opacity: .72 !important;
  }

  .portfolio-nav > a.nav-cta:hover::after,
  .portfolio-nav > a.nav-cta:focus-visible::after {
    opacity: 1 !important;
  }
}