:root {
  --bg: #070707;
  --surface: #101010;
  --surface-raised: #161616;
  --ink: #f4efe7;
  --muted: #aaa39a;
  --line: rgba(244, 239, 231, 0.14);
  --soft: #1e1d1a;
  --coral: #b66f46;
  --mint: #9da89f;
  --sky: #8b9bad;
  --yellow: #c4aa70;
  --shadow: 0 32px 90px rgba(0, 0, 0, 0.56);
  --radius: 8px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: #000;
  color: var(--ink);
  font-family: "Avenir Next", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

body.is-opening {
  overflow: hidden;
}

.opening-sequence {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: none;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
  pointer-events: none;
}

html.premium-motion .opening-sequence {
  display: grid;
}

.opening-sequence__panel {
  position: absolute;
  z-index: 0;
  left: 0;
  width: 100%;
  height: 50.2%;
  background: #050505;
  will-change: transform;
}

.opening-sequence__panel--top {
  top: 0;
}

.opening-sequence__panel--bottom {
  bottom: 0;
}

.opening-sequence__content {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: clamp(20px, 1.9vw, 30px);
  width: min(92vw, 1000px);
  color: var(--ink);
  text-align: center;
  will-change: transform, opacity;
}

.opening-sequence__logo {
  width: clamp(116px, 14vw, 210px);
  height: auto;
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.44));
  will-change: transform, opacity;
}

.opening-sequence__label {
  font-size: clamp(0.78rem, 1.4vw, 1.08rem);
  font-weight: 720;
  letter-spacing: 0.22em;
  color: rgba(244, 239, 231, 0.72);
  will-change: transform, opacity;
}

.opening-sequence__line {
  display: block;
  width: min(58vw, 520px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(196, 170, 112, 0.92), transparent);
  transform-origin: center;
  will-change: transform, opacity;
}

@media (max-width: 680px) {
  .opening-sequence__content {
    gap: 18px;
    width: 92vw;
  }

  .opening-sequence__logo {
    width: clamp(104px, 30vw, 132px);
  }

  .opening-sequence__label {
    font-size: clamp(0.67rem, 3vw, 0.8rem);
    letter-spacing: 0.12em;
    white-space: nowrap;
  }

  .opening-sequence__line {
    width: min(78vw, 360px);
  }
}

.cosmic-background {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: #050506;
}

.cosmic-background::before {
  position: absolute;
  z-index: 0;
  inset: -7%;
  content: "";
  opacity: 0.56;
  background:
    linear-gradient(90deg, rgba(5, 5, 6, 0.56), rgba(5, 5, 6, 0.08) 44%, rgba(5, 5, 6, 0.55)),
    radial-gradient(ellipse at center, transparent 34%, rgba(5, 5, 6, 0.82) 96%);
  filter: saturate(0.72) contrast(1.12);
  animation: cosmic-drift 34s ease-in-out infinite alternate;
}

.cosmic-background::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  background:
    radial-gradient(ellipse at 50% 44%, transparent 22%, rgba(5, 5, 6, 0.32) 72%, rgba(5, 5, 6, 0.78) 100%),
    linear-gradient(180deg, rgba(5, 5, 6, 0.2), rgba(5, 5, 6, 0.5));
}

.cosmic-background__stars {
  position: absolute;
  z-index: 2;
  inset: -10%;
  display: block;
  opacity: 0.9;
  background-image:
    radial-gradient(circle, rgba(255, 249, 234, 0.9) 0 0.75px, transparent 1.25px),
    radial-gradient(circle, rgba(218, 186, 121, 0.86) 0 0.8px, transparent 1.3px),
    radial-gradient(circle, rgba(255, 255, 255, 0.72) 0 0.5px, transparent 1px);
  background-position: 0 0, 53px 79px, 121px 29px;
  mix-blend-mode: screen;
}

.cosmic-background__stars--far {
  background-size: 151px 151px, 211px 211px, 97px 97px;
  opacity: 0.44;
  animation: star-drift-far 52s linear infinite;
}

.cosmic-background__stars--near {
  background-size: 233px 233px, 317px 317px, 173px 173px;
  opacity: 0.68;
  animation: star-drift-near 38s linear infinite, star-pulse 7s ease-in-out infinite alternate;
}

@keyframes cosmic-drift {
  0% { transform: scale(1.04) translate3d(-0.8%, -0.4%, 0); }
  100% { transform: scale(1.1) translate3d(1.1%, 0.7%, 0); }
}

@keyframes star-drift-far {
  to { transform: translate3d(-2%, 2%, 0); }
}

@keyframes star-drift-near {
  to { transform: translate3d(2.5%, -1.5%, 0); }
}

@keyframes star-pulse {
  0% { opacity: 0.42; }
  100% { opacity: 0.78; }
}

@media (prefers-reduced-motion: reduce) {
  .cosmic-background::before,
  .cosmic-background__stars {
    animation: none;
  }
}

body.is-dialog-open {
  overflow: hidden;
}

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

button {
  font: inherit;
}

.site-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
}

.site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 18px 40px;
  border-bottom: 1px solid var(--line);
  background: rgba(7, 7, 7, 0.4);
  backdrop-filter: blur(24px);
  transition: margin 260ms ease, padding 260ms ease, border-color 260ms ease, border-radius 260ms ease, background 260ms ease;
}

.site-header[data-header-style="split-capsules"] {
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom-color: transparent;
  background: transparent;
  backdrop-filter: none;
}

.site-header[data-header-style="split-capsules"] .brand-mark,
.site-header[data-header-style="split-capsules"] .header-actions {
  border: 1px solid rgba(244, 239, 231, 0.16);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.045));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 12px 34px rgba(0, 0, 0, 0.24);
  -webkit-backdrop-filter: blur(20px) saturate(145%);
  backdrop-filter: blur(20px) saturate(145%);
}

.site-header[data-header-style="split-capsules"] .brand-mark {
  padding: 8px 15px 8px 10px;
}

.site-header[data-header-style="split-capsules"] .header-actions {
  padding: 4px 5px;
}

.site-header[data-header-style="full-capsule"] {
  top: 12px;
  margin: 12px 24px 0;
  padding: 10px 16px;
  border: 1px solid rgba(244, 239, 231, 0.17);
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.4);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.34);
}

.site-header[data-header-style="center-logo"] {
  padding-top: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  background: linear-gradient(180deg, rgba(7, 7, 7, 0.4), rgba(7, 7, 7, 0));
  backdrop-filter: blur(10px);
}

.site-header[data-header-style="center-logo"] .brand-mark {
  position: absolute;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
}

.site-header[data-header-style="center-logo"] .brand-mark > span:last-child {
  display: none;
}

.site-header[data-header-style="center-logo"] .header-actions {
  grid-column: 3;
  justify-self: end;
}

.site-header[data-header-style="center-logo"] .main-nav {
  position: absolute;
  left: 50%;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(86px, 8vw, 126px) minmax(0, 1fr);
  width: min(1120px, calc(100vw - 220px));
  gap: 0;
  transform: translateX(-50%);
}

.main-nav__side {
  display: contents;
}

.site-header[data-header-style="center-logo"] .main-nav__side {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: clamp(16px, 1.55vw, 26px);
}

.site-header[data-header-style="center-logo"] .main-nav__side--left {
  grid-column: 1;
  justify-content: flex-end;
}

.site-header[data-header-style="center-logo"] .main-nav__side--right {
  grid-column: 3;
  justify-content: flex-start;
}

.site-header[data-header-style="center-logo"] .main-nav a {
  flex: 0 0 auto;
  min-width: 0;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}

.site-header[data-header-style="center-logo"] .main-nav a:hover {
  border-bottom-color: rgba(210, 163, 82, 0.82);
}

.site-header[data-header-style="center-logo"] .lang-switch,
.site-header[data-header-style="center-logo"] .icon-link {
  border-color: transparent;
  background: transparent;
}

.site-header[data-header-style="container-1200"] {
  top: 12px;
  width: min(1200px, calc(100% - 32px));
  margin: 12px auto 0;
  padding: 11px 18px;
  border: 1px solid rgba(244, 239, 231, 0.17);
  border-radius: 18px;
  background: rgba(10, 10, 10, 0.84);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.32);
}

.brand-mark,
.main-nav,
.header-actions,
.lang-switch,
.hero-actions,
.contact-actions,
.filter-bar {
  display: flex;
  align-items: center;
}

.brand-mark {
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 760;
}

.brand-mark__logo-wrap {
  display: grid;
  width: 30px;
  height: 24px;
  flex: 0 0 30px;
  place-items: center;
}

.brand-mark__logo {
  display: block;
  width: 36px;
  height: 26px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(244, 239, 231, 0.16));
}

.main-nav {
  justify-content: center;
  gap: clamp(24px, 2.2vw, 36px);
  color: var(--muted);
  font-family: "Avenir Next", "Microsoft YaHei", sans-serif;
  font-size: 0.86rem;
  font-weight: 560;
  white-space: nowrap;
}

.site-header[data-header-style="split-capsules"] .main-nav {
  justify-self: center;
  padding: 10px clamp(16px, 2vw, 28px);
  border: 1px solid rgba(244, 239, 231, 0.14);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.045));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 12px 34px rgba(0, 0, 0, 0.24);
  -webkit-backdrop-filter: blur(20px) saturate(145%);
  backdrop-filter: blur(20px) saturate(145%);
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  font-weight: 720;
  letter-spacing: 0.055em;
}

.site-header[data-header-style="full-capsule"] .main-nav {
  font-family: SimHei, "Microsoft YaHei", sans-serif;
  font-weight: 640;
  letter-spacing: 0.025em;
}

.site-header[data-header-style="center-logo"] .main-nav {
  font-family: "Avenir Next", "Microsoft YaHei", sans-serif;
  font-size: 0.86rem;
  font-weight: 560;
  letter-spacing: normal;
}

.site-header[data-header-style="center-logo"] .main-nav.is-dense {
  font-size: 0.8rem;
}

.site-header[data-header-style="center-logo"] .main-nav.is-dense .main-nav__side {
  gap: clamp(12px, 1.15vw, 18px);
}

.site-header[data-header-style="center-logo"] .main-nav.is-very-dense {
  width: min(1240px, calc(100vw - 170px));
  font-size: 0.74rem;
}

.site-header[data-header-style="center-logo"] .main-nav.is-very-dense .main-nav__side {
  gap: 10px;
}

.site-header[data-header-style="container-1200"] .main-nav {
  font-family: "Arial Narrow", "Microsoft YaHei UI", sans-serif;
  font-weight: 660;
  letter-spacing: 0.04em;
}

.main-nav a,
.icon-link {
  transition: color 180ms ease, transform 180ms ease;
}

.main-nav a:hover,
.icon-link:hover {
  color: var(--ink);
}

.header-actions {
  justify-content: flex-end;
  gap: 12px;
}

.mobile-nav-toggle {
  display: none;
}

.lang-switch {
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}

.site-header.is-language-switch-hidden .lang-switch,
.site-header.is-contact-link-hidden .icon-link {
  display: none !important;
}

.lang-button {
  min-width: 38px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.lang-button.is-active {
  background: var(--ink);
  color: var(--bg);
}

.icon-link {
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.hero-section {
  position: relative;
  /* Keep a broadly supported fallback before the newer viewport units. */
  min-height: 75vh;
  min-height: 75svh;
  display: grid;
  align-items: end;
  gap: 32px;
  overflow: hidden;
  padding: 128px 40px 40px;
  border-bottom: 1px solid var(--line);
}

@supports (min-height: 75dvh) {
  .hero-section {
    min-height: 75dvh;
  }
}

.hero-background-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-background-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 5, 5, 0.2), rgba(5, 5, 5, 0.56));
}

.hero-background-media video,
.hero-background-single,
.hero-background-carousel,
.hero-background-carousel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-background-media video,
.hero-background-single,
.hero-background-carousel img {
  object-fit: cover;
  object-position: center top;
}

.hero-background-media video {
  display: none;
  opacity: var(--hero-video-opacity, 0.3);
}

.hero-background-single {
  display: none;
  opacity: 0.46;
}

.hero-background-carousel {
  display: none;
}

.hero-background-carousel img {
  opacity: 0;
  transform: scale(1.035);
  transition: opacity 900ms ease, transform 5.6s linear;
}

.hero-background-carousel img.is-active {
  opacity: 0.42;
  transform: scale(1);
}

.hero-section[data-hero-style="video"] .hero-background-media video,
.hero-section[data-hero-style="default"] .hero-background-single,
.hero-section[data-hero-style="carousel"] .hero-background-carousel {
  display: block;
}

.hero-section[data-hero-style="video"] {
  border-bottom-color: transparent;
  background: #050506;
}

.hero-section[data-hero-style="video"] .hero-background-media {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 66%, rgba(0, 0, 0, 0.88) 76%, rgba(0, 0, 0, 0.38) 91%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 66%, rgba(0, 0, 0, 0.88) 76%, rgba(0, 0, 0, 0.38) 91%, transparent 100%);
}

.hero-section[data-hero-style="carousel"] #motionCanvas {
  opacity: 0.18 !important;
}

.hero-section[data-hero-style="video"] #motionCanvas,
.hero-section[data-hero-style="default"] #motionCanvas,
.hero-section[data-hero-style="default"] .smile-module,
.hero-section[data-hero-style="video"] .smile-module {
  display: none;
}

.site-background-layer {
  position: fixed;
  z-index: 0;
  top: var(--site-background-top, 100vh);
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  background: transparent;
  pointer-events: none;
  transition: top 120ms linear, background-color 180ms ease;
}

.site-background-layer[data-background-mode="grainient"] {
  background: #000;
}

.site-background-grainient {
  display: block;
  width: 100%;
  height: 100%;
}

.site-background-layer[data-background-mode="black"] {
  background: #000;
}

.site-background-layer[data-background-mode="white"] {
  background: #fff;
}

.site-background-layer[data-background-mode="custom"][data-custom-source="image"] {
  background-position: center top;
  background-repeat: repeat-x;
  background-size: auto;
}

main[data-site-background-mode] {
  position: relative;
  isolation: isolate;
}

main[data-site-background-mode] > .hero-section,
main[data-site-background-mode] > .section-block {
  position: relative;
  z-index: 1;
}

main[data-site-background-mode="white"] .section-block {
  --ink: #171717;
  --muted: #625f59;
  --line: rgba(18, 18, 18, 0.16);
  --surface: rgba(255, 255, 255, 0.76);
  --surface-raised: #fff;
  --soft: #e8e4dc;
  color: var(--ink);
}

main[data-site-background-mode="white"] :is(.profile-info, .experience-card, .profile-metrics div, .contact-list div) {
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 14px 38px rgba(28, 24, 18, 0.06);
}

#motionCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.92;
}

.hero-content,
.hero-meta {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

.hero-meta[data-visible-count="1"] {
  grid-template-columns: minmax(0, 1fr);
}

.hero-meta[hidden],
.hero-meta > [hidden] {
  display: none;
}

.hero-content {
  translate: var(--hero-copy-x, 0px) var(--hero-copy-y, 0px);
}

.hero-section[data-hero-copy-align="center"] .hero-content {
  text-align: center;
}

.hero-section[data-hero-copy-align="center"] #hero-title,
.hero-section[data-hero-copy-align="center"] .hero-copy {
  margin-right: auto;
  margin-left: auto;
}

.hero-section[data-hero-copy-align="right"] .hero-content {
  text-align: right;
}

.hero-section[data-hero-copy-align="right"] #hero-title,
.hero-section[data-hero-copy-align="right"] .hero-copy {
  margin-right: 0;
  margin-left: auto;
}

.hero-section[data-hero-copy-visible="false"] .hero-content {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none;
}

html.is-editing .hero-content {
  cursor: move;
  user-select: none;
  touch-action: none;
}

html.is-editing .hero-content.is-hero-copy-dragging {
  cursor: grabbing;
}

#hero-title {
  overflow: visible;
  margin-bottom: 0;
  font-size: min(var(--hero-title-size, 7.4rem), 11vw);
}

.hero-title-mask {
  display: block;
  overflow: visible;
  margin-block: -0.1em -0.16em;
  padding-block: 0.1em 0.16em;
}

