/* ============================================================
   GLOBAL DESIGN SYSTEM
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blush-1: #F6B1B1;
  --blush-2: #F8C6C6;
  --rose: #D97C7C;
  --burgundy: #7A1E1E;
  --peach-1: #F3C7B5;
  --peach-2: #F5D5C8;
  --text-dark: #2B2B2B;
  --text-mid: #6E6E6E;
  --bg: #FFFBF8;
  --glass-fill: rgba(255,255,255,0.92);
  --glass-fill-light: rgba(248,198,198,0.18);
  --glass-border: 1px solid rgba(255,255,255,0.2);
  --glass-inset: inset 0 0 10px rgba(255,255,255,0.1);
  --rose-glow: 0 0 20px rgba(217,124,124,0.18);
  --card-shadow: 0 8px 40px rgba(217,124,124,0.10), 0 2px 12px rgba(122,30,30,0.06);
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'DM Sans', system-ui, sans-serif;
  --max-w: 1200px;
  --section-pad: 108px;
  --section-pad-mobile: 72px;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  font-size: 16px;
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text-dark);
  overflow-x: hidden;
  line-height: 1.6;
  --motion-x: 0px;
  --motion-y: 0px;
  --scroll-depth: 0px;
}

section[id],
footer[id] {
  scroll-margin-top: 88px;
}

[data-view-section][hidden] {
  display: none !important;
}

.view-copyright-end::after {
  content: '© 2026 Hyacinth Kaye Bajuyo. All Rights Reserved.';
  display: block;
  width: min(var(--max-w), calc(100vw - 48px));
  margin: 36px auto 0;
  padding: 20px 0 28px;
  border-top: 1px solid rgba(122,30,30,0.08);
  font: 500 12px/1.4 var(--font-sans);
  letter-spacing: 0.04em;
  text-align: center;
  color: rgba(122,30,30,0.42);
}

.container {
  width: min(var(--max-w), calc(100vw - 48px));
  margin: 0 auto;
}

body.book-intro-active {
  overflow: hidden;
}

body.book-reveal-home {
  overflow: auto;
}

/* ============================================================
   EDITORIAL BOOK INTRO
   ============================================================ */
.book-intro {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  padding: clamp(14px, 3vh, 28px);
  background:
    radial-gradient(circle at 50% 36%, rgba(255,255,255,0.72), transparent 24%),
    radial-gradient(circle at 28% 18%, rgba(246,177,177,0.22), transparent 30%),
    radial-gradient(circle at 76% 72%, rgba(245,213,200,0.26), transparent 34%),
    linear-gradient(135deg, #fffaf6 0%, #fff5f2 48%, #fffaf7 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .7s cubic-bezier(.22,.84,.2,1), visibility .7s;
  visibility: hidden;
}

.book-intro::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.82), transparent 30%),
    linear-gradient(135deg, rgba(255,250,246,0), rgba(255,245,242,.82));
  opacity: 0;
  transform: scale(.92);
  transition: opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}

.book-intro.is-revealing-home::after {
  opacity: .92;
  transform: scale(1.2);
}

.book-intro.is-visible {
  opacity: 1 !important;
  pointer-events: auto;
  visibility: visible !important;
}

.book-intro.is-revealing-home {
  pointer-events: none;
}

.book-intro.is-complete {
  opacity: 0;
  pointer-events: none;
  visibility: visible;
  transition:
    opacity 1.55s cubic-bezier(.22,.84,.2,1),
    visibility 0s linear 1.55s;
}

.book-intro.is-visible.is-complete {
  opacity: 0 !important;
  pointer-events: none;
  visibility: visible !important;
}

body.book-intro-active:not(.book-reveal-home) #navbar {
  opacity: 0;
  transform: translateX(-50%) translateY(-12px);
}

body.book-intro-active:not(.book-reveal-home) #hero .hero-text > *,
body.book-intro-active:not(.book-reveal-home) #hero .hero-visual {
  opacity: 0;
  transform: translateY(18px);
}

body.book-intro-active #navbar,
body.book-intro-active #hero .hero-text > *,
body.book-intro-active #hero .hero-visual,
body.book-reveal-home #navbar,
body.book-reveal-home #hero .hero-text > *,
body.book-reveal-home #hero .hero-visual {
  transition:
    opacity 1.15s cubic-bezier(.22,.84,.2,1),
    transform 1.15s cubic-bezier(.22,.84,.2,1);
}

body.book-reveal-home #navbar {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition-delay: .05s;
}

body.book-reveal-home #hero .hero-text > *,
body.book-reveal-home #hero .hero-visual {
  opacity: 1;
  transform: translateY(0);
}

body.book-reveal-home #hero .hero-hello { transition-delay: .16s; }
body.book-reveal-home #hero .hero-name { transition-delay: .30s; }
body.book-reveal-home #hero .hero-role { transition-delay: .44s; }
body.book-reveal-home #hero .hero-divider { transition-delay: .58s; }
body.book-reveal-home #hero .hero-desc { transition-delay: .72s; }
body.book-reveal-home #hero .hero-ctas { transition-delay: .86s; }
body.book-reveal-home #hero .hero-visual { transition-delay: .62s; }

.book-intro__veil {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(122,30,30,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122,30,30,0.018) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(circle, #000 45%, transparent 82%);
  opacity: .7;
}

.book-intro__stage {
  position: relative;
  width: min(680px, calc(100vw - 44px));
  max-height: calc(100svh - 28px);
  display: grid;
  justify-items: center;
  gap: clamp(12px, 2.4vh, 24px);
  perspective: 1400px;
  transition: transform 1.2s cubic-bezier(.16,1,.3,1);
}

.book-intro.is-pressing .book-intro__stage {
  transform: scale(1.018);
}

.book-intro.is-opening .book-intro__stage {
  transform: scale(1.035) translateY(-8px);
}

.book-intro.is-opening .book-intro__action {
  opacity: 0;
  transform: translateY(12px) scale(.98);
  pointer-events: none;
  transition:
    opacity .55s cubic-bezier(.22,.84,.2,1),
    transform .55s cubic-bezier(.22,.84,.2,1);
}

.book-intro.is-revealing-home .book-intro__stage {
  transform: scale(1.22) translateY(-24px);
  opacity: .06;
  transition:
    transform 1.85s cubic-bezier(.16,1,.3,1),
    opacity 1.85s cubic-bezier(.22,.84,.2,1);
}

.book-intro__eyebrow {
  font: 600 12px/1 var(--font-sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(122,30,30,.62);
  opacity: 0;
  transform: translateY(10px);
  animation: editorial-fade-up .8s cubic-bezier(.22,.84,.2,1) .18s forwards;
}

.editorial-book {
  position: relative;
  width: min(430px, 78vw, calc((100svh - 150px) * 0.72));
  max-width: calc(100vw - 44px);
  aspect-ratio: 0.72;
  transform-style: preserve-3d;
  transform: translateY(14px) rotateX(5deg) rotateZ(-1deg);
  opacity: 0;
  transition:
    width 1.35s cubic-bezier(.16,1,.3,1),
    aspect-ratio 1.35s cubic-bezier(.16,1,.3,1);
  animation:
    book-arrive 1s cubic-bezier(.22,.84,.2,1) .36s forwards,
    book-idle 7s ease-in-out 1.6s infinite;
}

.book-intro.is-opening .editorial-book {
  width: min(860px, 88vw, calc((100svh - 138px) * 1.72));
  aspect-ratio: 1.72;
  animation-play-state: paused;
}

.editorial-book__shadow {
  position: absolute;
  left: 9%;
  right: 4%;
  bottom: -24px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(43,43,43,.24), transparent 68%);
  filter: blur(10px);
  transform: translateZ(-80px);
}

.editorial-book__pages,
.editorial-book__cover {
  position: absolute;
  inset: 0;
  border-radius: 18px 24px 24px 18px;
}

.editorial-book__pages {
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  background: #fff8ef;
  box-shadow: inset 0 0 0 1px rgba(122,30,30,.08), 0 26px 80px rgba(122,30,30,.16);
  transition:
    border-radius 1.2s cubic-bezier(.16,1,.3,1),
    box-shadow 1.2s cubic-bezier(.16,1,.3,1);
}

.book-intro.is-opening .editorial-book__pages {
  border-radius: 20px 24px 24px 20px;
  box-shadow:
    inset 0 0 0 1px rgba(122,30,30,.07),
    inset 50% 0 0 rgba(122,30,30,.08),
    0 28px 82px rgba(122,30,30,.15);
}

.editorial-book__pages::before,
.editorial-book__pages::after {
  content: '';
  position: absolute;
  inset: 7% 9%;
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(122,30,30,.04), transparent 34%, rgba(255,255,255,.72));
  opacity: 0;
  filter: blur(8px);
  transform: translateY(16px) rotateY(-7deg);
  transition: opacity 1.05s cubic-bezier(.16,1,.3,1) .35s, transform 1.05s cubic-bezier(.16,1,.3,1) .35s, filter 1.05s;
  pointer-events: none;
}

.editorial-book__pages::after {
  inset: 11% 13%;
  transition-delay: .58s;
}

.book-intro.is-opening .editorial-book__pages::before,
.book-intro.is-opening .editorial-book__pages::after {
  opacity: .68;
  filter: blur(0);
  transform: translateY(0) rotateY(0);
}

.editorial-book__page {
  position: relative;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(122,30,30,.06), transparent 18%, transparent 82%, rgba(122,30,30,.04)),
    radial-gradient(circle at 20% 12%, rgba(246,177,177,.18), transparent 24%),
    #fffaf1;
}

.editorial-book__page--left {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  padding: clamp(22px, 4vw, 46px);
  text-align: center;
  border-right: 1px solid rgba(122,30,30,.12);
  box-shadow: inset -18px 0 34px rgba(122,30,30,.06);
  color: rgba(122,30,30,.74);
}

.book-intro.is-opening .editorial-book__page--left {
  background:
    linear-gradient(90deg, rgba(122,30,30,.04), transparent 20%, rgba(255,255,255,.36) 92%, rgba(122,30,30,.08)),
    #fffaf1;
}

.editorial-book__page--left span,
.editorial-book__page--left small {
  position: relative;
  z-index: 3;
  opacity: .12;
  transform: translateY(14px);
  filter: blur(6px);
  transition:
    opacity 1s cubic-bezier(.16,1,.3,1),
    transform 1s cubic-bezier(.16,1,.3,1),
    filter 1s;
}

.editorial-book__page--left span {
  font: 800 clamp(12px, 1.45vw, 15px)/1 var(--font-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(122,30,30,.9);
}

.editorial-book__page--left small {
  max-width: 14em;
  font: 600 clamp(15px, 1.9vw, 21px)/1.3 var(--font-serif);
  color: rgba(122,30,30,.72);
}

.book-intro.is-opening .editorial-book__page--left span,
.book-intro.is-opening .editorial-book__page--left small {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.book-intro.is-opening .editorial-book__page--left span {
  transition-delay: .38s;
}

.book-intro.is-opening .editorial-book__page--left small {
  transition-delay: .52s;
}

.book-intro.is-title-fading .editorial-book__page--left span,
.book-intro.is-title-fading .editorial-book__page--left small {
  opacity: 0;
  transform: translateY(-12px) scale(.985);
  filter: blur(6px);
  transition:
    opacity .72s cubic-bezier(.22,.84,.2,1),
    transform .72s cubic-bezier(.22,.84,.2,1),
    filter .72s;
  transition-delay: 0s;
}

.book-intro.is-opening .editorial-book__page--right {
  background:
    linear-gradient(90deg, rgba(122,30,30,.10), transparent 11%, rgba(255,255,255,.34) 88%, rgba(122,30,30,.05)),
    #fffaf1;
}

.editorial-book__page--right {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(12px, 2vw, 18px);
  padding: clamp(22px, 4vw, 46px);
  text-align: center;
  color: var(--burgundy);
}

.editorial-book__availability {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(122,30,30,.24);
  background: rgba(255,255,255,.88);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.66) inset,
    0 16px 34px rgba(246,177,177,.24),
    0 0 30px rgba(246,177,177,.3);
  font: 800 clamp(9px, 1.35vw, 12px)/1 var(--font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(122,30,30,.92);
  opacity: .15;
  transform: translateY(14px);
  filter: blur(6px);
  transition:
    opacity .95s cubic-bezier(.16,1,.3,1),
    transform .95s cubic-bezier(.16,1,.3,1),
    filter .95s;
}

.editorial-book__availability-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rose);
  box-shadow:
    0 0 0 5px rgba(217,124,124,.11),
    0 0 14px rgba(217,124,124,.72);
  animation: contact-availability-glow 2.4s ease-in-out infinite;
}

.editorial-book__page--right strong {
  position: relative;
  z-index: 3;
  font-family: var(--font-serif);
  font-size: clamp(30px, 5.2vw, 64px);
  font-weight: 600;
  line-height: .95;
  max-width: 8.4em;
  opacity: .15;
  transform: translateY(14px);
  filter: blur(6px);
  transition:
    opacity 1.05s cubic-bezier(.16,1,.3,1),
    transform 1.05s cubic-bezier(.16,1,.3,1),
    filter 1.05s;
}

.book-intro.is-opening .editorial-book__availability {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition-delay: .32s;
}

.book-intro.is-opening .editorial-book__page--right strong {
  opacity: 1;
  transform: translateY(-5px);
  filter: blur(0);
  transition-delay: .62s;
}

.book-intro.is-title-fading .editorial-book__page--right strong {
  opacity: 0;
  transform: translateY(-18px) scale(.985);
  filter: blur(7px);
  transition:
    opacity .9s cubic-bezier(.22,.84,.2,1),
    transform .9s cubic-bezier(.22,.84,.2,1),
    filter .9s;
  transition-delay: 0s;
}

.book-intro.is-title-fading .editorial-book__availability {
  opacity: 0;
  transform: translateY(-12px) scale(.985);
  filter: blur(6px);
  transition:
    opacity .72s cubic-bezier(.22,.84,.2,1),
    transform .72s cubic-bezier(.22,.84,.2,1),
    filter .72s;
  transition-delay: 0s;
}

.editorial-book__cover {
  z-index: 8;
  transform-origin: left center;
  transform: translateZ(32px) rotateY(0deg);
  width: 100%;
  background:
    linear-gradient(135deg, rgba(255,255,255,.16), transparent 28%),
    radial-gradient(circle at 28% 22%, rgba(246,177,177,.22), transparent 27%),
    linear-gradient(135deg, #8b2828 0%, #681717 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 24px 0 36px rgba(43,0,0,.16), 0 30px 80px rgba(122,30,30,.28);
  color: #fff8ef;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 20px;
  padding: 44px;
  backface-visibility: hidden;
  transition:
    width 1.35s cubic-bezier(.16,1,.3,1),
    transform 1.75s cubic-bezier(.16,1,.3,1),
    box-shadow 1.75s cubic-bezier(.16,1,.3,1);
}

.book-intro.is-opening .editorial-book__cover {
  width: 50%;
  transform: translateZ(32px) rotateY(-176deg);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 24px 30px 72px rgba(122,30,30,.18);
  transition-duration: 1.9s;
}

.editorial-book__monogram {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,248,239,.42);
  font: 600 22px/1 var(--font-serif);
  letter-spacing: .06em;
}

.editorial-book__rule {
  width: 72px;
  height: 1px;
  background: rgba(255,248,239,.45);
}

.editorial-book__title {
  max-width: 220px;
  font: 600 clamp(25px, 7vw, 34px)/.95 var(--font-serif);
  text-align: center;
}

.book-intro__action {
  display: grid;
  justify-items: center;
  gap: 9px;
}

