/* Centered editorial composition inside the Photoshop Display frame. */
.hero-screen {
  grid-template-columns: minmax(300px, 480px) minmax(320px, 500px);
  justify-content: center;
  gap: clamp(34px, 6vw, 92px);
}

/* October refinement: quieter homepage, artwork-led contact, and scroll-driven book turns. */
.portfolio-home .hero-screen {
  grid-template-columns: minmax(320px, 0.82fr) minmax(390px, 1.18fr);
  gap: clamp(18px, 3.5vw, 58px);
}

.portfolio-home .hero-copy {
  justify-self: end;
  width: min(100%, 510px);
  padding-bottom: 0;
  transform: translateY(-2%);
}

.portfolio-home .hero-copy h1 {
  margin: clamp(22px, 3vh, 34px) 0 0;
  font-size: clamp(94px, 12.4vw, 178px);
}
.portfolio-home .hero-copy h1 em {
  display: block;
  color: #756c65;
  -webkit-text-stroke: 0;
}

.portfolio-home .hero-art {
  justify-self: start;
  width: min(47vw, 590px);
  min-width: 360px;
  transform: translateX(-3%);
}

.portfolio-home .hero-art img {
  transform: scale(1.035);
}

.portfolio-home .hero-aura {
  inset: 5% -10% 0 -12%;
}

.contact-page-single .contact-hero-screen {
  isolation: isolate;
}

.contact-page-single .contact-art-watermark {
  position: absolute;
  inset: clamp(30px, 5vw, 72px) clamp(38px, 10vw, 170px) clamp(44px, 7vw, 96px);
  z-index: 0;
  margin: 0;
  overflow: hidden;
  border-radius: clamp(30px, 4vw, 58px);
  opacity: 0.68;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 34%, rgba(0, 0, 0, 0.88) 58%, transparent 92%);
  mask-image: radial-gradient(ellipse at center, #000 34%, rgba(0, 0, 0, 0.88) 58%, transparent 92%);
}

.contact-page-single .contact-art-watermark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
  filter: saturate(0.86) contrast(1.04) brightness(1.03);
  transform: scale(1.025);
}

.contact-page-single .contact-hero-copy {
  z-index: 2;
  justify-content: flex-end;
  width: min(100%, 940px);
  height: 100%;
  padding-bottom: clamp(8px, 2vh, 22px);
  transform: none;
}

.contact-page-single .contact-locations {
  padding: 9px 13px;
  border: 1px solid rgba(54, 47, 42, 0.18);
  border-radius: 999px;
  background: rgba(250, 246, 239, 0.68);
  color: #423b36;
  backdrop-filter: blur(10px);
}

.contact-page-single .contact-actions {
  width: min(900px, 100%);
  margin-top: 14px;
  box-shadow: 0 14px 42px rgba(46, 37, 32, 0.12);
}

.contact-page-single .contact-action:not(.contact-action-primary) {
  background: rgba(250, 247, 241, 0.76);
  backdrop-filter: blur(12px);
}

.about-modern-page .canvas-scroll {
  scroll-snap-type: none;
}

.about-profile-screen {
  display: block;
  width: 100%;
  height: max(1920px, calc(300dvh - 432px));
  min-height: 1920px;
  padding: 0 !important;
  overflow: visible;
}

.about-profile-screen::before,
.about-profile-screen::after {
  display: none;
}

.about-peel-stack {
  position: sticky;
  top: 0;
  width: 100%;
  height: max(640px, calc(100dvh - 144px));
  min-height: 0;
  perspective: 2200px;
  perspective-origin: 28% 50%;
  transform-style: preserve-3d;
}

.about-peel-sheet,
.about-home-underlay {
  position: absolute;
  inset: clamp(22px, 3.2vw, 44px) clamp(24px, 4.8vw, 76px);
  border-radius: clamp(30px, 3.6vw, 48px);
}

.about-peel-sheet {
  transform-origin: left center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: none;
  will-change: transform;
}

.about-copy-sheet {
  transform: rotateY(var(--copy-flip, 0deg));
  box-shadow: 0 25px 72px rgba(62, 48, 41, 0.16), -2px 0 0 rgba(255, 255, 255, 0.72) inset;
}

.about-art-sheet {
  transform: rotateY(var(--art-flip, 0deg));
  box-shadow: 0 28px 80px rgba(13, 18, 16, 0.24), -2px 0 0 rgba(255, 255, 255, 0.16) inset;
}

.about-home-underlay {
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(54, 46, 41, 0.12);
  background:
    radial-gradient(55% 70% at 82% 14%, rgba(154, 244, 159, 0.3), transparent 78%),
    radial-gradient(55% 68% at 12% 86%, rgba(242, 217, 234, 0.34), transparent 78%),
    #f5f0e8;
  color: #292421;
  text-align: center;
}