.hero-title-inner {
  display: block;
  transform-origin: left center;
}

.hero-quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 60px;
}

.hero-quick-links[hidden],
.hero-quick-link[hidden] {
  display: none;
}

.hero-section[data-hero-copy-align="center"] .hero-quick-links {
  justify-content: center;
}

.hero-section[data-hero-copy-align="right"] .hero-quick-links {
  justify-content: flex-end;
}

.hero-quick-link {
  --hero-link-color: #f4efe7;
  --hero-link-text-color: #101010;
  min-width: 148px;
  padding: 13px 22px;
  border: 1px solid rgba(244, 239, 231, 0.78);
  border-radius: 999px;
  color: #f4efe7;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 720;
  letter-spacing: 0.04em;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.hero-quick-link--filled {
  border-color: var(--hero-link-color);
  background: var(--hero-link-color);
  color: var(--hero-link-text-color);
}

.hero-quick-link--outline {
  border-color: var(--hero-link-color);
  color: var(--hero-link-color);
  background: color-mix(in srgb, var(--hero-link-color) 10%, rgba(8, 8, 8, 0.16));
  backdrop-filter: blur(8px);
}

.hero-quick-link:hover,
.hero-quick-link:focus-visible {
  transform: translateY(-2px);
  border-color: #d2a352;
  outline: none;
}

html.is-editing .hero-quick-link {
  cursor: context-menu;
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 780;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 920px;
  margin-bottom: 30px;
  font-size: 7.4rem;
  line-height: 0.9;
  font-weight: 720;
}

.hero-copy {
  max-width: 720px;
  margin-top: 30px;
  margin-bottom: 0;
  color: #d5cec4;
  font-size: 1.28rem;
}

.hero-actions,
.contact-actions {
  flex-wrap: wrap;
  gap: 12px;
}

.smile-module {
  position: absolute;
  z-index: 2;
  top: 24px;
  left: clamp(30px, 3vw, 40px);
  width: 210px;
  height: 112px;
  display: grid;
  place-items: center;
  --smile-x: 0px;
  --smile-y: 0px;
  --smile-tilt: 0deg;
  cursor: pointer;
}

.smile-face {
  width: 138px;
  height: 84px;
  overflow: visible;
  transform: translate(var(--smile-x), var(--smile-y)) rotate(var(--smile-tilt));
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1), filter 320ms ease;
}

.smile-eye {
  fill: var(--ink);
  transform-origin: center;
  animation: smileBlink 4.8s ease-in-out infinite;
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.smile-eye--right {
  animation-delay: 0.08s;
}

.smile-mouth {
  fill: none;
  stroke: var(--ink);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 88;
  stroke-dashoffset: 0;
  transform-origin: 80px 62px;
  transition: stroke-dashoffset 520ms cubic-bezier(0.16, 1, 0.3, 1), transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.smile-module:hover .smile-face {
  filter: drop-shadow(0 0 12px rgba(244, 239, 231, 0.18));
}

.smile-module:hover .smile-eye--left {
  transform: translate(-3px, -2px) scale(1.06);
}

.smile-module:hover .smile-eye--right {
  transform: translate(3px, -2px) scale(1.06);
}

.smile-module:hover .smile-mouth {
  stroke-dashoffset: -6;
  transform: translateY(3px) scaleX(1.18);
}

@keyframes smileBlink {
  0%,
  92%,
  100% {
    transform: scaleY(1);
  }

  95% {
    transform: scaleY(0.18);
  }
}

.button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  cursor: pointer;
  font-weight: 780;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.glow-border {
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 30;
  --color-sensitivity: calc(var(--edge-sensitivity) + 20);
  --glow-padding: 40px;
  --cone-spread: 25;
  --fill-opacity: 0.08;
  --card-bg: var(--surface, #101010);
  --glow-color: hsl(38deg 76% 78% / 100%);
  --glow-color-60: hsl(38deg 76% 78% / 60%);
  --glow-color-50: hsl(38deg 76% 78% / 50%);
  --glow-color-40: hsl(38deg 76% 78% / 40%);
  --glow-color-30: hsl(38deg 76% 78% / 30%);
  --glow-color-20: hsl(38deg 76% 78% / 20%);
  --glow-color-10: hsl(38deg 76% 78% / 10%);
  --gradient-one: radial-gradient(at 80% 55%, rgba(182, 111, 70, 0.94) 0, transparent 50%);
  --gradient-two: radial-gradient(at 69% 34%, rgba(196, 170, 112, 0.94) 0, transparent 50%);
  --gradient-three: radial-gradient(at 8% 6%, rgba(139, 155, 173, 0.9) 0, transparent 50%);
  --gradient-four: radial-gradient(at 41% 38%, rgba(244, 239, 231, 0.92) 0, transparent 50%);
  --gradient-five: radial-gradient(at 86% 85%, rgba(157, 168, 159, 0.88) 0, transparent 50%);
  --gradient-six: radial-gradient(at 82% 18%, rgba(196, 170, 112, 0.86) 0, transparent 50%);
  --gradient-seven: radial-gradient(at 51% 4%, rgba(182, 111, 70, 0.78) 0, transparent 50%);
  --gradient-base: linear-gradient(rgba(244, 239, 231, 0.48) 0 100%);
  position: relative;
  isolation: isolate;
  overflow: visible;
}

.glow-border::before,
.glow-border::after,
.glow-border > .edge-light {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  transition: opacity 260ms ease-out;
}

.glow-border > :not(.edge-light) {
  position: relative;
  z-index: 3;
}

.glow-border:not(.is-glowing):not(.sweep-active)::before,
.glow-border:not(.is-glowing):not(.sweep-active)::after,
.glow-border:not(.is-glowing):not(.sweep-active) > .edge-light {
  opacity: 0;
  transition-duration: 740ms;
}

.glow-border::before {
  z-index: 6;
  padding: 1px;
  background: conic-gradient(
    from var(--cursor-angle) at center,
    rgba(244, 239, 231, 0.95) 0%,
    rgba(196, 170, 112, 0.76) calc(var(--cone-spread) * 0.55%),
    transparent calc((var(--cone-spread) + 10) * 1%),
    transparent calc((100 - var(--cone-spread) - 10) * 1%),
    rgba(139, 155, 173, 0.56) calc((100 - var(--cone-spread) - 2) * 1%),
    rgba(244, 239, 231, 0.95) 100%
  );
  opacity: clamp(0, calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity))), 1);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.glow-border::after {
  display: none;
}

.glow-border.is-glowing {
  border-color: rgba(244, 239, 231, 0.15);
}

.hero-meta.glow-border,
.profile-info.glow-border,
.profile-metrics.glow-border {
  --fill-opacity: 0.025;
}

.project-card.glow-border,
.dialog-frame.glow-border {
  --fill-opacity: 0.06;
}

.project-card.glow-border {
  --edge-sensitivity: 22;
  --color-sensitivity: 42;
  --glow-padding: 18px;
  overflow: hidden;
}

.project-card.glow-border::before {
  background: radial-gradient(
    180px circle at var(--glow-x, 50%) var(--glow-y, 50%),
    rgba(244, 239, 231, 0.95) 0%,
    rgba(196, 170, 112, 0.56) 28%,
    rgba(139, 155, 173, 0.24) 48%,
    transparent 72%
  );
  transition: opacity 120ms linear;
}

.project-card.glow-border > .edge-light {
  inset: 0;
  mix-blend-mode: normal;
  -webkit-mask-image: radial-gradient(
    220px circle at var(--glow-x, 50%) var(--glow-y, 50%),
    #000 0%,
    #000 42%,
    transparent 74%
  );
  mask-image: radial-gradient(
    220px circle at var(--glow-x, 50%) var(--glow-y, 50%),
    #000 0%,
    #000 42%,
    transparent 74%
  );
  transition: opacity 120ms linear;
}

.project-card.glow-border > .edge-light::before {
  inset: 0;
  box-shadow:
    inset 0 0 0 1px var(--glow-color-50),
    inset 0 0 5px 0 var(--glow-color-30),
    inset 0 0 14px 0 var(--glow-color-20),
    0 0 10px 0 var(--glow-color-20);
}

.glow-border > .edge-light {
  inset: calc(var(--glow-padding) * -1);
  z-index: 5;
  opacity: clamp(0, calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity))), 1);
  mix-blend-mode: plus-lighter;
  -webkit-mask-image:
    conic-gradient(
      from var(--cursor-angle) at center,
      #000 2.5%,
      transparent 10%,
      transparent 90%,
      #000 97.5%
    );
  mask-image:
    conic-gradient(
      from var(--cursor-angle) at center,
      #000 2.5%,
      transparent 10%,
      transparent 90%,
      #000 97.5%
    );
}

.glow-border > .edge-light::before {
  content: "";
  position: absolute;
  inset: var(--glow-padding);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--glow-color),
    inset 0 0 1px 0 var(--glow-color-60),
    inset 0 0 3px 0 var(--glow-color-50),
    inset 0 0 6px 0 var(--glow-color-40),
    inset 0 0 15px 0 var(--glow-color-30),
    inset 0 0 25px 2px var(--glow-color-20),
    inset 0 0 50px 2px var(--glow-color-10),
    0 0 1px 0 var(--glow-color-60),
    0 0 3px 0 var(--glow-color-50),
    0 0 6px 0 var(--glow-color-40),
    0 0 15px 0 var(--glow-color-30),
    0 0 25px 2px var(--glow-color-20),
    0 0 50px 2px var(--glow-color-10);
}

.project-card.glow-border > .edge-light {
  inset: 0;
  mix-blend-mode: normal;
  -webkit-mask-image: radial-gradient(
    220px circle at var(--glow-x, 50%) var(--glow-y, 50%),
    #000 0%,
    #000 42%,
    transparent 74%
  );
  mask-image: radial-gradient(
    220px circle at var(--glow-x, 50%) var(--glow-y, 50%),
    #000 0%,
    #000 42%,
    transparent 74%
  );
  transition: opacity 120ms linear;
}

.project-card.glow-border > .edge-light::before {
  inset: 0;
  box-shadow:
    inset 0 0 0 1px var(--glow-color-50),
    inset 0 0 5px 0 var(--glow-color-30),
    inset 0 0 14px 0 var(--glow-color-20),
    0 0 10px 0 var(--glow-color-20);
}

.project-dialog.glow-border > .edge-light,
.project-dialog.glow-border > .edge-light::before {
  inset: 0;
}

.project-dialog.glow-border::before,
.project-dialog.glow-border::after,
.project-dialog.glow-border > .edge-light {
  display: none;
}

.project-dialog.is-model-showcase > .edge-light {
  display: none;
}

.project-dialog.is-selling-showcase > .edge-light {
  display: none;
}

.project-dialog.is-effect-showcase > .edge-light {
  display: none;
}

.button:hover,
.process-item:hover {
  transform: translateY(-2px);
}

.button--primary {
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34);
}

.button--ghost {
  background: rgba(255, 255, 255, 0.035);
  color: var(--ink);
}

.hero-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
}

.hero-meta div {
  padding: 22px 24px;
  background: rgba(12, 12, 12, 0.68);
  backdrop-filter: blur(14px);
}

.hero-meta span,
.metric span,
.project-type,
.dialog-note {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
}

.hero-meta strong {
  display: block;
  margin-top: 4px;
  font-size: 1rem;
}

.hero-meta[data-meta-style="capsules"] {
  gap: 16px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.hero-meta[data-meta-style="capsules"] div {
  border: 1px solid rgba(244, 239, 231, 0.2);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(18, 18, 18, 0.68), rgba(8, 8, 8, 0.44));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 34px rgba(0, 0, 0, 0.24);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
  backdrop-filter: blur(20px) saturate(135%);
}

.section-block {
  max-width: 1280px;
  margin: 0 auto;
  padding: 60px 40px;
}

.amazon-aplus-section {
  border-bottom: 1px solid var(--line);
}

.amazon-aplus-heading {
  display: block;
}

.amazon-aplus-gallery {
  max-height: none;
  overflow: visible;
  padding: 0;
  border: 0;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 150ms ease, transform 150ms ease;
}

.amazon-aplus-gallery.is-switching {
  opacity: 0;
  transform: translateY(10px);
}

.project-card.amazon-aplus-item {
  appearance: none;
  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 380ms ease, transform 380ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.project-card.amazon-aplus-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.amazon-aplus-item:focus-visible {
  outline: 2px solid rgba(244, 239, 231, 0.88);
  outline-offset: 3px;
}

.amazon-aplus-item .work-visual {
  display: block;
  width: 100%;
}

.amazon-aplus-item .project-card__body {
  flex: 0 0 56px;
}

.amazon-aplus-item .project-type {
  color: var(--muted);
}

.amazon-aplus-item.has-error {
  min-height: 220px;
}

.amazon-aplus-item.has-error .work-visual::before {
  content: "IMAGE UNAVAILABLE";
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.amazon-aplus-item.has-error img {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .amazon-aplus-gallery,
  .amazon-aplus-item,
  .amazon-aplus-item img {
    transition-duration: 1ms !important;
  }

  .amazon-aplus-item {
    opacity: 1;
    transform: none;
  }
}

.section-heading {
  max-width: 760px;
  margin-bottom: 40px;
}

.section-heading h2,
.profile-copy h2,
.about-copy h2,
.contact-copy h2 {
  margin-bottom: 14px;
  font-size: 3.55rem;
  line-height: 1.05;
  font-weight: 680;
}

.section-heading p:not(.eyebrow),
.profile-desc,
.about-copy p,
.contact-copy p,
.process-item p,
.project-card__body p:not(.project-type) {
  color: var(--muted);
}

.profile-section {
  display: grid;
  grid-template-columns: minmax(240px, 0.62fr) minmax(0, 1.38fr);
  gap: 36px;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
}

.profile-section[data-avatar-layout="right"] {
  grid-template-columns: minmax(0, 1.38fr) minmax(240px, 0.62fr);
}

.profile-section[data-avatar-layout="right"] .profile-copy {
  grid-column: 1;
  grid-row: 1;
}

.profile-section[data-avatar-layout="right"] .profile-portrait-stage {
  grid-column: 2;
  grid-row: 1;
}

.profile-portrait-stage {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 41px;
  align-self: start;
  transition: margin-top 320ms cubic-bezier(0.2, 0.72, 0.2, 1);
}

.profile-section[data-profile-title-layout="left"] .profile-portrait-stage {
  margin-top: 41px;
}

#profile-title {
  transition: text-align 180ms ease;
}

.profile-section[data-profile-title-layout="right"] #profile-title {
  margin-left: auto;
  text-align: right;
}

html.is-editing #profile-title {
  cursor: default;
}

.profile-portrait {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 560px;
  overflow: visible;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.025);
  color: inherit;
  cursor: pointer;
  appearance: none;
}

.profile-portrait__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 20px;
}

.profile-nameplate {
  position: absolute;
  z-index: 20;
  display: block;
  width: max-content;
  max-width: calc(100% - 32px);
  box-sizing: border-box;
  padding: 4px 2px;
  color: var(--ink);
  left: 16px;
  bottom: 16px;
  translate: var(--profile-name-x, 0px) var(--profile-name-y, 0px);
}

.profile-nameplate__primary {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.profile-nameplate[data-text-align="center"] .profile-nameplate__primary {
  justify-content: center;
}

.profile-nameplate[data-text-align="right"] .profile-nameplate__primary {
  justify-content: flex-end;
}

.profile-nameplate[data-text-align="left"] { text-align: left; }
.profile-nameplate[data-text-align="center"] { text-align: center; }
.profile-nameplate[data-text-align="right"] { text-align: right; }

.profile-nameplate strong {
  font-size: clamp(2.5rem, 4vw, 4.4rem);
  line-height: 0.94;
  font-weight: 760;
  letter-spacing: -0.055em;
}

.profile-nameplate span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.08em;
}

.profile-nameplate .profile-nameplate__english {
  display: block;
  margin-top: 20px;
  opacity: 0.5;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-align: inherit;
}