.book-intro__hint {
  font: 700 10px/1 var(--font-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(122,30,30,.48);
  opacity: 0;
  transform: translateY(8px);
  animation: editorial-fade-up .8s cubic-bezier(.22,.84,.2,1) .62s forwards;
}

.book-intro__button {
  min-height: clamp(44px, 6vh, 50px);
  padding: 0 18px 0 28px;
  border: 1px solid rgba(122,30,30,.14);
  border-radius: 999px;
  background:
    linear-gradient(110deg, transparent 0%, transparent 34%, rgba(255,255,255,.78) 45%, transparent 56%, transparent 100%),
    rgba(255,255,255,.84);
  background-size: 220% 100%, 100% 100%;
  color: var(--burgundy);
  font: 700 12px/1 var(--font-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 14px 34px rgba(122,30,30,.12);
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  position: relative;
  isolation: isolate;
  animation:
    editorial-fade-up .8s cubic-bezier(.22,.84,.2,1) .72s forwards,
    book-button-sheen 2.8s cubic-bezier(.22,.84,.2,1) 1.3s infinite;
  transition: transform .35s cubic-bezier(.22,.84,.2,1), box-shadow .35s, background .35s;
}

.book-intro__button::before {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: inherit;
  border: 1px solid rgba(122,30,30,.10);
  opacity: .9;
  animation: book-button-pulse 2.8s ease-in-out 1.2s infinite;
  pointer-events: none;
}

.book-intro__button-mark {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--rose), var(--burgundy));
  color: #fff;
  font-size: 14px;
  letter-spacing: 0;
  transform: translateX(0);
  transition: transform .35s cubic-bezier(.22,.84,.2,1);
}

.book-intro.is-opening .book-intro__button {
  transform: translateY(2px) scale(.97);
  box-shadow: 0 28px 78px rgba(122,30,30,.20);
}

.book-intro.is-revealing-home .book-intro__action {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .55s cubic-bezier(.22,.84,.2,1), transform .55s cubic-bezier(.22,.84,.2,1);
}

.book-intro__button:hover {
  transform: translateY(-2px);
  background: #fff;
  box-shadow: 0 18px 44px rgba(122,30,30,.16);
}

.book-intro__button:hover .book-intro__button-mark {
  transform: translateX(3px);
}

.book-intro.is-ready .book-intro__hint,
.book-intro.is-ready .book-intro__button {
  opacity: 1;
  transform: translateY(0);
}

@media (max-height: 760px) {
  .book-intro__eyebrow {
    font-size: 10px;
  }

  .editorial-book__monogram {
    width: 58px;
    height: 58px;
    font-size: 18px;
  }

  .editorial-book__cover {
    gap: 14px;
    padding: 32px;
  }

  .editorial-book__rule {
    width: 58px;
  }

  .book-intro.is-opening .editorial-book {
    width: min(760px, 84vw, calc((100svh - 118px) * 1.65));
  }
}

@media (max-height: 620px) {
  .book-intro__stage {
    gap: 9px;
  }

  .editorial-book {
    width: min(330px, 70vw, calc((100svh - 116px) * 0.72));
  }

  .book-intro.is-opening .editorial-book {
    width: min(640px, 80vw, calc((100svh - 98px) * 1.55));
  }

  .book-intro__hint {
    display: none;
  }

  .book-intro__button {
    min-height: 42px;
    padding-left: 22px;
    font-size: 11px;
  }

  .book-intro__button-mark {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 560px) {
  .book-intro {
    align-items: start;
    padding-top: max(18px, env(safe-area-inset-top));
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }

  .book-intro__stage {
    width: min(100%, calc(100vw - 28px));
    min-height: calc(100svh - 36px);
    align-content: center;
    gap: 14px;
  }

  .editorial-book {
    width: min(82vw, calc((100svh - 148px) * 0.72));
  }

  .book-intro.is-opening .editorial-book {
    width: min(94vw, calc((100svh - 138px) * 1.42));
    aspect-ratio: 1.42;
  }

  .editorial-book__cover {
    border-radius: 14px 20px 20px 14px;
    padding: 28px;
  }

  .book-intro__action {
    gap: 7px;
  }
}

@media (max-width: 390px) {
  .book-intro__stage {
    gap: 10px;
  }

  .editorial-book {
    width: min(80vw, calc((100svh - 132px) * 0.72));
  }

  .book-intro.is-opening .editorial-book {
    width: min(94vw, calc((100svh - 124px) * 1.32));
    aspect-ratio: 1.32;
  }

  .editorial-book__cover {
    padding: 22px;
  }
}

@keyframes editorial-fade-up {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes book-arrive {
  to { opacity: 1; transform: translateY(0) rotateX(5deg) rotateZ(-1deg); }
}

@keyframes book-idle {
  0%, 100% { transform: translateY(0) rotateX(5deg) rotateZ(-1deg); }
  50% { transform: translateY(-8px) rotateX(5deg) rotateZ(-.5deg); }
}

@keyframes book-button-pulse {
  0%, 100% { transform: scale(.98); opacity: .36; }
  50% { transform: scale(1.08); opacity: .08; }
}

@keyframes book-button-sheen {
  0% { background-position: 210% 0, 0 0; }
  45%, 100% { background-position: -20% 0, 0 0; }
}

/* ============================================================
   NAVIGATION
   ============================================================ */
#navbar {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: min(82%, 960px);
  z-index: 1000;
  border-radius: 999px;
  background: rgba(255,251,248,0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(246,177,177,0.25);
  box-shadow: 0 4px 24px rgba(217,124,124,0.12), 0 1px 6px rgba(122,30,30,0.06);
  padding: 0 20px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.nav-monogram {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--peach-1), var(--blush-1));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--burgundy);
  flex-shrink: 0;
}

.nav-logo-img {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
}

.nav-wordmark {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dark);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    position: relative;
    min-width: 0;
}

.nav-pill-indicator {
  position: absolute;
  height: 30px;
  background: var(--blush-2);
  border-radius: 999px;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  opacity: 0;
  top: 50%;
  transform: translateY(-50%);
}

.nav-links li a {
  display: flex;
  align-items: center;
  padding: 6px 13px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
  text-decoration: none;
  border-radius: 999px;
  transition: color 0.2s;
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

.nav-links li a:hover { color: var(--burgundy); }
.nav-links li a.active { color: var(--burgundy); }

.nav-status {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

.nav-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rose);
  animation: pulse-dot 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(217,124,124,0.4); }
  50% { opacity: 0.8; transform: scale(0.9); box-shadow: 0 0 0 4px rgba(217,124,124,0); }
}

.nav-time {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-mid);
  letter-spacing: 0.02em;
}

/* ============================================================
   SECTION LABELS
   ============================================================ */
.section-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.section-eyebrow::before {
  content: '';
  display: block;
  width: 28px;
  height: 1.5px;
  background: var(--rose);
  flex-shrink: 0;
}

.section-eyebrow span {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rose);
}

.section-heading {
  font-family: var(--font-serif);
  font-size: clamp(52px, 7vw, 80px);
  font-weight: 600;
  line-height: 0.95;
  color: var(--text-dark);
  margin-bottom: 0;
}

.section-heading em {
  font-style: italic;
  background: linear-gradient(135deg, var(--rose), var(--burgundy));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
   BACKGROUND BLOOM UTILITY
   ============================================================ */
.bloom {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   HERO SECTION (Page 1)
   ============================================================ */
#hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 90px;
}

.hero-bloom-tl { width: 400px; height: 400px; background: var(--peach-2); opacity: 0.35; top: -80px; left: -120px; }
.hero-bloom-br { width: 500px; height: 500px; background: var(--blush-2); opacity: 0.25; bottom: -100px; right: -150px; }
.hero-bloom-tc { width: 300px; height: 300px; background: var(--peach-1); opacity: 0.18; top: -40px; left: 50%; transform: translateX(-50%); }

body.motion-ready .hero-bloom-tl { transform: translate(calc(var(--motion-x) * -0.35), calc(var(--motion-y) * -0.3)); }
body.motion-ready .hero-bloom-br { transform: translate(calc(var(--motion-x) * 0.42), calc(var(--motion-y) * 0.36)); }
body.motion-ready .hero-bloom-tc { transform: translateX(-50%) translate(calc(var(--motion-x) * 0.18), calc(var(--motion-y) * -0.18)); }

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 540px;
  gap: 40px;
  align-items: center;
  width: min(var(--max-w), calc(100vw - 48px));
  margin: 0 auto;
  padding: 40px 0 60px;
  position: relative;
  z-index: 1;
}

.hero-text {
  padding-right: 20px;
  opacity: var(--hero-scroll-opacity, 1);
}

body.motion-ready .hero-text {
  transform: translate(
    calc(var(--motion-x) * -0.08),
    calc((var(--motion-y) * -0.06) + var(--hero-scroll-y, 0px))
  ) scale(var(--hero-scroll-scale, 1));
  transition:
    transform .5s cubic-bezier(.22,.84,.2,1),
    opacity .5s cubic-bezier(.22,.84,.2,1);
}

.hero-hello {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--text-mid);
  letter-spacing: 0.03em;
  margin-bottom: 12px;
}

.hero-name {
  font-family: var(--font-serif);
  line-height: 0.95;
  margin-bottom: 16px;
}

.hero-name .name-hyacinth {
  display: block;
  font-size: clamp(72px, 9vw, 96px);
  font-weight: 600;
  font-style: italic;
  background: linear-gradient(135deg, var(--rose) 0%, var(--burgundy) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-name .name-rest {
  display: block;
  font-size: clamp(72px, 9vw, 96px);
  font-weight: 600;
  color: var(--text-dark);
}

.hero-role {
  font-family: var(--font-sans);
  font-size: clamp(22px, 2.35vw, 30px);
  font-weight: 700;
  color: var(--text-dark);
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-transform: none;
  max-width: 620px;
  margin-bottom: 18px;
}

.hero-role span {
  display: block;
  margin-top: 8px;
  font-size: clamp(9px, 0.8vw, 11px);
  font-weight: 600;
  color: var(--text-mid);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-divider {
  width: 48px;
  height: 1.5px;
  background: linear-gradient(90deg, var(--rose), transparent);
  margin-bottom: 20px;
}

.hero-desc {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.58;
  color: var(--text-mid);
  max-width: 520px;
  margin-bottom: 32px;
}

.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.btn-hire {
  display: inline-flex;
  align-items: center;
  padding: 0 30px;
  height: 50px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--rose), var(--burgundy));
  color: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 20px rgba(122,30,30,0.22);
}

.btn-hire:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 28px rgba(122,30,30,0.30); }

.btn-portfolio {
  appearance: none;
  display: inline-flex;
  align-items: center;
  padding: 0 28px;
  height: 50px;
  border-radius: 999px;
  background: transparent;
  color: var(--burgundy);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1.5px solid var(--rose);
  cursor: pointer;
  transition: all 0.3s;
}

.btn-portfolio:hover { background: var(--blush-2); transform: translateY(-2px); }

/* Hero Visual */
.hero-visual {
  position: relative;
  width: 540px;
  height: 680px;
  flex-shrink: 0;
  opacity: var(--hero-scroll-opacity, 1);
  transform: translate(
    calc(var(--motion-x) * .18),
    calc((var(--motion-y) * .12) + var(--hero-visual-scroll-y, 0px))
  ) scale(var(--hero-scroll-scale, 1));
  transition:
    transform .5s cubic-bezier(.22,.84,.2,1),
    opacity .5s cubic-bezier(.22,.84,.2,1);
}

.hero-aura {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.aura-main-blob {
  position: absolute;
  width: 620px;
  height: 550px;
  background: radial-gradient(ellipse at 40% 60%, var(--peach-1) 0%, var(--peach-2) 60%, transparent 100%);
  opacity: 0.61;
  left: -35px;
  top: 95px;
  border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%;
  filter: blur(20px);
  animation: blob-float 8s ease-in-out infinite;
}

.aura-halo {
  position: absolute;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, var(--blush-2) 0%, transparent 70%);
  opacity: 0.31;
  left: 120px;
  top: 35px;
  border-radius: 50%;
  filter: blur(32px);
}

.aura-inner-1 {
  position: absolute;
  width: 240px;
  height: 190px;
  background: var(--blush-1);
  opacity: 0.23;
  right: 18px;
  top: 170px;
  border-radius: 50% 60% 40% 55%;
  filter: blur(15px);
}

.aura-inner-2 {
  position: absolute;
  width: 170px;
  height: 135px;
  background: var(--peach-2);
  opacity: 0.19;
  left: 30px;
  bottom: 88px;
  border-radius: 55% 45% 60% 40%;
  filter: blur(12px);
}

@keyframes blob-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(8px, -12px) scale(1.02); }
  66% { transform: translate(-6px, 8px) scale(0.98); }
}

.hero-photo-frame {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 30px;
  width: 460px;
  height: 610px;
  z-index: 2;
}

.hero-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 0;
  mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
}

.hero-badge {
  position: absolute;
  bottom: 60px;
  right: -10px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  border: var(--glass-border);
  box-shadow: var(--rose-glow), var(--card-shadow);
  border-radius: 999px;
  padding: 10px 18px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dark);
  z-index: 3;
  animation: float-badge 4s ease-in-out infinite;
}

@keyframes float-badge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ============================================================
   ABOUT ME SECTION (Page 2) — Cinematic Transition
   ============================================================ */
#about {
  position: relative;
  padding: var(--section-pad) 0;
  overflow: hidden;
}

#about::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 14%;
  width: min(780px, 82vw);
  height: 420px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 36% 45%, rgba(246,177,177,0.18), transparent 52%),
    radial-gradient(circle at 64% 55%, rgba(245,213,200,0.24), transparent 58%);
  filter: blur(28px);
  opacity: var(--about-child-opacity, .2);
  transform: translateX(-50%);
  pointer-events: none;
}

.about-bloom-1 { width: 500px; height: 500px; background: var(--peach-1); opacity: 0.22; top: -80px; right: -100px; }
.about-bloom-2 { width: 350px; height: 350px; background: var(--blush-2); opacity: 0.18; bottom: 0; left: -80px; }

.about-inner {
  position: relative;
  z-index: 1;
  width: min(var(--max-w), calc(100vw - 48px));
  margin: 0 auto;
}

.about-card {
  --about-scroll-y: 0px;
  --about-scroll-scale: 1;
  --about-card-opacity: 1;
  --about-card-blur: 0px;
  --about-photo-y: 0px;
  --about-copy-y: 0px;
  --about-child-opacity: 1;
  display: grid;
  grid-template-columns: minmax(320px, 390px) 1fr;
  gap: 42px;
  align-items: start;
  background: rgba(255,255,255,0.93);
  border: var(--glass-border);
  box-shadow: var(--glass-inset), var(--card-shadow), 0 0 0 1px rgba(217,124,124,0.08);
  border-radius: 40px;
  padding: 48px;
  backdrop-filter: blur(20px);
  transform: translate3d(0, var(--about-scroll-y), 0) scale(var(--about-scroll-scale));
  transform-origin: center top;
  opacity: var(--about-card-opacity);
  filter: blur(var(--about-card-blur));
  transition:
    opacity .65s cubic-bezier(.22,.84,.2,1),
    filter .65s cubic-bezier(.22,.84,.2,1),
    transform .65s cubic-bezier(.22,.84,.2,1),
    box-shadow .65s cubic-bezier(.22,.84,.2,1);
}

.about-photo-wrap {
  position: relative;
  opacity: var(--about-child-opacity);
  transform: translate3d(0, var(--about-photo-y), 0);
  transition:
    opacity .75s cubic-bezier(.22,.84,.2,1) .08s,
    transform .75s cubic-bezier(.22,.84,.2,1) .08s;
}

.about-support-blob {
  position: absolute;
  width: 280px;
  height: 220px;
  background: radial-gradient(ellipse, var(--peach-1) 0%, var(--peach-2) 60%, transparent 100%);
  opacity: 0.45;
  top: -20px;
  left: -20px;
  border-radius: 50% 60% 40% 55%;
  filter: blur(28px);
  pointer-events: none;
}