.about-home-underlay span {
  color: #756b63;
  font: 9px DM Mono, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.about-home-underlay strong {
  max-width: 600px;
  font: 400 clamp(38px, 6vw, 82px)/0.95 Georgia, serif;
  letter-spacing: -0.055em;
}

.about-flip-cue {
  position: absolute;
  right: clamp(20px, 3vw, 38px);
  bottom: clamp(18px, 2.5vw, 32px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border: 1px solid rgba(55, 47, 42, 0.16);
  border-radius: 999px;
  background: rgba(250, 246, 239, 0.68);
  color: #514942;
  font: 8px DM Mono, monospace;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  backdrop-filter: blur(9px);
}

.about-flip-cue b {
  font: 18px Georgia, serif;
  font-weight: 400;
}

.about-flip-cue-art {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(9, 13, 11, 0.44);
  color: #f7f5f0;
}

@media (max-width: 900px) {
  .portfolio-home .hero-screen {
    grid-template-columns: minmax(290px, 0.88fr) minmax(320px, 1.12fr);
    gap: 10px;
  }

  .portfolio-home .hero-art {
    width: min(49vw, 520px);
    min-width: 320px;
  }
}

@media (max-width: 650px) {
  .portfolio-home .hero-copy {
    width: 78%;
    transform: none;
  }

  .portfolio-home .hero-copy h1 {
    font-size: clamp(82px, 25vw, 124px);
  }

  .portfolio-home .hero-art {
    right: -5%;
    bottom: 2%;
    width: 76vw;
    min-width: 285px;
    height: min(52vh, 438px);
    transform: none;
  }

  .contact-page-single .contact-art-watermark {
    inset: 28px 14px 90px;
    opacity: 0.72;
  }

  .contact-page-single .contact-hero-copy {
    justify-content: flex-end;
    padding-bottom: 8px;
  }

  .contact-page-single .contact-actions {
    margin-top: 10px;
    gap: 6px;
  }

  .contact-page-single .contact-action {
    background: rgba(250, 247, 241, 0.82);
  }

  .about-profile-screen {
    height: max(2010px, calc(300dvh - 432px));
    min-height: 2010px;
    padding: 0 !important;
  }

  .about-peel-stack {
    height: max(670px, calc(100dvh - 144px));
  }

  .about-peel-sheet,
  .about-home-underlay {
    inset: 18px;
    border-radius: 30px;
  }

  .about-copy-sheet {
    align-items: flex-start;
    padding: 58px 18px 76px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: auto;
  }

  .about-art-reveal img {
    object-position: 48% center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-peel-sheet {
    will-change: auto;
  }
}

.hero-copy {
  justify-self: center;
  width: min(100%, 480px);
}

.hero-art {
  justify-self: center;
  transform: none;
}

.about-screen,
.work-screen,
.contact-screen {
  align-items: center;
}

.statement-wrap,
.work-heading,
.contact-copy {
  width: min(100%, 900px);
  margin-inline: auto;
  text-align: center;
}

.statement-wrap h2,
.work-heading h2,
.contact-copy h2 {
  margin-inline: auto;
}

.about-columns {
  width: min(100%, 780px);
  margin-inline: auto;
  text-align: left;
}

.work-list {
  width: min(100%, 820px);
  margin-inline: auto;
}

.work-row strong small {
  display: block;
  margin-top: 5px;
  color: #7b7168;
  font: 9px DM Mono, monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.work-note {
  margin-inline: auto;
  text-align: center;
}

.contact-copy p:last-child {
  margin-inline: auto;
}

.end-links {
  margin-inline: auto;
}

.social-links {
  justify-content: center;
}

.harper-cover,
.ez-case-entry {
  grid-template-columns: minmax(300px, 470px) minmax(330px, 520px);
  justify-content: center;
  gap: clamp(38px, 7vw, 104px);
}

.harper-system-intro,
.brand-system-grid,
.palette-wrap,
.ez-digital-heading,
.ez-bento,
.ez-boundary {
  width: min(100%, 1000px);
  margin-left: auto;
  margin-right: auto;
}

.harper-system-intro,
.ez-digital-heading {
  text-align: center;
}

.harper-system-intro > p:last-child,
.ez-digital-heading > p:last-child {
  margin-left: auto;
  margin-right: auto;
}

.creative-project .project-intro,
.creative-project .project-gallery,
.creative-project .project-notes,
.practice-project .practice-gallery {
  margin-left: auto;
  margin-right: auto;
}

.creative-project .project-intro {
  width: min(100%, 940px);
  text-align: center;
}

.creative-project .project-summary {
  margin-left: auto;
  margin-right: auto;
}

.creative-project .project-meta {
  justify-content: center;
}

@media (max-width: 850px) {
  .hero-screen {
    grid-template-columns: minmax(260px, 430px) minmax(280px, 430px);
    gap: 24px;
  }

  .harper-cover,
  .ez-case-entry {
    grid-template-columns: minmax(270px, 1fr) minmax(290px, 1fr);
    gap: 28px;
  }
}

@media (max-width: 650px) {
  .hero-screen {
    display: block;
  }

  .hero-copy {
    justify-self: auto;
    width: auto;
  }

  .hero-art {
    transform: none;
  }

  .statement-wrap,
  .work-heading,
  .contact-copy,
  .creative-project .project-intro,
  .harper-system-intro,
  .ez-digital-heading {
    text-align: left;
  }

  .work-note {
    text-align: left;
  }

  .about-screen,
  .work-screen,
  .contact-screen {
    align-items: stretch;
  }

  .creative-project .project-meta {
    justify-content: flex-start;
  }
}

/* EZ Customers: replace the abstract website card with approved interface previews. */
.ez-project-preview {
  position: relative;
  justify-self: center;
  width: min(48vw, 620px);
  aspect-ratio: 1.18;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 32px 80px rgba(23, 28, 113, 0.32);
}

.ez-project-preview > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ez-preview-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: rgba(252, 251, 255, 0.88);
  color: #211a54;
  box-shadow: 0 8px 22px rgba(44, 34, 111, 0.14);
  font: 8px DM Mono, monospace;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.ez-preview-badge img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 63%;
}

.ez-project-preview small {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 7px 9px;
  border-radius: 999px;
  background: rgba(29, 25, 70, 0.86);
  color: #fff;
  font: 7px DM Mono, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.harper-case-page .ez-digital {
  min-height: 1500px !important;
}

.ez-contribution-summary {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: min(100%, 1000px);
  margin: clamp(28px, 4vw, 44px) auto 0;
}

.ez-contribution-summary article {
  min-height: 170px;
  padding: 23px;
  border: 1px solid rgba(69, 56, 170, 0.17);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.56);
}

.ez-contribution-summary article:first-child {
  background: linear-gradient(145deg, #7546f7, #315eff);
  color: #fff;
}

.ez-contribution-summary article:first-child .ez-label,
.ez-contribution-summary article:first-child span {
  color: rgba(255, 255, 255, 0.8);
}

.ez-contribution-summary strong {
  display: block;
  margin-top: 15px;
  font-size: clamp(24px, 2.8vw, 38px);
  line-height: 0.98;
  letter-spacing: -0.065em;
}

.ez-contribution-summary article > span {
  display: block;
  max-width: 390px;
  margin-top: 12px;
  color: #5b5871;
  font-size: 12px;
  line-height: 1.5;
}

.ez-interface-gallery {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  width: min(100%, 1000px);
  margin: 14px auto 0;
}

.ez-interface-shot {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(69, 56, 170, 0.17);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(72, 65, 190, 0.11);
}

.ez-interface-shot-wide {
  grid-column: 1 / -1;
}

.ez-interface-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 1.8;
  object-fit: cover;
  object-position: top center;
}

.ez-interface-shot figcaption {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  color: #4e4b65;
  font: 9px DM Mono, monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ez-interface-shot figcaption span {
  color: #6745e9;
}

@media (max-width: 850px) {
  .ez-project-preview {
    width: min(47vw, 520px);
  }

  .harper-case-page .ez-digital {
    min-height: 1540px !important;
  }

  .ez-contribution-summary {
    grid-template-columns: 1fr;
  }

  .ez-contribution-summary article {
    min-height: 145px;
  }
}

@media (max-width: 650px) {
  .ez-project-preview {
    align-self: center;
    width: min(86vw, 430px);
    margin-top: 10px;
    border-radius: 22px;
  }

  .ez-preview-badge {
    top: 10px;
    left: 10px;
  }

  .ez-project-preview small {
    right: 9px;
    bottom: 9px;
    font-size: 6px;
  }

  .harper-case-page .ez-digital {
    min-height: 1860px !important;
  }

  .ez-contribution-summary,
  .ez-interface-gallery {
    grid-template-columns: 1fr;
  }

  .ez-contribution-summary article {
    min-height: 150px;
    padding: 19px;
  }

  .ez-interface-shot-wide {
    grid-column: auto;
  }

  .ez-interface-shot img {
    aspect-ratio: 1.55;
  }
}

/* Final EZ Customers palette: ink, violet, warm orange, amber, and off-white. */
body .harper-case-page .ez-case-entry::before {
  background:
    radial-gradient(55% 70% at 12% 88%, rgba(255, 104, 44, 0.34), transparent 72%),
    radial-gradient(66% 82% at 88% 12%, rgba(112, 72, 216, 0.72), transparent 72%),
    linear-gradient(135deg, #15141b 0%, #20182c 48%, #443078 100%) !important;
  box-shadow: 0 28px 100px rgba(15, 17, 24, 0.3) !important;
}

.ez-entry-copy h2 span {
  color: #bca9ff;
}

.ez-tagline em {
  color: #ff986e;
}

.ez-facts span {
  border-color: rgba(188, 169, 255, 0.34);
  background: rgba(15, 17, 24, 0.34);
}

.ez-link:hover {
  color: #ff986e;
}

.ez-project-preview {
  aspect-ratio: 1.54;
  border-color: rgba(188, 169, 255, 0.32);
  background: #0f1118;
  box-shadow: 0 32px 80px rgba(8, 9, 14, 0.46);
}

.ez-preview-badge {
  border-color: rgba(188, 169, 255, 0.24);
  background: rgba(15, 17, 24, 0.9);
  color: #f7f4ec;
  box-shadow: 0 8px 22px rgba(8, 9, 14, 0.24);
}

.ez-project-preview small {
  background: #ff682c;
  color: #fffaf5;
}

body .harper-case-page .ez-digital::before {
  background:
    radial-gradient(58% 68% at 92% 8%, rgba(112, 72, 216, 0.17), transparent 73%),
    radial-gradient(54% 64% at 5% 92%, rgba(255, 104, 44, 0.13), transparent 74%),
    rgba(247, 244, 236, 0.82) !important;
}

.ez-digital-heading h2 {
  color: #18151f;
}

.ez-digital-heading h2 span {
  color: #7048d8;
}

.ez-digital-heading > p:last-child {
  color: #5d5664;
}

.ez-contribution-summary article {
  border-color: rgba(24, 21, 31, 0.14);
  background: rgba(255, 250, 245, 0.72);
}

.ez-contribution-summary article:first-child {
  background: linear-gradient(145deg, #202b43, #0f1118);
  box-shadow: inset 4px 0 #ff682c, 0 18px 42px rgba(15, 17, 24, 0.16);
}

.ez-contribution-summary article:nth-child(2) .ez-label {
  color: #7048d8;
}

.ez-contribution-summary article:nth-child(3) .ez-label {
  color: #d05a2c;
}

.ez-contribution-summary article > span {
  color: #615a68;
}

.ez-interface-shot {
  border-color: rgba(24, 21, 31, 0.18);
  background: #0f1118;
  box-shadow: 0 16px 42px rgba(15, 17, 24, 0.16);
}

.ez-interface-shot figcaption {
  color: #d7d1dc;
  background: #182238;
}

.ez-interface-shot figcaption span {
  color: #ff7c47;
}

.ez-boundary {
  border-color: rgba(24, 21, 31, 0.14);
  background: rgba(255, 250, 245, 0.72);
}

.ez-boundary span,
.ez-boundary a {
  color: #7048d8;
}

.ez-boundary a:hover {
  color: #d95225;
}

/* EZ cover composition: keep the title and product preview in separate lanes. */
.harper-case-page .ez-case-entry {
  grid-template-columns: minmax(330px, 430px) minmax(460px, 620px);
  gap: clamp(58px, 6vw, 92px);
}

.ez-entry-copy {
  width: 100%;
  max-width: 430px;
}

.ez-title-lockup {
  display: grid;
  grid-template-columns: clamp(70px, 7vw, 96px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(15px, 2vw, 24px);
  margin-top: 18px;
}

.ez-title-lockup > img {
  display: block;
  width: 100%;
  filter: drop-shadow(0 13px 24px rgba(8, 9, 14, 0.25));
}

.ez-entry-copy > h2 {
  margin: 18px 0 0;
  font-size: clamp(62px, 7.2vw, 104px);
  line-height: 0.74;
  letter-spacing: -0.105em;
}

.ez-project-preview {
  width: min(100%, 620px);
}

.ez-logo-presentation {
  position: relative;
  justify-self: center;
  display: grid;
  align-content: center;
  justify-items: center;
  width: min(100%, 580px);
  aspect-ratio: 1.24;
  overflow: hidden;
  padding: clamp(30px, 4vw, 54px);
  border: 1px solid rgba(188, 169, 255, 0.3);
  border-radius: 30px;
  background:
    radial-gradient(circle at 82% 16%, rgba(255, 104, 44, 0.2), transparent 33%),
    radial-gradient(circle at 16% 86%, rgba(112, 72, 216, 0.34), transparent 38%),
    #0f1118;
  box-shadow: 0 32px 80px rgba(8, 9, 14, 0.42);
}

.ez-logo-presentation-mark {
  display: grid;
  place-items: center;
  width: min(78%, 400px);
}

.ez-logo-presentation-mark img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.28));
}

.ez-logo-authorship {
  display: grid;
  gap: 4px;
  margin-top: 16px;
  text-align: center;
}

.ez-logo-authorship span {
  color: #aaa2b4;
  font: 8px DM Mono, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ez-logo-authorship strong {
  color: #ff986e;
  font-size: 13px;
  letter-spacing: -0.02em;
}

.ez-interface-shot-hero {
  background: #f7f4ec;
}

.ez-interface-shot-hero img {
  aspect-ratio: 2400 / 1748;
  object-fit: contain;
  object-position: center;
}

.ez-logo-credit {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding: 9px 14px 9px 9px;
  border: 1px solid rgba(188, 169, 255, 0.22);
  border-radius: 16px;
  background: #182238;
  color: #d7d1dc;
  box-shadow: inset 3px 0 #ff682c, 0 12px 30px rgba(15, 17, 24, 0.12);
  text-align: left;
}

.ez-logo-credit img {
  width: 42px;
  height: 42px;
  padding: 7px;
  border-radius: 11px;
  background: rgba(112, 72, 216, 0.28);
}

.ez-logo-credit span {
  display: grid;
  gap: 3px;
  font: 8px DM Mono, monospace;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.ez-logo-credit strong {
  color: #ff986e;
  font: 10px Manrope, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

@media (max-width: 850px) {
  .harper-case-page .ez-case-entry {
    grid-template-columns: minmax(290px, 0.86fr) minmax(390px, 1.14fr);
    gap: 38px;
  }

  .ez-entry-copy > h2 {
    font-size: clamp(58px, 7vw, 82px);
  }
}

@media (max-width: 650px) {
  .harper-case-page .ez-case-entry {
    display: flex;
    gap: 0;
  }

  .ez-entry-copy > h2 {
    font-size: clamp(58px, 17vw, 78px);
  }

  .ez-project-preview {
    width: min(86vw, 430px);
    margin-top: 34px;
  }

  .ez-logo-credit {
    margin-top: 20px;
  }

  .ez-logo-presentation {
    width: min(86vw, 430px);
    margin-top: 34px;
    padding: 28px;
    border-radius: 22px;
  }

  .ez-logo-presentation-mark {
    width: min(82%, 310px);
  }
}

/* Updated EZ Customers live-site presentation. */
.harper-case-page .ez-case-entry::before {
  background:
    radial-gradient(58% 76% at 92% 8%, rgba(76, 104, 255, 0.48), transparent 72%),
    radial-gradient(55% 72% at 8% 92%, rgba(255, 125, 76, 0.2), transparent 73%),
    linear-gradient(136deg, #191522 0%, #21182e 48%, #352559 100%) !important;
}

.ez-entry-copy h2 span,
.ez-tagline em,
.ez-digital-heading h2 span {
  color: #7750ff;
}

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

.ez-live-gallery .ez-interface-shot {
  border-color: rgba(119, 80, 255, 0.28);
  border-radius: 24px;
  background: #17131f;
  box-shadow: 0 24px 64px rgba(19, 15, 31, 0.2);
}

.ez-live-gallery .ez-interface-shot img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top center;
}

.ez-live-gallery .ez-live-shot-main img {
  aspect-ratio: 16 / 8.7;
}

.ez-live-gallery .ez-live-shot-pricing img {
  aspect-ratio: 16 / 7.8;
  object-position: center 22%;
}

.ez-live-gallery .ez-interface-shot figcaption {
  padding: 14px 16px;
  background: #1d1728;
  color: #ddd5e7;
}

.ez-live-gallery .ez-interface-shot figcaption span {
  color: #8c70ff;
}

.harper-case-page .ez-digital {
  min-height: 1780px !important;
}

@media (max-width: 850px) {
  .harper-case-page .ez-digital {
    min-height: 1840px !important;
  }
}

@media (max-width: 650px) {
  .ez-live-gallery {
    grid-template-columns: 1fr;
  }

  .ez-live-gallery .ez-interface-shot-wide {
    grid-column: auto;
  }

  .ez-live-gallery .ez-interface-shot img,
  .ez-live-gallery .ez-live-shot-main img,
  .ez-live-gallery .ez-live-shot-pricing img {
    aspect-ratio: 1.28;
  }

  .harper-case-page .ez-digital {
    min-height: 2250px !important;
  }
}

/* Harper AI: concise premium portfolio card. */
.harper-case-page .workspace {
  grid-template-columns: 48px minmax(0, 1fr) !important;
}

.harper-case-page .center-column {
  grid-column: 2;
  width: 100%;
}

.harper-card-section {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: max(760px, calc(100vh - 144px)) !important;
  height: auto !important;
  padding: clamp(70px, 8vw, 110px) clamp(34px, 7vw, 104px) clamp(96px, 9vw, 130px) !important;
}

.harper-card-section::before {
  background:
    radial-gradient(58% 74% at 8% 90%, rgba(111, 143, 175, 0.13), transparent 74%),
    radial-gradient(52% 66% at 92% 10%, rgba(123, 174, 127, 0.14), transparent 73%),
    rgba(247, 245, 240, 0.72) !important;
}

.harper-portfolio-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(390px, 1.1fr);
  gap: clamp(34px, 6vw, 88px);
  width: min(100%, 1080px);
  padding: clamp(22px, 3vw, 38px);
  border: 1px solid rgba(21, 24, 24, 0.14);
  border-radius: 36px;
  background: rgba(247, 245, 240, 0.7);
  box-shadow: 0 30px 90px rgba(18, 24, 21, 0.1), inset 0 1px rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px);
}

.harper-card-visual,
.harper-card-copy {
  min-width: 0;
}

.harper-card-logo-stage {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 26px;
  background: #050707;
  box-shadow: 0 22px 55px rgba(5, 7, 7, 0.22);
}

.harper-card-logo-stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.04) saturate(0.72);
}

.harper-card-wordmark {
  margin-top: 18px;
  color: #050707;
  font: 600 clamp(26px, 3vw, 40px)/1 Manrope, Arial, sans-serif;
  letter-spacing: -0.065em;
}

.harper-card-wordmark span {
  color: #728878;
  font-family: Georgia, serif;
  font-weight: 400;
}

.harper-card-status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 15px;
}

.harper-card-status span {
  padding: 7px 9px;
  border: 1px solid rgba(21, 24, 24, 0.16);
  border-radius: 999px;
  color: #5b635e;
  font: 8px DM Mono, monospace;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.harper-card-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 6px;
}

.harper-card-copy h1 {
  max-width: 620px;
  margin: 16px 0 18px;
  color: #050707;
  font: 600 clamp(42px, 5.2vw, 74px)/0.92 Manrope, Arial, sans-serif;
  letter-spacing: -0.08em;
}

.harper-card-copy h1 span {
  display: block;
  color: #69736e;
  font-family: Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.065em;
}

.harper-card-summary {
  max-width: 610px;
  margin: 0;
  color: #4e5752;
  font: clamp(14px, 1.35vw, 18px)/1.55 Manrope, Arial, sans-serif;
}

.harper-card-specs {
  display: grid;
  margin-top: clamp(25px, 3vw, 38px);
  border-top: 1px solid rgba(21, 24, 24, 0.14);
}

.harper-spec-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  border-bottom: 1px solid rgba(21, 24, 24, 0.12);
}

.harper-spec-row > i {
  color: #718579;
  font: 11px DM Mono, monospace;
  font-style: normal;
}

.harper-spec-row > span:not(.harper-swatches) {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  color: #646c68;
  font: 10px DM Mono, monospace;
}

.harper-spec-row b {
  color: #171b19;
  font-weight: 500;
}

.harper-swatches {
  display: flex;
  gap: 3px;
}

.harper-swatches em {
  width: 11px;
  height: 11px;
  border: 1px solid rgba(5, 7, 7, 0.16);
  border-radius: 50%;
  background: var(--swatch);
}

.harper-card-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  align-self: flex-start;
  gap: 28px;
  min-width: 150px;
  margin-top: 26px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(21, 24, 24, 0.28);
  color: #313936;
  font: 10px DM Mono, monospace;
  transition: gap 0.25s var(--ease), color 0.25s var(--ease);
}