.profile-nameplate.is-over-photo {
  padding: 4px 2px;
  border: 0;
  background: transparent;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.profile-nameplate.is-over-photo strong,
.profile-nameplate.is-over-photo span {
  color: #fff;
}

html.is-editing .profile-nameplate {
  cursor: move;
  user-select: none;
  touch-action: none;
  outline: 0;
}

.profile-nameplate.is-dragging {
  cursor: grabbing !important;
}

.profile-portrait img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 20px;
  object-fit: cover;
  filter: saturate(0.82) contrast(1.06) brightness(0.82);
  transition: filter 260ms ease, transform 420ms cubic-bezier(0.2, 0.72, 0.2, 1);
}

.profile-portrait:hover img {
  filter: saturate(0.9) contrast(1.06) brightness(0.9);
  transform: scale(1.015);
}

.profile-portrait:focus-visible {
  outline: 1px solid rgba(244, 239, 231, 0.82);
  outline-offset: 4px;
}

.profile-portrait__hint {
  position: absolute;
  z-index: 30;
  right: 16px;
  bottom: 16px;
  padding: 8px 12px;
  border: 1px solid rgba(244, 239, 231, 0.2);
  border-radius: 999px;
  background: rgba(7, 7, 7, 0.72);
  color: rgba(244, 239, 231, 0.9);
  font-family: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  backdrop-filter: blur(12px);
  cursor: pointer;
  appearance: none;
  translate: var(--resume-hint-x, 0px) var(--resume-hint-y, 0px);
}

.profile-portrait.glow-border {
  isolation: auto;
}

.profile-portrait.glow-border > .profile-portrait__hint {
  position: absolute;
  z-index: 30;
  pointer-events: auto;
}

html.is-editing .profile-portrait.glow-border > .profile-portrait__hint,
html.is-editing .profile-portrait__hint {
  pointer-events: auto;
  cursor: move;
  user-select: none;
  touch-action: none;
}

.profile-portrait__hint.is-dragging {
  cursor: grabbing !important;
}

.profile-portrait__hint.resume-hint--circle {
  display: grid;
  width: 48px;
  height: 48px;
  padding: 0;
  place-items: center;
  border-radius: 50%;
  font-size: 0;
}

.profile-portrait__hint.resume-hint--circle::before {
  content: "";
  width: 24px;
  height: 24px;
  background-image: var(--resume-icon-image, url("assets/resume-icon.svg"));
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transform: translateY(6px);
}

.profile-copy {
  align-self: center;
  padding: 8px 0;
}

.profile-copy h2 {
  max-width: 760px;
}

.profile-lead {
  max-width: 780px;
  margin-bottom: 28px;
  color: #d8d1c7;
  font-size: 1.2rem;
}

.profile-desc {
  max-width: 740px;
  margin-bottom: 36px;
  font-size: 1.02rem;
}

.profile-info {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  max-width: none;
  gap: 0;
  padding: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(14, 14, 14, 0.72);
}

.profile-info div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  height: auto;
  min-height: 0;
  padding: 14px 18px;
  background: transparent;
  text-align: left;
}

.profile-info span,
.profile-metrics span {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 760;
  letter-spacing: 0.04em;
}

.profile-info strong {
  display: block;
  margin-top: 7px;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.35;
}

.profile-info [data-profile-primary-font] {
  font-size: 1rem;
  font-weight: 700;
}

.experience-list {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.experience-list.resume-sortable-list {
  gap: 18px;
  margin-top: 0;
}

.experience-card {
  height: auto;
  min-height: 0;
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  background:
    linear-gradient(135deg, rgba(244, 239, 231, 0.045), transparent 42%),
    rgba(12, 12, 12, 0.72);
}

.experience-card__title {
  margin: 0;
  color: var(--ink);
  font-size: 1.16rem;
  line-height: 1.35;
}

.experience-card--career {
  padding-block: 16px;
}

.experience-card--career .experience-entry {
  gap: 8px;
  padding-block: 12px;
}

.experience-card--career .experience-entry:first-child {
  padding-top: 0;
}

.experience-card--career .experience-entry__responsibility p {
  font-size: 0.9rem;
  letter-spacing: -0.01em;
}

.experience-entry {
  display: grid;
  gap: 14px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(244, 239, 231, 0.12);
}

.experience-entry:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.experience-entry.is-last-visible {
  padding-bottom: 0;
  border-bottom: 0;
}

.experience-entry[hidden] {
  display: none !important;
}

html.is-editing .experience-card--career {
  cursor: context-menu;
}

html.is-editing [data-resume-block-id] {
  cursor: context-menu;
}

.is-resume-block-deleted {
  display: none !important;
}

.experience-entry__head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 18px;
  align-items: baseline;
}

.experience-entry__head strong,
.experience-entry__head time {
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 720;
  line-height: 1.5;
}

.experience-entry__head time {
  color: var(--muted);
  white-space: nowrap;
  text-align: right;
}

.experience-entry__responsibility {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

html[lang="en"] .experience-entry__responsibility {
  grid-template-columns: 116px minmax(0, 1fr);
}

.experience-entry__responsibility strong {
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.72;
}

.experience-entry__responsibility p {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.72;
}

.experience-card ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.career-skill-list {
  margin-top: 18px !important;
}

.career-skill-list li {
  position: relative;
  padding-left: 20px;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.72;
}

.career-skill-list li:last-child {
  font-size: 0.9rem;
  letter-spacing: -0.01em;
}

.career-skill-list li::before {
  content: "";
  position: absolute;
  top: 0.68em;
  left: 0;
  width: 7px;
  height: 7px;
  border: 1px solid var(--accent);
  transform: rotate(45deg);
}

.career-skill-copy {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.78;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.profile-metrics {
  display: grid;
  align-content: stretch;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
}

.profile-metrics div {
  min-height: 138px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 24px;
  background: rgba(12, 12, 12, 0.76);
}

.profile-metrics strong {
  font-size: clamp(3rem, 5.4vw, 4.8rem);
  line-height: 0.92;
  font-weight: 720;
}

.contact-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
  max-width: 760px;
}

.contact-list div {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  background: rgba(12, 12, 12, 0.68);
}

.contact-list span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 780;
}

.contact-list strong {
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.ai-video-section {
  max-width: 1360px;
}

.ai-video-heading {
  position: relative;
  left: clamp(0px, calc((100vw - 1280px) / 2), 40px);
  max-width: 760px;
  margin-bottom: 40px;
}

.ai-video-heading:not([data-title-align="left"]) {
  left: 0;
}

.ai-video-heading h2 {
  margin-bottom: 14px;
  font-size: 4.8rem;
  line-height: 0.95;
  font-weight: 700;
}

.ai-video-heading p:not(.eyebrow) {
  color: var(--muted);
}

.ai-video-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px;
  align-items: stretch;
}

.ai-video-editor-actions {
  display: none;
  justify-content: flex-end;
  gap: 10px;
  margin: 0 0 18px;
}

html.is-editing .ai-video-editor-actions {
  display: flex;
}

.ai-video-editor-actions button,
.ai-video-grid__delete {
  border: 1px solid rgba(245, 240, 233, 0.3);
  border-radius: 999px;
  background: rgba(16, 16, 16, 0.9);
  color: #f5f0e9;
  cursor: pointer;
  font: inherit;
}

.ai-video-editor-actions button {
  min-height: 40px;
  padding: 8px 16px;
}

.ai-video-editor-actions button:hover,
.ai-video-editor-actions button:focus-visible,
.ai-video-grid__delete:hover,
.ai-video-grid__delete:focus-visible {
  border-color: #f5f0e9;
  background: #f5f0e9;
  color: #111;
}

.ai-video-screen {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(244, 239, 231, 0.18);
  border-radius: var(--radius);
  background: #040404;
  aspect-ratio: 16 / 9;
  box-shadow: 0 36px 110px rgba(0, 0, 0, 0.52);
}

#aiVideoPlayer {
  width: 100%;
  height: 100%;
  display: block;
  background: #040404;
  object-fit: cover;
}

.ai-video-index {
  position: absolute;
  top: 22px;
  left: 24px;
  z-index: 2;
  color: rgba(244, 239, 231, 0.78);
  font-size: 0.9rem;
  font-weight: 760;
  pointer-events: none;
}

.ai-video-line {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  background: rgba(244, 239, 231, 0.22);
}

.ai-video-line--top {
  top: 28px;
  right: 24px;
  left: 72px;
  height: 1px;
}

.ai-video-line--right {
  top: 28px;
  right: 24px;
  width: 1px;
  height: 42%;
  transform: skewX(-8deg);
  transform-origin: top;
}

.ai-video-line--bottom {
  right: 24px;
  bottom: 32px;
  width: 36%;
  height: 1px;
}

.ai-video-list {
  display: grid;
  gap: 10px;
  align-content: start;
}

.ai-video-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 76px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.ai-video-item:hover {
  transform: translateY(-2px);
  border-color: rgba(244, 239, 231, 0.34);
}

.ai-video-item.is-active {
  border-color: rgba(244, 239, 231, 0.72);
  background: rgba(244, 239, 231, 0.1);
}

.ai-video-item span,
.ai-video-item em {
  color: var(--muted);
  font-style: normal;
  font-size: 0.78rem;
}

.ai-video-item strong {
  overflow: hidden;
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-video-grid {
  display: none;
}

.ai-video-stage.ai-video-layout--grid {
  display: block;
}

.ai-video-stage.ai-video-layout--grid > .ai-video-screen,
.ai-video-stage.ai-video-layout--grid > .ai-video-list {
  display: none;
}

.ai-video-stage.ai-video-layout--grid > .ai-video-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.ai-video-stage.ai-video-layout--grid > .ai-video-grid.ai-video-grid--three-columns {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ai-video-grid__item {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(244, 239, 231, 0.16);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
}

.ai-video-grid__delete {
  display: none;
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  padding: 6px 11px;
  font-size: 12px;
}

html.is-editing .ai-video-grid__delete {
  display: block;
}

.ai-video-grid__item video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #040404;
  object-fit: cover;
}

.ai-video-grid__item strong {
  display: block;
  overflow: hidden;
  padding: 14px 15px 16px;
  color: var(--ink);
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-video-stage.ai-video-layout--bottom {
  grid-template-columns: minmax(0, 1fr);
}

.ai-video-stage.ai-video-layout--bottom > .ai-video-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ai-video-stage.ai-video-layout--bottom .ai-video-item {
  grid-template-columns: 34px minmax(0, 1fr);
  min-height: 68px;
}

.ai-video-stage.ai-video-layout--bottom .ai-video-item em {
  display: none;
}

.site-showcase-section {
  max-width: 1360px;
}

.site-showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  opacity: 1;
  transform: none;
}

.site-showcase-card {
  position: relative;
  display: block;
  height: clamp(280px, 26vw, 390px);
  overflow: hidden;
  border: 1px solid rgba(244, 239, 231, 0.16);
  border-radius: var(--radius);
  background: #050505;
  cursor: zoom-in;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.4);
}

.site-showcase-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top center;
  opacity: 0.86;
  filter: saturate(0.92) contrast(1.08);
  transition: opacity 180ms ease, scale 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.site-showcase-card:hover img {
  opacity: 1;
  scale: 1.012;
}

.site-showcase-card::before {
  content: "";
  position: absolute;
  inset: 16px;
  z-index: 1;
  border: 1px solid rgba(244, 239, 231, 0.22);
  pointer-events: none;
}

.site-showcase-card::after {
  content: "";
  position: absolute;
  inset: auto 16px 18px;
  z-index: 1;
  height: 1px;
  background: rgba(244, 239, 231, 0.22);
  pointer-events: none;
}

.site-showcase-card span,
.site-showcase-card strong {
  position: absolute;
  z-index: 2;
  left: 24px;
  color: var(--ink);
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.66);
}

.site-showcase-card span {
  top: 22px;
  font-size: 0.9rem;
  font-weight: 760;
}

.site-showcase-card strong {
  bottom: 30px;
  font-size: clamp(1.25rem, 2vw, 1.9rem);
  line-height: 1;
}

.site-showcase-card em {
  position: absolute;
  right: 24px;
  bottom: 30px;
  z-index: 2;
  color: rgba(244, 239, 231, 0.76);
  font-size: 0.88rem;
  font-style: normal;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.66);
}

.filter-bar {
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
}

#work[data-filter-align="center"] .filter-bar {
  justify-content: center;
}

.filter-button {
  min-width: 84px;
  height: 48px;
  padding: 0 20px;
  border: 1px solid rgba(244, 239, 231, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(244, 239, 231, 0.72);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 560;
  letter-spacing: 0.015em;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms ease;
}

.filter-button:hover {
  border-color: rgba(244, 239, 231, 0.48);
  background: rgba(255, 255, 255, 0.09);
  color: var(--ink);
  transform: translateY(-1px);
}

.filter-button:focus-visible {
  outline: 1px solid rgba(244, 239, 231, 0.82);
  outline-offset: 3px;
}

.filter-button.is-active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
}

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

#work .amazon-aplus-gallery {
  display: contents;
}

#work .amazon-aplus-gallery.is-switching {
  opacity: 1;
  transform: none;
}

#work .work-grid.is-amazon-layout {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 6vw, 88px);
  row-gap: 42px;
  align-items: start;
}

#work .work-grid.is-amazon-layout .amazon-aplus-item {
  display: flex;
  min-height: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  flex-direction: column;
  opacity: 1;
  transform: none;
  transition: none;
}

/* A+ has its own render transition; keep it independent from the generic GSAP card reveal. */
#work .work-grid.is-amazon-layout .amazon-aplus-item.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

#work .work-grid.is-amazon-layout .amazon-aplus-item.is-visible .work-visual {
  opacity: 1 !important;
  visibility: visible !important;
  clip-path: inset(0 0 0 0) !important;
  transform: none !important;
}

#work .work-grid.is-amazon-layout .amazon-aplus-item:hover {
  border-color: transparent;
  box-shadow: none;
}

#work .work-grid.is-amazon-layout .amazon-aplus-item .work-visual {
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#work .work-grid.is-amazon-layout .amazon-aplus-item .work-visual::before,
#work .work-grid.is-amazon-layout .amazon-aplus-item .work-visual::after,
#work .work-grid.is-amazon-layout .amazon-aplus-item .visual-wave,
#work .work-grid.is-amazon-layout .amazon-aplus-item .visual-track,
#work .work-grid.is-amazon-layout .amazon-aplus-item > .edge-light {
  display: none;
}

#work .work-grid.is-amazon-layout .amazon-aplus-item .project-preview,
#work .work-grid.is-amazon-layout .amazon-aplus-item:hover .project-preview {
  opacity: 1;
  transform: none;
  transition: none;
}

#work .work-grid.is-amazon-layout .amazon-aplus-item .project-card__body {
  display: grid;
  height: auto;
  min-height: 0;
  gap: 7px;
  padding: 16px 2px 0;
}

#work .work-grid.is-amazon-layout .amazon-project-meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.07em;
}

#work .work-grid.is-amazon-layout .amazon-project-meta span:last-child {
  white-space: nowrap;
}

#work .work-grid.is-amazon-layout .amazon-aplus-item .project-type {
  color: var(--ink);
  font-size: clamp(1.1rem, 1.55vw, 1.35rem);
  font-weight: 650;
  line-height: 1.2;
}

#work .work-grid.is-amazon-layout .amazon-project-summary {
  display: block;
  max-width: 34rem;
  margin-top: 22px;
  padding-left: 16px;
  border-left: 1px solid rgba(196, 170, 112, 0.48);
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.8;
  text-align: left;
}

#work .work-grid.is-amazon-layout .amazon-aplus-item:nth-child(even) .amazon-project-summary {
  order: -1;
  margin: 0 10% 24px 0;
}

#work .work-grid.is-amazon-layout .amazon-aplus-item:nth-child(even) .project-card__body {
  order: -2;
  padding: 0 2px 14px;
}

#work .work-grid.is-detail-layout {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 6vw, 88px);
  row-gap: 42px;
  align-items: start;
}

#work .work-grid.is-detail-layout .detail-editorial-item {
  display: flex;
  min-height: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  flex-direction: column;
  opacity: 1;
  transform: none;
  transition: none;
}