.about-photo-container {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  border-radius: 28px;
  overflow: hidden;
  z-index: 1;
}

.about-photo-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

.about-content {
  min-width: 0;
  padding: 2px 0;
  opacity: var(--about-child-opacity);
  transform: translate3d(0, var(--about-copy-y), 0);
  transition:
    opacity .8s cubic-bezier(.22,.84,.2,1) .16s,
    transform .8s cubic-bezier(.22,.84,.2,1) .16s;
}

.about-headline {
  font-family: var(--font-serif);
  font-size: clamp(34px, 3.65vw, 48px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--text-dark);
  margin-bottom: 22px;
  position: relative;
}

.about-headline em {
  font-style: italic;
  background: linear-gradient(135deg, var(--rose), var(--burgundy));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.about-body {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.08vw, 16.5px);
  line-height: 1.62;
  color: var(--text-dark);
  max-width: 720px;
  margin-bottom: 22px;
  overflow-wrap: break-word;
}

.about-body p + p { margin-top: 11px; }

.about-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 720px;
}

.about-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  background: var(--glass-fill-light);
  border: 1px solid rgba(217,124,124,0.2);
  border-radius: 999px;
  padding: 10px 20px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--burgundy);
  box-shadow: var(--rose-glow);
  white-space: normal;
}

.about-badge::before {
  content: '✦';
  font-size: 10px;
  color: var(--rose);
}

@media (max-width: 1180px) and (min-width: 1021px) {
  .about-card {
    grid-template-columns: minmax(280px, 340px) 1fr;
    gap: 34px;
    padding: 40px;
  }

  .about-body {
    font-size: 15px;
    line-height: 1.55;
  }

  .about-body p + p {
    margin-top: 9px;
  }
}

/* ============================================================
   EDITORIAL METRICS + CALM STRUCTURE
   ============================================================ */
.home-editorial-section {
  position: relative;
  padding: clamp(86px, 10vw, 136px) 0 clamp(82px, 9vw, 120px);
  overflow: hidden;
  background:
    radial-gradient(circle at 74% 42%, rgba(246,177,177,0.18), transparent 30%),
    radial-gradient(circle at 18% 76%, rgba(245,213,200,0.26), transparent 34%),
    linear-gradient(180deg, rgba(255,251,248,0), rgba(255,245,242,0.68) 46%, var(--bg));
}

.home-editorial-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(122,30,30,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122,30,30,0.018) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(circle at 50% 44%, #000 36%, transparent 82%);
  opacity: .78;
  pointer-events: none;
}

.home-editorial-glow {
  position: absolute;
  border-radius: 999px;
  filter: blur(54px);
  pointer-events: none;
}

.home-editorial-glow-a {
  width: 380px;
  height: 380px;
  right: 8%;
  top: 16%;
  background: rgba(246,177,177,0.22);
  transform: translate3d(0, var(--editorial-glow-y, 0px), 0);
}

.home-editorial-glow-b {
  width: 320px;
  height: 320px;
  left: 7%;
  bottom: 6%;
  background: rgba(245,213,200,0.28);
  transform: translate3d(0, calc(var(--editorial-glow-y, 0px) * -0.55), 0);
}

.home-editorial-inner {
  position: relative;
  z-index: 1;
  width: min(var(--max-w), calc(100vw - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(330px, .78fr) minmax(0, 1.22fr);
  gap: clamp(34px, 4vw, 58px);
  align-items: center;
}

.home-metrics-column,
.home-calm-column {
  position: relative;
}

.home-metric-list {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.home-metric-item {
  position: relative;
  --metric-scroll-y: 0px;
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 16px;
  align-items: start;
  padding: 18px 0 19px;
  border-bottom: 1px solid rgba(122,30,30,0.1);
  opacity: 0;
  transform: translate3d(0, calc(24px + var(--metric-scroll-y)), 0);
  transition:
    opacity .9s cubic-bezier(.22,.84,.2,1),
    transform .9s cubic-bezier(.22,.84,.2,1);
}

.home-editorial-section.is-scene-active .home-metric-item {
  animation: metric-scene-rise .9s cubic-bezier(.16,1,.3,1) both;
}

.home-editorial-section.is-scene-active .home-metric-item:nth-child(1) { animation-delay: .05s; }
.home-editorial-section.is-scene-active .home-metric-item:nth-child(2) { animation-delay: .18s; }
.home-editorial-section.is-scene-active .home-metric-item:nth-child(3) { animation-delay: .31s; }

.home-editorial-inner.visible .home-metric-item,
.home-editorial-inner.visible .home-calm-copy,
.home-editorial-inner.visible .workflow-fragment {
  opacity: 1;
  transform: translate3d(0, var(--metric-scroll-y, var(--fragment-scroll-y, 0px)), 0) scale(1);
}

.home-editorial-inner.visible .home-calm-copy {
  transform: translate3d(0, var(--calm-scroll-y, 0px), 0);
}

.home-editorial-inner.visible .home-metric-item:nth-child(1) { transition-delay: .08s; }
.home-editorial-inner.visible .home-metric-item:nth-child(2) { transition-delay: .2s; }
.home-editorial-inner.visible .home-metric-item:nth-child(3) { transition-delay: .32s; }

.home-metric-number {
  font-family: var(--font-serif);
  font-size: clamp(44px, 4.9vw, 66px);
  font-weight: 600;
  line-height: .8;
  color: rgba(122,30,30,0.72);
  letter-spacing: -0.02em;
}

.home-metric-item p {
  font: 500 clamp(14px, 1.05vw, 16px)/1.48 var(--font-sans);
  color: var(--text-dark);
  max-width: 360px;
}

.home-metric-microtext {
  margin-top: 20px;
  max-width: 390px;
  font: 500 13px/1.55 var(--font-sans);
  color: rgba(122,30,30,0.56);
}

.home-calm-column {
  min-height: 430px;
  display: grid;
  grid-template-columns: minmax(310px, .92fr) minmax(220px, .58fr);
  gap: clamp(18px, 2.2vw, 28px);
  align-items: center;
  isolation: isolate;
}

.home-calm-copy {
  position: relative;
  --calm-scroll-y: 0px;
  z-index: 3;
  max-width: 470px;
  opacity: 0;
  transform: translate3d(0, calc(28px + var(--calm-scroll-y)), 0);
  transition:
    opacity 1s cubic-bezier(.22,.84,.2,1) .2s,
    transform 1s cubic-bezier(.22,.84,.2,1) .2s;
}

.home-editorial-section.is-scene-active .home-calm-copy {
  animation: calm-copy-rise 1s cubic-bezier(.16,1,.3,1) .18s both;
}

.home-calm-copy .section-heading {
  font-size: clamp(46px, 4.6vw, 64px);
  line-height: .92;
  margin-bottom: 18px;
}

.home-calm-copy p {
  font: 400 15.5px/1.58 var(--font-sans);
  color: var(--text-mid);
  margin-bottom: 22px;
  max-width: 430px;
}

.home-fit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.home-workflow-orbit {
  position: relative;
  z-index: 0;
  min-height: 390px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 58% 42%, rgba(246,177,177,0.3), transparent 42%),
    radial-gradient(circle at 36% 56%, rgba(235,226,255,0.26), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,245,242,0.18));
  pointer-events: none;
  overflow: hidden;
}

.home-workflow-orbit::before {
  content: '';
  position: absolute;
  inset: 18px;
  border-radius: inherit;
  border: 1px solid rgba(217,124,124,0.1);
  background: rgba(255,255,255,0.14);
  box-shadow: 0 28px 70px rgba(122,30,30,0.08);
  opacity: .72;
}

.home-workflow-orbit::after {
  content: '';
  position: absolute;
  left: 18%;
  right: 16%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(122,30,30,.18), transparent);
  transform: translateY(-50%) scaleX(var(--workflow-line-scale, .2));
  transform-origin: left center;
  opacity: var(--workflow-line-opacity, .25);
  transition:
    transform .8s cubic-bezier(.22,.84,.2,1),
    opacity .8s cubic-bezier(.22,.84,.2,1);
}

.workflow-fragment {
  position: absolute;
  --fragment-scroll-x: 0px;
  --fragment-scroll-y: 0px;
  --fragment-scale: .96;
  display: grid;
  gap: 4px;
  width: 190px;
  min-height: 70px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(122,30,30,0.1);
  background: rgba(255,255,255,0.84);
  box-shadow:
    0 20px 48px rgba(122,30,30,0.1),
    0 0 0 1px rgba(255,255,255,0.55) inset;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  transform: translate3d(var(--fragment-scroll-x), calc(22px + var(--fragment-scroll-y)), 0) scale(var(--fragment-scale));
  transition:
    opacity .95s cubic-bezier(.16,1,.3,1),
    transform .95s cubic-bezier(.16,1,.3,1),
    box-shadow .45s cubic-bezier(.22,.84,.2,1);
  animation: workflow-soft-drift 7s ease-in-out infinite;
}

.home-editorial-section.is-scene-active .workflow-fragment {
  animation:
    workflow-node-enter .9s cubic-bezier(.16,1,.3,1) both,
    workflow-soft-drift 7s ease-in-out infinite;
}

.home-editorial-section.is-scene-active .fragment-main { animation-delay: .42s, .42s; }
.home-editorial-section.is-scene-active .fragment-two { animation-delay: .56s, -2.2s; }
.home-editorial-section.is-scene-active .fragment-one { animation-delay: .7s, -1s; }
.home-editorial-section.is-scene-active .fragment-three { animation-delay: .84s, -3.4s; }

.home-editorial-inner.visible .workflow-fragment {
  transform: translate3d(var(--fragment-scroll-x), var(--fragment-scroll-y), 0) scale(var(--fragment-scale));
}

.workflow-fragment span {
  font: 700 10px/1 var(--font-sans);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(217,124,124,0.8);
}

.workflow-fragment strong {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.08;
  color: var(--burgundy);
}

.workflow-fragment small {
  font: 500 11px/1.35 var(--font-sans);
  color: var(--text-mid);
}

.fragment-main {
  left: calc(50% - 95px);
  top: 16px;
}

.fragment-two { left: calc(50% - 95px); top: 106px; animation-delay: -2.2s; }
.fragment-one { left: calc(50% - 95px); top: 196px; right: auto; animation-delay: -1s; }
.fragment-three { left: calc(50% - 95px); top: 286px; bottom: auto; animation-delay: -3.4s; }
.fragment-four { display: none; right: 8%; bottom: 3%; animation-delay: -4.6s; }

.home-editorial-inner.visible .fragment-main { transition-delay: .34s; }
.home-editorial-inner.visible .fragment-one { transition-delay: .46s; }
.home-editorial-inner.visible .fragment-two { transition-delay: .58s; }
.home-editorial-inner.visible .fragment-three { transition-delay: .7s; }
.home-editorial-inner.visible .fragment-four { transition-delay: .82s; }

@keyframes workflow-soft-drift {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}

@keyframes metric-scene-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 34px, 0);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, var(--metric-scroll-y, 0px), 0);
    filter: blur(0);
  }
}

@keyframes calm-copy-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 34px, 0);
    filter: blur(7px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, var(--calm-scroll-y, 0px), 0);
    filter: blur(0);
  }
}

@keyframes workflow-node-enter {
  from {
    opacity: 0;
    transform: translate3d(var(--fragment-scroll-x), calc(var(--fragment-scroll-y) + 24px), 0) scale(.92);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translate3d(var(--fragment-scroll-x), var(--fragment-scroll-y), 0) scale(var(--fragment-scale, 1));
    filter: blur(0);
  }
}

@media (max-width: 1400px) {
  .home-editorial-inner {
    grid-template-columns: minmax(285px, .64fr) minmax(0, 1.36fr);
    gap: 28px;
    width: min(1120px, calc(100vw - 48px));
  }

  .home-metric-item {
    grid-template-columns: 66px 1fr;
    gap: 14px;
    padding: 15px 0 16px;
  }

  .home-metric-number {
    font-size: clamp(40px, 4vw, 56px);
  }

  .home-metric-item p {
    font-size: 13.5px;
    line-height: 1.42;
    max-width: 320px;
  }

  .home-metric-microtext {
    max-width: 330px;
    font-size: 12.5px;
  }

  .home-calm-copy .section-heading {
    font-size: clamp(44px, 4.15vw, 58px);
  }

  .home-calm-column {
    grid-template-columns: minmax(290px, .92fr) minmax(210px, .58fr);
    min-height: 400px;
  }

  .home-workflow-orbit {
    min-height: 350px;
  }
}

@media (max-width: 1180px) {
  .home-editorial-section {
    padding: 54px 0 76px;
  }

  .home-editorial-inner {
    grid-template-columns: 1fr;
    gap: 58px;
    width: min(960px, calc(100vw - 48px));
  }

  .home-calm-column {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 28px;
  }

  .home-calm-copy {
    max-width: 760px;
  }

  .home-workflow-orbit {
    position: relative;
    min-height: 300px;
  }

  .workflow-fragment {
    width: 190px;
    min-height: 72px;
  }

  .fragment-main { left: 9%; right: auto; top: 34px; }
  .fragment-two { left: auto; right: 9%; top: 34px; }
  .fragment-three { left: 9%; bottom: 34px; right: auto; }
  .fragment-one { left: auto; right: 9%; top: auto; bottom: 34px; }
  .fragment-four { left: 2%; bottom: 16%; }
}

@media (max-width: 980px) {
  .home-editorial-inner {
    gap: 54px;
  }
}

@media (max-width: 620px) {
  .home-editorial-section {
    padding: 72px 0 74px;
  }

  .home-editorial-inner {
    width: min(100%, calc(100vw - 28px));
    gap: 38px;
  }

  .home-metric-item {
    grid-template-columns: 64px 1fr;
    gap: 14px;
    padding: 18px 0 20px;
  }

  .home-metric-number {
    font-size: clamp(40px, 13vw, 54px);
  }

  .home-metric-item p {
    font-size: 14px;
    line-height: 1.5;
  }

  .home-calm-copy .section-heading {
    font-size: clamp(42px, 14vw, 56px);
  }

  .home-fit-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .home-fit-actions a {
    justify-content: center;
    width: 100%;
  }

  .home-workflow-orbit {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    min-height: auto;
  }

  .workflow-fragment,
  .fragment-main,
  .fragment-one,
  .fragment-two,
  .fragment-three,
  .fragment-four {
    display: grid;
    position: relative;
    inset: auto;
    min-width: 0;
    width: 100%;
    min-height: 0;
    animation: none;
  }
}

/* ============================================================
   EXPERIENCE SECTION (Page 3)
   ============================================================ */
#experience {
  position: relative;
  padding: var(--section-pad) 0;
  overflow: hidden;
}

.exp-bloom-1 { width: 450px; height: 450px; background: var(--peach-2); opacity: 0.20; top: 0; right: -100px; }

.experience-inner {
  position: relative;
  z-index: 1;
  width: min(var(--max-w), calc(100vw - 48px));
  margin: 0 auto;
}

.exp-header { margin-bottom: 56px; }

.exp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.exp-card {
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(217,124,124,0.12);
  border-radius: 32px;
  padding: 40px 36px;
  position: relative;
  box-shadow: 0 8px 32px rgba(217,124,124,0.08), 0 2px 8px rgba(0,0,0,0.04);
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}

.exp-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--glass-fill-light);
  opacity: 0;
  transition: opacity 0.3s;
}

.exp-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(217,124,124,0.16), 0 4px 16px rgba(122,30,30,0.08);
}

.exp-card:hover::before { opacity: 1; }

.exp-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(122,30,30,0.08);
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--burgundy);
  margin-bottom: 20px;
}

.exp-category {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 10px;
}

.exp-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-dark);
  margin-bottom: 14px;
}

.exp-desc {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-mid);
}

/* ============================================================
   SERVICES SECTION (Page 4)
   ============================================================ */