.harper-card-link:hover {
  gap: 36px;
  color: #688c70;
}

.harper-card-link b {
  font-size: 16px;
  font-weight: 400;
}

@media (max-width: 850px) {
  .harper-portfolio-card {
    grid-template-columns: minmax(250px, 0.8fr) minmax(330px, 1.2fr);
    gap: 28px;
  }

  .harper-spec-row > span:not(.harper-swatches) {
    grid-template-columns: 80px minmax(0, 1fr);
  }
}

@media (max-width: 650px) {
  .harper-card-section {
    padding: 58px 20px 92px !important;
  }

  .harper-portfolio-card {
    grid-template-columns: 1fr;
    padding: 18px;
    border-radius: 28px;
  }

  .harper-card-logo-stage {
    width: min(100%, 340px);
    margin-inline: auto;
  }

  .harper-card-copy h1 {
    font-size: clamp(43px, 13vw, 66px);
  }

  .harper-spec-row {
    grid-template-columns: 25px minmax(0, 1fr);
    padding-block: 8px;
  }

  .harper-palette-row .harper-swatches {
    grid-column: 2;
    padding-bottom: 5px;
  }
}

/* Harper AI: a project-specific world matching the confidence of the EZ Customers case. */
.harper-showcase {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: max(1050px, calc(100vh - 144px)) !important;
  height: auto !important;
  padding: clamp(84px, 9vw, 124px) clamp(34px, 6.8vw, 104px) clamp(110px, 10vw, 148px) !important;
  color: #f7f5f0;
}