#work .work-grid.is-detail-layout .detail-editorial-item:hover {
  border-color: transparent;
  box-shadow: none;
}

#work .work-grid.is-detail-layout .detail-editorial-item--walnut {
  grid-column: 1;
  grid-row: 1;
}

#work .work-grid.is-detail-layout .detail-editorial-item--abs {
  grid-column: 2;
  grid-row: 1;
}

#work .work-grid.is-detail-layout .detail-editorial-item--fashion {
  grid-column: 1;
  grid-row: 2;
}

#work .work-grid.is-detail-layout .detail-editorial-item--tea {
  grid-column: 2;
  grid-row: 2;
}

#work .work-grid.is-detail-layout .detail-editorial-item .work-visual {
  overflow: hidden;
  border: 0 !important;
  border-radius: 0;
  background: transparent;
  box-shadow: none !important;
  outline: 0;
}

#work .work-grid.is-detail-layout .detail-editorial-item .work-visual::before,
#work .work-grid.is-detail-layout .detail-editorial-item .work-visual::after,
#work .work-grid.is-detail-layout .detail-editorial-item.glow-border::before,
#work .work-grid.is-detail-layout .detail-editorial-item.glow-border::after,
#work .work-grid.is-detail-layout .detail-editorial-item .visual-wave,
#work .work-grid.is-detail-layout .detail-editorial-item .visual-track,
#work .work-grid.is-detail-layout .detail-editorial-item > .edge-light {
  display: none;
}

#work .work-grid.is-detail-layout .detail-editorial-item .project-preview,
#work .work-grid.is-detail-layout .detail-editorial-item:hover .project-preview {
  opacity: 1;
  transform: none;
  transition: none;
}

#work .work-grid.is-detail-layout .detail-editorial-item .project-card__body {
  display: grid;
  height: auto;
  min-height: 0;
  gap: 7px;
  padding: 16px 2px 0;
}

#work .work-grid.is-detail-layout .detail-editorial-item .project-type {
  display: block;
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.07em;
}

#work .work-grid.is-detail-layout .detail-editorial-item h3 {
  display: block;
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.1rem, 1.55vw, 1.35rem);
  font-weight: 650;
  line-height: 1.2;
}

#work .work-grid.is-detail-layout .detail-editorial-item .detail-project-summary {
  display: block;
  max-width: 34rem;
  margin: 22px 0 0;
  padding-left: 16px;
  border-left: 1px solid rgba(196, 170, 112, 0.48);
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.8;
  text-align: left;
}

#work .work-grid.is-detail-layout .detail-editorial-item .text-button {
  display: none;
}

#work .work-grid.is-detail-layout .detail-editorial-item--offset .detail-project-summary {
  order: initial;
  margin: 22px 0 0;
}

#work .work-grid.is-detail-layout .detail-editorial-item--offset .project-card__body {
  order: -2;
  padding: 0 2px 14px;
}

.project-card {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.project-card:first-child {
  grid-column: auto;
}

.project-card[data-project="model"] {
  width: 100%;
  max-width: 620px;
  justify-self: start;
}

.project-card:hover {
  border-color: rgba(244, 239, 231, 0.34);
  box-shadow: var(--shadow);
}

.project-card.is-hidden {
  display: none;
}

.project-card.is-user-deleted {
  display: none !important;
}

.project-card--site-item {
  grid-column: auto;
  min-height: 0;
  height: auto;
  aspect-ratio: 1 / 1.08;
}

.work-grid .site-showcase-card {
  height: auto;
}

.work-grid .site-showcase-card::before {
  inset: 12px;
}

.work-grid .site-showcase-card::after {
  right: 12px;
  bottom: 14px;
  left: 12px;
}

.work-grid .site-showcase-card span,
.work-grid .site-showcase-card strong {
  left: 16px;
}

.work-grid .site-showcase-card span {
  top: 16px;
}

.work-grid .site-showcase-card strong {
  bottom: 24px;
  font-size: 1.08rem;
}

.work-grid .site-showcase-card em {
  right: 16px;
  bottom: 24px;
  font-size: 0.75rem;
}

#work .work-grid .site-showcase-card > strong {
  position: absolute;
  right: 112px;
  left: 16px;
  width: auto;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

#work .work-grid .site-showcase-card > em {
  position: absolute;
  right: 16px;
  left: auto;
  width: auto;
  white-space: nowrap;
}

.work-visual {
  position: relative;
  min-height: 0;
  overflow: hidden;
  aspect-ratio: var(--preview-ratio, 1 / 1.08);
  background:
    radial-gradient(circle at 50% 18%, rgba(244, 239, 231, 0.08), transparent 42%),
    #050505;
}

.project-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.project-preview {
  object-fit: contain;
  opacity: 0.9;
  filter: saturate(0.92) contrast(1.08);
  transition: opacity 180ms ease, scale 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.project-card:hover .project-preview {
  opacity: 1;
  scale: 1.012;
}

#work .project-card[data-category="packageBox"] .work-visual {
  aspect-ratio: 4 / 3;
}

#work .project-card[data-category="packageBox"] .project-preview {
  object-fit: cover;
}

.work-visual::before,
.work-visual::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 16px;
  border: 1px solid rgba(244, 239, 231, 0.18);
  pointer-events: none;
}

.work-visual::after {
  inset: auto 16px 20px 16px;
  height: 22px;
  border-width: 0 0 1px;
  background:
    linear-gradient(90deg, rgba(244, 239, 231, 0.22) 0 12%, transparent 12% 16%, rgba(244, 239, 231, 0.16) 16% 48%, transparent 48% 52%, rgba(196, 170, 112, 0.28) 52% 70%, transparent 70%);
}

.work-visual--coral {
  background: #17100d;
}

.work-visual--mint {
  background: #101612;
}

.work-visual--sky {
  background: #0d1117;
}

.work-visual--yellow {
  background: #17140d;
}

.work-visual--ink {
  background: #090909;
  color: var(--ink);
}

.work-visual--site-item {
  background:
    radial-gradient(circle at 18% 12%, rgba(244, 239, 231, 0.09), transparent 34%),
    linear-gradient(135deg, rgba(196, 170, 112, 0.08), transparent 44%),
    #070707;
  color: var(--ink);
}

.work-visual--ink::before,
.work-visual--ink::after,
.work-visual--site-item::before {
  border-color: rgba(255, 255, 255, 0.25);
}

.work-visual--site-item::after,
.work-visual--site-item .visual-wave,
.work-visual--site-item .visual-track {
  display: none;
}

.project-preview--site {
  object-fit: cover;
  object-position: top center;
}

.visual-label {
  position: absolute;
  z-index: 2;
  top: 18px;
  left: 20px;
  font-size: 0.86rem;
  line-height: 1;
  font-weight: 760;
  color: rgba(244, 239, 231, 0.74);
  text-shadow: 0 8px 26px rgba(0, 0, 0, 0.62);
}

.visual-label,
.site-showcase-card > span {
  display: none;
}

.work-visual--ink .visual-label {
  color: rgba(244, 239, 231, 0.74);
  text-shadow: 0 8px 26px rgba(0, 0, 0, 0.62);
}

.work-visual--ink .visual-track,
.work-visual--site-item .visual-track {
  background: var(--ink);
}

.visual-wave {
  position: absolute;
  z-index: 2;
  top: 24px;
  right: 18px;
  width: 24%;
  height: 34%;
  border: 2px solid currentColor;
  border-left: 0;
  opacity: 0.2;
  transform: skewX(-10deg);
  animation: waveNudge 3.6s ease-in-out infinite;
}

.visual-track {
  position: absolute;
  z-index: 2;
  right: 18px;
  bottom: 20px;
  width: 10px;
  height: 30px;
  border-radius: 999px;
  background: rgba(244, 239, 231, 0.42);
  animation: trackPlayhead 4s ease-in-out infinite;
}

.project-card__body {
  display: flex;
  height: 56px;
  align-items: center;
  justify-content: flex-start;
  padding: 0 18px;
  text-align: left;
}

.project-card__body h3 {
  display: none;
}

.project-card__body p:not(.project-type) {
  display: none;
}

.project-card__body .project-type {
  width: 100%;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1;
}

.text-button {
  display: none;
}

.text-button::after {
  content: " ->";
}

.about-section {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(360px, 0.96fr);
  gap: 64px;
  align-items: stretch;
}

.about-copy {
  align-self: center;
}

.about-copy p {
  max-width: 720px;
  font-size: 1.08rem;
}

.delivery-panel {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.018);
}

.delivery-pillar {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 122px;
  padding: 22px 24px;
}

.delivery-pillar + .delivery-pillar {
  border-top: 1px solid var(--line);
}

.delivery-pillar > span,
.workflow-step__content > span,
.delivery-card > span {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 24px;
  border: 1px solid rgba(207, 164, 91, 0.5);
  color: #d0aa68;
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1;
}

.delivery-pillar h3,
.workflow-step h3,
.delivery-card h3 {
  margin: 0 0 6px;
  font-size: 1.08rem;
}

.delivery-pillar p,
.workflow-step p,
.delivery-card p,
.section-intro {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.65;
}

.process-section {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-intro {
  max-width: 640px;
}

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

.workflow-step {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.018);
  transition: background-color 180ms ease, border-color 180ms ease;
}

.workflow-step:hover,
.workflow-step:focus-within {
  border-color: rgba(207, 164, 91, 0.38);
  background: rgba(255, 255, 255, 0.035);
}

.workflow-step__visual {
  display: grid;
  min-height: 252px;
  place-items: center;
  overflow: hidden;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  background: #0a0a0a;
}

.workflow-step__visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.workflow-step__content {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 18px;
}

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

.delivery-card {
  display: flex;
  min-height: 258px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.018);
  cursor: pointer;
  transition: transform 220ms cubic-bezier(0.2, 0.72, 0.2, 1), border-color 220ms ease, background-color 220ms ease;
}

.delivery-card:focus-visible {
  outline: 2px solid rgba(210, 163, 82, 0.82);
  outline-offset: 4px;
}

.delivery-card:hover,
.delivery-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(207, 164, 91, 0.46);
  background: rgba(255, 255, 255, 0.032);
}

.delivery-card > span {
  min-width: 0;
  height: auto;
  padding-bottom: 8px;
  border: 0;
  border-bottom: 1px solid rgba(207, 164, 91, 0.52);
  color: #d0aa68;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
}

.delivery-card h3 {
  margin: 4px 0 2px;
  font-size: 1.24rem;
}

.delivery-card p {
  max-width: 34ch;
}

.delivery-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}

.delivery-card__tags li {
  padding: 5px 9px;
  border: 1px solid rgba(207, 164, 91, 0.36);
  border-radius: 999px;
  color: rgba(244, 239, 231, 0.72);
  font-size: 0.72rem;
  line-height: 1;
}

#advantages .delivery-pillar > span,
#skills .delivery-card > span {
  min-width: 48px;
  height: auto;
  padding: 0;
  border: 0;
  color: #d0aa68;
  font-family: "DIN Alternate", "DIN Condensed", Bahnschrift, "Arial Narrow", sans-serif;
  font-size: 40px;
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.055em;
}

/* Advantages: three saved display styles. */
.advantages-section[data-advantages-layout="cards"],
.advantages-section[data-advantages-layout="timeline"] {
  display: block;
}

.advantages-section[data-advantages-layout="cards"] .about-copy,
.advantages-section[data-advantages-layout="timeline"] .about-copy {
  max-width: 760px;
  margin-bottom: 36px;
}

.advantages-section[data-advantages-layout="cards"] .delivery-panel {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  overflow: visible;
  border: 0;
  background: transparent;
}

.advantages-section[data-advantages-layout="cards"] .delivery-pillar {
  min-height: 238px;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.018);
}

.advantages-section[data-advantages-layout="cards"] .delivery-pillar + .delivery-pillar {
  border-top: 1px solid var(--line);
}

.advantages-section[data-advantages-layout="cards"] .delivery-pillar div {
  margin-top: auto;
}

.advantages-section[data-advantages-layout="timeline"] .delivery-panel {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: visible;
  border-width: 1px 0;
  border-radius: 0;
  background: transparent;
}

.advantages-section[data-advantages-layout="timeline"] .delivery-pillar {
  min-height: 210px;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px 26px;
}

.advantages-section[data-advantages-layout="timeline"] .delivery-pillar + .delivery-pillar {
  border-top: 0;
  border-left: 1px solid var(--line);
}

html.is-editing #advantages-title {
  cursor: context-menu;
}

/* Core-skills editor: alternate layout and contextual actions. */
.skills-section[data-skills-layout="list"] .delivery-matrix {
  grid-template-columns: 1fr;
  gap: 10px;
}

.skills-section[data-skills-layout="list"] .delivery-card {
  display: grid;
  min-height: 0;
  grid-template-columns: 54px minmax(180px, 0.62fr) minmax(0, 1.38fr);
  grid-template-rows: auto auto;
  gap: 10px 22px;
  align-items: start;
  padding: 20px 22px;
}

.skills-section[data-skills-layout="list"] .delivery-card > span {
  grid-row: 1 / -1;
  margin-top: 4px;
}

.skills-section[data-skills-layout="list"] .delivery-card h3 {
  grid-column: 2;
  margin: 0;
}

.skills-section[data-skills-layout="list"] .delivery-card p {
  grid-column: 3;
  grid-row: 1 / -1;
  max-width: 58ch;
}

.skills-section[data-skills-layout="list"] .delivery-card__tags {
  grid-column: 2;
  margin: 0;
}

.skills-section[data-skills-layout="staggered"] .delivery-matrix {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding-bottom: 42px;
}

.skills-section[data-skills-layout="staggered"] .delivery-card {
  min-height: 230px;
}

.skills-section[data-skills-layout="staggered"] .delivery-card:nth-child(even) {
  translate: 0 38px;
}

.skills-section[data-skills-layout="carousel"] .delivery-matrix {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 2px 2px 18px;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-color: rgba(210, 163, 82, 0.55) rgba(255, 255, 255, 0.05);
  scrollbar-width: thin;
}

.skills-section[data-skills-layout="carousel"] .delivery-card {
  min-height: 280px;
  flex: 0 0 min(390px, 82vw);
  scroll-snap-align: start;
}

.skills-carousel-controls {
  display: none;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.skills-section[data-skills-layout="carousel"] .skills-carousel-controls {
  display: flex;
}

.skills-carousel-controls button {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(210, 163, 82, 0.42);
  border-radius: 50%;
  color: #f4efe7;
  background: rgba(255, 255, 255, 0.025);
  font-size: 20px;
  cursor: pointer;
}

.skills-carousel-controls button:hover,
.skills-carousel-controls button:focus-visible {
  color: #d2a352;
  border-color: #d2a352;
  outline: none;
}

.delivery-card.is-skill-deleted {
  display: none !important;
}

html.is-editing #skills .delivery-card {
  cursor: context-menu;
  user-select: none;
}

.skill-context-menu,
.advantages-layout-menu {
  position: fixed;
  z-index: 110;
  display: grid;
  width: 224px;
  overflow: hidden;
  border: 1px solid rgba(210, 163, 82, 0.54);
  border-radius: 14px;
  color: #f4efe7;
  background: rgba(10, 10, 10, 0.94);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(16px);
}

.skill-context-menu[hidden],
.advantages-layout-menu[hidden],
html:not(.is-editing) .skill-context-menu,
html:not(.is-editing) .advantages-layout-menu,
.skill-context-menu__card-actions[hidden] {
  display: none;
}

.skill-context-menu__card-actions {
  display: grid;
}

.skill-context-menu span,
.advantages-layout-menu span {
  padding: 10px 14px 7px;
  color: rgba(244, 239, 231, 0.48);
  font-size: 10px;
  letter-spacing: 0.14em;
}