#services {
  position: relative;
  padding: var(--section-pad) 0;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(248,198,198,0.08) 50%, var(--bg) 100%);
}

.svc-bloom-tr { width: 400px; height: 400px; background: var(--rose); opacity: 0.06; top: -80px; right: -80px; }

.services-inner {
  position: relative;
  z-index: 1;
  width: min(var(--max-w), calc(100vw - 48px));
  margin: 0 auto;
}

.svc-header { margin-bottom: 16px; }
.svc-intro {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-mid);
  max-width: 560px;
  margin-bottom: 52px;
}

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 48px;
}

.svc-card {
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 32px;
  padding: 40px 36px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(217,124,124,0.08), 0 2px 10px rgba(0,0,0,0.03);
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: card-breathe 6s ease-in-out infinite;
}

.svc-card:nth-child(2) { animation-delay: 2s; }
.svc-card:nth-child(3) { animation-delay: 4s; }

@keyframes card-breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.svc-card:hover {
  transform: translateY(-6px) scale(1.02) !important;
  animation-play-state: paused;
  box-shadow: 0 24px 56px rgba(217,124,124,0.16), 0 4px 16px rgba(122,30,30,0.08);
  background: rgba(255,255,255,0.98);
}

.svc-number {
  position: absolute;
  bottom: 20px;
  right: 28px;
  font-family: var(--font-serif);
  font-size: 64px;
  font-weight: 700;
  color: rgba(122,30,30,0.05);
  line-height: 1;
  pointer-events: none;
}

.svc-category {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 8px;
}

.svc-divider {
  width: 28px;
  height: 2px;
  background: var(--rose);
  border-radius: 999px;
  margin-bottom: 16px;
}

.svc-title {
  font-family: var(--font-serif);
  font-size: 23px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-dark);
  margin-bottom: 12px;
}

.svc-desc {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-mid);
  margin-bottom: 20px;
}

.svc-list {
  list-style: none;
  margin-bottom: 28px;
}

.svc-list li {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-mid);
  padding: 4px 0 4px 20px;
  position: relative;
}

.svc-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--rose);
  font-size: 16px;
  line-height: 1.45;
}

.btn-get-started {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--rose);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 16px rgba(217,124,124,0.3);
}

.btn-get-started:hover { background: var(--burgundy); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(122,30,30,0.30); }

.svc-work-btn-wrap { text-align: center; }

.btn-work-with-me {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 34px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--rose), var(--burgundy));
  color: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 6px 24px rgba(122,30,30,0.24);
}

.btn-work-with-me:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 12px 32px rgba(122,30,30,0.32); }

/* ============================================================
   CORE SKILLS (Page 5)
   ============================================================ */
#skills {
  position: relative;
  padding: var(--section-pad) 0;
  overflow: hidden;
}

.skills-bloom-bl { width: 400px; height: 400px; background: var(--peach-1); opacity: 0.22; bottom: -60px; left: -80px; filter: blur(80px); }
.skills-bloom-tr { width: 350px; height: 350px; background: var(--rose); opacity: 0.07; top: 0; right: -80px; filter: blur(80px); }

.skills-inner {
  position: relative;
  z-index: 1;
  width: min(var(--max-w), calc(100vw - 48px));
  margin: 0 auto;
}

.skills-header { margin-bottom: 16px; }
.skills-intro {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.58;
  color: var(--text-mid);
  margin-bottom: 56px;
  font-style: italic;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.skill-zone { }

.skill-zone-label {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--text-dark);
  text-align: center;
  margin-bottom: 12px;
}

.skill-zone-divider {
  width: 36px;
  height: 2px;
  background: linear-gradient(90deg, var(--blush-1), var(--peach-1));
  border-radius: 999px;
  margin: 0 auto 28px;
}

.skill-capsules {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.skill-capsule {
  background: rgba(248,198,198,0.22);
  border: 1.5px solid rgba(217,124,124,0.18);
  border-radius: 999px;
  padding: 11px 20px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-dark);
  text-align: center;
  cursor: default;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 10px rgba(255,255,255,0.15);
}

.skill-capsule:hover {
  background: rgba(248,198,198,0.45);
  transform: translateY(-2px) scale(1.03);
  border-color: var(--rose);
  box-shadow: 0 4px 16px rgba(217,124,124,0.2), inset 0 0 10px rgba(255,255,255,0.2);
}

/* ============================================================
   TOOLS I USE (Page 6)
   ============================================================ */
#tools {
  position: relative;
  padding: var(--section-pad) 0;
  overflow: hidden;
}

.tools-inner {
  position: relative;
  z-index: 1;
  width: min(var(--max-w), calc(100vw - 48px));
  margin: 0 auto;
}

.tools-header { margin-bottom: 48px; }

.marquee-dock {
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(16px);
  border: var(--glass-border);
  box-shadow: var(--glass-inset), 0 4px 24px rgba(217,124,124,0.10);
  border-radius: 999px;
  padding: 20px 32px;
  overflow: hidden;
  position: relative;
}

.marquee-track {
  display: flex;
  gap: 24px;
  animation: marquee-scroll 35s linear infinite;
  width: max-content;
}

.marquee-dock:hover .marquee-track { animation-play-state: paused; }

@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.tool-bubble {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: default;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
}

.tool-bubble:hover { transform: scale(1.12); }

.tool-logo-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(248,198,198,0.5), 0 0 0 1px rgba(217,124,124,0.1);
  overflow: hidden;
  padding: 10px;
}

.tool-logo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tool-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-dark);
  letter-spacing: 0.02em;
  text-align: center;
  white-space: nowrap;
}

/* ============================================================
   PROFESSIONAL ACCREDITATIONS (Page 6.5)
   ============================================================ */
#accreditations {
  position: relative;
  padding: var(--section-pad) 0;
  overflow: hidden;
}

.accred-bloom { width: 450px; height: 450px; background: var(--peach-2); opacity: 0.22; top: -60px; right: -80px; filter: blur(80px); }

.accred-inner {
  position: relative;
  z-index: 1;
  width: min(var(--max-w), calc(100vw - 48px));
  margin: 0 auto;
}

.accred-header { margin-bottom: 52px; }

.accred-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 28px;
}

.accred-card {
  background: rgba(255,255,255,0.96);
  border: var(--glass-border);
  border-radius: 36px;
  padding: 36px 40px;
  width: min(580px, 100%);
  box-shadow: var(--glass-inset), var(--card-shadow);
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.accred-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 52px rgba(217,124,124,0.14), 0 4px 16px rgba(122,30,30,0.08);
}

.accred-logo-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.accred-provider-logo {
  height: 48px;
  width: auto;
  object-fit: contain;
}

.accred-provider-logo-square {
  width: 48px;
  border-radius: 12px;
}

.accred-cert-badge {
  height: 44px;
  width: auto;
  object-fit: contain;
}

.accred-verify-logo {
  height: 32px;
  width: auto;
  object-fit: contain;
}

.accred-title {
  font-family: var(--font-serif);
  font-size: 23px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-dark);
}

.accred-meta {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text-mid);
  line-height: 1.55;
}

.btn-view-credential {
  display: inline-flex;
  align-items: center;
  height: 50px;
  padding: 0 26px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--rose), var(--burgundy));
  color: #fff;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 16px rgba(122,30,30,0.22);
  align-self: flex-start;
}

.btn-view-credential:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 24px rgba(122,30,30,0.30); }

@media (hover: hover) and (pointer: fine) {
  .accred-card {
    cursor: none;
  }

  .accred-card .btn-view-credential {
    opacity: 0;
    pointer-events: none;
  }
}

.credential-view-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9998;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(122,30,30,0.94);
  color: #fff8ef;
  font: 700 12px/1 var(--font-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 18px 44px rgba(122,30,30,0.22);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-80px, -80px, 0) scale(.86);
  transition: opacity .22s cubic-bezier(.22,.84,.2,1);
}

.credential-view-cursor.is-visible {
  opacity: 1;
}

/* ============================================================
   SAMPLE WORKS (Page 7)
   ============================================================ */
#portfolio {
  position: relative;
  padding: var(--section-pad) 0;
  overflow: hidden;
}

.portfolio-bloom { width: 500px; height: 500px; background: var(--blush-2); opacity: 0.18; bottom: -80px; right: -100px; filter: blur(80px); }

.portfolio-inner {
  position: relative;
  z-index: 1;
  width: min(var(--max-w), calc(100vw - 48px));
  margin: 0 auto;
}

.portfolio-header { margin-bottom: 52px; }

.works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.work-card {
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(217,124,124,0.14);
  border-radius: 40px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .65s cubic-bezier(.16,1,.3,1), box-shadow .65s cubic-bezier(.16,1,.3,1), border-color .65s;
  box-shadow: var(--card-shadow);
  animation: card-breathe 7s ease-in-out infinite;
  transform-style: preserve-3d;
}

.work-card:nth-child(2) { animation-delay: 1.5s; }
.work-card:nth-child(3) { animation-delay: 3s; }
.work-card:nth-child(4) { animation-delay: 4.5s; }
.work-card:nth-child(5) { animation-delay: 2.5s; }
.work-card:nth-child(6) { animation-delay: 5s; }

.work-card:hover {
  transform: translateY(-10px) scale(1.018) !important;
  animation-play-state: paused;
  border-color: rgba(217,124,124,0.28);
  box-shadow: 0 30px 70px rgba(122,30,30,0.15), 0 10px 28px rgba(217,124,124,0.12);
}

.work-card.coming-soon {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.3);
}

.work-thumb {
  width: 100%;
  height: 220px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, var(--peach-2), var(--blush-2));
  display: flex;
  align-items: center;
  justify-content: center;
}

.work-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .85s cubic-bezier(.16,1,.3,1), filter .85s;
}

.work-card:hover .work-thumb img { transform: scale(1.055); filter: saturate(1.02) contrast(1.02); }

.ai-architecture-thumb {
  background: linear-gradient(135deg, #fff7f2, #f5d5c8);
}

.ai-architecture-thumb img {
  object-position: top center;
  filter: saturate(.92) contrast(.98);
}

.ai-architecture-sequence {
  display: grid;
  gap: 22px;
}

.ai-architecture-carousel {
  position: relative;
  display: inline-grid;
  inline-size: max-content;
  max-inline-size: 100%;
  place-items: center;
  min-height: 0;
  padding: 0;
  margin: 0 auto;
}

.ai-architecture-hero-proof {
  display: grid;
  justify-items: center;
  overflow: visible;
  width: fit-content;
  max-width: min(920px, 100%);
  margin: 0 auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.ai-architecture-image-button {
  display: inline-block;
  width: auto;
  max-width: min(920px, 100%);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.ai-architecture-hero-proof img,
.ai-architecture-proof-card img {
  display: block;
  width: auto;
  max-width: min(920px, 100%);
  max-height: none;
  height: auto;
  object-fit: contain;
  filter: contrast(1.04) saturate(1.04);
}

.ai-architecture-hero-proof figcaption {
  padding: 12px 0 0;
  color: #5f5555;
  font: 700 12px/1.35 var(--font-sans);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
}

.ai-architecture-inline-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--burgundy);
  font-size: 72px;
  line-height: 1;
  cursor: pointer;
  padding: 8px;
}

.ai-architecture-inline-arrow.prev { left: -64px; }
.ai-architecture-inline-arrow.next { right: -64px; }

.ai-architecture-proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.ai-architecture-proof-grid.is-logs {
  align-items: start;
}

.ai-architecture-proof-grid.is-single {
  grid-template-columns: 1fr;
}

.ai-architecture-proof-card {
  overflow: hidden;
  border: 1px solid rgba(217,124,124,.16);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(68,42,42,.08);
}

.ai-architecture-proof-card.is-compact-log img {
  object-fit: contain;
}

.ai-architecture-proof-card figcaption {
  padding: 12px 14px 14px;
  color: #5f5555;
  font: 700 12px/1.35 var(--font-sans);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ai-architecture-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.ai-architecture-note {
  border: 1px solid rgba(217,124,124,.16);
  border-radius: 18px;
  background: rgba(255,255,255,.86);
  padding: 18px;
}

.ai-architecture-note h4 {
  margin: 0 0 8px;
  color: var(--text-dark);
  font: 700 15px/1.25 var(--font-sans);
}

.ai-architecture-note p,
.ai-architecture-note li {
  color: var(--text-mid);
  font: 500 14px/1.55 var(--font-sans);
}

.ai-architecture-note ul {
  margin: 0;
  padding-left: 18px;
}

.ai-architecture-section {
  display: grid;
  gap: 14px;
}

.ai-architecture-section h4,
.ai-architecture-code-panel h4 {
  margin: 0;
  color: var(--text-dark);
  font: 800 14px/1.2 var(--font-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ai-architecture-code-panel {
  display: grid;
  gap: 14px;
  width: min(920px, 100%);
  margin: 8px auto 0;
  border: 1px solid rgba(217,124,124,.16);
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  padding: 18px;
}

.ai-architecture-code-panel p {
  margin: 6px 0 0;
  color: var(--text-mid);
  font: 500 14px/1.55 var(--font-sans);
}

.ai-architecture-code-panel pre {
  margin: 0;
  max-height: 300px;
  overflow: auto;
  border-radius: 14px;
  background: #211b1b;
  color: #fff7f2;
  padding: 18px;
  font: 500 13px/1.55 Consolas, "Courier New", monospace;
}

.ai-architecture-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  margin-top: 16px;
}

.ai-architecture-repo-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid rgba(217, 124, 124, .34);
  border-radius: 999px;
  background: linear-gradient(135deg, #c95f63, #9c2d2f);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 8px 24px rgba(122, 30, 30, .20);
  transition: transform .2s ease, box-shadow .2s ease;
  cursor: pointer;
}

.ai-architecture-repo-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(122, 30, 30, .28);
}

.ai-architecture-viewer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: rgba(20, 12, 12, .78);
  backdrop-filter: blur(8px);
  padding: 28px 76px;
}

.ai-architecture-viewer figure {
  margin: 0;
  max-width: min(1180px, 92vw);
  max-height: 88vh;
  display: grid;
  gap: 12px;
}

.ai-architecture-viewer img {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
}

.ai-architecture-viewer figcaption {
  color: rgba(255,255,255,.88);
  font: 700 13px/1.45 var(--font-sans);
  text-align: center;
}

.ai-architecture-viewer-arrow,
.ai-architecture-viewer-close {
  position: fixed;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  line-height: 1;
}

.ai-architecture-viewer-arrow {
  top: 50%;
  transform: translateY(-50%);
  font-size: 72px;
  padding: 16px;
}

.ai-architecture-viewer-arrow.prev { left: 18px; }
.ai-architecture-viewer-arrow.next { right: 18px; }

.ai-architecture-viewer-close {
  top: 20px;
  right: 24px;
  font-size: 46px;
  padding: 12px;
}

.work-thumb-icon {
  font-size: 48px;
  opacity: 0.4;
}

.work-info {
  padding: 24px 28px 28px;
}

.work-category {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 6px;
}

.work-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.work-desc {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-mid);
}

.coming-soon-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  background: rgba(217,124,124,0.1);
  border: 1px solid rgba(217,124,124,0.2);
  border-radius: 999px;
  padding: 4px 12px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rose);
}

/* ============================================================
   EXECUTIVE ENDORSEMENT (Page 8)
   ============================================================ */
#endorsement {
  position: relative;
  padding: var(--section-pad) 0;
  overflow: hidden;
}

.endorse-bloom { width: 600px; height: 600px; background: var(--peach-1); opacity: 0.15; top: -100px; left: -100px; filter: blur(80px); }

.endorsement-inner {
  position: relative;
  z-index: 1;
  width: min(var(--max-w), calc(100vw - 48px));
  margin: 0 auto;
}

.endorse-header { margin-bottom: 52px; }

.endorse-card-wrap {
  display: flex;
  justify-content: center;
}