.harper-showcase::before {
  background:
    radial-gradient(58% 72% at 92% 8%, rgba(111, 143, 175, 0.3), transparent 72%),
    radial-gradient(56% 72% at 7% 90%, rgba(123, 174, 127, 0.2), transparent 73%),
    linear-gradient(137deg, #050707 0%, #111716 48%, #243129 100%) !important;
  border-color: rgba(247, 245, 240, 0.13) !important;
  box-shadow: 0 32px 110px rgba(5, 7, 7, 0.3) !important;
  opacity: 1 !important;
}

.harper-showcase .section-number {
  color: rgba(247, 245, 240, 0.5);
}

.harper-showcase-top {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(300px, 0.86fr) minmax(400px, 1.14fr);
  align-items: center;
  gap: clamp(44px, 7vw, 112px);
  width: min(100%, 1080px);
  margin-inline: auto;
}

.harper-showcase-copy {
  max-width: 470px;
}

.harper-showcase-copy .eyebrow {
  color: rgba(247, 245, 240, 0.64);
}

.harper-showcase-copy h1 {
  margin: 18px 0 16px;
  color: #f7f5f0;
  font: 700 clamp(78px, 10vw, 142px)/0.7 Manrope, Arial, sans-serif;
  letter-spacing: -0.115em;
}

.harper-showcase-copy h1 span {
  color: #a8b8ad;
  font-family: Georgia, serif;
  font-weight: 400;
}

.harper-showcase-tagline {
  margin: 24px 0 0;
  color: #f7f5f0;
  font: 700 clamp(23px, 2.5vw, 37px)/1.03 Manrope, Arial, sans-serif;
  letter-spacing: -0.065em;
}

.harper-showcase-tagline em {
  color: #9bb3a1;
  font-family: Georgia, serif;
  font-weight: 400;
}

.harper-showcase-summary {
  max-width: 430px;
  margin: 24px 0 0;
  color: rgba(247, 245, 240, 0.72);
  font: 14px/1.58 Manrope, Arial, sans-serif;
}

.harper-showcase-status {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 22px;
}

.harper-showcase-status span {
  padding: 8px 10px;
  border: 1px solid rgba(247, 245, 240, 0.2);
  border-radius: 999px;
  background: rgba(247, 245, 240, 0.06);
  color: rgba(247, 245, 240, 0.8);
  font: 8px DM Mono, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.harper-showcase-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-width: 178px;
  margin-top: 25px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(247, 245, 240, 0.42);
  color: #f7f5f0;
  font: 10px DM Mono, monospace;
  transition: gap 0.25s var(--ease), color 0.25s var(--ease);
}

.harper-showcase-link:hover {
  gap: 32px;
  color: #a7c0ad;
}

.harper-showcase-link b {
  font-size: 16px;
  font-weight: 400;
}

.harper-metal-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 560px);
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(247, 245, 240, 0.16);
  border-radius: 34px;
  background:
    radial-gradient(circle at 50% 44%, rgba(115, 139, 122, 0.34), transparent 42%),
    #050707;
  box-shadow: 0 35px 95px rgba(0, 0, 0, 0.42), inset 0 1px rgba(255, 255, 255, 0.08);
}