.skill-context-menu button,
.advantages-layout-menu button {
  padding: 12px 14px;
  border: 0;
  border-top: 1px solid rgba(244, 239, 231, 0.08);
  color: inherit;
  background: transparent;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.skill-context-menu button:hover,
.skill-context-menu button:focus-visible,
.skill-context-menu button.is-active,
.advantages-layout-menu button:hover,
.advantages-layout-menu button:focus-visible,
.advantages-layout-menu button.is-active {
  color: #d2a352;
  background: rgba(210, 163, 82, 0.1);
  outline: none;
}

@media (max-width: 680px) {
  .advantages-section[data-advantages-layout="cards"] .delivery-panel,
  .advantages-section[data-advantages-layout="timeline"] .delivery-panel {
    grid-template-columns: 1fr;
  }

  .advantages-section[data-advantages-layout="cards"] .delivery-pillar,
  .advantages-section[data-advantages-layout="timeline"] .delivery-pillar {
    min-height: 0;
    flex-direction: row;
    padding: 20px 18px;
  }

  .advantages-section[data-advantages-layout="timeline"] .delivery-pillar + .delivery-pillar {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .advantages-section[data-advantages-layout="cards"] .delivery-pillar div {
    margin-top: 0;
  }

  .skills-section[data-skills-layout="list"] .delivery-card {
    grid-template-columns: 38px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 9px 12px;
    padding: 18px;
  }

  .skills-section[data-skills-layout="list"] .delivery-card > span {
    grid-column: 1;
    grid-row: 1 / -1;
  }

  .skills-section[data-skills-layout="list"] .delivery-card h3,
  .skills-section[data-skills-layout="list"] .delivery-card p,
  .skills-section[data-skills-layout="list"] .delivery-card__tags {
    grid-column: 2;
    grid-row: auto;
  }

  .skills-section[data-skills-layout="staggered"] .delivery-matrix {
    grid-template-columns: 1fr;
    padding-bottom: 0;
  }

  .skills-section[data-skills-layout="staggered"] .delivery-card:nth-child(even) {
    translate: 0;
  }

  .skills-section[data-skills-layout="carousel"] .delivery-card {
    flex-basis: min(310px, 84vw);
  }
}

.contact-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.88fr);
  gap: 64px;
  align-items: center;
}

.contact-section[data-contact-layout="left"] {
  grid-template-columns: minmax(360px, 0.88fr) minmax(0, 1fr);
}

.contact-section[data-contact-layout="left"] .contact-console {
  grid-column: 1;
  grid-row: 1;
}

.contact-section[data-contact-layout="left"] .contact-copy {
  grid-column: 2;
  grid-row: 1;
}

.contact-section[data-contact-layout="horizontal"] {
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: stretch;
}

.contact-section[data-contact-layout="horizontal"] .contact-copy {
  max-width: 820px;
}

.contact-section[data-contact-layout="horizontal"] .contact-console .contact-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.contact-section[data-contact-layout="horizontal"] .contact-console .contact-list div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 8px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.contact-section[data-contact-layout="horizontal"] .contact-console .contact-list div:last-child {
  border-right: 0;
}

.contact-section[data-contact-layout="horizontal"] .contact-console .contact-list strong {
  text-align: left;
}

.contact-section[data-contact-layout="horizontal"] .contact-console .contact-actions {
  width: min(100%, 520px);
  margin-left: auto;
}

.contact-section[data-contact-layout="centered"] {
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: stretch;
  text-align: center;
}

.contact-section[data-contact-layout="centered"] .contact-copy {
  max-width: 820px;
  margin-inline: auto;
}

.contact-section[data-contact-layout="centered"] .contact-copy p {
  max-width: 720px;
  margin-inline: auto;
}

.contact-section[data-contact-layout="centered"] .contact-console {
  width: min(100%, 680px);
  margin-inline: auto;
}

.contact-section[data-contact-layout="centered"] .contact-list .contact-item {
  min-height: 92px;
  grid-template-columns: 1fr;
  gap: 5px;
  text-align: center;
}

.contact-section[data-contact-layout="centered"] .contact-list strong {
  text-align: center;
}

.contact-copy p {
  margin-bottom: 0;
  color: var(--muted);
}

.contact-console {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.018);
}

.contact-console .contact-list {
  display: block;
  margin: 0;
  max-width: none;
  background: transparent;
}

.contact-console .contact-list div {
  display: grid;
  grid-template-columns: minmax(108px, 0.42fr) minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  min-height: 66px;
  padding: 14px 20px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: #111;
}

.contact-console .contact-list span {
  margin: 0;
}

.contact-console .contact-list strong {
  text-align: right;
}

.contact-console .contact-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 16px;
}

.contact-console .contact-actions .button {
  width: 100%;
}

.contact-section .edge-light {
  display: none;
}

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 32px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.92rem;
}

.project-dialog {
  position: fixed;
  inset: 16px 0 auto;
  margin: auto;
  width: min(1040px, calc(100vw - 32px));
  max-height: calc(100svh - 32px);
  overflow: auto;
  overflow-x: hidden;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.project-dialog.is-viewing-media {
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100svh;
  max-height: 100svh;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #030303;
  box-shadow: none;
}

.project-dialog.is-viewing-media::backdrop {
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(12px);
}

.project-dialog::backdrop {
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
}

.dialog-head {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 16px;
  background: linear-gradient(180deg, var(--surface) 68%, rgba(16, 16, 16, 0));
}

.dialog-close {
  margin-left: auto;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--ink);
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
}

.dialog-visual {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin: 18px 20px;
  min-width: 0;
  border-radius: 0;
  background: transparent;
}

.dialog-visual--resume {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  width: min(calc(100% - 40px), 860px);
  margin: 20px 20px 56px;
}

.dialog-visual--resume .dialog-frame,
.dialog-visual--resume .dialog-frame.is-portrait {
  grid-column: auto;
  border: 0;
  border-radius: 3px;
  background: #f5f5f4;
  box-shadow: none;
}

.dialog-visual--resume .dialog-media {
  width: 100%;
  height: auto;
  background: #f5f5f4;
  object-fit: contain;
}

.dialog-visual--resume .dialog-frame__index,
.dialog-visual--resume .dialog-frame__line,
.dialog-visual--resume .edge-light {
  display: none;
}

.dialog-visual--site {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.dialog-visual--site .dialog-frame.is-landscape,
.dialog-visual--site .dialog-frame.is-portrait {
  grid-column: auto;
}

.dialog-visual--site .dialog-frame {
  background:
    radial-gradient(circle at 50% 0%, rgba(244, 239, 231, 0.05), transparent 46%),
    #080808;
}

.dialog-visual--site .dialog-media {
  height: clamp(260px, 34vw, 380px);
  padding: 10px;
  object-fit: contain;
}

.dialog-visual--site .dialog-frame figcaption {
  border-top: 1px solid rgba(244, 239, 231, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.dialog-visual--amazon {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
  width: min(calc(100% - 40px), 641px);
  margin: 24px auto 56px;
}

.dialog-visual--amazon .dialog-frame.amazon-aplus-dialog-frame,
.dialog-visual--amazon .dialog-frame.is-portrait {
  grid-column: auto;
  border: 0;
  border-radius: 6px;
  background: #080808;
  box-shadow: none;
}

.dialog-visual--amazon .dialog-frame.amazon-aplus-dialog-frame.is-wide {
  grid-column: 1 / -1;
}

.dialog-visual--amazon .dialog-media {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.dialog-visual--amazon .amazon-aplus-dialog-frame--cooker-feature .dialog-media {
  aspect-ratio: 641 / 526;
  object-fit: cover;
}

.dialog-visual--amazon .amazon-aplus-dialog-frame--massage-feature .dialog-media {
  aspect-ratio: 641 / 789;
  object-fit: cover;
}

.dialog-visual--amazon .amazon-aplus-dialog-frame--aroma-feature .dialog-media {
  aspect-ratio: 641 / 526;
  object-fit: cover;
}

.dialog-visual--amazon .edge-light,
.dialog-visual--amazon .dialog-frame__index,
.dialog-visual--amazon .dialog-frame__line {
  display: none;
}

.dialog-visual--model {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 392px));
  justify-content: center;
  align-items: start;
  column-gap: 34px;
  width: min(100% - 40px, 818px);
  margin: 24px auto 56px;
}

.model-showcase-column {
  min-width: 0;
}

.model-showcase-group {
  margin-top: 44px;
}

.model-showcase-group:first-child {
  margin-top: 0;
}

.model-showcase-title {
  margin: 0 0 14px;
  color: rgba(244, 239, 231, 0.86);
  font-size: clamp(0.84rem, 1.5vw, 0.98rem);
  font-weight: 720;
  letter-spacing: 0;
}

.model-showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.dialog-visual--model .dialog-frame,
.dialog-visual--model .dialog-frame.is-landscape,
.dialog-visual--model .dialog-frame.is-portrait {
  grid-column: auto;
  border: 0;
  border-radius: 8px;
  background: #050505;
  box-shadow: none;
}

.dialog-visual--model .model-showcase-frame--hero,
.dialog-visual--model .model-showcase-frame--hero.is-landscape,
.dialog-visual--model .model-showcase-frame--hero.is-portrait {
  grid-column: 1 / -1;
}

.dialog-visual--model .dialog-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dialog-visual--model .model-showcase-frame--hero .dialog-media {
  aspect-ratio: 3 / 4;
}

.dialog-visual--model .model-showcase-frame--hero.is-landscape .dialog-media {
  aspect-ratio: 16 / 10;
}

.dialog-visual--model .model-showcase-frame--thumb .dialog-media {
  aspect-ratio: 1 / 1.18;
}

.dialog-visual--model .model-showcase-frame--thumb.is-landscape .dialog-media {
  aspect-ratio: 4 / 3;
}

.dialog-visual--model .dialog-frame__index,
.dialog-visual--model .dialog-frame__line {
  display: none;
}

.dialog-visual--model .edge-light {
  display: none;
}

.dialog-visual--selling {
  display: block;
  width: min(100% - 36px, 720px);
  margin: 24px auto 56px;
}

.selling-showcase-group {
  margin-top: 38px;
}

.selling-showcase-group:first-child {
  margin-top: 0;
}

.selling-showcase-title {
  margin: 0 0 16px;
  color: rgba(244, 239, 231, 0.86);
  font-size: clamp(0.86rem, 1.5vw, 1rem);
  font-weight: 720;
  letter-spacing: 0;
}

.selling-showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dialog-visual--selling .dialog-frame,
.dialog-visual--selling .dialog-frame.is-landscape,
.dialog-visual--selling .dialog-frame.is-portrait {
  grid-column: auto;
  border: 0;
  border-radius: 8px;
  background: rgba(5, 5, 5, 0.72);
  box-shadow: none;
}

.dialog-visual--selling .selling-showcase-frame--hero,
.dialog-visual--selling .selling-showcase-frame--hero.is-landscape,
.dialog-visual--selling .selling-showcase-frame--hero.is-portrait {
  grid-column: 1 / -1;
}

.dialog-visual--selling .dialog-media {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #050505;
}

.dialog-visual--selling .selling-showcase-frame--hero .dialog-media {
  aspect-ratio: 16 / 9;
}

.dialog-visual--selling .selling-showcase-frame--thumb .dialog-media {
  aspect-ratio: 1 / 0.9;
}

.dialog-visual--selling .selling-showcase-frame--tall .dialog-media {
  aspect-ratio: 1 / 1.42;
}

.dialog-visual--selling .dialog-frame__index,
.dialog-visual--selling .dialog-frame__line,
.dialog-visual--selling .edge-light {
  display: none;
}

.dialog-visual--effect {
  display: block;
  width: min(100% - 36px, 720px);
  margin: 24px auto 56px;
}

.effect-showcase-group {
  margin-top: 38px;
}

.effect-showcase-group:first-child {
  margin-top: 0;
}

.effect-showcase-title {
  margin: 0 0 16px;
  color: rgba(244, 239, 231, 0.86);
  font-size: clamp(0.86rem, 1.5vw, 1rem);
  font-weight: 720;
  letter-spacing: 0;
}

.effect-showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dialog-visual--effect .dialog-frame,
.dialog-visual--effect .dialog-frame.is-landscape,
.dialog-visual--effect .dialog-frame.is-portrait {
  grid-column: auto;
  border: 0;
  border-radius: 8px;
  background: rgba(5, 5, 5, 0.72);
  box-shadow: none;
}

.dialog-visual--effect .effect-showcase-frame--hero,
.dialog-visual--effect .effect-showcase-frame--hero.is-landscape,
.dialog-visual--effect .effect-showcase-frame--hero.is-portrait {
  grid-column: 1 / -1;
}

.dialog-visual--effect .dialog-media {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #050505;
}

.dialog-visual--effect .effect-showcase-frame--hero .dialog-media {
  aspect-ratio: 16 / 9;
}

.dialog-visual--effect .effect-showcase-grid--digital .effect-showcase-frame--hero .dialog-media {
  aspect-ratio: 1 / 1.3;
}

.dialog-visual--effect .effect-showcase-frame--thumb .dialog-media {
  aspect-ratio: 1 / 0.9;
}

.dialog-visual--effect .effect-showcase-grid--appliance .effect-showcase-frame--thumb .dialog-media,
.dialog-visual--effect .effect-showcase-grid--beauty .effect-showcase-frame--thumb .dialog-media {
  aspect-ratio: 1 / 1;
}

.dialog-visual--effect .dialog-frame__index,
.dialog-visual--effect .dialog-frame__line,
.dialog-visual--effect .edge-light {
  display: none;
}

.dialog-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  margin: 0;
  border: 0;
  border-radius: var(--radius);
  background: #0b0b0b;
  opacity: 0;
  transform: translateY(42px) scale(0.985);
  filter: blur(8px);
  transition: opacity 720ms ease, transform 720ms ease, filter 720ms ease;
  cursor: zoom-in;
}

.dialog-frame.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.dialog-frame:focus-visible {
  outline: 1px solid rgba(244, 239, 231, 0.72);
  outline-offset: 4px;
}

.dialog-frame > .edge-light {
  display: none;
}

.dialog-frame.glow-border::before,
.dialog-frame.glow-border::after {
  display: none;
}

.dialog-frame.is-landscape {
  grid-column: 1 / -1;
}

.dialog-frame.is-portrait {
  align-self: start;
}

.dialog-visual--packageBlindBox .dialog-frame.is-portrait {
  grid-column: 1 / -1;
  width: 100%;
  justify-self: stretch;
}

.dialog-visual--packageBlindBox .dialog-frame.is-portrait .dialog-media {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.dialog-visual--packageWatch .dialog-frame[data-media-index="1"] {
  grid-column: 1 / -1;
  width: min(100%, 520px);
  justify-self: center;
  align-self: start;
  background: #f8f8f6;
}

.dialog-visual--packageWatch .dialog-frame[data-media-index="1"] .dialog-media {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  object-position: center;
  background: #f8f8f6;
}

.dialog-media {
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  display: block;
  background: #0b0b0b;
  object-fit: contain;
}

video.dialog-media {
  aspect-ratio: 16 / 9;
}

.dialog-frame__index {
  display: none;
}

.dialog-frame__line {
  display: none;
}

.dialog-frame__line--top {
  top: 26px;
  right: 24px;
  left: 76px;
}

.dialog-frame__line--bottom {
  right: 24px;
  bottom: 28px;
  width: 34%;
}

.dialog-frame figcaption {
  display: none;
}

.dialog-image-menu {
  position: fixed;
  z-index: 90;
  display: grid;
  width: 132px;
  overflow: hidden;
  border: 1px solid rgba(210, 163, 82, 0.58);
  border-radius: 12px;
  color: #f4efe7;
  background: rgba(10, 10, 10, 0.96);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(14px);
}

.dialog-image-menu[hidden] {
  display: none;
}

.dialog-image-menu button {
  min-height: 42px;
  padding: 10px 14px;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  font: 700 13px/1.3 inherit;
  cursor: pointer;
}

.dialog-image-menu button + button {
  border-top: 1px solid rgba(244, 239, 231, 0.1);
}

.dialog-image-menu button:hover,
.dialog-image-menu button:focus-visible {
  color: #d2a352;
  background: rgba(210, 163, 82, 0.1);
  outline: none;
}

.dialog-frame.is-visible figcaption {
  opacity: 1;
  transform: translateY(0);
}

.project-dialog h2,
.project-dialog p:not(.eyebrow) {
  margin-right: 20px;
  margin-left: 20px;
}

@media (min-width: 900px) {
  .project-dialog:not(.is-resume-project):not(.is-viewing-media) > h2,
  .project-dialog:not(.is-resume-project):not(.is-viewing-media) > p:not(.eyebrow) {
    margin-right: 120px;
    margin-left: 120px;
  }
}

html.is-editing .project-dialog :is(h2, h3, p, figcaption) {
  cursor: context-menu;
}

html.is-editing :is(#amazon-aplus, #work, #projectDialog) :is(h2, h3, p, span, strong, em, button, figcaption) {
  cursor: context-menu;
}

.project-dialog h2 {
  font-size: 2rem;
}

.dialog-note {
  margin-bottom: 24px;
}

.media-viewer {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  padding: 0;
  place-items: stretch;
  background: rgba(0, 0, 0, 0.92);
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(10px);
  transition: opacity 180ms ease;
}

.project-dialog > .media-viewer {
  position: fixed;
  z-index: 30;
}

.media-viewer.is-open {
  opacity: 1;
  pointer-events: auto;
}

.media-viewer__panel {
  position: relative;
  width: 100vw;
  height: 100svh;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 78px;
  grid-template-rows: minmax(0, 1fr) 58px;
  gap: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #030303;
  box-shadow: none;
}

.media-viewer__stage {
  display: grid;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  grid-column: 1 / -1;
  grid-row: 1;
  padding: 32px 96px;
  place-items: start center;
  scrollbar-gutter: stable;
  cursor: pointer;
  touch-action: pan-y;
}

.media-viewer__stage.is-project-detail {
  place-items: center;
}

.media-viewer__media {
  width: auto;
  max-width: min(100%, 1440px);
  max-height: calc(100svh - 132px);
  display: block;
  object-fit: contain;
}

.media-viewer__media.is-entering {
  animation: mediaViewerIn 320ms cubic-bezier(0.22, 0.72, 0.2, 1) both;
}

.media-viewer__media.is-long {
  max-width: min(100%, 1180px);
  max-height: none;
}

.media-viewer__stage.is-project-detail .media-viewer__media.is-long {
  max-height: calc(100svh - 132px);
}

video.media-viewer__media {
  width: 100%;
  max-height: 100%;
  aspect-ratio: 16 / 9;
  align-self: center;
  cursor: auto;
}

@keyframes mediaViewerIn {
  from {
    opacity: 0.72;
    transform: translate3d(var(--viewer-enter-x, 0), 10px, 0) scale(0.996);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .blur-text,
  .blur-text.is-text-visible {
    animation: none;
    filter: none;
    opacity: 1;
    transform: none;
  }

  .media-viewer__media.is-entering {
    animation: none;
  }
}

.media-viewer__close,
.media-viewer__nav {
  border: 1px solid rgba(244, 239, 231, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--ink);
  cursor: pointer;
  backdrop-filter: blur(12px);
}

.media-viewer__close:focus-visible,
.media-viewer__nav:focus-visible {
  outline: 1px solid rgba(244, 239, 231, 0.56);
  outline-offset: 3px;
}

.media-viewer__close {
  position: absolute;
  top: 24px;
  right: 28px;
  z-index: 4;
  width: 44px;
  height: 44px;
  font-size: 1.5rem;
  line-height: 1;
}

.media-viewer__nav {
  align-self: center;
  z-index: 3;
  width: 46px;
  height: 64px;
  justify-self: center;
  font-size: 2rem;
}

.media-viewer__nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.media-viewer__nav--prev {
  grid-column: 1;
  grid-row: 1;
}

.media-viewer__nav--next {
  grid-column: 3;
  grid-row: 1;
}

.media-viewer__meta {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 28px;
  border-top: 1px solid rgba(244, 239, 231, 0.1);
  background: rgba(3, 3, 3, 0.86);
  color: rgba(244, 239, 231, 0.78);
}

.media-viewer__meta span {
  font-weight: 760;
}

.media-viewer__meta strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  z-index: 40;
  min-width: 180px;
  padding: 12px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Local portfolio editor */
html.is-editing [data-editor-key],
html.is-editing img,
html.is-editing video {
  cursor: context-menu;
}

html.is-editing .brand-mark > span:last-child {
  text-decoration: underline dotted rgba(210, 163, 82, 0.72);
  text-underline-offset: 0.35em;
}

.edit-mode-badge {
  position: fixed;
  right: 20px;
  left: auto;
  bottom: 20px;
  z-index: 80;
  color: #f4efe7;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.edit-mode-toggle,
.edit-mode-menu {
  border: 1px solid rgba(210, 163, 82, 0.54);
  color: inherit;
  background: rgba(10, 10, 10, 0.92);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(14px);
}

.edit-mode-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  border-radius: 999px;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.edit-mode-toggle__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d2a352;
  box-shadow: 0 0 12px rgba(210, 163, 82, 0.85);
}

.edit-mode-menu {
  position: absolute;
  right: 0;
  left: auto;
  bottom: calc(100% + 10px);
  display: grid;
  width: 188px;
  overflow: hidden;
  border-radius: 14px;
}

.edit-mode-menu[hidden] {
  display: none;
}

.edit-mode-menu button {
  padding: 13px 15px;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  font: inherit;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.edit-mode-menu button + button {
  border-top: 1px solid rgba(244, 239, 231, 0.1);
}

.edit-mode-menu button:hover,
.edit-mode-menu button:focus-visible {
  color: #d2a352;
  background: rgba(210, 163, 82, 0.09);
  outline: none;
}

.project-card-actions {
  position: fixed;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 8px;
}

.project-card-actions[hidden] {
  display: none;
}

.project-copy-button {
  padding: 9px 13px;
  border: 1px solid rgba(210, 163, 82, 0.72);
  border-radius: 999px;
  color: #111;
  background: #d2a352;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease;
}

.project-copy-button:hover,
.project-copy-button:focus-visible {
  background: #e0b66c;
  outline: 2px solid rgba(244, 239, 231, 0.78);
  outline-offset: 2px;
  transform: translateY(-1px);
}

html:not(.is-editing) .project-copy-button {
  display: none;
}

.project-delete-button {
  border-color: rgba(226, 112, 96, 0.78);
  color: #fff;
  background: #b94739;
}

.project-delete-button:hover,
.project-delete-button:focus-visible {
  background: #d15c4d;
}

html.is-editing #work .project-card {
  cursor: grab;
  user-select: none;
}

html.is-editing #work .project-card:active {
  cursor: grabbing;
}

#work .project-card.is-project-dragging {
  opacity: 0.42 !important;
  transform: scale(0.985) !important;
}

#work .project-card.is-drop-before,
#work .project-card.is-drop-after {
  position: relative;
}