.endorse-card {
  background: rgba(248,198,198,0.18);
  border: 1px solid rgba(217,124,124,0.22);
  border-radius: 48px;
  padding: 44px;
  max-width: 680px;
  width: 100%;
  backdrop-filter: blur(20px);
  box-shadow: var(--glass-inset), 0 8px 48px rgba(217,124,124,0.18), 0 0 1px rgba(217,124,124,0.3);
  display: flex;
  flex-direction: column;
  gap: 32px;
  animation: endorse-float 6s ease-in-out infinite;
}

@keyframes endorse-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.endorse-img-frame {
  width: 100%;
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 16/9;
  border: 1px solid rgba(255,255,255,0.3);
  margin: 0;
}

.endorse-img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.endorse-window-dots {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}

.endorse-window-dots span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.endorse-window-dots .dot-r { background: #FF5F57; }
.endorse-window-dots .dot-y { background: #FEBC2E; }
.endorse-window-dots .dot-g { background: #28C840; }

.endorse-org {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 6px;
}

.endorse-org-divider {
  width: 28px;
  height: 2px;
  background: var(--rose);
  border-radius: 999px;
  margin-bottom: 16px;
}

.endorse-quote {
  font-family: var(--font-serif);
  font-size: 18px;
  font-style: italic;
  line-height: 1.75;
  color: var(--text-dark);
  margin-bottom: 20px;
}

.endorse-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255,255,255,0.7);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 8px;
}

.endorse-stat-num {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 700;
  color: var(--rose);
}

.endorse-stat-label {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.4;
}

.endorse-signatory {
  border-top: 1px solid rgba(217,124,124,0.15);
  padding-top: 20px;
}

.endorse-name {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 4px;
}

.endorse-title-text {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-mid);
}

.btn-view-letter {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--rose), var(--burgundy));
  color: #fff;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 20px rgba(122,30,30,0.24);
  align-self: center;
}

.btn-view-letter:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 28px rgba(122,30,30,0.32); }

/* ============================================================
   FOOTER (Page 9)
   ============================================================ */
#footer {
  background: var(--burgundy);
  position: relative;
  overflow: hidden;
}

.footer-glow-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217,124,124,0.4), transparent);
}

.footer-content {
  padding: clamp(34px, 4.8vw, 48px) 0 36px;
  width: min(var(--max-w), calc(100vw - 64px));
  margin: 0 auto;
}

#footer[data-view-section="contact"] .footer-content {
  padding-top: clamp(112px, 11vh, 136px);
}

.footer-heading-wrap {
  text-align: center;
  margin-bottom: clamp(24px, 3.6vw, 32px);
  padding-bottom: clamp(22px, 3vw, 28px);
  border-bottom: 1px solid rgba(217,124,124,0.18);
}

.footer-heading-wrap .section-eyebrow span {
  font-size: 13px;
  letter-spacing: .2em;
}

.footer-heading {
  font-family: var(--font-serif);
  font-size: clamp(46px, 5.4vw, 70px);
  font-weight: 700;
  color: #fff;
  line-height: .94;
}

.footer-heading em {
  font-style: italic;
  color: rgba(246,177,177,0.9);
}

.contact-availability-pill {
  width: fit-content;
  margin: 18px auto 0;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid rgba(246,177,177,0.34);
  background: rgba(255,255,255,0.11);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06) inset,
    0 14px 36px rgba(246,177,177,0.12),
    0 0 28px rgba(246,177,177,0.18);
  color: #fff;
  font: 700 12px/1 var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.contact-availability-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f6b1b1;
  box-shadow: 0 0 0 6px rgba(246,177,177,0.12), 0 0 18px rgba(246,177,177,0.85);
  animation: contact-availability-glow 2.4s ease-in-out infinite;
}

@keyframes contact-availability-glow {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 5px rgba(246,177,177,0.11), 0 0 16px rgba(246,177,177,0.75);
  }
  50% {
    opacity: .72;
    transform: scale(.88);
    box-shadow: 0 0 0 9px rgba(246,177,177,0.04), 0 0 26px rgba(246,177,177,0.95);
  }
}

.footer-lede {
  max-width: 640px;
  margin: 16px auto 0;
  font: 400 16px/1.65 var(--font-sans);
  color: rgba(255,255,255,0.72);
}

.contact-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: 24px;
  margin-bottom: 24px;
}

.contact-hero-card,
.contact-detail-card,
.contact-panel {
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.055);
  border-radius: 28px;
  padding: 34px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.10);
}

.contact-detail-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.contact-primary-btn,
.contact-secondary-btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 22px;
  font: 700 12px/1 var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .25s ease, background .25s ease, color .25s ease;
}

.contact-primary-btn {
  background: #fff;
  color: var(--burgundy);
}

.contact-secondary-btn {
  color: #fff;
  border: 1px solid rgba(255,255,255,0.26);
}

.contact-primary-btn:hover,
.contact-secondary-btn:hover {
  transform: translateY(-2px);
}

.contact-support-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 36px;
}

@media (max-height: 820px) and (min-width: 901px) {
  .footer-content {
    padding-top: 28px;
  }

  .footer-heading-wrap {
    margin-bottom: 22px;
    padding-bottom: 20px;
  }

  .footer-heading-wrap .section-eyebrow {
    margin-bottom: 8px !important;
  }

  .footer-heading {
    font-size: clamp(42px, 4.8vw, 62px);
  }

  .contact-availability-pill {
    margin-top: 12px;
    min-height: 38px;
  }

  .footer-lede {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.5;
  }

  .contact-hero-card,
  .contact-detail-card,
  .contact-panel {
    padding: 28px;
  }
}

.contact-checklist {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.contact-checklist li {
  position: relative;
  padding-left: 18px;
  font: 500 14px/1.45 var(--font-sans);
  color: rgba(255,255,255,0.78);
}

.contact-checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(246,177,177,0.9);
}

.contact-process {
  display: grid;
  gap: 14px;
}

.contact-process div {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  align-items: start;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.contact-process div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.contact-process strong {
  font-family: var(--font-serif);
  color: rgba(246,177,177,0.92);
  font-size: 22px;
  line-height: 1;
}

.contact-process span {
  font: 500 14px/1.5 var(--font-sans);
  color: rgba(255,255,255,0.78);
}

.footer-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 80px;
  margin-bottom: 36px;
}

.footer-brand-name {
  font-family: var(--font-serif);
  font-size: clamp(38px, 4.5vw, 52px);
  font-style: italic;
  font-weight: 600;
  color: #fff;
  margin-bottom: 16px;
}

.footer-brand-bio {
  font-family: var(--font-sans);
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.58;
  color: rgba(255,255,255,0.75);
  margin-bottom: 34px;
}

.footer-left-details {
  display: grid;
  gap: 12px;
  margin-top: 6px;
}

.footer-left-details p {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0;
  color: rgba(255,255,255,.72);
  font: 500 14px/1.45 var(--font-sans);
}

.footer-left-details strong {
  min-width: 72px;
  margin-right: 0;
  color: rgba(255,255,255,.9);
}

.footer-col-title {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(217,124,124,0.9);
  margin-bottom: 20px;
}

.footer-nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-nav-list li a {
  font-family: var(--font-sans);
  font-size: 15px;
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-nav-list li a:hover { color: #fff; }

.footer-contact-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 380px;
}

.footer-contact-item {
  min-width: 0;
}

.footer-contact-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(217,124,124,0.8);
  margin-bottom: 4px;
}

.footer-contact-value {
  font-family: var(--font-sans);
  font-size: 15px;
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  transition: color 0.2s;
  overflow-wrap: anywhere;
}

a.footer-contact-value:hover { color: #fff; text-decoration: underline; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 24px;
  text-align: center;
}

.footer-copyright {
  font-family: var(--font-sans);
  font-size: 13px;
  color: rgba(255,255,255,0.45);
}

/* ============================================================
   POPUP SYSTEM
   ============================================================ */
.popup-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(43,43,43,0.7);
  backdrop-filter: blur(20px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  padding: 20px;
}

.popup-backdrop.active {
  opacity: 1;
  pointer-events: all;
}

.popup-shell {
  background: rgba(255,255,255,0.97);
  border-radius: 40px;
  border: var(--glass-border);
  box-shadow: 0 32px 80px rgba(43,43,43,0.25), var(--rose-glow);
  max-width: 920px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  position: relative;
  transform: scale(0.92);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
}

.popup-backdrop.active .popup-shell { transform: scale(1); }

.popup-close {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(217,124,124,0.12);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--text-dark);
  transition: all 0.2s;
  z-index: 10;
  flex-shrink: 0;
}

.popup-close:hover { background: var(--rose); color: #fff; transform: scale(1.1); }

.popup-body {
  overflow-y: auto;
  flex: 1;
  padding: 44px 48px 40px;
}

.popup-category {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 6px;
}

.popup-title {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.popup-desc {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text-mid);
  line-height: 1.6;
  margin-bottom: 28px;
}

.resume-popup-shell {
  max-width: min(1040px, calc(100vw - 32px));
}

.resume-page-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-mid);
}

.resume-page-meta strong {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--text-dark);
}

.resume-meta-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.resume-download-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--burgundy);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid rgba(122,30,30,0.2);
  box-shadow: 0 8px 24px rgba(122,30,30,0.24);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.resume-download-pill:hover {
  background: #5f1618;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(122,30,30,0.30);
}

.resume-frame {
  position: relative;
  width: 100%;
  min-height: min(68vh, 780px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  border-radius: 0;
  border: 0;
  background: transparent;
  padding: 0 54px;
}

.resume-page-zoom-trigger {
  width: min(760px, 100%);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.resume-page-zoom-trigger img {
  width: 100%;
  max-height: 68vh;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 0;
  box-shadow: none;
}

.resume-frame .popup-arrow {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Single Image Popup Viewer */
.popup-viewer {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.popup-img-frame {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.popup-img-frame img {
  max-width: 100%;
  max-height: 55vh;
  object-fit: contain;
  border-radius: 16px;
  display: block;
}

.popup-img-frame.scrollable {
  overflow-y: auto;
  max-height: 55vh;
  justify-content: flex-start;
}

.popup-img-frame.scrollable img {
  max-height: none;
  width: 100%;
  height: auto;
}

.popup-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(217,124,124,0.2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--text-dark);
  transition: all 0.2s;
  z-index: 5;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.popup-arrow:hover { background: var(--rose); color: #fff; }
.popup-arrow.prev { left: -16px; }
.popup-arrow.next { right: -16px; }
.popup-arrow.hidden { opacity: 0; pointer-events: none; }

.popup-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 8px;
}

.popup-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(217,124,124,0.25);
  cursor: pointer;
  transition: all 0.2s;
}

.popup-dot.active {
  background: var(--rose);
  transform: scale(1.3);
}

/* ============================================================
   WORK CARD REVISED — "more inside" overlay system
   ============================================================ */

/* badge anchored bottom-left — never covers focal top area */
.work-card-badge {
  position: absolute;
  bottom: 12px;
  left: 14px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(217,124,124,0.22);
  border-radius: 999px;
  padding: 5px 12px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--burgundy);
  letter-spacing: 0.05em;
  box-shadow: 0 2px 10px rgba(122,30,30,0.10);
  z-index: 3;
  pointer-events: none;
  transition: all 0.2s;
}

/* hover overlay — appears on hover, bottom-right, does not block top focal area */
.work-card-hover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(122,30,30,0.0) 50%, rgba(122,30,30,0.38) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 12px 14px;
  opacity: 0;
  transition: opacity .55s cubic-bezier(.22,.84,.2,1);
  z-index: 2;
  pointer-events: none;
}

.work-card:hover .work-card-hover-overlay { opacity: 1; }

.work-card .work-thumb::after {
  content: "View Project";
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 4;
  border: 1px solid rgba(255,255,255,0.46);
  border-radius: 999px;
  background: rgba(122,30,30,0.82);
  color: #fff;
  padding: 6px 12px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(122,30,30,0.22);
  pointer-events: none;
}

.work-card-hover-cue {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.38);
  border-radius: 999px;
  padding: 5px 12px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.05em;
  backdrop-filter: blur(6px);
}

/* Preview image zoom on hover */
.work-card .work-thumb img {
  transition: transform .85s cubic-bezier(.16,1,.3,1), filter .85s;
}
.work-card:hover .work-thumb img { transform: scale(1.055); filter: saturate(1.02) contrast(1.02); }

/* Email hero crop — show only top branded hero of email */
.email-hero-crop {
  width: 100%;
  height: 220px;
  overflow: hidden;
}

.email-hero-crop img {
  width: 100%;
  height: auto;
  display: block;
  object-position: top center;
  transition: transform 0.5s cubic-bezier(0.22, 0.84, 0.2, 1);
}

.work-card:hover .email-hero-crop img { transform: scale(1.04); }

/* TW preview — uses a clean title-page image rendered by JS */
.tw-preview-wrap {
  width: 100%;
  height: 220px;
  overflow: hidden;
  background: #f4f4f0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12px;
}

.tw-preview-wrap canvas,
.tw-preview-wrap img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: top center;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
  transition: transform 0.5s cubic-bezier(0.22, 0.84, 0.2, 1);
}

.work-card:hover .tw-preview-wrap canvas,
.work-card:hover .tw-preview-wrap img { transform: scale(1.04); }

/* SMS preview — screenshot top of HTML */
.sms-preview-still {
  width: 100%;
  height: 220px;
  overflow: hidden;
  background: linear-gradient(135deg, #F3E8E0, #F8C6C6);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.sms-preview-still img {
  width: 100%;
  height: auto;
  display: block;
  object-position: top;
}

/* ============================================================
   GRAPHIC DESIGN POPUP — DUAL VIEWER
   ============================================================ */
.graphic-dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 8px;
}

.graphic-viewer-bubble {
  background: rgba(248,198,198,0.12);
  border: 1px solid rgba(217,124,124,0.15);
  border-radius: 28px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  cursor: pointer;
  transition: all 0.3s;
}

.graphic-viewer-bubble:hover {
  background: rgba(248,198,198,0.22);
  border-color: rgba(217,124,124,0.3);
  transform: translateY(-2px);
}

.graphic-viewer-preview {
  width: 100%;
  height: 170px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--peach-2), var(--blush-2));
}

/* Email preview: show top hero section intentionally */
.graphic-viewer-preview.email-preview img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.4s;
}
.graphic-viewer-bubble:hover .graphic-viewer-preview.email-preview img { transform: scale(1.04); }

.graphic-viewer-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s;
}
.graphic-viewer-bubble:hover .graphic-viewer-preview img { transform: scale(1.04); }

.graphic-viewer-label {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-dark);
}

.graphic-viewer-sublabel {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-mid);
  line-height: 1.55;
  flex: 1;
}

.graphic-viewer-progress {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--rose);
  font-style: italic;
}

.btn-view-work {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--rose), var(--burgundy));
  color: #fff;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: all 0.25s;
  align-self: flex-start;
}

.btn-view-work:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(122,30,30,0.28); }

/* ============================================================
   TECHNICAL WRITING — CUSTOM VIEW-ONLY VIEWER
   ============================================================ */
.tw-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 0;
}

.tw-tab {
  padding: 10px 22px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  border: 1.5px solid rgba(217,124,124,0.25);
  background: transparent;
  color: var(--text-mid);
  cursor: pointer;
  transition: all 0.2s;
}

.tw-tab.active {
  background: linear-gradient(135deg, var(--rose), var(--burgundy));
  border-color: transparent;
  color: #fff;
}

.tw-tab:hover:not(.active) { border-color: var(--rose); color: var(--rose); }

/* Custom viewer shell */
.tw-viewer-shell {
  margin-top: 20px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(217,124,124,0.18);
  box-shadow: 0 4px 24px rgba(217,124,124,0.08);
  background: #fff;
  display: flex;
  flex-direction: column;
}