.harper-metal-halo {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: rgba(168, 184, 173, 0.16);
  filter: blur(44px);
}

.harper-metal-stage img {
  position: relative;
  z-index: 1;
  display: block;
  width: 106%;
  height: 106%;
  object-fit: cover;
  filter: contrast(1.05) saturate(0.72);
}

.harper-metal-stage > span,
.harper-metal-stage > small {
  position: absolute;
  z-index: 2;
  bottom: 17px;
  font: 8px DM Mono, monospace;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.harper-metal-stage > span {
  left: 18px;
  color: rgba(247, 245, 240, 0.62);
}

.harper-metal-stage > small {
  right: 18px;
  color: #9bb3a1;
}

.harper-system-ribbon {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: min(100%, 1080px);
  margin: 22px auto 0;
}

.harper-system-ribbon article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 94px;
  padding: 17px;
  border: 1px solid rgba(247, 245, 240, 0.14);
  border-radius: 20px;
  background: rgba(247, 245, 240, 0.075);
  backdrop-filter: blur(10px);
}

.harper-system-ribbon i {
  color: #9bb3a1;
  font: 12px DM Mono, monospace;
  font-style: normal;
}

.harper-system-ribbon article > div {
  display: grid;
  gap: 5px;
}

.harper-system-ribbon span {
  color: rgba(247, 245, 240, 0.5);
  font: 8px DM Mono, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.harper-system-ribbon strong {
  color: #f7f5f0;
  font-size: 13px;
  font-weight: 500;
}

.harper-ribbon-swatches {
  display: flex;
  gap: 3px;
  margin-top: 2px;
}

.harper-ribbon-swatches em {
  width: 9px;
  height: 9px;
  border: 1px solid rgba(247, 245, 240, 0.2);
  border-radius: 50%;
  background: var(--swatch);
}

.harper-logo-variations {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: min(100%, 1080px);
  margin: 10px auto 0;
}

.harper-variation {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(247, 245, 240, 0.14);
  border-radius: 20px;
  background: #050707;
}

.harper-variation img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.harper-variation-light img {
  filter: contrast(1.06);
}

.harper-variation-dark {
  background: #f7f5f0;
}

.harper-variation-dark img {
  mix-blend-mode: multiply;
}

.harper-variation figcaption {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  border-top: 1px solid rgba(247, 245, 240, 0.12);
  background: #111716;
  color: rgba(247, 245, 240, 0.66);
  font: 8px DM Mono, monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.harper-variation figcaption span {
  color: #9bb3a1;
}

.harper-device-preview {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(230px, 0.4fr);
  align-items: center;
  gap: 24px;
  width: min(100%, 1080px);
  margin: 10px auto 0;
  overflow: hidden;
  border: 1px solid rgba(247, 245, 240, 0.14);
  border-radius: 24px;
  background: #090d0c;
}

.harper-device-preview img {
  display: block;
  width: 100%;
  min-height: 280px;
  object-fit: cover;
  object-position: center;
}

.harper-device-preview > div {
  padding: 26px 26px 26px 0;
}

.harper-device-preview span {
  color: #9bb3a1;
  font: 8px DM Mono, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.harper-device-preview strong {
  display: block;
  margin-top: 10px;
  color: #f7f5f0;
  font: 22px/1.16 Georgia, serif;
  font-weight: 400;
}

.harper-showcase .scroll-prompt {
  color: rgba(247, 245, 240, 0.72);
}

.harper-showcase .scroll-prompt b {
  border-color: rgba(247, 245, 240, 0.38);
}

@media (max-width: 850px) {
  .harper-showcase {
    min-height: max(1050px, calc(100vh - 144px)) !important;
  }

  .harper-showcase-top {
    grid-template-columns: minmax(280px, 0.9fr) minmax(340px, 1.1fr);
    gap: 32px;
  }

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

@media (max-width: 650px) {
  .harper-showcase {
    min-height: max(1050px, calc(100vh - 144px)) !important;
    padding: 62px 20px 100px !important;
  }

  .harper-showcase-top,
  .harper-system-ribbon,
  .harper-device-preview {
    grid-template-columns: 1fr;
  }

  .harper-showcase-copy h1 {
    font-size: clamp(78px, 25vw, 116px);
  }

  .harper-metal-stage {
    width: min(100%, 430px);
    margin-inline: auto;
  }

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

  .harper-device-preview > div {
    padding: 8px 20px 24px;
  }
}

/* Short desktop and laptop screens: scale the composition as one system. */
@media (max-height: 760px) and (min-width: 651px) {
  .portfolio-home .canvas-section {
    min-height: max(600px, calc(100vh - 144px));
    padding-top: 52px;
    padding-bottom: 68px;
  }

  .portfolio-home .section-number {
    top: 34px;
  }

  .portfolio-home .statement-wrap h2,
  .portfolio-home .work-heading h2,
  .portfolio-home .contact-copy h2 {
    font-size: clamp(40px, 5vw, 58px);
  }

  .portfolio-home .about-columns {
    gap: 5vw;
    margin-top: 30px;
    font-size: 12px;
    line-height: 1.58;
  }

  .portfolio-home .work-list {
    margin-top: 28px;
  }

  .harper-case-page .ez-case-entry {
    min-height: max(620px, calc(100vh - 144px)) !important;
    padding-top: 56px !important;
    padding-bottom: 68px !important;
  }

  .harper-case-page .ez-entry-copy h2 {
    font-size: clamp(72px, 8.2vw, 104px);
  }

  .harper-case-page .ez-tagline {
    margin-top: 15px;
    font-size: clamp(22px, 2.2vw, 30px);
  }

  .harper-case-page .ez-entry-text {
    margin-top: 18px;
    font-size: 13px;
  }

  .harper-case-page .ez-facts {
    margin-top: 15px;
  }

  .harper-case-page .ez-logo-presentation {
    width: min(39vw, 430px);
  }

  .harper-showcase {
    padding-top: 64px !important;
  }

  .harper-showcase-copy h1 {
    font-size: clamp(74px, 8vw, 108px);
  }

  .harper-showcase-tagline {
    margin-top: 16px;
    font-size: clamp(22px, 2.2vw, 30px);
  }

  .harper-showcase-summary {
    margin-top: 17px;
    font-size: 13px;
  }

  .harper-showcase-status {
    margin-top: 16px;
  }

  .harper-metal-stage {
    width: min(42vw, 470px);
  }
}

/* Homepage hero: keep the colour atmosphere soft and inside the rounded canvas. */
.portfolio-home .canvas-glow {
  inset: 0;
  opacity: 0.42;
  transform: none;
  filter: blur(44px) saturate(0.96);
  background:
    radial-gradient(42% 46% at 76% 24%, color-mix(in srgb, var(--cloud-a) 58%, transparent), transparent 86%),
    radial-gradient(45% 50% at 15% 83%, color-mix(in srgb, var(--cloud-b) 52%, transparent), transparent 88%),
    radial-gradient(40% 44% at 49% 52%, color-mix(in srgb, var(--cloud-c) 46%, transparent), transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 86% 92% at 50% 48%, #000 0 58%, rgba(0, 0, 0, 0.72) 74%, transparent 100%);
  mask-image: radial-gradient(ellipse 86% 92% at 50% 48%, #000 0 58%, rgba(0, 0, 0, 0.72) 74%, transparent 100%);
}

.portfolio-home .hero-screen .hero-aura {
  inset: -2% -4% 1% -5%;
  opacity: 0.42;
  filter: blur(38px);
  -webkit-mask-image: radial-gradient(ellipse 72% 72% at 55% 47%, #000 0 48%, rgba(0, 0, 0, 0.58) 70%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 72% at 55% 47%, #000 0 48%, rgba(0, 0, 0, 0.58) 70%, transparent 100%);
}

.portfolio-home .hero-screen .hero-art::before {
  inset: -1% -4%;
  background: radial-gradient(ellipse 68% 72% at 58% 45%, transparent 0 54%, color-mix(in srgb, var(--paper) 48%, transparent) 76%, var(--paper) 100%);
  -webkit-mask-image: radial-gradient(ellipse 76% 74% at 58% 45%, #000 0 67%, rgba(0, 0, 0, 0.74) 82%, transparent 100%);
  mask-image: radial-gradient(ellipse 76% 74% at 58% 45%, #000 0 67%, rgba(0, 0, 0, 0.74) 82%, transparent 100%);
}

.portfolio-home .hero-screen .dissolve-field {
  inset: 2% 1%;
  opacity: 0.22;
  -webkit-mask-image: radial-gradient(ellipse 70% 68% at 58% 45%, transparent 0 68%, rgba(0, 0, 0, 0.58) 82%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 68% at 58% 45%, transparent 0 68%, rgba(0, 0, 0, 0.58) 82%, transparent 100%);
}

/* Modern About page: one editorial screen with the supplied artwork as a watermark. */
.about-modern-page {
  --paper: #eee9e0;
  --type: #211d1b;
  --muted: #746b63;
}

.about-modern-page .canvas-glow {
  background:
    radial-gradient(48% 56% at 84% 13%, rgba(197, 158, 142, 0.34), transparent 78%),
    radial-gradient(54% 62% at 8% 86%, rgba(151, 176, 169, 0.28), transparent 77%),
    radial-gradient(40% 48% at 50% 52%, rgba(199, 190, 212, 0.3), transparent 78%);
}

.about-profile-screen {
  display: flex;
  align-items: center;
  min-height: 100%;
  padding: clamp(56px, 6vw, 86px) clamp(48px, 7vw, 108px) clamp(72px, 7vw, 104px);
}

.about-profile-copy {
  position: relative;
  z-index: 2;
  width: min(76%, 760px);
  min-width: 0;
}

.about-profile-copy h1 {
  max-width: 690px;
  margin: 15px 0 22px;
  color: #211d1b;
  font: 600 clamp(48px, 4.8vw, 70px)/0.88 Manrope, Arial, sans-serif;
  letter-spacing: -0.085em;
}

.about-profile-copy h1 span {
  display: block;
  color: #8c6f65;
  font-family: Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.07em;
}

.about-profile-story {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px clamp(22px, 3vw, 42px);
  max-width: 720px;
  color: #514942;
  font: clamp(12px, 0.94vw, 13.5px)/1.54 Manrope, Arial, sans-serif;
}

.about-profile-story p {
  position: relative;
  margin: 0;
  padding: 27px 14px 13px;
  border-left: 1px solid rgba(74, 61, 53, 0.24);
  border-radius: 0 14px 14px 0;
  background: linear-gradient(90deg, rgba(248, 244, 237, 0.38), rgba(248, 244, 237, 0.08));
  backdrop-filter: blur(3px);
}

.about-profile-story p::before {
  content: "02 / perspective";
  position: absolute;
  top: 9px;
  left: 14px;
  color: rgba(81, 73, 66, 0.58);
  font: 7px DM Mono, monospace;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.about-profile-story p:first-child {
  grid-column: 1 / -1;
  max-width: 650px;
  color: #342e2a;
  font-family: Georgia, serif;
  font-size: clamp(15px, 1.18vw, 17px);
  line-height: 1.46;
}

.about-profile-story p:first-child::before {
  content: "01 / foundation";
}

.about-profile-story p:nth-child(3)::before {
  content: "03 / direction";
}

.about-profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 20px;
}

.about-profile-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-width: 176px;
  padding: 11px 13px;
  border: 1px solid rgba(45, 38, 34, 0.25);
  border-radius: 999px;
  color: #3f3732;
  background: rgba(248, 244, 237, 0.48);
  font: 9px DM Mono, monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}

.about-profile-link:hover {
  transform: translateY(-3px);
  background: rgba(248, 244, 237, 0.88);
}

.about-profile-link-primary {
  color: #f5eee7;
  border-color: #332c28;
  background: #332c28;
}

.about-profile-link-primary:hover {
  color: #fff;
  background: #8c6f65;
}

.about-profile-link b {
  font-size: 15px;
  font-weight: 400;
}

.about-watermark {
  position: absolute;
  top: 7%;
  right: 4%;
  bottom: 8%;
  z-index: 1;
  width: min(54%, 690px);
  margin: 0;
  overflow: hidden;
  border-radius: 42px;
  opacity: 0.32;
  filter: saturate(0.78) contrast(0.97);
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.34) 20%, #000 52%, rgba(0, 0, 0, 0.72) 82%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.34) 20%, #000 52%, rgba(0, 0, 0, 0.72) 82%, transparent 100%);
}

.about-watermark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.about-thumb-profile {
  background: linear-gradient(135deg, #c87859, #b8c582 48%, #27312c);
}

@media (max-width: 1050px) and (min-width: 651px) {
  .about-profile-copy {
    width: 76%;
  }

  .about-profile-copy h1 {
    max-width: 610px;
    font-size: clamp(48px, 6vw, 66px);
  }

  .about-watermark {
    right: 2%;
    width: 58%;
    opacity: 0.27;
  }
}

/* About page peel interaction: written profile, artwork reveal, then home. */
.about-profile-screen {
  display: grid;
  place-items: center;
  padding: clamp(22px, 3.2vw, 44px) clamp(24px, 4.8vw, 76px) !important;
}

.about-peel-stack {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 640px;
  perspective: 1800px;
  isolation: isolate;
}

.about-peel-sheet {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(61, 49, 43, 0.14);
  border-radius: 42px;
  box-shadow: 0 24px 70px rgba(70, 54, 46, 0.15);
  transform: translate3d(0, 0, 0) rotateY(0) rotateZ(0);
  transform-origin: left center;
  backface-visibility: hidden;
  transition: transform 0.82s cubic-bezier(0.22, 0.74, 0.2, 1), opacity 0.62s ease, filter 0.62s ease;
}

.about-copy-sheet {
  z-index: 3;
  display: flex;
  align-items: center;
  padding: clamp(36px, 4.4vw, 62px) clamp(30px, 4.8vw, 68px);
  background:
    radial-gradient(58% 72% at 7% 90%, rgba(151, 176, 169, 0.24), transparent 74%),
    radial-gradient(58% 72% at 94% 8%, rgba(197, 158, 142, 0.2), transparent 73%),
    rgba(244, 239, 231, 0.96);
}

.about-art-sheet {
  z-index: 2;
  background: #111514;
}

.about-art-sheet::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 13, 12, 0.04), transparent 55%, rgba(10, 13, 12, 0.55));
}

.about-art-reveal {
  position: absolute;
  inset: 0;
  margin: 0;
}

.about-art-reveal img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.92) contrast(1.03);
  transform: scale(1.015);
  transition: transform 1.2s var(--ease), filter 0.7s var(--ease);
}

.about-peel-stack[data-peel-state="art"] .about-art-reveal img {
  transform: scale(1);
  filter: saturate(1) contrast(1.04);
}

.about-art-reveal figcaption {
  position: absolute;
  right: clamp(22px, 3vw, 38px);
  bottom: clamp(22px, 3vw, 38px);
  z-index: 2;
  display: grid;
  gap: 6px;
  max-width: 280px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 18px;
  background: rgba(8, 12, 10, 0.48);
  color: #f7f5f0;
  backdrop-filter: blur(10px);
}

.about-art-reveal figcaption span {
  color: rgba(247, 245, 240, 0.6);
  font: 8px DM Mono, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.about-art-reveal figcaption strong {
  font: 400 clamp(18px, 2vw, 28px)/1.05 Georgia, serif;
}

.about-peel-handle {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 8;
  width: clamp(142px, 14vw, 178px);
  height: clamp(82px, 8vw, 104px);
  padding: 0;
  overflow: hidden;
  border-radius: 0 41px 0 24px;
  background: transparent;
  color: #514942;
  cursor: grab;
  touch-action: none;
  filter: drop-shadow(-8px 10px 14px rgba(58, 45, 38, 0.12));
  transition: transform 0.3s var(--ease), filter 0.3s var(--ease);
}

.about-peel-handle::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  background: linear-gradient(225deg, #d9cec2 0 44%, #9a897e 45% 47%, #fffaf2 49% 100%);
}

.about-peel-handle span,
.about-peel-handle b {
  position: absolute;
  z-index: 1;
  right: 10px;
}

.about-peel-handle span {
  top: 14px;
  width: 112px;
  font: 8px/1.35 DM Mono, monospace;
  letter-spacing: 0.055em;
  text-align: right;
  text-transform: uppercase;
}

.about-peel-handle b {
  top: 42px;
  font: 20px/1 Georgia, serif;
  font-weight: 400;
}

.about-peel-handle:hover,
.about-peel-handle:focus-visible {
  transform: scale(1.055);
  filter: drop-shadow(-12px 14px 18px rgba(58, 45, 38, 0.2));
  outline: none;
}

.about-peel-handle:active {
  cursor: grabbing;
}

.about-peel-handle-art {
  color: #f7f5f0;
  filter: drop-shadow(-8px 10px 18px rgba(0, 0, 0, 0.32));
}

.about-peel-handle-art::before {
  background: linear-gradient(225deg, #1a211e 0 44%, #87a08e 45% 47%, #405047 49% 100%);
}

.about-peel-sheet.is-dragging {
  transform: translate3d(var(--peel-x, 0), var(--peel-y, 0), 0) rotateY(var(--peel-rotate-y, 0deg)) rotateZ(var(--peel-rotate-z, 0deg));
  transition: none;
}

.about-peel-sheet.is-peeled {
  transform: translate3d(-116%, 3%, 0) rotateY(-24deg) rotateZ(-3deg);
  opacity: 0;
  pointer-events: none;
  filter: brightness(0.92);
}

.about-peel-stack[data-peel-state="art"] .about-copy-sheet {
  pointer-events: none;
}

.about-profile-copy {
  width: min(86%, 760px);
}

@media (max-height: 760px) and (min-width: 651px) {
  .about-peel-stack {
    min-height: 520px;
  }

  .about-copy-sheet {
    padding-block: 30px;
  }
}

@media (max-width: 650px) {
  .about-profile-screen {
    min-height: 1120px;
    padding: 18px !important;
  }

  .about-peel-stack {
    height: auto;
    min-height: 1084px;
  }

  .about-peel-sheet {
    border-radius: 30px;
  }

  .about-copy-sheet {
    align-items: flex-start;
    padding: 70px 12px 70px;
  }

  .about-profile-copy {
    width: 100%;
  }

  .about-peel-handle {
    width: 138px;
    height: 84px;
    border-radius: 0 29px 0 22px;
  }

  .about-art-reveal img {
    object-position: 48% center;
  }

  .about-art-reveal figcaption {
    right: 18px;
    bottom: 24px;
    left: 18px;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-peel-sheet,
  .about-art-reveal img {
    transition-duration: 0.01ms;
  }
}

@media (max-height: 760px) and (min-width: 651px) {
  .about-profile-screen {
    min-height: 600px;
    padding-top: 42px;
    padding-bottom: 58px;
  }

  .about-profile-copy {
    width: min(76%, 760px);
  }

  .about-profile-copy h1 {
    max-width: 740px;
    margin: 10px 0 12px;
    font-size: clamp(44px, 4.6vw, 56px);
  }

  .about-profile-story {
    gap: 6px 28px;
    font-size: 10.8px;
    line-height: 1.42;
  }

  .about-profile-story p:first-child {
    font-size: 14px;
    line-height: 1.36;
  }

  .about-profile-actions {
    margin-top: 10px;
  }

  .about-profile-story p {
    padding: 23px 11px 10px;
  }

  .about-profile-story p::before {
    top: 7px;
    left: 11px;
  }

  .about-profile-link {
    padding: 8px 12px;
  }
}

@media (max-width: 650px) {
  .portfolio-home .canvas-glow {
    opacity: 0.34;
    filter: blur(32px) saturate(0.94);
  }

  .portfolio-home .hero-copy {
    position: relative;
    z-index: 3;
  }

  .portfolio-home .hero-art {
    top: auto;
    right: -2%;
    bottom: -1%;
    height: min(47vh, 398px);
    z-index: 1;
  }

  .about-modern-page .workspace {
    grid-template-columns: 0 minmax(0, 1fr);
  }

  .about-modern-page .left-rail,
  .about-modern-page .panel-column {
    display: none;
  }

  .about-modern-page .mode-label {
    display: none;
  }

  .about-modern-page .document-tab:nth-child(2) {
    display: flex;
  }

  .about-profile-screen {
    display: flex;
    align-items: flex-start;
    height: auto;
    min-height: max(980px, calc(100vh - 144px));
    padding: 72px 24px 92px;
  }

  .about-profile-copy {
    width: 100%;
  }

  .about-profile-copy h1 {
    max-width: 350px;
    margin-bottom: 24px;
    font-size: clamp(46px, 13vw, 61px);
  }

  .about-profile-story {
    grid-template-columns: 1fr;
    gap: 15px;
    font-size: 13px;
    line-height: 1.58;
  }

  .about-profile-story p:first-child {
    grid-column: auto;
    font-size: 16px;
  }

  .about-profile-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .about-profile-link {
    width: 100%;
  }

  .about-watermark {
    top: 4%;
    right: -16%;
    bottom: auto;
    width: 92%;
    height: 54%;
    opacity: 0.2;
    border-radius: 32px;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.24) 70%, transparent 100%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.24) 70%, transparent 100%);
  }
}

/* Final cascade for the October refinement. Keep this after all legacy responsive rules. */
.portfolio-home .hero-screen {
  grid-template-columns: minmax(320px, 0.82fr) minmax(390px, 1.18fr);
  gap: clamp(18px, 3.5vw, 58px);
}
.portfolio-home .hero-copy {
  justify-self: end;
  width: min(100%, 510px);
  padding-bottom: 0;
  transform: translateY(-2%);
}
.portfolio-home .hero-copy h1 {
  margin: clamp(22px, 3vh, 34px) 0 0;
  font-size: clamp(94px, 12.4vw, 178px);
}
.portfolio-home .hero-art {
  justify-self: start;
  width: min(47vw, 590px);
  min-width: 360px;
  transform: translateX(-3%);
}
.portfolio-home .hero-art img { transform: scale(1.035); }
.portfolio-home .hero-aura { inset: 5% -10% 0 -12%; }

.contact-page-single .contact-hero-screen { isolation: isolate; }
.contact-page-single .contact-art-watermark {
  position: absolute;
  inset: clamp(30px, 5vw, 72px) clamp(38px, 10vw, 170px) clamp(44px, 7vw, 96px);
  z-index: 0;
  margin: 0;
  overflow: hidden;
  border-radius: clamp(30px, 4vw, 58px);
  opacity: 0.68;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 34%, rgba(0, 0, 0, 0.88) 58%, transparent 92%);
  mask-image: radial-gradient(ellipse at center, #000 34%, rgba(0, 0, 0, 0.88) 58%, transparent 92%);
}
.contact-page-single .contact-art-watermark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
  filter: saturate(0.86) contrast(1.04) brightness(1.03);
  transform: scale(1.025);
}
.contact-page-single .contact-hero-copy {
  z-index: 2;
  justify-content: flex-end;
  width: min(100%, 940px);
  height: 100%;
  padding-bottom: clamp(8px, 2vh, 22px);
  transform: none;
}
.contact-page-single .contact-locations {
  padding: 9px 13px;
  border: 1px solid rgba(54, 47, 42, 0.18);
  border-radius: 999px;
  background: rgba(250, 246, 239, 0.68);
  color: #423b36;
  backdrop-filter: blur(10px);
}
.contact-page-single .contact-actions {
  width: min(900px, 100%);
  margin-top: 14px;
  box-shadow: 0 14px 42px rgba(46, 37, 32, 0.12);
}
.contact-page-single .contact-action:not(.contact-action-primary) {
  background: rgba(250, 247, 241, 0.76);
  backdrop-filter: blur(12px);
}

.about-modern-page .canvas-scroll { scroll-snap-type: none; }
.about-profile-screen {
  display: block;
  width: 100%;
  height: max(1920px, calc(300dvh - 432px));
  min-height: 1920px;
  padding: 0 !important;
  overflow: visible;
}
.about-profile-screen::before,
.about-profile-screen::after { display: none; }
.about-peel-stack {
  position: sticky;
  top: 0;
  width: 100%;
  height: max(640px, calc(100dvh - 144px));
  min-height: 0;
  perspective: 2200px;
  perspective-origin: 28% 50%;
  transform-style: preserve-3d;
}
.about-peel-sheet,
.about-home-underlay {
  position: absolute;
  inset: clamp(22px, 3.2vw, 44px) clamp(24px, 4.8vw, 76px);
  border-radius: clamp(30px, 3.6vw, 48px);
}
.about-peel-sheet {
  transform-origin: left center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: none;
  will-change: transform;
}
.about-copy-sheet {
  transform: rotateY(var(--copy-flip, 0deg));
  box-shadow: 0 25px 72px rgba(62, 48, 41, 0.16), -2px 0 0 rgba(255, 255, 255, 0.72) inset;
}
.about-art-sheet {
  transform: rotateY(var(--art-flip, 0deg));
  box-shadow: 0 28px 80px rgba(13, 18, 16, 0.24), -2px 0 0 rgba(255, 255, 255, 0.16) inset;
}
.about-home-underlay {
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(54, 46, 41, 0.12);
  background: radial-gradient(55% 70% at 82% 14%, rgba(154, 244, 159, 0.3), transparent 78%), radial-gradient(55% 68% at 12% 86%, rgba(242, 217, 234, 0.34), transparent 78%), #f5f0e8;
  color: #292421;
  text-align: center;
}
.about-home-underlay span {
  color: #756b63;
  font: 9px DM Mono, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.about-home-underlay strong {
  max-width: 600px;
  font: 400 clamp(38px, 6vw, 82px)/0.95 Georgia, serif;
  letter-spacing: -0.055em;
}
.about-flip-cue {
  position: absolute;
  right: clamp(20px, 3vw, 38px);
  bottom: clamp(18px, 2.5vw, 32px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border: 1px solid rgba(55, 47, 42, 0.16);
  border-radius: 999px;
  background: rgba(250, 246, 239, 0.68);
  color: #514942;
  font: 8px DM Mono, monospace;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  backdrop-filter: blur(9px);
}
.about-flip-cue b { font: 400 18px Georgia, serif; }
.about-flip-cue-art {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(9, 13, 11, 0.44);
  color: #f7f5f0;
}

@media (max-width: 900px) and (min-width: 651px) {
  .about-modern-page .workspace { grid-template-columns: 38px minmax(0, 1fr); }
  .about-modern-page .panel-column { display: none; }
  .portfolio-home .hero-screen {
    grid-template-columns: minmax(290px, 0.88fr) minmax(320px, 1.12fr);
    gap: 10px;
  }
  .portfolio-home .hero-art {
    width: min(49vw, 520px);
    min-width: 320px;
  }
}

@media (max-width: 650px) {
  .portfolio-home .hero-copy {
    justify-self: auto;
    width: 100%;
    margin: 0;
    transform: none;
  }
  .portfolio-home .hero-copy h1 { font-size: clamp(76px, 21vw, 98px); }
  .portfolio-home .hero-art {
    right: -2%;
    bottom: 2%;
    width: 72vw;
    min-width: 285px;
    height: min(52vh, 438px);
    transform: none;
  }
  .contact-page-single .contact-art-watermark { inset: 28px 14px 90px; opacity: 0.72; }
  .contact-page-single .contact-hero-copy { justify-content: flex-end; padding-bottom: 8px; }
  .contact-page-single .contact-actions { margin-top: 10px; gap: 6px; }
  .contact-page-single .contact-action { background: rgba(250, 247, 241, 0.82); }
  .contact-page-single .contact-action-primary {
    background: #252d43;
    color: #fff;
  }
  .about-profile-screen {
    height: max(2010px, calc(300dvh - 432px));
    min-height: 2010px;
    padding: 0 !important;
  }
  .about-peel-stack { height: max(670px, calc(100dvh - 144px)); }
  .about-peel-sheet,
  .about-home-underlay { inset: 18px; border-radius: 30px; }
  .about-copy-sheet {
    align-items: flex-start;
    padding: 58px 18px 76px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: auto;
  }
  .about-art-reveal img { object-position: 48% center; }
}

@media (prefers-reduced-motion: reduce) {
  .about-peel-sheet { will-change: auto; }
}

/* The profile dissolves into the artwork, then into the return-to-home screen. */
.about-modern-page .about-peel-stack {
  perspective: none;
  transform-style: flat;
}
.about-modern-page .about-peel-sheet {
  transform: none;
  backface-visibility: visible;
  will-change: opacity;
}
.about-modern-page .about-copy-sheet {
  opacity: var(--copy-opacity, 1);
  pointer-events: auto;
}
.about-modern-page .about-art-sheet {
  opacity: var(--art-opacity, 1);
}
.about-modern-page .about-peel-stack[data-peel-state="art"] .about-copy-sheet,
.about-modern-page .about-peel-stack[data-peel-state="home"] .about-copy-sheet,
.about-modern-page .about-peel-stack[data-peel-state="home"] .about-art-sheet {
  pointer-events: none;
}
.about-modern-page .about-art-reveal img {
  filter: none;
  transform: none;
  transition: none;
}
.about-modern-page .about-peel-stack[data-peel-state="art"] .about-art-reveal img {
  filter: none;
  transform: none;
}

/* Keep the supplied contact collage crisp and fully saturated. */
.contact-page-single .contact-art-watermark {
  opacity: 1;
  -webkit-mask-image: none;
  mask-image: none;
}
.contact-page-single .contact-art-watermark img {
  object-position: center 48%;
  filter: none;
  transform: none;
}