#work .project-card.is-drop-before::after,
#work .project-card.is-drop-after::after {
  content: "";
  position: absolute;
  z-index: 16;
  top: -10px;
  right: 0;
  left: 0;
  height: 3px;
  border-radius: 999px;
  background: #d2a352;
  box-shadow: 0 0 16px rgba(210, 163, 82, 0.8);
  pointer-events: none;
}

#work .project-card.is-drop-after::after {
  top: auto;
  bottom: -10px;
}

.content-editor {
  width: min(920px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 1px solid rgba(244, 239, 231, 0.16);
  border-radius: 22px;
  color: #f4efe7;
  background: #101010;
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.72);
}

.content-editor::backdrop {
  background: rgba(3, 3, 3, 0.78);
  backdrop-filter: blur(10px);
}

.content-editor__panel {
  display: grid;
  gap: 22px;
  padding: 24px;
}

.content-editor__head,
.content-editor__actions,
.content-editor__size-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.content-editor__head h2 {
  margin: 4px 0 0;
  font-size: clamp(22px, 3vw, 34px);
}

.content-editor__eyebrow {
  color: #d2a352;
  font-size: 10px;
  letter-spacing: 0.22em;
}

.content-editor__close {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(244, 239, 231, 0.18);
  border-radius: 50%;
  color: inherit;
  background: transparent;
  font-size: 26px;
  cursor: pointer;
}

.content-editor__text label,
.content-editor__controls label {
  display: grid;
  gap: 8px;
  color: rgba(244, 239, 231, 0.72);
  font-size: 12px;
}

.content-editor textarea,
.content-editor input,
.content-editor select {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid rgba(244, 239, 231, 0.18);
  border-radius: 10px;
  color: #f4efe7;
  background: #191919;
  font: inherit;
}

.content-editor textarea,
.content-editor input[type="number"],
.content-editor select,
.content-editor input[type="file"] {
  padding: 11px 12px;
}

.content-editor textarea {
  resize: vertical;
  line-height: 1.6;
}

.content-editor__text:not([hidden]) {
  display: grid;
  gap: 18px;
}

.content-editor__text .text-font-size-editor {
  grid-template-columns: 1fr 150px;
  align-items: center;
  padding: 13px 16px;
  border: 1px solid rgba(244, 239, 231, 0.13);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
}

.text-font-size-editor select {
  min-width: 0;
}

.text-color-editor {
  display: grid;
  gap: 15px;
  padding: 16px;
  border: 1px solid rgba(244, 239, 231, 0.13);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
}

.text-color-editor__head,
.text-color-editor__result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.text-color-editor__head > span {
  font-size: 13px;
  font-weight: 650;
}

.text-color-editor__result {
  justify-content: flex-end;
}

#editorTextColorSwatch {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(244, 239, 231, 0.32);
  border-radius: 50%;
  background: #fff;
}

#editorTextColorHex {
  width: 82px;
  padding: 6px 8px;
  border: 1px solid rgba(244, 239, 231, 0.2);
  border-radius: 8px;
  color: #d2a352;
  background: rgba(255, 255, 255, 0.04);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  text-transform: uppercase;
}

.text-color-presets {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.text-color-presets button {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid rgba(244, 239, 231, 0.24);
  border-radius: 50%;
  background: var(--preset-color, transparent);
  cursor: pointer;
}

.text-color-presets button[data-text-color="default"] {
  width: auto;
  padding: 0 11px;
  border-width: 1px;
  border-radius: 999px;
  color: rgba(244, 239, 231, 0.7);
  font-size: 11px;
}

.text-color-presets button:hover,
.text-color-presets button:focus-visible,
.text-color-presets button.is-active {
  border-color: #d2a352;
  outline: none;
  box-shadow: 0 0 0 3px rgba(210, 163, 82, 0.14);
}

.text-hsv-controls {
  display: grid;
  gap: 13px;
}

.text-hsv-controls label {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 7px 12px;
  align-items: center;
}

.text-hsv-controls output {
  justify-self: end;
}

.text-hsv-controls input {
  grid-column: 1 / -1;
  accent-color: #d2a352;
}

#editorTextHue {
  background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}

.content-editor__image {
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr);
  gap: 22px;
}

.content-editor__image:not([hidden]) {
  display: grid;
}

.content-editor__preview-wrap {
  display: grid;
  min-height: 380px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(244, 239, 231, 0.12);
  border-radius: 14px;
  background-color: #171717;
  background-image: linear-gradient(45deg, #202020 25%, transparent 25%), linear-gradient(-45deg, #202020 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #202020 75%), linear-gradient(-45deg, transparent 75%, #202020 75%);
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  background-size: 20px 20px;
}

#editorImageCanvas {
  display: block;
  max-width: 100%;
  max-height: min(56vh, 620px);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.42);
}

.content-editor__controls {
  display: grid;
  align-content: start;
  gap: 14px;
}

.content-editor__size-row > label {
  min-width: 0;
}

.content-editor output,
.content-editor__estimate strong {
  color: #d2a352;
}

.content-editor__estimate {
  margin: 0;
  padding: 12px;
  border-radius: 10px;
  background: rgba(210, 163, 82, 0.08);
  font-size: 12px;
}

.content-editor__actions {
  justify-content: flex-end;
  padding-top: 4px;
}

.content-editor__original {
  margin-left: auto;
  border-color: rgba(210, 163, 82, 0.62);
  color: #d2a352;
  background: rgba(210, 163, 82, 0.08);
}

.content-editor__original[hidden] {
  display: none;
}

@media (max-width: 720px) {
  .content-editor__image:not([hidden]) {
    grid-template-columns: 1fr;
  }

  .content-editor__preview-wrap {
    min-height: 250px;
  }

  .content-editor__panel {
    padding: 18px;
  }
}

.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

html.legacy-motion .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 650ms ease, transform 650ms ease;
}

html.legacy-motion .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

html.premium-motion .section-heading .eyebrow,
html.premium-motion .ai-video-heading .eyebrow,
html.premium-motion .contact-copy .eyebrow,
html.premium-motion .profile-copy .eyebrow,
html.premium-motion .section-heading h2,
html.premium-motion .ai-video-heading h2,
html.premium-motion .contact-copy h2,
html.premium-motion .profile-copy h2,
html.premium-motion .project-card,
html.premium-motion .delivery-card,
html.premium-motion .ai-video-item {
  backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  body.is-opening {
    overflow: auto;
  }

  html.premium-motion .opening-sequence {
    display: none !important;
  }

  .reveal,
  .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.blur-text {
  --blur-text-delay: 0ms;
  opacity: 0;
  filter: blur(10px);
  transform: translate3d(0, -14px, 0);
  will-change: transform, filter, opacity;
}

.blur-text.is-text-visible {
  animation: blurTextIn 540ms cubic-bezier(0.22, 0.9, 0.28, 1) var(--blur-text-delay) both;
}

@keyframes blurTextIn {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform: translate3d(0, -14px, 0);
  }

  62% {
    opacity: 0.7;
    filter: blur(3px);
    transform: translate3d(0, 2px, 0);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes waveNudge {
  0%,
  100% {
    transform: translateX(0) skewX(-10deg);
  }

  50% {
    transform: translateX(-12px) skewX(-10deg);
  }
}

@keyframes trackPlayhead {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-150px);
  }
}