/* Custom toolbar */
.tw-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 18px;
  background: linear-gradient(135deg, rgba(248,198,198,0.18), rgba(245,213,200,0.10));
  border-bottom: 1px solid rgba(217,124,124,0.12);
  gap: 10px;
  flex-wrap: wrap;
}

.tw-toolbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.tw-doc-title {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

.tw-view-only-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(122,30,30,0.08);
  border: 1px solid rgba(122,30,30,0.14);
  border-radius: 999px;
  padding: 3px 10px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--burgundy);
  white-space: nowrap;
  flex-shrink: 0;
}

.tw-toolbar-right {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.tw-ctrl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(217,124,124,0.18);
  cursor: pointer;
  font-size: 14px;
  color: var(--text-dark);
  transition: all 0.2s;
  flex-shrink: 0;
  user-select: none;
}

.tw-ctrl-btn:hover { background: rgba(217,124,124,0.12); border-color: var(--rose); color: var(--burgundy); }
.tw-ctrl-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.tw-page-info {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-mid);
  padding: 0 4px;
  white-space: nowrap;
  min-width: 60px;
  text-align: center;
}

.tw-nav-sep {
  width: 1px;
  height: 18px;
  background: rgba(217,124,124,0.18);
  margin: 0 3px;
  flex-shrink: 0;
}

/* Canvas area — single scroll container, no double scrollbar */
.tw-canvas-area {
  width: 100%;
  height: 480px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #f2f1ec;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px;
  gap: 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(217,124,124,0.3) transparent;
}

.tw-canvas-area::-webkit-scrollbar { width: 5px; }
.tw-canvas-area::-webkit-scrollbar-track { background: transparent; }
.tw-canvas-area::-webkit-scrollbar-thumb { background: rgba(217,124,124,0.3); border-radius: 3px; }

.tw-page-canvas {
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 2px 14px rgba(0,0,0,0.10);
  display: block;
  max-width: 100%;
  height: auto;
}

/* progress bar */
.tw-progress-bar {
  height: 3px;
  background: rgba(217,124,124,0.10);
  flex-shrink: 0;
}

.tw-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--rose), var(--burgundy));
  border-radius: 999px;
  transition: width 0.3s;
}

/* ============================================================
   SOCIAL MEDIA STRATEGY — CUSTOM VIEWER
   ============================================================ */
.sms-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.sms-tab {
  padding: 9px 16px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  border: 1.5px solid rgba(217,124,124,0.25);
  background: transparent;
  color: var(--text-mid);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.sms-tab.active {
  background: linear-gradient(135deg, var(--rose), var(--burgundy));
  border-color: transparent;
  color: #fff;
}

.sms-tab:hover:not(.active) { border-color: var(--rose); color: var(--rose); }

.sms-viewer-shell {
  margin-top: 16px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(217,124,124,0.18);
  box-shadow: 0 4px 24px rgba(217,124,124,0.08);
  background: #fff;
  display: flex;
  flex-direction: column;
}

.sms-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: linear-gradient(135deg, rgba(248,198,198,0.18), rgba(245,213,200,0.10));
  border-bottom: 1px solid rgba(217,124,124,0.12);
  gap: 8px;
}

.sms-tab-title {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
}

.sms-progress-text {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-mid);
  white-space: nowrap;
}

.sms-html-frame {
  width: 100%;
  height: 520px;
  overflow: hidden;
  position: relative;
}

.sms-html-frame iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ============================================================
   POPUP PROGRESS INDICATOR
   ============================================================ */
.popup-progress {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 10px;
  margin-top: -4px;
}

.popup-progress-text {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-mid);
  font-style: italic;
}

/* ============================================================
   PUBLISHED WORK — View Sorel CTA
   ============================================================ */
.btn-view-sorel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--rose), var(--burgundy));
  color: #fff;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 18px rgba(122,30,30,0.22);
  margin-top: 20px;
}

.btn-view-sorel:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 8px 28px rgba(122,30,30,0.30); }
.btn-view-sorel::after { content: ' ↗'; }

.published-work-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.published-work-display img {
  max-width: 100%;
  max-height: 56vh;
  object-fit: contain;
  border-radius: 16px;
  display: block;
}

/* ============================================================
   ENDORSEMENT LETTER POPUP
   ============================================================ */
.letter-popup-shell {
  max-width: 860px;
  width: 100%;
}

.letter-img-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  padding: 8px;
}

.letter-img-frame img {
  max-width: 520px;
  max-height: 640px;
  width: 100%;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
}

.letter-missing {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 220px;
  color: var(--text-mid);
  font-family: var(--font-sans);
  font-size: 15px;
  background: rgba(217,124,124,0.05);
  border-radius: 16px;
  border: 1px dashed rgba(217,124,124,0.25);
}

/* Workflow Popup */
.workflow-img-wrap {
  width: 100%;
}

.workflow-img-wrap img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  display: block;
}

/* ============================================================
   CREDENTIAL POPUP
   ============================================================ */
.credential-popup-shell {
  max-width: 800px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 48px;
  }
  .hero-text { padding-right: 0; }
  .hero-role { max-width: 560px; margin-left: auto; margin-right: auto; }
  .hero-desc { margin: 0 auto 32px; }
  .hero-ctas { justify-content: center; }
  .hero-visual { width: 100%; max-width: 380px; height: 460px; margin: 0 auto; }
  .hero-photo-frame { width: 320px; height: 420px; }
  .about-card { grid-template-columns: 1fr; padding: 36px; }
  .about-photo-container { aspect-ratio: 4/3; max-width: 380px; margin: 0 auto; }
  .home-fit-inner,
  .contact-page-grid,
  .contact-support-grid {
    grid-template-columns: 1fr;
  }
  .home-proof-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-fit-inner { gap: 28px; padding: 34px; }
  .home-proof-item:nth-child(2) { border-right: 0; }
  .home-proof-item:nth-child(-n+2) { border-bottom: 1px solid rgba(217,124,124,0.12); }
  .exp-grid { grid-template-columns: 1fr; }
  .svc-grid { grid-template-columns: 1fr; }
  .skills-grid { grid-template-columns: 1fr; gap: 40px; }
  .works-grid { grid-template-columns: 1fr 1fr; }
  .footer-cols { grid-template-columns: 1fr; gap: 36px; }
  .footer-content {
    padding-top: 76px;
    width: min(100%, calc(100vw - 32px));
  }
  #footer[data-view-section="contact"] .footer-content {
    padding-top: 112px;
  }
  .footer-heading-wrap {
    margin-bottom: 24px;
    padding-bottom: 22px;
  }
  .footer-heading {
    font-size: clamp(42px, 12vw, 58px);
  }
  .contact-availability-pill {
    margin-top: 14px;
  }
  .graphic-dual { grid-template-columns: 1fr; }
  #navbar {
    width: calc(100% - 24px);
    max-width: 600px;
    overflow: hidden;
  }
  .nav-links {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links li a { padding: 6px 9px; font-size: 13px; }
  .nav-status { display: none; }
}

@media (max-width: 600px) {
  .hero-role {
    max-width: 320px;
    font-size: 22px;
    letter-spacing: 0.02em;
  }
  .hero-role span {
    font-size: 9px;
    letter-spacing: 0.07em;
  }
  .works-grid { grid-template-columns: 1fr; }
  .home-proof-inner,
  .contact-checklist {
    grid-template-columns: 1fr;
  }
  .home-proof-item,
  .home-proof-item:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid rgba(217,124,124,0.12);
  }
  .home-proof-item:last-child { border-bottom: 0; }
  .home-fit-inner,
  .contact-hero-card,
  .contact-detail-card,
  .contact-panel {
    padding: 28px;
    border-radius: 24px;
  }
  .footer-content {
    padding-top: 68px;
    width: min(100%, calc(100vw - 24px));
  }
  #footer[data-view-section="contact"] .footer-content {
    padding-top: 104px;
  }
  .footer-heading-wrap {
    margin-bottom: 20px;
    padding-bottom: 20px;
  }
  .footer-heading {
    font-size: clamp(36px, 11.5vw, 50px);
    line-height: .96;
  }
  .footer-lede {
    font-size: 15px;
    line-height: 1.52;
  }
  .contact-availability-pill {
    min-height: 38px;
    padding-inline: 16px;
    font-size: 11px;
  }
  .contact-cta-row a { width: 100%; }
  .accred-grid { flex-direction: column; }
  .popup-body { padding: 32px 24px 28px; }
  .resume-page-meta { align-items: flex-start; flex-direction: column; }
  .resume-meta-actions { justify-content: flex-start; }
  .resume-frame { min-height: 64vh; padding: 0 18px; }
  .resume-page-zoom-trigger { width: 100%; }
  .resume-page-zoom-trigger img { max-height: 64vh; }
  :root { --section-pad: var(--section-pad-mobile); }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .book-intro { display: none !important; }
  body.book-intro-active { overflow: auto; }
  body.motion-ready .hero-text,
  body.motion-ready .hero-visual,
  body.motion-ready .hero-bloom-tl,
  body.motion-ready .hero-bloom-br,
  body.motion-ready .hero-bloom-tc {
    transform: none !important;
  }
}

/* ============================================================
   SCROLL ANIMATIONS
   ============================================================ */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.22, 0.84, 0.2, 1), transform 0.9s cubic-bezier(0.22, 0.84, 0.2, 1);
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

body.home-scroll-story .about-card.fade-up.visible {
  opacity: var(--about-card-opacity, 1);
  transform: translate3d(0, var(--about-scroll-y, 0px), 0) scale(var(--about-scroll-scale, 1));
  filter: blur(var(--about-card-blur, 0px));
}

body.home-scroll-story .about-card.fade-up {
  transition:
    opacity 1s cubic-bezier(.22,.84,.2,1),
    filter 1s cubic-bezier(.22,.84,.2,1),
    transform 1s cubic-bezier(.22,.84,.2,1),
    box-shadow .65s cubic-bezier(.22,.84,.2,1);
}

.fade-up:nth-child(2) { transition-delay: 0.1s; }
.fade-up:nth-child(3) { transition-delay: 0.2s; }
.fade-up:nth-child(4) { transition-delay: 0.15s; }
.fade-up:nth-child(5) { transition-delay: 0.25s; }
.fade-up:nth-child(6) { transition-delay: 0.35s; }

[data-view-section] {
  transform-origin: center top;
}

[data-view-section].chapter-enter {
  animation: chapter-enter .72s cubic-bezier(.22,.84,.2,1) both;
}

body.chapter-turning [data-view-section]:not([hidden]) {
  pointer-events: none;
}

@keyframes chapter-enter {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.995);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 900px) {
  [data-view-section].chapter-enter {
    animation: chapter-enter-mobile .42s cubic-bezier(.22,.84,.2,1) both;
  }

  body.chapter-turning [data-view-section]:not([hidden]) {
    pointer-events: auto;
  }
}