@media (max-width: 980px) {
  .profile-copy > .profile-portrait-stage {
    width: 100%;
    margin: 22px 0 120px;
  }

  .profile-section[data-profile-title-layout="left"] .profile-portrait-stage {
    margin-top: 20px;
  }

  .profile-section[data-avatar-layout="right"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-section[data-avatar-layout="right"] .profile-copy,
  .profile-section[data-avatar-layout="right"] .profile-portrait-stage {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    min-width: 0;
  }

  .profile-section[data-avatar-layout="right"] .profile-copy {
    order: 1;
  }

  .profile-section[data-avatar-layout="right"] .profile-portrait-stage {
    order: 2;
  }

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

  .site-header[data-header-style="center-logo"] {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    padding: 6px 14px;
  }

  .site-header[data-header-style="center-logo"] .brand-mark {
    position: static;
    left: auto;
    min-width: 0;
    transform: none;
  }

  .site-header[data-header-style="center-logo"] .brand-mark > span:last-child {
    display: inline;
    overflow: hidden;
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .site-header[data-header-style="center-logo"] .brand-mark__logo-wrap {
    width: 26px;
    height: 20px;
    flex-basis: 26px;
  }

  .site-header[data-header-style="center-logo"] .brand-mark__logo {
    width: 30px;
    height: 21px;
  }

  .main-nav,
  .site-header[data-header-style="center-logo"] .main-nav {
    display: none;
  }

  .mobile-nav-toggle {
    grid-column: 2;
    width: 42px;
    height: 42px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 5px;
    padding: 0;
    border: 1px solid rgba(244, 239, 231, 0.2);
    border-radius: 999px;
    color: var(--ink);
    background: rgba(10, 10, 10, 0.46);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(16px) saturate(140%);
    cursor: pointer;
  }

  .site-header[data-header-style="center-logo"] .mobile-nav-toggle {
    width: 34px;
    height: 34px;
  }

  .mobile-nav-toggle span {
    width: 17px;
    height: 1.5px;
    display: block;
    border-radius: 999px;
    background: currentColor;
    transition: transform 180ms ease, opacity 180ms ease;
  }

  .site-header.is-mobile-nav-open .mobile-nav-toggle span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }

  .site-header.is-mobile-nav-open .mobile-nav-toggle span:nth-child(2) {
    opacity: 0;
  }

  .site-header.is-mobile-nav-open .mobile-nav-toggle span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }

  .site-header.is-mobile-nav-open .main-nav,
  .site-header[data-header-style="center-logo"].is-mobile-nav-open .main-nav {
    position: absolute;
    top: calc(100% + 8px);
    right: 16px;
    left: 16px;
    width: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 8px;
    border: 1px solid rgba(244, 239, 231, 0.16);
    border-radius: 18px;
    color: var(--ink);
    background: linear-gradient(135deg, rgba(18, 18, 18, 0.88), rgba(10, 10, 10, 0.72));
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(22px) saturate(145%);
    transform: none;
  }

  .site-header[data-header-style="center-logo"].is-mobile-nav-open .main-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .site-header.is-mobile-nav-open .main-nav__side,
  .site-header[data-header-style="center-logo"].is-mobile-nav-open .main-nav__side {
    display: contents;
  }

  .site-header[data-header-style="center-logo"].is-mobile-nav-open .main-nav a,
  .site-header[data-header-style="center-logo"].is-mobile-nav-open .main-nav a:nth-child(4) {
    grid-column: auto;
    width: 100%;
  }

  .site-header.is-mobile-nav-open .main-nav a {
    grid-column: auto;
    padding: 11px 12px;
    border: 0;
    border-radius: 10px;
    text-align: left;
  }

  .site-header.is-mobile-nav-open .main-nav a + a {
    border-top: 1px solid rgba(244, 239, 231, 0.09);
  }

  .site-header.is-mobile-nav-open .main-nav a:hover,
  .site-header.is-mobile-nav-open .main-nav a:focus-visible {
    color: #d2a352;
    background: rgba(210, 163, 82, 0.1);
    outline: none;
  }

  .site-header[data-header-style="center-logo"] .header-actions {
    grid-column: 3;
  }

  h1 {
    font-size: 4.5rem;
  }

  .workflow-rail,
  .delivery-matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .delivery-card {
    min-height: 236px;
  }

  .project-card:first-child {
    grid-column: auto;
  }

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

  .profile-section,
  .about-section,
  .ai-video-stage,
  .contact-section {
    grid-template-columns: 1fr;
  }

  .contact-section[data-contact-layout] .contact-copy,
  .contact-section[data-contact-layout] .contact-console {
    grid-column: 1;
    grid-row: auto;
  }

  .contact-section[data-contact-layout] .contact-copy {
    order: 1;
  }

  .contact-section[data-contact-layout] .contact-console {
    order: 2;
  }

  .profile-portrait {
    min-height: 520px;
  }

  .profile-info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
  }

}

@media (max-width: 680px) {
  .site-header {
    gap: 12px;
    padding: 12px 16px;
  }

  .brand-mark span:last-child,
  .site-header[data-header-style="center-logo"] .brand-mark > span:last-child {
    display: inline;
  }

  .site-header[data-header-style="center-logo"] .brand-mark {
    position: static;
    left: auto;
    transform: none;
  }

  .header-actions {
    gap: 8px;
  }

  .icon-link {
    display: none;
  }

  .hero-section {
    min-height: 75vh;
    min-height: 75svh;
    gap: 22px;
    padding: 84px 18px 18px;
  }

  @supports (min-height: 75dvh) {
    .hero-section {
      min-height: 75dvh;
    }
  }

  .hero-content,
  .hero-meta {
    min-width: 0;
    max-width: 100%;
  }

  .hero-content {
    translate: 0 0;
  }

  .smile-module {
    top: 18px;
    left: 18px;
    width: 158px;
    height: 86px;
  }

  .smile-face {
    width: 112px;
    height: 68px;
  }

  h1 {
    font-size: 3.25rem;
  }

  #hero-title {
    max-width: 100%;
    font-size: min(var(--hero-title-size, 3rem), 13vw);
    line-height: 1;
    overflow-wrap: anywhere;
  }

  .hero-quick-links {
    gap: 10px;
    margin-top: 34px;
  }

  .hero-quick-link {
    min-width: 0;
    flex: 1 1 150px;
  }

  .hero-copy {
    max-width: 100%;
    margin-top: 22px;
    font-size: 1.04rem;
    overflow-wrap: anywhere;
  }

  .button {
    width: 100%;
  }

  .hero-meta {
    grid-template-columns: 1fr;
  }

  .hero-meta div {
    min-width: 0;
    padding: 16px;
  }

  .hero-meta strong {
    font-size: 0.92rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  .section-block {
    padding: 48px 18px;
  }

  .section-heading h2,
  .ai-video-heading h2,
  .profile-copy h2,
  .about-copy h2,
  .contact-copy h2 {
    font-size: 2.24rem;
  }

  .profile-section {
    gap: 20px;
  }

  .profile-portrait {
    min-height: 430px;
  }

  .profile-lead {
    font-size: 1.02rem;
  }

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

  .contact-list {
    grid-template-columns: 1fr;
  }

  .contact-section[data-contact-layout="horizontal"] .contact-console .contact-list {
    grid-template-columns: 1fr;
  }

  .contact-section[data-contact-layout="horizontal"] .contact-console .contact-list div {
    border-right: 0;
  }

  .contact-console .contact-list div {
    grid-template-columns: 1fr;
    gap: 4px;
    min-height: 64px;
    padding: 12px 14px;
  }

  .contact-console .contact-list strong {
    text-align: left;
  }

  .contact-section[data-contact-layout="centered"] .contact-list .contact-item {
    min-height: 82px;
  }

  .profile-info div {
    min-height: 0;
    padding: 13px 14px;
  }

  .profile-info strong {
    font-size: 0.92rem;
    line-height: 1.4;
  }

  .experience-card,
  .contact-list div {
    padding: 18px;
  }

  .experience-card--career {
    padding-block: 14px;
  }

  .experience-entry__head {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .experience-entry__head time {
    text-align: left;
  }

  .experience-entry__responsibility {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  html[lang="en"] .experience-entry__responsibility {
    grid-template-columns: 1fr;
  }

  .glow-border > .edge-light {
    inset: 0;
  }

  .glow-border > .edge-light::before {
    inset: 0;
  }

  .ai-video-stage {
    gap: 14px;
  }

  .ai-video-screen {
    aspect-ratio: 4 / 3;
  }

  .ai-video-item {
    min-height: 62px;
    grid-template-columns: 34px minmax(0, 1fr) auto;
  }

  .work-grid,
  .site-showcase-grid,
  .workflow-rail,
  .delivery-matrix {
    grid-template-columns: 1fr;
  }

  .workflow-step__visual {
    min-height: 240px;
  }

  .delivery-card {
    min-height: 222px;
  }

  .project-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100svh - 20px);
  }

  .dialog-visual {
    grid-template-columns: 1fr;
    gap: 18px;
    margin: 14px 12px;
  }

  .dialog-visual--model {
    grid-template-columns: minmax(0, 392px);
    width: min(calc(100% - 22px), 392px);
    margin: 18px auto 34px;
  }

  .model-showcase-group {
    margin-top: 34px;
  }

  .dialog-visual--selling {
    width: min(calc(100% - 18px), 720px);
    margin: 18px auto 34px;
  }

  .selling-showcase-group {
    margin-top: 34px;
  }

  .dialog-visual--effect {
    width: min(calc(100% - 18px), 720px);
    margin: 18px auto 34px;
  }

  .effect-showcase-group {
    margin-top: 34px;
  }

  .dialog-visual--site {
    gap: 14px;
  }

  .dialog-visual--site .dialog-media {
    height: min(360px, 82vw);
    padding: 8px;
  }

  .dialog-frame.is-landscape,
  .dialog-frame.is-portrait {
    grid-column: auto;
  }

  .dialog-frame {
    border-radius: 7px;
  }

  .dialog-visual--amazon {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: calc(100% - 20px);
    margin: 14px auto 32px;
  }

  .dialog-visual--amazon .dialog-frame.amazon-aplus-dialog-frame.is-wide {
    grid-column: 1 / -1;
  }

  .media-viewer {
    padding: 0;
  }

  .media-viewer__panel {
    width: 100vw;
    height: 100svh;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 54px;
    gap: 0;
  }

  .media-viewer__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 58px 16px 16px;
  }

  .media-viewer__stage.is-project-detail {
    padding: 58px 16px;
  }

  .media-viewer__stage.is-project-detail .media-viewer__media {
    max-height: calc(100svh - 170px);
  }

  .media-viewer__media.is-long {
    align-self: flex-start;
    margin-inline: auto;
  }

  .media-viewer__stage.is-project-detail .media-viewer__media.is-long {
    align-self: center;
    max-height: calc(100svh - 170px);
    margin-block: auto;
  }

  .media-viewer__nav {
    display: none;
  }

  .visual-label {
    top: 14px;
    left: 16px;
    font-size: 0.78rem;
  }

  .work-grid {
    gap: 14px;
  }

  #work .work-grid.is-amazon-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  #work .work-grid.is-amazon-layout .amazon-aplus-item:nth-child(even) .amazon-project-summary {
    order: initial;
    margin: 22px 0 0;
  }

  #work .work-grid.is-amazon-layout .amazon-aplus-item:nth-child(even) .project-card__body {
    order: initial;
    padding: 16px 2px 0;
  }

  #work .work-grid.is-detail-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  #work .work-grid.is-detail-layout .detail-editorial-item--walnut,
  #work .work-grid.is-detail-layout .detail-editorial-item--abs,
  #work .work-grid.is-detail-layout .detail-editorial-item--fashion,
  #work .work-grid.is-detail-layout .detail-editorial-item--tea {
    grid-column: auto;
    grid-row: auto;
  }

  #work .work-grid.is-detail-layout .detail-editorial-item--offset .detail-project-summary {
    order: initial;
    margin: 22px 0 0;
  }

  #work .work-grid.is-detail-layout .detail-editorial-item--offset .project-card__body {
    order: initial;
    padding: 16px 2px 0;
  }

  .work-visual {
    aspect-ratio: 1 / 1.08;
  }

  .work-visual::before {
    inset: 12px;
  }

  .work-visual::after {
    inset: auto 12px 16px 12px;
    height: 18px;
  }

  .site-preview-collage {
    inset: 34px 14px 22px;
    gap: 6px;
  }

  .site-footer {
    flex-direction: column;
    padding: 22px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  .media-viewer__panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .media-viewer__stage {
    padding-right: 16px;
    padding-left: 16px;
  }

  .media-viewer__nav {
    display: none;
  }
}

/* Editable profile portrait styles */
.avatar-style-menu {
  position: fixed;
  z-index: 72;
  display: grid;
  width: 190px;
  max-height: calc(100svh - 16px);
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(210, 163, 82, 0.58);
  border-radius: 14px;
  color: #f4efe7;
  background: rgba(10, 10, 10, 0.94);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(14px);
}

.avatar-style-menu[hidden],
html:not(.is-editing) .avatar-style-menu {
  display: none;
}

.avatar-style-menu > span {
  padding: 11px 13px;
  color: rgba(244, 239, 231, 0.56);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.avatar-style-menu button {
  padding: 12px 13px;
  border: 0;
  border-top: 1px solid rgba(244, 239, 231, 0.09);
  color: inherit;
  background: transparent;
  text-align: left;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.avatar-style-menu button:hover,
.avatar-style-menu button:focus-visible,
.avatar-style-menu button.is-active {
  color: #d2a352;
  background: rgba(210, 163, 82, 0.1);
  outline: none;
}

.profile-portrait.avatar-style--ratio-3-4 {
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 3 / 4;
  align-self: start;
}

.profile-portrait.avatar-style--ratio-2-3 {
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 2 / 3;
  align-self: start;
}

.profile-portrait.avatar-style--circle {
  width: min(100%, 560px);
  min-height: 0 !important;
  height: auto !important;
  margin-top: 8px;
  aspect-ratio: 1;
  align-self: start;
  justify-self: center;
  border-radius: 50%;
}

.profile-portrait.avatar-style--circle .profile-portrait__media,
.profile-portrait.avatar-style--circle img {
  border-radius: 50%;
}

.profile-nameplate.is-avatar-element-hidden,
.profile-portrait__hint.is-avatar-element-hidden {
  display: none !important;
}

.profile-portrait.avatar-style--square {
  width: 100%;
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 1;
  align-self: start;
  border-radius: 20px;
}

.profile-section.has-circle-avatar {
  align-items: start;
}

.profile-section.has-circle-avatar .profile-copy {
  align-self: start;
}

.delete-project-dialog {
  width: min(440px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 28px;
  border: 1px solid rgba(226, 112, 96, 0.42);
  border-radius: 20px;
  color: #f4efe7;
  background: #111;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.72);
  text-align: center;
}

.delete-project-dialog::backdrop {
  background: rgba(3, 3, 3, 0.76);
  backdrop-filter: blur(10px);
}

.delete-project-dialog__icon {
  display: grid;
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  place-items: center;
  border: 1px solid rgba(226, 112, 96, 0.56);
  border-radius: 50%;
  color: #ef8d7e;
  background: rgba(226, 112, 96, 0.1);
  font-size: 22px;
  font-weight: 750;
}

.delete-project-dialog__eyebrow {
  margin: 0 0 8px;
  color: #ef8d7e;
  font-size: 10px;
  letter-spacing: 0.18em;
}

.delete-project-dialog h2 {
  margin: 0;
  font-size: clamp(22px, 4vw, 30px);
}

.delete-project-dialog > p:not(.delete-project-dialog__eyebrow) {
  margin: 14px auto 0;
  color: rgba(244, 239, 231, 0.62);
  font-size: 14px;
  line-height: 1.7;
}

.delete-project-dialog__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 24px;
}

.delete-project-dialog__confirm {
  border-color: #d76858;
  color: #fff;
  background: #b94739;
}

.delete-project-dialog__confirm:hover,
.delete-project-dialog__confirm:focus-visible {
  background: #d15c4d;
}

/* Editable selected-work categories */
html.is-editing #work .filter-button {
  cursor: grab;
  user-select: none;
}

html.is-editing #work .filter-button:active {
  cursor: grabbing;
}

.category-edit-actions {
  position: fixed;
  z-index: 74;
  display: flex;
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(210, 163, 82, 0.54);
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.94);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(14px);
}

.category-edit-actions[hidden],
html:not(.is-editing) .category-edit-actions {
  display: none;
}

.category-edit-actions button {
  display: grid;
  width: auto;
  min-width: 54px;
  height: 32px;
  padding: 0 13px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #f4efe7;
  background: rgba(255, 255, 255, 0.07);
  font-size: 12px;
  font-weight: 680;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.category-edit-actions button:hover,
.category-edit-actions button:focus-visible {
  color: #111;
  background: #d2a352;
  outline: none;
}

.category-edit-actions button:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}

.ai-video-layout-menu {
  position: fixed;
  z-index: 74;
  display: grid;
  width: 210px;
  overflow: hidden;
  border: 1px solid rgba(210, 163, 82, 0.58);
  border-radius: 14px;
  color: #f4efe7;
  background: rgba(10, 10, 10, 0.94);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(14px);
}

.ai-video-layout-menu[hidden],
html:not(.is-editing) .ai-video-layout-menu {
  display: none;
}