@keyframes chapter-enter-mobile {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section-heading,
.about-headline,
.footer-heading,
.hero-name {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .95s cubic-bezier(.22,.84,.2,1), transform .95s cubic-bezier(.22,.84,.2,1);
}

.section-heading.visible,
.about-headline.visible,
.footer-heading.visible,
.hero-name.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   PHASE 2 FINAL STYLES (originally <style id="phase2-final-styles">)
   ============================================================ */
  .phase2-compact .popup-header,
  .phase2-compact .popup-modal-header {
    padding-bottom: 12px !important;
    margin-bottom: 10px !important;
  }

  .phase2-compact .popup-title,
  .phase2-compact h3.popup-title {
    font-size: clamp(1.45rem, 2.6vw, 2.15rem) !important;
    line-height: 1.05 !important;
    margin-bottom: 6px !important;
  }

  .phase2-compact .popup-desc {
    max-width: 760px !important;
    margin: 0 !important;
    font-size: 0.98rem !important;
    line-height: 1.45 !important;
  }

  .phase2-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(34, 29, 29, 0.66);
    backdrop-filter: blur(4px);
  }

  .phase2-modal-backdrop.active {
    display: flex;
  }

  .phase2-modal {
    position: relative;
    width: min(1400px, 92vw);
    max-height: 90vh;
    overflow: auto;
    border-radius: 34px;
    background: rgba(255, 254, 252, 0.97);
    box-shadow: 0 30px 90px rgba(37, 27, 27, 0.28);
    padding: clamp(22px, 3vw, 42px);
    animation: phase2-modal-enter .22s cubic-bezier(.22, .84, .2, 1);
  }

  @keyframes phase2-modal-enter {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  .phase2-modal.phase2-html-modal {
    width: min(1480px, 94vw);
  }

  .phase2-close {
    position: sticky;
    top: 0;
    float: right;
    z-index: 5;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: #faeeee;
    color: #2f2929;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
  }

  .phase2-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: end;
    margin: 0 58px 8px 0;
  }

  .phase2-kicker {
    margin: 0 0 5px;
    color: #d66d70;
    font: 800 0.78rem/1 var(--font-sans);
    text-transform: uppercase;
    letter-spacing: .18em;
  }

  .phase2-title {
    margin: 0;
    color: #302929;
    font: 600 clamp(1.35rem, 2.25vw, 2rem)/1.08 var(--font-serif);
  }

  .phase2-desc {
    margin: 6px 0 0;
    max-width: 760px;
    color: #6f6969;
    font: 500 .92rem/1.42 var(--font-sans);
  }

  .phase2-count {
    color: #777;
    font: 600 1rem/1.3 var(--font-sans);
    white-space: nowrap;
  }

  .phase2-tabs {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 0 14px;
    margin-bottom: 8px;
    background: rgba(255, 254, 252, .96);
  }

  .phase2-pill {
    border: 1px solid rgba(217, 124, 124, .28);
    border-radius: 999px;
    background: #fff;
    color: #6d6666;
    cursor: pointer;
    padding: 12px 18px;
    font: 800 0.84rem/1 var(--font-sans);
  }

  .phase2-pill.active {
    background: linear-gradient(135deg, #c95f63, #9c2d2f);
    border-color: transparent;
    color: #fff;
  }

  .phase2-gallery-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(1080px, 100%);
    max-width: 100%;
    margin: 0 auto;
    min-height: 0;
    border: 0;
    border-radius: 14px;
    background: #fff;
    padding: 14px;
    overflow: visible;
  }

  .phase2-gallery-shell.is-graphic {
    background: #fff;
    border: 0;
    padding: 14px;
  }

  .phase2-grid {
    display: flex;
    width: fit-content;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    align-items: start;
    margin: 0 auto;
  }

  .phase2-grid.is-vertical {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }

  .phase2-grid.is-logo {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .phase2-grid.is-mixed {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }

  .phase2-grid.is-wide {
    grid-template-columns: 1fr;
  }

  .phase2-grid.is-book {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }

  .phase2-item {
    display: flex;
    width: min(420px, 100%);
    min-height: 0;
    align-items: center;
    justify-content: center;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: #fff;
    padding: 8px;
    box-shadow: none;
    box-sizing: border-box;
  }

  .phase2-item img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: none;
    border-radius: 0;
    object-fit: contain;
    box-shadow: none;
  }

  .phase2-item.vertical img {
    width: auto;
    max-width: min(100%, 420px);
    max-height: none;
  }

  .phase2-item.logo img {
    width: min(180px, 82%);
    padding: 18px;
    background: #fff;
  }

  .phase2-item.wide,
  .phase2-item.full {
    width: min(860px, 100%);
  }

  .phase2-item.wide img,
  .phase2-item.full img {
    max-height: none;
  }

  .phase2-carousel {
    position: relative;
    display: inline-flex;
    inline-size: max-content;
    max-inline-size: 100%;
    min-height: 0;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0 auto;
  }

  .phase2-carousel img {
    max-width: 100%;
    max-height: none;
    width: auto;
    height: auto;
    border-radius: 0;
    object-fit: contain;
    box-shadow: none;
  }

  .phase2-arrow {
    position: absolute;
    top: 50%;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #6a3636;
    font-size: 22px;
    transform: translateY(-50%);
    cursor: pointer;
    box-shadow: none;
  }

  .phase2-arrow.prev {
    left: -54px;
  }

  .phase2-arrow.next {
    right: -54px;
  }

  .phase2-dots {
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
  }

  .phase2-dot {
    width: 9px;
    height: 9px;
    border: 1px solid #9d8a8a;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
  }

  .phase2-dot.active {
    background: #d56d70;
    border-color: #d56d70;
  }

  .phase2-email-showcase {
    width: min(980px, 100%);
    margin: 0 auto;
  }

  .phase2-email-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 2px 54px 14px;
    color: #6f6969;
    font: 700 .88rem/1.3 var(--font-sans);
  }

  .phase2-email-meta strong {
    color: #302929;
    font: 600 1.15rem/1.2 var(--font-serif);
  }

  .phase2-email-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 0 54px;
  }

  .phase2-email-scroll {
    position: relative;
    width: min(760px, 100%);
    max-height: 64vh;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid rgba(217, 124, 124, .14);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(122, 30, 30, .08);
    scrollbar-width: thin;
    scrollbar-color: rgba(217, 124, 124, .38) transparent;
    cursor: zoom-in;
  }

  .phase2-email-scroll img,
  .phase2-email-single img,
  .phase2-email-item img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
    box-shadow: none;
  }

  .phase2-email-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    width: min(920px, 100%);
    align-items: center;
  }

  .phase2-email-item,
  .phase2-email-single {
    margin: 0;
    background: #fff;
  }

  .phase2-email-single {
    width: min(920px, 100%);
  }

  .phase2-email-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
  }

  .phase2-design-zoom-trigger {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
  }

  .phase2-preview-hint {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, .68);
    border-radius: 999px;
    background: rgba(43, 35, 35, .62);
    color: #fff;
    padding: 7px 11px;
    font: 800 .72rem/1 var(--font-sans);
    letter-spacing: .02em;
    opacity: .86;
    pointer-events: none;
    box-shadow: 0 8px 24px rgba(37, 27, 27, .18);
  }

  .phase2-email-scroll .phase2-preview-hint {
    position: sticky;
    display: block;
    width: fit-content;
    margin: -44px 12px 12px auto;
    bottom: 12px;
  }

  [data-sync-images="true"] img {
    opacity: 1;
    transition: opacity .24s ease;
  }

  [data-sync-images="true"].phase2-sync-loading img {
    opacity: 1;
  }

  [data-sync-images="true"].phase2-sync-ready img {
    opacity: 1;
  }

  .phase2-doc-stack {
    display: flex;
    max-height: 64vh;
    flex-direction: column;
    gap: 18px;
    overflow-y: auto;
    padding-right: 6px;
  }

  .phase2-doc-page {
    margin: 0 auto;
    width: min(900px, 100%);
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    box-shadow: none;
    box-sizing: border-box;
    overflow: hidden;
  }

  .phase2-doc-page img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
    border: 0;
    box-sizing: border-box;
  }

  .phase2-page-viewer {
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, auto) 56px;
    column-gap: 24px;
    width: fit-content;
    max-width: 100%;
    min-height: 0;
    align-items: start;
    justify-content: center;
    padding: 0;
    margin: 0 auto;
  }

  .phase2-page-frame {
    margin: 0;
    display: block;
    gap: 10px;
    width: fit-content;
    max-width: 100%;
    justify-self: center;
    grid-column: 2;
  }

  .phase2-page-frame img {
    display: block;
    max-width: min(70vw, 760px);
    max-height: none;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    filter: contrast(1.02) saturate(1.02);
  }

  #phase2ModalContent.phase2-content-swap {
    opacity: 1;
  }

  .phase2-page-zoom-trigger {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
  }

  .phase2-page-zoom-trigger img {
    margin: 0 auto;
  }

  .phase2-page-viewer.is-zoomable .phase2-page-frame img {
    transition: filter .12s ease;
  }

  .phase2-page-viewer.is-zoomable .phase2-page-frame:hover img {
    filter: contrast(1.04) saturate(1.03);
  }

  .phase2-page-zoom-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 3vw, 28px);
    background: rgba(45, 38, 38, .68);
    backdrop-filter: blur(8px);
  }

  .phase2-page-zoom-backdrop.active {
    display: flex;
  }

  .phase2-page-zoom-dialog {
    position: relative;
    display: flex;
    max-width: min(98vw, 1480px);
    max-height: 94vh;
    align-items: center;
    justify-content: center;
    border-radius: 28px;
    background: #fff;
    padding: 18px;
    box-shadow: 0 28px 80px rgba(37, 27, 27, .28);
  }

  .phase2-page-zoom-dialog img {
    display: block;
    width: auto;
    height: auto;
    max-width: calc(98vw - 48px);
    max-height: calc(94vh - 52px);
    object-fit: contain;
    border-radius: 0;
  }

  .phase2-page-zoom-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: #faeeee;
    color: #2f2929;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
  }

  .phase2-page-frame figcaption {
    display: none;
  }

  .phase2-page-arrow {
    position: sticky;
    top: 42vh;
    z-index: 2;
    transform: none;
    border: 0;
    background: transparent;
    color: var(--burgundy);
    font-size: 72px;
    line-height: 1;
    cursor: pointer;
    padding: 8px;
    margin-top: 150px;
  }

  .phase2-page-arrow.prev {
    grid-column: 1;
    justify-self: center;
  }

  .phase2-page-arrow.next {
    grid-column: 3;
    justify-self: center;
  }

  .phase2-link-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 8px 0 16px;
  }

  .phase2-source-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: linear-gradient(135deg, #c95f63, #9c2d2f);
    color: #fff;
    padding: 12px 18px;
    font: 800 0.82rem/1 var(--font-sans);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  .phase2-iframe {
    height: min(76vh, 820px);
    overflow: hidden;
    border: 1px solid rgba(217, 124, 124, .16);
    border-radius: 18px;
    background: #191820;
  }

  .phase2-iframe iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
  }

  .phase2-proof {
    margin-top: 18px;
    color: #7d6969;
    font: 500 .98rem/1.6 var(--font-sans);
  }

  .phase2-doc-text-panel {
    width: min(1000px, 100%);
    max-height: 68vh;
    margin: 0 auto;
    overflow: auto;
    border: 1px solid rgba(217, 124, 124, .18);
    border-radius: 16px;
    background: #fffaf8;
    padding: 18px;
  }

  .phase2-doc-text-panel pre {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: #3a3131;
    font: 500 .9rem/1.58 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  }

  .phase2-bts-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
  }

  .phase2-bts-grid img,
  .phase2-bts-slot {
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 0;
    border-radius: 0;
    object-fit: cover;
    background: transparent;
  }

  .phase2-bts-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a98989;
    font: 800 .86rem/1.2 var(--font-sans);
    text-align: center;
  }

  .phase2-bullets,
  .phase2-bullets ul {
    list-style: none !important;
    padding-left: 0 !important;
  }

  .phase2-bullets li {
    position: relative;
    margin: 8px 0 !important;
    padding-left: 22px !important;
  }

  .phase2-bullets li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    color: #c95f63;
    font-weight: 900;
  }

  @media (max-width: 860px) {
    .phase2-modal-backdrop {
      padding: 10px;
    }

    .phase2-modal {
      width: 96vw;
      max-height: 92vh;
      border-radius: 24px;
      padding: 18px;
    }

    .phase2-head {
      grid-template-columns: 1fr;
      margin-right: 52px;
    }

    .phase2-tabs {
      overflow-x: auto;
      flex-wrap: nowrap;
      padding-bottom: 10px;
    }

    .phase2-pill {
      flex: 0 0 auto;
      padding: 10px 13px;
      font-size: .76rem;
    }

    .phase2-gallery-shell {
      padding: 12px;
      min-height: 0;
    }

  .phase2-grid {
      display: flex;
    }

    .ai-architecture-proof-grid,
    .ai-architecture-notes {
      grid-template-columns: 1fr;
    }

    .phase2-desktop-grid {
      display: none !important;
    }

    .phase2-carousel {
      min-height: 0;
      padding-inline: 0;
    }

    .phase2-carousel img {
      max-height: none;
    }

    .phase2-bts-grid {
      grid-template-columns: 1fr;
    }
  }

  @media (min-width: 861px) {
    .phase2-mobile-carousel {
      display: none !important;
    }
  }

/* ============================================================
   CODEX FINAL POLISH 2026-05-02 (originally <style id="codex-final-polish-20260502">)
   ============================================================ */
  #navbar { box-sizing: border-box; }
  .nav-links { flex: 1 1 auto; justify-content: center; }
  .marquee-dock { overflow: hidden; }
  .marquee-track { display: flex !important; flex-wrap: nowrap !important; align-items: center; width: max-content; min-width: max-content; will-change: transform; }
  .tool-bubble { flex: 0 0 auto; width: 82px; }
  .tool-logo-wrap { flex: 0 0 auto; }
  .phase2-carousel-only .phase2-carousel { display: inline-flex !important; min-height: 0; padding: 0; inline-size: max-content; max-inline-size: 100%; }
  .phase2-carousel-only .phase2-carousel img { max-height: none; width: auto; max-width: 100%; background: transparent; }
  .phase2-carousel-only .phase2-dots { bottom: 0; }
  .phase2-carousel-only .phase2-arrow.prev { left: 4px; }
  .phase2-carousel-only .phase2-arrow.next { right: 4px; }
  .phase2-gallery-shell.is-graphic { overflow: visible; }
  .phase2-carousel img { background: transparent !important; }
  .phase2-iframe { overflow: auto; -webkit-overflow-scrolling: touch; }
  .phase2-iframe iframe { min-width: 0; display: block; }
  #skills .skill-capsules:not(.skill-bullets-wrap) { display: flex; flex-direction: column; gap: 10px; }
  @media (max-width: 1020px) {
    #navbar { width: calc(100vw - 20px); max-width: none; padding: 0 10px; gap: 8px; overflow: visible; }
    .nav-brand { min-width: 0; }
    .nav-wordmark { display: none; }
    .nav-links { justify-content: flex-start; overflow-x: auto; overflow-y: hidden; padding: 0 4px; scroll-padding-inline: 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .nav-links::-webkit-scrollbar { display: none; }
    .nav-links li { flex: 0 0 auto; }
    .nav-links li a { padding: 6px 10px; font-size: 13px; }
    .nav-pill-indicator { display: none; }
    .nav-status { display: none; }
    .marquee-dock { border-radius: 28px; padding: 16px 18px; overflow-x: auto; scrollbar-width: none; }
    .marquee-dock::-webkit-scrollbar { display: none; }
    .marquee-track { animation: none !important; gap: 16px; }
  }
  @media (max-width: 860px) {
    .phase2-carousel-only .phase2-carousel { min-height: 0; padding: 0; }
    .phase2-carousel-only .phase2-carousel img { max-height: none; }
    .phase2-iframe { height: 72vh; }
  }
  @media (max-width: 540px) {
    #navbar { top: 10px; height: 48px; width: calc(100vw - 12px); }
    .nav-monogram,
    .nav-logo-img { width: 32px; height: 32px; font-size: 12px; }
    .nav-links li a { padding: 6px 8px; font-size: 12px; }
    .phase2-modal { width: 98vw; padding: 14px; }
    .phase2-head { margin-right: 46px; }
    .phase2-gallery-shell.is-graphic { padding-top: 0; }
    .phase2-email-meta { align-items: flex-start; flex-direction: column; margin-inline: 38px; }
    .phase2-email-stage { padding: 0 38px; }
    .phase2-email-pair { grid-template-columns: 1fr; }
    .phase2-email-scroll { max-height: 62vh; }
    .phase2-carousel-only .phase2-carousel { min-height: 0; padding-inline: 0; }
    .phase2-carousel-only .phase2-carousel img { max-height: none; border-radius: 0; }
    .phase2-arrow { width: 38px; height: 38px; font-size: 19px; }
  }

/* ============================================================
   CODEX FINAL TOUCHES 2026-05-03
   ============================================================ */
.phase2-carousel-only {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 14px 76px 22px;
  box-sizing: border-box;
  background: #fff;
}

.phase2-carousel-only .phase2-carousel {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  inline-size: fit-content;
  max-inline-size: min(920px, 100%);
  min-height: 0;
  padding: 14px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(217, 124, 124, 0.14);
  border-radius: 18px;
  box-sizing: border-box;
  overflow: visible;
}

.phase2-carousel-only .phase2-carousel img {
  display: block;
  width: auto;
  max-width: min(72vw, 800px);
  max-height: 47vh;
  height: auto;
  object-fit: contain;
  background: #fff !important;
  border-radius: 8px;
}

.phase2-slide-group {
  display: grid;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vw, 42px);
  max-inline-size: min(74vw, 900px);
}

.phase2-slide-group.single {
  grid-template-columns: minmax(0, auto);
}

.phase2-slide-group.pair {
  grid-template-columns: repeat(2, minmax(0, auto));
}

.phase2-slide-group.trio {
  grid-template-columns: repeat(3, minmax(0, auto));
  gap: clamp(14px, 2vw, 28px);
}

.phase2-slide-item {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.phase2-carousel-only .phase2-slide-item img {
  max-width: 100%;
  max-height: 54vh;
}

.phase2-carousel-only .phase2-slide-group.single .phase2-slide-item.wide img {
  max-width: min(72vw, 800px);
  max-height: 50vh;
}

.phase2-carousel-only .phase2-slide-group.single .phase2-slide-item.vertical img {
  max-width: min(42vw, 420px);
  max-height: 54vh;
}

.phase2-carousel-only .phase2-slide-group.pair .phase2-slide-item.vertical img {
  max-width: min(33vw, 410px);
  max-height: 54vh;
}

.phase2-carousel-only .phase2-slide-group.pair .phase2-slide-item.square img {
  max-width: min(31vw, 360px);
  max-height: 50vh;
}

.phase2-carousel-only .phase2-slide-group.trio .phase2-slide-item.vertical img {
  max-width: min(22vw, 285px);
  max-height: 48vh;
}

.phase2-carousel-only .phase2-arrow {
  z-index: 5;
  width: 46px;
  height: 46px;
  color: var(--burgundy);
  font-size: 32px;
}

.phase2-carousel-only .phase2-arrow.prev {
  left: -62px;
}

.phase2-carousel-only .phase2-arrow.next {
  right: -62px;
}

.phase2-carousel-only .phase2-dots {
  bottom: -18px;
}

.ai-architecture-carousel {
  display: grid;
  inline-size: 100%;
  max-inline-size: 100%;
  justify-items: center;
}

.ai-architecture-hero-proof,
.ai-architecture-image-button {
  width: min(920px, 100%);
  max-width: 100%;
}

.ai-architecture-hero-proof img {
  max-width: min(900px, 100%);
  max-height: 56vh;
  margin-inline: auto;
}

.ai-architecture-inline-arrow.prev {
  left: max(8px, calc(50% - 520px));
}

.ai-architecture-inline-arrow.next {
  right: max(8px, calc(50% - 520px));
}

@media (max-width: 860px) {
  .phase2-carousel-only {
    padding: 10px 52px 22px;
  }

  .phase2-carousel-only .phase2-carousel {
    max-inline-size: 100%;
    padding: 10px;
  }

  .phase2-carousel-only .phase2-carousel img {
    max-width: calc(100vw - 142px);
    max-height: 50vh;
  }

  .phase2-slide-group,
  .phase2-slide-group.pair,
  .phase2-slide-group.trio {
    grid-template-columns: 1fr;
    gap: 14px;
    max-inline-size: calc(100vw - 142px);
  }

  .phase2-carousel-only .phase2-slide-item img,
  .phase2-carousel-only .phase2-slide-group.single .phase2-slide-item.wide img,
  .phase2-carousel-only .phase2-slide-group.single .phase2-slide-item.vertical img,
  .phase2-carousel-only .phase2-slide-group.pair .phase2-slide-item.vertical img,
  .phase2-carousel-only .phase2-slide-group.pair .phase2-slide-item.square img,
  .phase2-carousel-only .phase2-slide-group.trio .phase2-slide-item.vertical img {
    max-width: calc(100vw - 142px);
    max-height: 48vh;
  }

  .phase2-carousel-only .phase2-arrow {
    width: 40px;
    height: 40px;
    font-size: 25px;
  }

  .phase2-carousel-only .phase2-arrow.prev {
    left: -46px;
  }

  .phase2-carousel-only .phase2-arrow.next {
    right: -46px;
  }

  .ai-architecture-hero-proof img {
    max-height: 52vh;
  }

  .ai-architecture-inline-arrow.prev {
    left: 0;
  }

  .ai-architecture-inline-arrow.next {
    right: 0;
  }
}

/* Final mobile-only arrow slots for Graphic Design samples. Desktop remains untouched. */
@media (max-width: 860px) {
  .phase2-gallery-shell.is-graphic .phase2-carousel,
  .phase2-gallery-shell.is-graphic .phase2-carousel-only .phase2-carousel {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 40px 24px !important;
    box-sizing: border-box !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 18px !important;
    overflow: visible !important;
  }

  .phase2-gallery-shell.is-graphic .phase2-arrow,
  .phase2-gallery-shell.is-graphic.is-promo .phase2-arrow,
  .phase2-gallery-shell.is-graphic.is-beauty .phase2-arrow {
    top: 50% !important;
    z-index: 30 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 54px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .98) !important;
    color: var(--burgundy) !important;
    font-size: 34px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-shadow: none !important;
    box-shadow: 0 8px 20px rgba(80, 30, 30, .14) !important;
  }

  .phase2-gallery-shell.is-graphic .phase2-arrow.prev,
  .phase2-gallery-shell.is-graphic .phase2-carousel-only .phase2-arrow.prev {
    left: 5px !important;
  }

  .phase2-gallery-shell.is-graphic .phase2-arrow.next,
  .phase2-gallery-shell.is-graphic .phase2-carousel-only .phase2-arrow.next {
    right: 5px !important;
  }
}