.ai-video-layout-menu > span {
  padding: 11px 13px;
  color: rgba(244, 239, 231, 0.56);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.ai-video-layout-menu button {
  padding: 12px 13px;
  border: 0;
  border-top: 1px solid rgba(244, 239, 231, 0.09);
  color: inherit;
  background: transparent;
  text-align: left;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.ai-video-layout-menu button:hover,
.ai-video-layout-menu button:focus-visible,
.ai-video-layout-menu button.is-active {
  color: #d2a352;
  background: rgba(210, 163, 82, 0.1);
  outline: none;
}

.ai-video-layout-menu .ai-video-layout-menu__add {
  color: #d2a352;
  background: rgba(210, 163, 82, 0.08);
  font-weight: 700;
}

.header-style-menu {
  position: fixed;
  z-index: 86;
  display: grid;
  width: 220px;
  overflow: hidden;
  border: 1px solid rgba(210, 163, 82, 0.58);
  border-radius: 14px;
  color: #f4efe7;
  background: rgba(10, 10, 10, 0.96);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px);
}

.header-style-menu[hidden],
html:not(.is-editing) .header-style-menu {
  display: none;
}

.header-style-menu > span {
  padding: 11px 13px;
  color: rgba(244, 239, 231, 0.56);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.header-style-menu > .header-style-menu__section {
  border-top: 1px solid rgba(210, 163, 82, 0.28);
  color: rgba(210, 163, 82, 0.82);
}

.header-style-menu button {
  padding: 12px 13px;
  border: 0;
  border-top: 1px solid rgba(244, 239, 231, 0.09);
  color: inherit;
  background: transparent;
  text-align: left;
  font-size: 12px;
  cursor: pointer;
}

.header-style-menu button:hover,
.header-style-menu button:focus-visible,
.header-style-menu button.is-active {
  color: #d2a352;
  background: rgba(210, 163, 82, 0.1);
  outline: none;
}

html.is-editing [data-alignable-heading] h2,
html.is-editing [data-alignable-heading] p {
  cursor: context-menu;
}

.title-align-menu {
  position: fixed;
  z-index: 88;
  display: grid;
  width: 230px;
  overflow: hidden;
  border: 1px solid rgba(210, 163, 82, 0.58);
  border-radius: 14px;
  color: #f4efe7;
  background: rgba(10, 10, 10, 0.96);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px);
}

.contact-layout-menu {
  width: 260px;
}

html.is-editing #contact-title {
  cursor: context-menu;
}

.title-align-menu[hidden],
html:not(.is-editing) .title-align-menu {
  display: none;
}

.title-align-menu > span {
  overflow: hidden;
  padding: 11px 13px;
  color: rgba(244, 239, 231, 0.58);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.title-align-menu button {
  padding: 12px 13px;
  border: 0;
  border-top: 1px solid rgba(244, 239, 231, 0.09);
  color: inherit;
  background: transparent;
  text-align: left;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.title-align-menu__options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.experience-count-menu {
  width: 280px;
}

.experience-count-menu__options {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.resume-block-menu {
  width: 224px;
}

.title-align-menu__options button {
  padding-inline: 5px;
  text-align: center;
}

.title-align-menu__options button + button {
  border-left: 1px solid rgba(244, 239, 231, 0.09);
}

.title-align-menu button:hover,
.title-align-menu button:focus-visible,
.title-align-menu button.is-active {
  color: #d2a352;
  background: rgba(210, 163, 82, 0.1);
  outline: none;
}

.profile-title-layout-menu {
  width: 240px;
}

.profile-nameplate-menu {
  position: fixed;
  z-index: 89;
  display: grid;
  width: 232px;
  overflow: hidden;
  border: 1px solid rgba(210, 163, 82, 0.58);
  border-radius: 14px;
  color: #f4efe7;
  background: rgba(10, 10, 10, 0.96);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px);
}

.profile-nameplate-menu[hidden],
html:not(.is-editing) .profile-nameplate-menu {
  display: none;
}

.profile-nameplate-menu > span {
  padding: 11px 13px;
  color: rgba(244, 239, 231, 0.58);
  font-size: 10px;
  letter-spacing: 0.1em;
}

.profile-nameplate-menu button {
  padding: 12px 13px;
  border: 0;
  border-top: 1px solid rgba(244, 239, 231, 0.09);
  color: inherit;
  background: transparent;
  text-align: left;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.profile-nameplate-menu__align {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.profile-nameplate-menu__align button {
  padding-inline: 5px;
  text-align: center;
}

.profile-nameplate-menu__align button + button {
  border-left: 1px solid rgba(244, 239, 231, 0.09);
}

.profile-nameplate-menu button:hover,
.profile-nameplate-menu button:focus-visible,
.profile-nameplate-menu button.is-active {
  color: #d2a352;
  background: rgba(210, 163, 82, 0.1);
  outline: none;
}

.resume-hint-menu {
  position: fixed;
  z-index: 86;
  display: grid;
  width: 190px;
  overflow: hidden;
  border: 1px solid rgba(210, 163, 82, 0.58);
  border-radius: 14px;
  color: #f4efe7;
  background: rgba(10, 10, 10, 0.96);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px);
}

.resume-hint-menu[hidden],
html:not(.is-editing) .resume-hint-menu {
  display: none;
}

.resume-hint-menu > span {
  padding: 11px 13px;
  color: rgba(244, 239, 231, 0.56);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.resume-hint-menu button {
  padding: 12px 13px;
  border: 0;
  border-top: 1px solid rgba(244, 239, 231, 0.09);
  color: inherit;
  background: transparent;
  text-align: left;
  font-size: 12px;
  cursor: pointer;
}

.resume-hint-menu button:hover,
.resume-hint-menu button:focus-visible {
  color: #d2a352;
  background: rgba(210, 163, 82, 0.1);
  outline: none;
}

.hero-style-menu {
  position: fixed;
  z-index: 74;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(470px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(210, 163, 82, 0.58);
  border-radius: 14px;
  color: #f4efe7;
  background: rgba(10, 10, 10, 0.95);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(14px);
}

.hero-style-menu > span,
.hero-style-menu > .hero-title-size-control,
.hero-style-menu > .hero-copy-align-controls,
.hero-style-menu > .hero-meta-style-options {
  grid-column: 1 / -1;
}

.hero-style-menu[hidden],
html:not(.is-editing) .hero-style-menu {
  display: none;
}

.hero-style-menu > span {
  padding: 8px 12px;
  color: rgba(244, 239, 231, 0.56);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.hero-style-menu > .hero-style-menu__section {
  border-top: 1px solid rgba(244, 239, 231, 0.14);
  color: rgba(210, 163, 82, 0.78);
}

.hero-style-menu button {
  padding: 9px 12px;
  border: 0;
  border-top: 1px solid rgba(244, 239, 231, 0.09);
  color: inherit;
  background: transparent;
  text-align: left;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.hero-style-menu button:hover,
.hero-style-menu button:focus-visible,
.hero-style-menu button.is-active {
  color: #d2a352;
  background: rgba(210, 163, 82, 0.1);
  outline: none;
}

.hero-meta-style-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid rgba(244, 239, 231, 0.09);
}

.hero-meta-style-options label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  color: rgba(244, 239, 231, 0.78);
  font-size: 12px;
  cursor: pointer;
}

.hero-meta-style-options label + label {
  border-left: 1px solid rgba(244, 239, 231, 0.09);
}

.hero-meta-style-options input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #d2a352;
}

.hero-copy-align-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(244, 239, 231, 0.09);
}

.hero-copy-align-controls button {
  padding: 8px 5px;
  border-top: 0;
  text-align: center;
}

.hero-copy-align-controls button + button {
  border-left: 1px solid rgba(244, 239, 231, 0.09);
}

.hero-title-size-control {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 10px;
  padding: 8px 12px 10px;
  border-top: 1px solid rgba(244, 239, 231, 0.09);
  color: rgba(244, 239, 231, 0.82);
  font-size: 12px;
}

.hero-title-size-control output {
  color: #d2a352;
  font-variant-numeric: tabular-nums;
}

.hero-title-size-control input {
  grid-column: 1 / -1;
  width: 100%;
  accent-color: #d2a352;
}

.hero-link-target-control {
  display: grid;
  gap: 7px;
  padding: 8px 12px;
  border-top: 1px solid rgba(244, 239, 231, 0.09);
  color: rgba(244, 239, 231, 0.72);
  font-size: 11px;
}

.hero-link-target-control select,
.hero-button-color-editor select {
  width: 100%;
  padding: 7px 8px;
  border: 1px solid rgba(244, 239, 231, 0.18);
  border-radius: 8px;
  color: #f4efe7;
  background: #181818;
  font: inherit;
}

.hero-link-target-control select,
.hero-link-target-control option {
  font-size: 14px !important;
}

.hero-style-menu .hero-copy-visibility-toggle {
  color: #d2a352;
  background: rgba(210, 163, 82, 0.08);
  font-weight: 700;
}

.hero-media-editor {
  width: min(680px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid rgba(210, 163, 82, 0.46);
  border-radius: 22px;
  color: #f4efe7;
  background: #101010;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.7);
}

.hero-media-editor::backdrop {
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
}

.hero-media-editor__panel {
  display: grid;
}

.hero-media-editor__head,
.hero-media-editor__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
}

.hero-media-editor__head {
  border-bottom: 1px solid rgba(244, 239, 231, 0.1);
}

.hero-media-editor__head span,
.hero-media-editor__content small {
  color: rgba(244, 239, 231, 0.56);
  font-size: 11px;
}

.hero-media-editor__head h2 {
  margin: 5px 0 0;
  font-size: 1.35rem;
}

.hero-media-editor__head > button {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(244, 239, 231, 0.16);
  border-radius: 50%;
  color: inherit;
  background: transparent;
  font-size: 1.4rem;
  cursor: pointer;
}

.hero-media-editor__content {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.hero-media-editor__content label {
  display: grid;
  gap: 9px;
  font-size: 13px;
  font-weight: 700;
}

/* Keep mode-specific hero controls hidden when the editor marks them inactive. */
.hero-media-editor__content label[hidden] {
  display: none;
}

.hero-media-editor__content input {
  padding: 11px;
  border: 1px dashed rgba(210, 163, 82, 0.52);
  border-radius: 12px;
  color: inherit;
  background: rgba(255, 255, 255, 0.035);
}

.module-background-editor {
  width: min(760px, calc(100vw - 32px));
}

.module-background-editor__content select,
.module-background-editor__content textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid rgba(210, 163, 82, 0.42);
  border-radius: 12px;
  color: #f4efe7;
  background: #171717;
  font: inherit;
}

.module-background-editor__content textarea {
  min-height: 132px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  line-height: 1.6;
}

.module-background-editor__hint {
  margin: 0;
  padding: 11px 13px;
  border: 1px solid rgba(210, 163, 82, 0.22);
  border-radius: 12px;
  background: rgba(210, 163, 82, 0.07);
  color: rgba(244, 239, 231, 0.7);
  font-size: 12px;
  line-height: 1.65;
}

.module-background-editor__content label[hidden] {
  display: none;
}

.module-background-preview {
  position: relative;
  display: grid;
  min-height: 170px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(244, 239, 231, 0.14);
  border-radius: 14px;
  background-color: #080808;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: rgba(244, 239, 231, 0.6);
}

.module-background-preview canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.module-background-preview span {
  position: relative;
  z-index: 1;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.58);
  font-size: 11px;
}

.module-background-preview[data-background-mode="grainient"] {
  background: linear-gradient(135deg, #121212, #080808);
}

.module-background-preview[data-background-mode="black"] {
  background: #000;
}

.module-background-preview[data-background-mode="white"] {
  background: #fff;
}

.hero-media-editor__content input[type="range"] {
  width: 100%;
  padding: 0;
  border: 0;
  accent-color: #d2a352;
}

.hero-video-opacity-label {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 5px;
  color: rgba(244, 239, 231, 0.76);
  font-size: 12px;
  font-weight: 600;
}

.hero-video-opacity-label output {
  color: #d2a352;
}

.hero-media-editor__preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-height: 112px;
}

.hero-media-editor__preview img,
.hero-media-editor__preview video {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 10px;
  background: #080808;
}

.hero-media-editor__preview video:only-child,
.hero-media-editor__preview img:only-child {
  grid-column: 1 / -1;
}

.hero-media-editor__preview p {
  grid-column: 1 / -1;
  align-self: center;
  margin: 0;
  color: rgba(244, 239, 231, 0.52);
  text-align: center;
}

.hero-media-editor__actions {
  justify-content: flex-end;
  border-top: 1px solid rgba(244, 239, 231, 0.1);
}

.website-layout-editor {
  width: min(720px, calc(100vw - 32px));
}

.website-layout-editor__content {
  gap: 16px;
}

.website-layout-editor__hint {
  margin: 0;
  color: rgba(244, 239, 231, 0.64);
  font-size: 13px;
  line-height: 1.6;
}

.website-layout-list {
  display: grid;
  gap: 9px;
  max-height: min(52vh, 480px);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.website-layout-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 10px 14px;
  border: 1px solid rgba(244, 239, 231, 0.13);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.035);
  cursor: grab;
  transition: border-color 160ms ease, background 160ms ease, opacity 160ms ease;
}

.website-layout-item:hover {
  border-color: rgba(210, 163, 82, 0.58);
  background: rgba(210, 163, 82, 0.07);
}

.website-layout-item.is-dragging {
  opacity: 0.52;
  cursor: grabbing;
}

.website-layout-item__handle {
  color: #d2a352;
  font-size: 18px;
  letter-spacing: -6px;
}

.website-layout-item strong {
  font-size: 14px;
}

.website-layout-item small {
  color: rgba(244, 239, 231, 0.48);
  font-size: 11px;
}

.website-layout-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  padding-top: 4px;
}

.website-layout-add select {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid rgba(244, 239, 231, 0.16);
  border-radius: 10px;
  color: #f4efe7;
  background: #171717;
  font: inherit;
}

@media (max-width: 560px) {
  .website-layout-add {
    grid-template-columns: 1fr;
  }

  .website-layout-add .button {
    width: 100%;
  }

  .website-layout-item {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .website-layout-item small {
    grid-column: 2;
  }
}

.hero-button-color-editor__content output {
  justify-self: end;
  color: #d2a352;
  font-variant-numeric: tabular-nums;
}

.hero-button-color-preview {
  display: grid;
  min-height: 90px;
  place-items: center;
  border: 1px solid rgba(244, 239, 231, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
}

.hero-button-color-preview .hero-quick-link {
  display: inline-block;
}

#heroButtonColorHex {
  text-transform: uppercase;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

#work .filter-button.is-category-dragging {
  opacity: 0.42;
}

#work .filter-button.is-category-drop-target {
  border-color: #d2a352;
  box-shadow: 0 0 0 3px rgba(210, 163, 82, 0.18);
}

@media (max-width: 980px) {
  .ai-video-stage.ai-video-layout--grid > .ai-video-grid,
  .ai-video-stage.ai-video-layout--grid > .ai-video-grid.ai-video-grid--three-columns,
  .ai-video-stage.ai-video-layout--bottom > .ai-video-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 580px) {
  .ai-video-stage.ai-video-layout--grid > .ai-video-grid,
  .ai-video-stage.ai-video-layout--grid > .ai-video-grid.ai-video-grid--three-columns,
  .ai-video-stage.ai-video-layout--bottom > .ai-video-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Selected-work image corners */
#work .project-card {
  border-radius: 20px;
}

#work .project-card .work-visual,
#work .project-card .project-preview,
#work .work-grid.is-amazon-layout .amazon-aplus-item .work-visual,
#work .work-grid.is-amazon-layout .amazon-aplus-item .project-preview {
  border-radius: 20px;
}

/* Amazon A+ module: square covers, static frames, and swapped title/summary hierarchy. */
.amazon-aplus-section .amazon-aplus-item .work-visual {
  aspect-ratio: 1 / 1;
}

.amazon-aplus-section .amazon-aplus-item .project-preview {
  object-fit: cover;
}

.amazon-aplus-section .amazon-aplus-item .work-visual::before,
.amazon-aplus-section .amazon-aplus-item .work-visual::after,
.amazon-aplus-section .amazon-aplus-item .visual-wave,
.amazon-aplus-section .amazon-aplus-item .visual-track,
.amazon-aplus-section .amazon-aplus-item > .edge-light {
  display: none;
  animation: none;
}

.amazon-aplus-section .amazon-aplus-item .project-card__body {
  height: auto;
  min-height: 0;
  padding: 15px 16px 5px;
}

.amazon-aplus-section .amazon-aplus-item .project-type {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.45;
}

.amazon-aplus-section .amazon-project-summary {
  display: block;
  padding: 0 16px 16px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.65;
}

/* Selected-work covers: remove all decorative and animated line layers. */
#work .project-card::before,
#work .project-card::after,
#work .project-card > .edge-light,
#work .project-card .work-visual::before,
#work .project-card .work-visual::after,
#work .project-card .visual-wave,
#work .project-card .visual-track,
#work .site-showcase-card::before,
#work .site-showcase-card::after {
  display: none !important;
  animation: none !important;
}