/* ============================================================
   FEATURED WORKS PAGE-VIEWER MOTION + MOBILE POLISH
   ============================================================ */
.phase2-modal-backdrop {
  perspective: 1200px;
  opacity: 0;
  transition: opacity .48s cubic-bezier(.22,.84,.2,1);
}

.phase2-modal-backdrop.active {
  opacity: 1;
}

.phase2-modal-backdrop .phase2-modal {
  transform-origin: clamp(18px, var(--phase2-origin-x, 50vw), calc(100vw - 18px)) clamp(18px, var(--phase2-origin-y, 58vh), calc(100vh - 18px));
  animation: phase2-page-open .78s cubic-bezier(.18,.86,.18,1) both;
  will-change: transform, opacity, filter;
}

.phase2-modal-backdrop.phase2-modal-ready .phase2-modal {
  will-change: auto;
}

#phase2ModalContent > * {
  animation: none;
}

#phase2ModalContent.phase2-content-swap > * {
  transform-origin: center left;
  animation: phase2-sample-page-turn .42s cubic-bezier(.18,.86,.18,1) both;
}

.phase2-modal-backdrop.active::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--phase2-origin-x, 50vw) var(--phase2-origin-y, 58vh), rgba(255, 230, 225, .30), transparent 34%),
    linear-gradient(180deg, rgba(255, 248, 244, .10), rgba(91, 42, 42, .18));
  opacity: .82;
  animation: phase2-backdrop-glow .9s cubic-bezier(.22,.84,.2,1) both;
}

.work-card:active {
  transform: translateY(-4px) scale(.995) !important;
}

@keyframes phase2-page-open {
  0% {
    opacity: 0;
    transform: translate3d(0, 44px, 0) scale(.94) rotateX(3deg);
    filter: blur(8px);
  }
  58% {
    opacity: 1;
    transform: translate3d(0, -2px, 0) scale(1.002) rotateX(0deg);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotateX(0deg);
    filter: blur(0);
  }
}

@keyframes phase2-page-content-in {
  from {
    opacity: 0;
    transform: translate3d(0, 22px, 0) scale(.985);
    filter: blur(7px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes phase2-sample-page-turn {
  from {
    opacity: 0;
    transform: translate3d(18px, 0, 0) scale(.992) rotateY(-2.5deg);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotateY(0deg);
    filter: blur(0);
  }
}

@keyframes phase2-backdrop-glow {
  from { opacity: 0; }
  to { opacity: .82; }
}

@media (max-width: 860px) {
  .work-card {
    animation: none;
  }

  .phase2-modal-backdrop {
    align-items: center;
    padding: 8px;
  }

  .phase2-modal-backdrop .phase2-modal {
    width: 100%;
    max-height: calc(100svh - 16px);
    border-radius: 22px;
    padding: 15px;
    animation-duration: .62s;
  }

  .phase2-close {
    width: 42px;
    height: 42px;
    font-size: 25px;
  }

  .phase2-head {
    gap: 8px;
    margin: 0 48px 10px 0;
  }

  .phase2-title {
    font-size: clamp(1.28rem, 7vw, 1.72rem);
  }

  .phase2-desc {
    font-size: .86rem;
    line-height: 1.45;
  }

  .phase2-count {
    font-size: .84rem;
  }

  .phase2-tabs {
    margin-inline: -2px;
    padding: 6px 2px 12px;
    scroll-snap-type: x proximity;
  }

  .phase2-pill {
    scroll-snap-align: start;
    white-space: nowrap;
  }

  .phase2-gallery-shell,
  .phase2-gallery-shell.is-graphic {
    padding: 8px;
    border-radius: 16px;
  }

  .phase2-email-showcase,
  .phase2-email-stage,
  .phase2-carousel-only,
  .phase2-page-viewer {
    max-width: 100%;
  }

  .phase2-email-meta {
    margin: 0 42px 12px;
    gap: 4px;
  }

  .phase2-email-meta strong {
    font-size: 1rem;
  }

  .phase2-email-stage {
    padding: 0 38px;
  }

  .phase2-email-scroll {
    max-height: 58svh;
  }

  .phase2-email-single,
  .phase2-email-pair {
    width: 100%;
  }

  .phase2-page-viewer {
    padding: 0 38px 24px;
  }

  .phase2-page-frame img,
  .phase2-page-viewer.is-zoomable .phase2-page-frame img {
    max-width: 100%;
    max-height: 58svh;
  }

  .phase2-page-arrow,
  .phase2-arrow {
    width: 36px !important;
    height: 48px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 8px 20px rgba(80, 30, 30, .13) !important;
    color: var(--burgundy) !important;
    font-size: 32px !important;
    line-height: 1 !important;
    text-shadow: none !important;
  }

  .phase2-page-arrow.prev,
  .phase2-arrow.prev,
  .phase2-gallery-shell.is-graphic .phase2-arrow.prev,
  .phase2-carousel-only .phase2-arrow.prev {
    left: 0 !important;
  }

  .phase2-page-arrow.next,
  .phase2-arrow.next,
  .phase2-gallery-shell.is-graphic .phase2-arrow.next,
  .phase2-carousel-only .phase2-arrow.next {
    right: 0 !important;
  }

  .phase2-carousel-only {
    padding: 8px 38px 24px !important;
  }

  .phase2-slide-group,
  .phase2-slide-group.single,
  .phase2-slide-group.pair,
  .phase2-slide-group.trio {
    max-inline-size: 100% !important;
  }

  .phase2-preview-hint {
    right: 8px;
    bottom: 8px;
    padding: 6px 9px;
    font-size: .66rem;
  }
}

@media (max-width: 390px) {
  #navbar {
    gap: 6px;
    padding: 0 8px;
  }

  .nav-links li a {
    padding: 6px 7px;
    font-size: 11.5px;
  }

  .phase2-modal-backdrop .phase2-modal {
    padding: 12px;
  }

  .phase2-email-stage,
  .phase2-page-viewer,
  .phase2-carousel-only {
    padding-inline: 34px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .phase2-modal-backdrop,
  .phase2-modal-backdrop .phase2-modal,
  #phase2ModalContent > *,
  #phase2ModalContent.phase2-content-swap > *,
  .phase2-modal-backdrop.active::before {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
}

/* Mobile graphic samples: give arrows a visible white slot outside the artwork. */
@media (max-width: 860px) {
  .phase2-gallery-shell.is-graphic {
    overflow: hidden;
  }

  .phase2-gallery-shell.is-graphic .phase2-carousel,
  .phase2-gallery-shell.is-graphic .phase2-carousel-only .phase2-carousel {
    position: relative;
    width: 100%;
    max-width: 100%;
    padding: 8px 40px 24px;
    box-sizing: border-box;
    background: #fff;
    border: 0;
    border-radius: 18px;
    overflow: visible;
  }

  .phase2-gallery-shell.is-graphic .phase2-slide-group,
  .phase2-gallery-shell.is-graphic .phase2-slide-group.single,
  .phase2-gallery-shell.is-graphic .phase2-slide-group.pair,
  .phase2-gallery-shell.is-graphic .phase2-slide-group.trio {
    width: 100%;
    max-inline-size: 100%;
  }

  .phase2-gallery-shell.is-graphic .phase2-arrow,
  .phase2-gallery-shell.is-graphic.is-promo .phase2-arrow,
  .phase2-gallery-shell.is-graphic.is-beauty .phase2-arrow {
    top: 50%;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 54px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .96);
    color: var(--burgundy);
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
    text-shadow: none;
    box-shadow: 0 8px 20px rgba(80, 30, 30, .14);
  }

  .phase2-gallery-shell.is-graphic .phase2-arrow.prev,
  .phase2-gallery-shell.is-graphic .phase2-carousel-only .phase2-arrow.prev {
    left: 5px;
  }

  .phase2-gallery-shell.is-graphic .phase2-arrow.next,
  .phase2-gallery-shell.is-graphic .phase2-carousel-only .phase2-arrow.next {
    right: 5px;
  }

  .phase2-gallery-shell.is-graphic .phase2-dots {
    bottom: 4px;
  }
}

/* ============================================================
   CODEX MOBILE FINALIZATION 2026-05-03
   ============================================================ */
@media (max-width: 1020px) {
  .marquee-dock {
    overflow: hidden;
  }

  .marquee-track {
    animation: marquee-scroll 30s linear infinite !important;
    gap: 16px;
  }
}

@media (max-width: 860px) {
  .about-body {
    font-size: 15.5px;
    line-height: 1.6;
    max-width: 100%;
  }

  .phase2-modal {
    overflow-x: hidden;
  }

  .phase2-gallery-shell,
  .phase2-gallery-shell.is-graphic {
    width: 100%;
    padding-inline: 0;
    overflow: hidden;
  }

  .phase2-page-viewer {
    display: flex;
    width: 100%;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    column-gap: 0;
    padding: 0 44px 22px;
    box-sizing: border-box;
    overflow: visible;
  }

  .phase2-page-frame {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }

  .phase2-page-frame img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 58vh;
    height: auto;
    margin-inline: auto;
    object-fit: contain;
  }

  .phase2-page-zoom-trigger {
    width: 100%;
  }

  .phase2-page-zoom-backdrop {
    padding: 10px;
  }

  .phase2-page-zoom-dialog {
    width: calc(100vw - 22px);
    max-height: 88vh;
    border-radius: 22px;
    padding: 14px;
  }

  .phase2-page-zoom-dialog img {
    max-width: calc(100vw - 50px);
    max-height: calc(88vh - 44px);
  }

  .phase2-page-arrow {
    position: absolute;
    top: 50%;
    margin-top: 0;
    transform: translateY(-50%);
    font-size: 48px;
    padding: 4px;
  }

  .phase2-page-arrow.prev {
    left: 0;
  }

  .phase2-page-arrow.next {
    right: 0;
  }

  .phase2-carousel-only {
    padding: 8px 54px 24px;
  }

  .phase2-carousel-only .phase2-carousel {
    width: 100%;
    max-width: 100%;
    padding: 8px 0;
  }

  .phase2-slide-group,
  .phase2-slide-group.single,
  .phase2-slide-group.pair,
  .phase2-slide-group.trio {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    max-inline-size: 100%;
  }

  .phase2-carousel-only .phase2-slide-item img,
  .phase2-carousel-only .phase2-slide-group.single .phase2-slide-item.wide img,
  .phase2-carousel-only .phase2-slide-group.single .phase2-slide-item.vertical img,
  .phase2-carousel-only .phase2-slide-group.pair .phase2-slide-item.vertical img,
  .phase2-carousel-only .phase2-slide-group.pair .phase2-slide-item.square img,
  .phase2-carousel-only .phase2-slide-group.trio .phase2-slide-item.vertical img {
    width: auto;
    max-width: 100%;
    max-height: 58vh;
    margin-inline: auto;
  }

  .phase2-carousel-only .phase2-arrow.prev {
    left: -36px;
  }

  .phase2-carousel-only .phase2-arrow.next {
    right: -36px;
  }

  .phase2-gallery-shell.is-graphic .phase2-arrow {
    z-index: 6;
    width: 48px;
    height: 48px;
    color: var(--burgundy);
    background: transparent;
    border-radius: 0;
    font-size: 34px;
    font-weight: 900;
    text-shadow: 0 1px 8px rgba(255,255,255,.96);
    box-shadow: none;
  }

  .phase2-gallery-shell.is-graphic.is-promo .phase2-arrow,
  .phase2-gallery-shell.is-graphic.is-beauty .phase2-arrow {
    background: rgba(255,255,255,.76);
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(80, 30, 30, .12);
  }

  .phase2-gallery-shell.is-graphic .phase2-arrow.prev,
  .phase2-carousel-only .phase2-arrow.prev {
    left: -48px;
  }

  .phase2-gallery-shell.is-graphic .phase2-arrow.next,
  .phase2-carousel-only .phase2-arrow.next {
    right: -48px;
  }

  .ai-architecture-carousel {
    width: 100%;
    padding-inline: 42px;
    box-sizing: border-box;
  }

  .ai-architecture-hero-proof,
  .ai-architecture-image-button {
    width: 100%;
  }

  .ai-architecture-hero-proof img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 58vh;
    margin-inline: auto;
    object-fit: contain;
  }

  .ai-architecture-code-panel {
    display: none;
  }

  .ai-architecture-inline-arrow.prev {
    left: 0;
  }

  .ai-architecture-inline-arrow.next {
    right: 0;
  }
}
/* Final mobile-only arrow slots for Graphic Design samples. Desktop remains untouched. */
@media (max-width: 860px) {
  .phase2-gallery-shell.is-graphic .phase2-carousel,
  .phase2-gallery-shell.is-graphic .phase2-carousel-only .phase2-carousel {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 40px 24px !important;
    box-sizing: border-box !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 18px !important;
    overflow: visible !important;
  }

  .phase2-gallery-shell.is-graphic .phase2-arrow,
  .phase2-gallery-shell.is-graphic.is-promo .phase2-arrow,
  .phase2-gallery-shell.is-graphic.is-beauty .phase2-arrow {
    top: 50% !important;
    z-index: 30 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 54px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .98) !important;
    color: var(--burgundy) !important;
    font-size: 34px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-shadow: none !important;
    box-shadow: 0 8px 20px rgba(80, 30, 30, .14) !important;
  }

  .phase2-gallery-shell.is-graphic .phase2-arrow.prev,
  .phase2-gallery-shell.is-graphic .phase2-carousel-only .phase2-arrow.prev {
    left: 5px !important;
  }

  .phase2-gallery-shell.is-graphic .phase2-arrow.next,
  .phase2-gallery-shell.is-graphic .phase2-carousel-only .phase2-arrow.next {
    right: 5px !important;
  }
}