:root {
  --navy: #0b1728;
  --surface: #111f33;
  --surface-light: #172943;
  --beige: #e9dfc9;
  --beige-dark: #d4be98;
  --muted: #b8b09f;
  --line: #34445a;
  --accent: #d4be98;
  --body: "DM Sans", Arial, sans-serif;
  --display: "Cormorant Garamond", Georgia, serif;
  --mono: "IBM Plex Mono", monospace;
  --gutter: clamp(20px, 5vw, 75px);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background: var(--navy);
  color: var(--beige);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

body.intro-active,
body.dialog-open { overflow: hidden; }

[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }
button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

button:focus-visible, a:focus-visible, .car-viewer:focus-visible {
  outline: 2px solid var(--beige-dark);
  outline-offset: 4px;
}

::selection { background: var(--beige-dark); color: var(--navy); }

.ambient {
  position: fixed;
  z-index: 0;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .1;
  pointer-events: none;
}

.ambient-one { top: 12%; right: -190px; background: var(--beige-dark); }
.ambient-two { top: 60%; left: -220px; background: #526a8b; }

.site-header, main, .site-footer { position: relative; z-index: 1; }

/* INTRO COVER */
.intro-cover {
  position: fixed;
  inset: 4px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  overflow: auto;
  padding: clamp(20px, 3.5vw, 48px) clamp(18px, 4vw, 58px);
  border: 1px solid #34445a;
  border-radius: 8px;
  background: radial-gradient(ellipse at 50% 45%, #d4be9817, transparent 45%), #0b1728;
  color: var(--beige);
  text-align: center;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .5s ease, transform .5s ease, visibility .5s ease;
}

.intro-cover.is-leaving {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
}

.intro-topline, .intro-bottomline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #b8b09f;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .13em;
  text-align: left;
}

.intro-topline i { margin-inline: 8px; color: var(--beige-dark); font-style: normal; }

.intro-brand-mark {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  flex: 0 0 35px;
  border: 1px solid #7c735f;
  border-radius: 50%;
  color: var(--beige);
  font-family: var(--body);
  font-size: 11px;
  font-weight: 900;
}

.intro-brand-mark span, .intro-title span { color: var(--beige-dark); }

.intro-main {
  width: min(100%, 1050px);
  margin: auto;
  padding-block: 28px;
}

.intro-kicker {
  margin: 0 0 clamp(24px, 4vh, 42px);
  color: var(--beige-dark);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .32em;
  line-height: 1.8;
}

.intro-title {
  margin: 0 auto;
  color: #f0e7d6;
  font-family: var(--display);
  font-size: clamp(42px, 8.1vw, 112px);
  font-weight: 300;
  line-height: .98;
  letter-spacing: .025em;
  text-transform: uppercase;
  white-space: nowrap;
}

.intro-rule {
  width: min(240px, 55%);
  height: 1px;
  margin: clamp(24px, 4vh, 40px) auto 22px;
  background: #59657a;
}

.intro-rule span {
  display: block;
  width: 34px;
  height: 1px;
  margin: auto;
  background: var(--beige-dark);
}

.intro-description {
  max-width: 420px;
  margin: 0 auto;
  color: #c0b9aa;
  font-size: 14px;
  line-height: 1.9;
}

.intro-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 21px;
  margin-top: clamp(32px, 5vh, 52px);
}

.intro-enter-sound, .intro-enter-silent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 0;
  background: transparent;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .13em;
  cursor: pointer;
}

.intro-enter-sound {
  min-height: 39px;
  padding: 7px 0 10px;
  border-bottom: 1px solid #c7b99f;
  color: var(--beige);
  transition: color .15s ease, border-color .15s ease;
}

.intro-enter-sound:hover { color: white; border-color: white; }
.intro-play, .intro-enter-arrow { color: var(--beige-dark); }

.intro-enter-silent {
  color: #b8b09f;
  font-size: 9px;
  letter-spacing: .18em;
}

.intro-enter-silent:hover { color: white; }

.intro-note {
  margin: clamp(30px, 5vh, 48px) 0 0;
  color: #a49b8a;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .14em;
  line-height: 1.8;
}

.music-status {
  min-height: 15px;
  margin: 0;
  color: #c8bca5;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .04em;
}

.intro-bottomline { color: #b8b09f; font-size: 8px; }

.sound-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 70;
  min-height: 38px;
  padding: 10px 13px;
  border: 1px solid #6f6654;
  border-radius: 2px;
  background: #0b1728ed;
  color: var(--beige);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .06em;
  cursor: pointer;
}

.sound-toggle[aria-pressed="true"] { background: #27374b; color: #fff1d8; }

/* HEADER */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 13px var(--gutter);
  border-bottom: 1px solid #34445a;
  background: rgb(11 23 40 / 95%);
  backdrop-filter: blur(16px);
}

.brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }

.brand-symbol {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid #7c735f;
  border-radius: 50%;
  color: var(--beige);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: -1px;
}

.brand-symbol span { color: var(--beige-dark); }
.brand-name { font-size: 11px; font-weight: 900; letter-spacing: .12em; }

.site-nav { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2.5vw, 34px); }

.site-nav a {
  position: relative;
  padding: 9px 0;
  color: #d0c7b6;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  transition: color .15s ease;
}

.site-nav a::after {
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  height: 1px;
  background: var(--beige-dark);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .15s ease;
}

.site-nav a:hover { color: white; }
.site-nav a:hover::after { transform: scaleX(1); }

.language-toggle, .menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 9px 13px;
  border: 1px solid #56647a;
  border-radius: 999px;
  background: #14243a;
  color: var(--beige);
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.language-toggle:hover, .menu-toggle:hover { border-color: var(--beige-dark); }
.menu-toggle { display: none; }

/* SHARED */
.section-shell { width: min(1320px, 100%); margin-inline: auto; padding-inline: var(--gutter); }

.content-section {
  padding-top: clamp(76px, 9vw, 125px);
  padding-bottom: clamp(76px, 9vw, 125px);
}

.eyebrow { margin: 0; font-size: 10px; font-weight: 900; line-height: 1.7; letter-spacing: .14em; }
.red-dot, .accent-text, .headline-accent { color: var(--beige-dark); }

.section-topline {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #b8b09f;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
}

.section-rule { width: 42px; height: 1px; flex-shrink: 0; background: var(--beige-dark); }

.editorial-heading {
  max-width: 760px;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(37px, 5.1vw, 66px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.045em;
}

/* HERO */
.hero {
  position: relative;
  min-height: min(790px, calc(100svh - 76px));
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(0, .97fr);
  align-items: center;
  gap: clamp(22px, 3vw, 42px);
  padding-top: 60px;
  padding-bottom: 90px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.hero-copy { position: relative; z-index: 2; min-width: 0; }
.hero-copy > .eyebrow { color: #c0b49e; }

.hero h1 {
  margin: 26px 0 25px;
  font-family: var(--display);
  font-size: clamp(40px, 5.25vw, 73px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.055em;
}

.hero-description { max-width: 470px; margin: 0; color: #c0b9aa; font-size: 13px; line-height: 1.95; }

.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 21px; margin-top: 29px; }

.button {
  min-height: 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 13px 17px;
  border: 1px solid transparent;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .07em;
  text-align: center;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}

.button-accent { background: var(--beige-dark); color: var(--navy); }
.button-accent:hover { background: #e8d7b9; }
.button-outline { border-color: #667389; background: transparent; color: var(--beige); }
.button-outline:hover { border-color: var(--beige-dark); background: #ffffff08; }
.text-link { color: #d1c8b9; font-size: 10px; font-weight: 700; }
.text-link:hover { color: white; }

.hero-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 43px; color: #a49b8a; font-size: 8px; font-weight: 900; letter-spacing: .1em; }

.hero-bottom {
  position: absolute;
  right: var(--gutter);
  bottom: 20px;
  left: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  color: #a49b8a;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .1em;
}

.hero-bottom a { color: var(--beige); }

/* 3D VIEWER */
.hero-visual { min-width: 0; min-height: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding-block: 14px; }

.visual-topline, .visual-bottomline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #b8b09f;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .09em;
}

.car-viewer {
  position: relative;
  width: 100%;
  min-height: 350px;
  flex: 1;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid #45546b;
  background: radial-gradient(ellipse at 50% 48%, #344760 0%, #17263a 48%, #0b1728 100%);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.car-viewer.is-dragging { cursor: grabbing; }

.car-viewer-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: linear-gradient(#e9dfc90c 1px, transparent 1px), linear-gradient(90deg, #e9dfc90c 1px, transparent 1px);
  background-size: 35px 35px;
  pointer-events: none;
}

#car-canvas { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; outline: none; }

.car-viewer-label, .car-viewer-hint, .car-viewer-status {
  position: absolute;
  z-index: 2;
  max-width: calc(100% - 24px);
  padding: 9px 11px;
  border: 1px solid #56647a;
  background: #0b1728ed;
  color: var(--beige);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .07em;
  line-height: 1.5;
  pointer-events: none;
}

.car-viewer-label { top: 15px; left: 15px; display: flex; align-items: center; gap: 8px; }
.car-viewer-hint { right: 15px; bottom: 15px; border-color: #8b7958; color: #e8d7b9; }
.car-viewer-status { bottom: 15px; left: 15px; color: #c0b49e; }

/* ABOUT */
.about-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 10%; margin-top: 42px; }
.about-copy p { margin: 0 0 20px; color: #c0b9aa; font-size: 13px; line-height: 1.95; }
.about-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.about-tags span { padding: 8px 11px; border: 1px solid #45546b; color: var(--beige); font-size: 9px; font-weight: 800; }

/* SECTION HEADINGS */
.section-heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin: 38px 0; }
.section-heading-row > p { max-width: 350px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.85; }

/* EXPERTISE */
.expertise-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); background: var(--line); }

.expertise-card {
  position: relative;
  min-width: 0;
  min-height: 255px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(20px, 3vw, 33px);
  overflow: hidden;
  border: 0;
  background: var(--surface);
  color: var(--beige);
  text-align: left;
  cursor: pointer;
  transition: background-color .15s ease;
}

.expertise-card:hover { background: #1a2b42; }
.expertise-card:focus-visible { z-index: 2; outline-offset: -5px; }
.expertise-card::after { position: absolute; right: -65px; bottom: -95px; width: 175px; height: 175px; border: 1px solid #d4be9840; border-radius: 50%; content: ""; pointer-events: none; }
.card-number { position: absolute; top: 22px; right: 22px; color: #c0b49e; font-family: var(--display); font-size: 14px; }
.card-symbol { display: inline-flex; align-items: center; min-height: 30px; padding: 7px 10px; border: 1px solid #59657a; color: var(--beige); font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.expertise-card h3 { margin: auto 0 12px; font-size: clamp(17px, 1.7vw, 22px); font-weight: 800; letter-spacing: -.035em; }
.expertise-card p { max-width: 300px; margin: 0; color: #c0b9aa; font-size: 11px; line-height: 1.85; }
.card-link { position: relative; z-index: 1; margin-top: 22px; color: var(--beige-dark); font-size: 9px; font-weight: 900; letter-spacing: .08em; }

/* PROJECTS */
.featured-project { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(25px, 5vw, 65px); margin-top: 40px; padding: 28px 0 40px; border-bottom: 1px solid var(--line); }
.featured-project.project-reverse .project-art { order: 2; }
.project-art { position: relative; min-width: 0; min-height: 320px; display: grid; place-items: center; overflow: hidden; border: 1px solid #45546b; background: #14243a; }
.project-art-index, .project-art-caption { position: absolute; z-index: 2; color: #c0b49e; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.project-art-index { top: 20px; left: 20px; }
.project-art-caption { right: 20px; bottom: 20px; }
.project-lens { width: min(60%, 255px); aspect-ratio: 1; border: 1px solid #d4be98; border-radius: 50%; background: repeating-radial-gradient(circle, #d4be98 0 1px, #24354b 2px 5px, #b7a27d 6px 7px, #14243a 8px 11px); box-shadow: 0 0 0 15px #d4be9812, 0 0 50px #d4be9818; }
.bloom-art { background: linear-gradient(140deg, #27364a, #101d30); }
.bloom-orbit { width: 170px; height: 170px; display: grid; place-items: center; border: 1px solid #cbb58e; border-radius: 50%; color: var(--beige); font-family: var(--display); font-size: 75px; box-shadow: 0 0 0 15px #d4be9818, 0 0 0 34px #d4be980a; }
.project-info h3 { margin: 15px 0; font-family: var(--display); font-size: clamp(35px, 4.3vw, 54px); font-weight: 400; line-height: 1.05; letter-spacing: -.04em; }
.project-info > p:not(.eyebrow) { max-width: 490px; margin: 0 0 27px; color: #c0b9aa; font-size: 12px; line-height: 1.95; }

/* EXPERIENCE */
.experience-list { margin-top: 42px; border-top: 1px solid var(--line); }
.experience-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 25px; align-items: center; gap: 22px; padding: 27px 0; border-bottom: 1px solid var(--line); }
.experience-year, .experience-arrow { color: var(--beige-dark); }
.experience-year { font-family: var(--display); font-size: 23px; }
.experience-label { color: #c0b49e; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.experience-body h3 { margin: 8px 0; font-size: 16px; font-weight: 800; }
.experience-body p { margin: 0; color: #c0b9aa; font-size: 11px; line-height: 1.8; }

/* CONTACT */
.contact-section { padding: clamp(75px, 10vw, 130px) var(--gutter); border-top: 1px solid var(--line); background: radial-gradient(ellipse at 80% 100%, #d4be9812, transparent 45%), #0b1728; }
.contact-inner { width: min(1320px, 100%); margin-inline: auto; }
.contact-inner h2 { max-width: 900px; margin: 27px 0; font-family: var(--display); font-size: clamp(43px, 7vw, 88px); font-weight: 400; line-height: .99; letter-spacing: -.045em; }
.contact-inner > p:not(.eyebrow) { color: #c0b9aa; font-size: 13px; line-height: 1.8; }
.contact-email { display: inline-block; max-width: 100%; margin-top: 27px; padding-bottom: 11px; border-bottom: 1px solid var(--beige-dark); color: var(--beige); font-size: clamp(11px, 1.6vw, 15px); font-weight: 800; overflow-wrap: anywhere; }

/* FOOTER */
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 24px var(--gutter); border-top: 1px solid var(--line); color: #b8b09f; font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.site-footer > a:last-child { color: var(--beige); }

/* DETAIL MODAL */
.detail-dialog { position: fixed; inset: 50% auto auto 50%; z-index: 101; width: min(920px, calc(100% - 32px)); max-width: none; max-height: min(86dvh, 900px); margin: 0; padding: 0; overflow: auto; border: 1px solid #45546b; background: #111f33; color: var(--beige); opacity: 0; transform: translate(-50%, -48%); transition: opacity .14s ease; }
.detail-dialog[open] { opacity: 1; transform: translate(-50%, -50%); }
.detail-dialog::backdrop { background: transparent; }
.dialog-backdrop { position: fixed; inset: 0; z-index: 100; visibility: hidden; background: #050b14d9; opacity: 0; transition: opacity .14s ease, visibility .14s ease; }
.dialog-backdrop.show { visibility: visible; opacity: 1; }
.dialog-topbar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 20px; border-bottom: 1px solid var(--line); background: #0e1a2c; color: #c0b49e; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.dialog-close { width: 35px; height: 35px; border: 1px solid #56647a; background: #172943; color: var(--beige); cursor: pointer; }
.dialog-close:hover { border-color: var(--beige-dark); }
.dialog-content { padding: clamp(20px, 4vw, 40px); }
.dialog-content h2 { margin: 8px 0 15px; font-family: var(--display); font-size: clamp(36px, 6vw, 57px); font-weight: 400; line-height: 1; letter-spacing: -.04em; }
.dialog-content h3 { margin: 22px 0 10px; font-size: 17px; font-weight: 800; }
.dialog-content p, .dialog-content li { color: #c0b9aa; font-size: 12px; line-height: 1.9; }
.dialog-kicker, .detail-timeline time { color: var(--beige-dark); font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.detail-divider { height: 1px; margin: 25px 0; background: var(--line); }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.detail-tile { min-width: 0; padding: 17px; border: 1px solid #40516a; background: #172943; }
.detail-tile strong { display: block; margin-bottom: 8px; color: var(--beige); font-size: 13px; }
.detail-tile p { margin: 0; font-size: 11px; }
.detail-timeline { padding-left: 20px; border-left: 1px solid #8a7958; }
.detail-timeline article { position: relative; padding: 0 0 25px 5px; }
.detail-timeline article::before { position: absolute; top: 4px; left: -25px; width: 9px; height: 9px; border: 2px solid var(--beige-dark); border-radius: 50%; background: #111f33; content: ""; }
.detail-timeline article:last-child { padding-bottom: 0; }
.detail-timeline h3 { margin: 7px 0; }
.detail-timeline p { margin: 0 0 12px; }
.pdf-document-list { display: flex; flex-direction: column; margin-top: 20px; border-top: 1px solid var(--line); }
.pdf-document { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.pdf-file-icon { width: 40px; height: 46px; display: grid; place-items: center; border: 1px solid #8a7958; background: var(--beige); color: var(--navy); font-size: 10px; font-weight: 900; }
.pdf-file-period { display: block; margin-bottom: 6px; color: var(--beige-dark); font-family: var(--mono); font-size: 9px; line-height: 1.6; }
.pdf-file-info h3 { margin: 0 0 5px; font-size: 14px; }
.pdf-file-info p { margin: 0 0 5px; font-size: 11px; }
.pdf-filename { color: #c0b49e; font-family: var(--mono); font-size: 9px; overflow-wrap: anywhere; }
.pdf-file-actions { display: flex; flex-direction: column; gap: 7px; min-width: 95px; }
.pdf-action { min-height: 33px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 10px; border: 1px solid #56647a; color: var(--beige); font-size: 10px; font-weight: 800; text-align: center; }
.pdf-action-primary { border-color: var(--beige-dark); background: var(--beige-dark); color: var(--navy); }
.pdf-privacy-note { margin-top: 20px; padding-left: 12px; border-left: 2px solid #8a7958; font-size: 10px !important; }

/* RESPONSIVE */
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0,1fr) minmax(0,.85fr); gap: 22px; }
  .hero h1 { font-size: clamp(38px,5.2vw,58px); }
  .expertise-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .expertise-card { min-height: 235px; }
  .featured-project { gap: 28px; }
}

@media (max-width: 650px) {
  html { scroll-padding-top: 78px; }
  .intro-cover { inset: 3px; gap: 18px; padding: 20px 17px 18px; }
  .intro-topline { justify-content: flex-start; gap: 10px; font-size: 7px; letter-spacing: .04em; }
  .intro-brand-mark { width: 30px; height: 30px; flex-basis: 30px; font-size: 10px; }
  .intro-location { display: none; }
  .intro-main { padding-block: 18px; }
  .intro-kicker { margin-bottom: 25px; font-size: 8px; letter-spacing: .18em; }
  .intro-title { font-size: clamp(30px,8.1vw,49px); letter-spacing: .005em; }
  .intro-description { max-width: 310px; font-size: 12px; }
  .intro-actions { gap: 22px; margin-top: 30px; }
  .intro-enter-sound { gap: 9px; font-size: 9px; letter-spacing: .08em; }
  .intro-enter-silent { font-size: 8px; letter-spacing: .12em; }
  .intro-note, .intro-bottomline { font-size: 7px; letter-spacing: .06em; }

  .site-header { min-height: 66px; gap: 9px; padding: 11px 16px; }
  .brand { gap: 8px; }
  .brand-symbol { width: 33px; height: 33px; font-size: 10px; }
  .brand-name { font-size: 9px; letter-spacing: .06em; }
  .menu-toggle { display: inline-flex; margin-left: auto; }
  .site-nav { position: absolute; top: 100%; right: 0; left: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 7px 18px 15px; border-bottom: 1px solid var(--line); background: var(--navy); }
  .site-header.menu-open .site-nav { display: flex; }
  .site-nav a { padding: 14px 4px; border-bottom: 1px solid var(--line); }
  .site-nav a::after { display: none; }
  .language-toggle { min-height: 34px; padding: 8px 9px; font-size: 9px; }

  .section-shell { padding-right: 20px; padding-left: 20px; }
  .hero { min-height: auto; grid-template-columns: minmax(0,1fr); gap: 23px; padding-top: 39px; padding-bottom: 75px; }
  .hero-copy > .eyebrow { font-size: 8px; letter-spacing: .055em; }
  .hero h1 { margin: 19px 0; font-size: clamp(33px,9vw,54px); line-height: 1.07; letter-spacing: -.055em; }
  .hero-description { font-size: 12px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 17px; }
  .hero-meta { gap: 9px 13px; margin-top: 30px; font-size: 7px; }
  .hero-visual { min-height: 0; gap: 11px; padding: 8px 0; }
  .visual-topline, .visual-bottomline { font-size: 7px; letter-spacing: .035em; }
  .car-viewer { height: 78vw; min-height: 275px; max-height: 390px; flex: none; }
  .car-viewer-label, .car-viewer-hint, .car-viewer-status { padding: 7px 8px; font-size: 7px; letter-spacing: .015em; }
  .car-viewer-label { top: 10px; left: 10px; }
  .car-viewer-hint { right: 10px; bottom: 10px; }
  .car-viewer-status { bottom: 10px; left: 10px; }
  .hero-bottom { right: 20px; bottom: 19px; left: 20px; font-size: 7px; }

  .content-section { padding-top: 73px; padding-bottom: 73px; }
  .section-topline { gap: 9px; font-size: 7px; letter-spacing: .05em; }
  .section-rule { width: 22px; }
  .about-layout { grid-template-columns: minmax(0,1fr); gap: 24px; margin-top: 29px; }
  .editorial-heading { font-size: clamp(36px,9.5vw,51px); }
  .about-copy p { font-size: 12px; }
  .section-heading-row { align-items: flex-start; flex-direction: column; gap: 13px; margin: 28px 0; }
  .section-heading-row > p { font-size: 11px; }

  .expertise-grid { grid-template-columns: minmax(0,1fr); }
  .expertise-card { min-height: 205px; padding: 22px; }
  .expertise-card h3 { font-size: 21px; }
  .featured-project { grid-template-columns: minmax(0,1fr); gap: 22px; padding-top: 24px; }
  .featured-project.project-reverse .project-art { order: 0; }
  .project-art { min-height: 250px; }
  .project-info h3 { font-size: 42px; }
  .project-info > p:not(.eyebrow) { font-size: 11px; }

  .experience-row { grid-template-columns: 65px minmax(0,1fr) 12px; gap: 11px; padding: 22px 0; }
  .experience-year { font-size: 16px; }
  .experience-label { font-size: 7px; letter-spacing: .06em; }
  .experience-body h3 { font-size: 13px; line-height: 1.5; }
  .experience-body p { font-size: 10px; }

  .contact-section { padding: 75px 20px; }
  .contact-inner h2 { font-size: clamp(42px,11.3vw,62px); }
  .contact-inner > p:not(.eyebrow) { font-size: 12px; }
  .contact-email { font-size: 11px; }

  .site-footer { align-items: flex-start; flex-direction: column; gap: 17px; padding: 24px 20px; font-size: 8px; }
  .detail-dialog { width: calc(100% - 18px); max-height: 90dvh; }
  .dialog-topbar { padding: 12px 14px; }
  .dialog-content { padding: 19px; }
  .dialog-content h2 { font-size: clamp(34px,9vw,42px); line-height: 1.08; }
  .dialog-content p, .dialog-content li { font-size: 11px; }
  .detail-grid { grid-template-columns: minmax(0,1fr); }

  .pdf-document { grid-template-columns: 36px minmax(0,1fr); align-items: start; gap: 12px; padding: 19px 0; }
  .pdf-file-icon { width: 35px; height: 42px; font-size: 9px; }
  .pdf-file-period { font-size: 8px; }
  .pdf-file-info h3 { font-size: 14px; }
  .pdf-file-actions { grid-column: 2; flex-direction: row; flex-wrap: wrap; min-width: 0; margin-top: 2px; }
  .pdf-action { min-height: 36px; }
  .sound-toggle { right: 12px; bottom: 12px; font-size: 8px; }
}

@media (max-width: 360px) {
  .intro-title { font-size: 29px; }
  .intro-topline { font-size: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}


/* ==========================================
   DESIGNED BY RANGGA — ANIMATED SIGNATURE
========================================== */

.designed-by {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: clamp(50px, 8vw, 95px) 20px clamp(40px, 6vw, 70px);
  border-top: 1px solid var(--line);
  background:
    radial-gradient(
      ellipse at 50% 50%,
      #d4be9810,
      transparent 65%
    ),
    var(--navy);
  text-align: center;
}

.designed-by-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  color: var(--beige-dark);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .27em;
}

.designer-line {
  width: clamp(22px, 5vw, 54px);
  height: 1px;
  background: #8d7c60;
}

.signature-stage {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  max-width: 100%;
  padding: 0 8px;
  animation: rangga-float 4.5s ease-in-out 1.8s infinite;
  transform-origin: center;
}

.signature-text {
  display: inline-block;
  color: var(--beige);
  font-family: "Allura", cursive;
  font-size: clamp(58px, 9vw, 112px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: .005em;
  white-space: nowrap;
  clip-path: inset(0 100% 0 0);
  animation: rangga-write 1.7s cubic-bezier(.22, .75, .25, 1) .25s forwards;
}

.signature-dot {
  color: var(--beige-dark);
  font-family: "Allura", cursive;
  font-size: clamp(58px, 9vw, 112px);
  opacity: 0;
  animation: rangga-dot-appear .3s ease 1.65s forwards;
}

.designed-by-note {
  margin: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: .2em;
  line-height: 1.8;
}

@keyframes rangga-write {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes rangga-dot-appear {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes rangga-float {
  0%, 100% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-7px) rotate(-0.6deg);
  }
}

@media (max-width: 480px) {
  .designed-by {
    gap: 12px;
    padding: 55px 14px 42px;
  }

  .signature-text,
  .signature-dot {
    font-size: clamp(49px, 12vw, 68px);
  }

  .designed-by-label {
    font-size: 8px;
    letter-spacing: .2em;
  }

  .designed-by-note {
    font-size: 7px;
    letter-spacing: .12em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .signature-stage {
    animation: none;
  }

  .signature-text {
    clip-path: none;
    animation: none;
  }

  .signature-dot {
    opacity: 1;
    animation: none;
  }
}


/* SIGNATURE: WRITES WHEN IT ENTERS THE SCREEN */

.signature-stage {
  position: relative;
  width: fit-content;
  max-width: 100%;
  transform-origin: center;
}

.signature-text {
  display: inline-block;
  clip-path: inset(0 100% 0 0);
  animation: none;
}

.signature-dot {
  opacity: 0;
  animation: none;
}

/* Moving pen nib */
.signature-pen {
  position: absolute;
  z-index: 2;
  top: 38%;
  left: 0;
  width: 27px;
  height: 4px;
  border-radius: 2px;
  background: var(--beige);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-45deg);
  box-shadow: 0 0 9px #d4be9840;
}

.signature-pen::before {
  position: absolute;
  right: -5px;
  top: 0;
  width: 0;
  height: 0;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  border-left: 6px solid var(--beige-dark);
  content: "";
}

/* Start only when JavaScript adds .is-writing */
.designed-by.is-writing .signature-text {
  animation: signature-write 3.4s cubic-bezier(.45, 0, .25, 1) forwards;
}

.designed-by.is-writing .signature-dot {
  animation: signature-dot 0.15s ease 3.25s forwards;
}

.designed-by.is-writing .signature-pen {
  animation: signature-pen-move 3.4s cubic-bezier(.45, 0, .25, 1) forwards;
}

.designed-by.is-writing .signature-stage {
  animation: signature-finish 4s ease-in-out 3.5s infinite;
}

@keyframes signature-write {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes signature-dot {
  to { opacity: 1; }
}

@keyframes signature-pen-move {
  0% {
    left: 0;
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

@keyframes signature-finish {
  0%, 100% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-3px) rotate(-0.25deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .designed-by .signature-text {
    clip-path: none;
    animation: none;
  }

  .designed-by .signature-dot {
    opacity: 1;
    animation: none;
  }

  .designed-by .signature-pen {
    display: none;
  }

  .designed-by .signature-stage {
    animation: none;
  }
}


/* ==========================================
   PREMIUM NAVY-BEIGE CUSTOM CURSOR
========================================== */

@media (hover: hover) and (pointer: fine) {
  body.custom-cursor-active,
  body.custom-cursor-active a,
  body.custom-cursor-active button,
  body.custom-cursor-active [role="button"],
  body.custom-cursor-active .car-viewer {
    cursor: none !important;
  }

  .cursor-ring,
  .cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: opacity .2s ease;
    will-change: left, top, width, height, transform;
  }

  .cursor-ring {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #D4BE98;
    background: rgb(11 23 40 / 12%);
    color: #0B1728;
    transition:
      width .24s ease,
      height .24s ease,
      background-color .24s ease,
      border-color .24s ease,
      opacity .2s ease;
  }

  .cursor-dot {
    width: 5px;
    height: 5px;
    background: #D4BE98;
  }

  body.custom-cursor-active .cursor-ring.is-visible,
  body.custom-cursor-active .cursor-dot.is-visible {
    opacity: 1;
  }

  .cursor-ring.is-hovering {
    width: 68px;
    height: 68px;
    border-color: #E9DFC9;
    background: #D4BE98;
  }

  .cursor-ring.is-hovering #cursor-label {
    opacity: 1;
    transform: scale(1);
  }

  .cursor-dot.is-hovering {
    opacity: 0 !important;
  }

  #cursor-label {
    font-family: "IBM Plex Mono", monospace;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .04em;
    opacity: 0;
    transform: scale(.8);
    transition: opacity .2s ease, transform .2s ease;
  }

  .cursor-ring.is-pressed {
    width: 27px;
    height: 27px;
  }
}

@media (hover: none), (pointer: coarse) {
  .cursor-ring,
  .cursor-dot {
    display: none !important;
  }
}


/* FINAL HORIZONTAL SCROLL LOCK */

html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
  overscroll-behavior-x: none;
}

body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  overflow-x: hidden !important;
  overscroll-behavior-x: none;
}

#intro-cover,
.site-header,
main,
.site-footer {
  max-width: 100%;
}

@media (max-width: 650px) {
  .hero,
  .hero-copy,
  .hero-visual,
  .section-shell,
  .content-section,
  .contact-section {
    min-width: 0;
    max-width: 100%;
  }

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

  .hero-visual,
  #car-viewer {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .expertise-grid,
  .about-layout,
  .featured-project {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* FIX: RESTORE VISIBLE CURSOR INSIDE DETAIL / PDF POPUP */

@media (hover: hover) and (pointer: fine) {
  /* Restore the normal mouse pointer while a popup is open */
  body.custom-cursor-active.dialog-open,
  body.custom-cursor-active.dialog-open .detail-dialog,
  body.custom-cursor-active.dialog-open .detail-dialog * {
    cursor: auto !important;
  }

  /* Show a clickable hand over PDF links and buttons */
  body.custom-cursor-active.dialog-open .detail-dialog a,
  body.custom-cursor-active.dialog-open .detail-dialog button,
  body.custom-cursor-active.dialog-open .detail-dialog [role="button"] {
    cursor: pointer !important;
  }

  /* Keep the original custom cursor on the main page */
  body.custom-cursor-active:not(.dialog-open) {
    cursor: none !important;
  }
}


/* EXPERIENCE DETAILS — LINKEDIN-ALIGNED */

.experience-company {
  margin-top: 5px;
  color: var(--beige);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
}

.experience-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.8;
}

.experience-points {
  margin: 12px 0 0;
  padding-left: 17px;
  color: var(--muted);
}

.experience-points li {
  padding: 3px 0;
  font-size: 11px;
  line-height: 1.8;
}

.experience-row {
  align-items: start;
}

.experience-body {
  min-width: 0;
}

@media (max-width: 650px) {
  .experience-company {
    font-size: 11px;
  }

  .experience-meta {
    font-size: 9px;
  }

  .experience-points {
    padding-left: 15px;
  }

  .experience-points li {
    font-size: 10px;
  }
}


/* ==========================================
   RANGGA HARDIKA — CINEMATIC AUTOMOTIVE HEADER
========================================== */

.site-header {
  position: sticky;
  isolation: isolate;
  background:
    radial-gradient(
      circle at 92% 50%,
      rgba(212, 190, 152, 0.07),
      transparent 19%
    ),
    linear-gradient(
      100deg,
      #0b1728 0%,
      #101e32 52%,
      #0b1728 100%
    );
  border-bottom: 1px solid rgba(212, 190, 152, 0.22);
}

/* Animated scanner beam along the bottom edge */
.site-header::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  z-index: 0;
  width: clamp(100px, 24vw, 340px);
  height: 2px;

  background: linear-gradient(
    90deg,
    transparent,
    #8b1e2d 28%,
    #d4be98 65%,
    #fff0d3 78%,
    transparent
  );

  box-shadow: 0 0 12px rgba(212, 190, 152, 0.24);
  pointer-events: none;

  animation: rh-header-scan 6s cubic-bezier(.45, 0, .35, 1) infinite;
}

/* Rotating technical ring near the language switch */
.site-header::after {
  content: "";
  position: absolute;
  top: 50%;
  right: clamp(82px, 9vw, 145px);
  z-index: 0;

  width: 35px;
  height: 35px;
  border: 1px solid rgba(212, 190, 152, 0.22);
  border-top-color: #d4be98;
  border-right-color: #8b1e2d;
  border-radius: 50%;

  transform: translateY(-50%);
  pointer-events: none;

  animation: rh-header-orbit 12s linear infinite;
}

/* Keep actual navigation and logo above the decorative effects */
.site-header > * {
  position: relative;
  z-index: 1;
}

/* Subtle breathing glow on the monogram */
.brand-symbol {
  animation: rh-logo-glow 4s ease-in-out infinite;
  transition:
    border-color .3s ease,
    background-color .3s ease,
    box-shadow .3s ease;
}

.brand-symbol:hover {
  border-color: #e9dfc9;
  background-color: rgba(212, 190, 152, 0.08);
  box-shadow: 0 0 20px rgba(212, 190, 152, 0.16);
}

/* Cleaner animated nav underline */
.site-nav a {
  transition:
    color .25s ease,
    letter-spacing .25s ease;
}

.site-nav a::after {
  transform: scaleX(0);
  transform-origin: center;
  background: linear-gradient(
    90deg,
    transparent,
    #d4be98,
    #8b1e2d,
    transparent
  );
  transition: transform .3s ease;
}

.site-nav a:hover {
  color: #fff0d3;
}

.site-nav a:hover::after {
  transform: scaleX(1);
}

/* Language button reacts gently to hover */
.language-toggle {
  transition:
    border-color .25s ease,
    background-color .25s ease,
    box-shadow .25s ease;
}

.language-toggle:hover {
  border-color: #d4be98;
  background-color: rgba(212, 190, 152, 0.1);
  box-shadow: 0 0 16px rgba(212, 190, 152, 0.08);
}

@keyframes rh-header-scan {
  0% {
    transform: translateX(0);
    opacity: .35;
  }

  45% {
    opacity: 1;
  }

  100% {
    transform: translateX(calc(100vw - 100%));
    opacity: .5;
  }
}

@keyframes rh-header-orbit {
  from {
    transform: translateY(-50%) rotate(0deg);
  }

  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

@keyframes rh-logo-glow {
  0%, 100% {
    box-shadow: 0 0 0 rgba(212, 190, 152, 0);
  }

  50% {
    box-shadow: 0 0 13px rgba(212, 190, 152, 0.11);
  }
}

@media (max-width: 650px) {
  .site-header::after {
    display: none;
  }

  .site-header::before {
    width: 32vw;
    animation-duration: 4.5s;
  }

  .brand-symbol {
    animation-duration: 5s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header::before,
  .site-header::after,
  .brand-symbol {
    animation: none;
  }

  .site-nav a,
  .site-nav a::after,
  .language-toggle {
    transition: none;
  }
}


/* ==========================================
   HEADER CLEANUP — NAVY / BEIGE
========================================== */

/* Remove the misplaced rotating circle */
.site-header::after {
  content: none !important;
  display: none !important;
}

/* Align header items cleanly */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2.5vw, 36px);
  min-width: 0;
  overflow: clip;
}

/* Keep logo and brand together */
.site-header .brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 12px;
  white-space: nowrap;
}

/* Center navigation with balanced spacing */
.site-header .site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: clamp(16px, 2.5vw, 34px);
}

/* Keep language button separate from ornaments */
.site-header .language-toggle {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
}

/* Keep the animated light line subtle */
.site-header::before {
  z-index: 1;
  pointer-events: none;
  height: 1px;
  box-shadow: 0 0 8px rgba(212, 190, 152, 0.18);
}

@media (max-width: 900px) {
  .site-header .site-nav {
    gap: 14px;
  }
}

@media (max-width: 650px) {
  .site-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    padding-inline: 12px;
  }

  .site-header .brand {
    min-width: 0;
    gap: 7px;
  }

  .site-header .brand-name {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 9px;
  }

  .site-header .menu-toggle {
    display: inline-flex;
    margin: 0;
  }

  .site-header .language-toggle {
    margin: 0;
    padding-inline: 9px;
  }

  .site-header .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    width: 100%;
    padding: 10px 18px;
    background: #0b1728;
  }

  .site-header.menu-open .site-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
}


/* ==========================================
   RESTORE HEADER SCANNER + TECH BADGE
========================================== */

.site-header {
  position: sticky;
  isolation: isolate;
  overflow: visible;
}

/* Animated beige light scanning the header edge */
.site-header::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  left: 0;
  bottom: -1px;
  z-index: 5;
  width: clamp(100px, 22vw, 320px);
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    #8b1e2d 25%,
    #d4be98 67%,
    #fff0d3 78%,
    transparent
  );
  box-shadow: 0 0 10px #d4be9833;
  pointer-events: none;
  animation: rh-header-scan-restored 5s ease-in-out infinite alternate;
}

/* Rotating technical badge beside language button */
.site-header::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  top: 50%;
  right: calc(var(--gutter) + 100px);
  z-index: 1;
  width: 25px;
  height: 25px;
  border: 1px solid #d4be9860;
  border-top-color: #d4be98;
  border-right-color: #8b1e2d;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    #d4be98 0 2px,
    transparent 3px
  );
  box-shadow: 0 0 12px #d4be9810;
  transform: translateY(-50%);
  pointer-events: none;
  animation: rh-badge-spin 8s linear infinite;
}

.site-header > * {
  position: relative;
  z-index: 2;
}

@keyframes rh-header-scan-restored {
  0% {
    transform: translateX(0);
    opacity: .45;
  }
  100% {
    transform: translateX(calc(100vw - 100%));
    opacity: 1;
  }
}

@keyframes rh-badge-spin {
  from {
    transform: translateY(-50%) rotate(0deg);
  }
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

/* Avoid crowding the navigation on smaller screens */
@media (max-width: 900px) {
  .site-header::after {
    display: none !important;
  }
}

@media (max-width: 650px) {
  .site-header::before {
    width: 30vw;
    animation-duration: 4s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header::before,
  .site-header::after {
    animation: none;
  }
}


/* ==========================================
   ABOUT SECTION — TIGHTER, CLEANER SPACING
========================================== */

#about.content-section {
  min-height: 0 !important;
  height: auto !important;
  padding-top: clamp(48px, 5vw, 70px);
  padding-bottom: clamp(38px, 4vw, 58px);
  margin-bottom: 0;
}

/* Bring the heading and description closer together */
#about .about-layout {
  align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 6vw, 85px);
  margin-top: clamp(26px, 3vw, 38px);
}

/* Keep the heading bold in composition, not oversized in spacing */
#about .editorial-heading {
  max-width: 650px;
  font-size: clamp(36px, 4.5vw, 60px);
  line-height: 1.06;
}

/* Tighten paragraph rhythm */
#about .about-copy p {
  margin-bottom: 14px;
  font-size: 12px;
  line-height: 1.85;
}

/* Compact skill tags */
#about .about-tags {
  gap: 7px;
  margin-top: 18px;
}

#about .about-tags span {
  padding: 7px 10px;
  font-size: 9px;
  transition:
    background-color .2s ease,
    border-color .2s ease,
    color .2s ease;
}

#about .about-tags span:hover {
  border-color: var(--beige-dark);
  background: rgba(212, 190, 152, .08);
  color: #fff0d3;
}

/* Reduce the distance to the next section */
#about + #work.content-section {
  padding-top: clamp(44px, 5vw, 68px);
  margin-top: 0;
  border-top: 1px solid rgba(212, 190, 152, .16);
}

/* Mobile layout */
@media (max-width: 650px) {
  #about.content-section {
    padding-top: 48px;
    padding-bottom: 38px;
  }

  #about .about-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin-top: 24px;
  }

  #about .editorial-heading {
    font-size: clamp(35px, 9vw, 46px);
    line-height: 1.08;
  }

  #about .about-copy p {
    font-size: 12px;
    line-height: 1.8;
  }

  #about + #work.content-section {
    padding-top: 42px;
  }
}


/* ==========================================
   ABOUT SECTION — VISIBLE CINEMATIC ANIMATION
========================================== */

#about {
  position: relative;
  isolation: isolate;
}

/* A moving metallic line at the bottom of About */
#about::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: clamp(70px, 15vw, 190px);
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    #8b1e2d 25%,
    #d4be98 70%,
    #fff0d3,
    transparent
  );
  box-shadow: 0 0 12px #d4be9828;
  pointer-events: none;
  animation: about-light-sweep 3.8s ease-in-out infinite alternate;
}

/* Initial state is enabled by JavaScript */
#about.about-animation-ready .about-anim-item {
  opacity: 0;
  transform: translateY(35px);
  filter: blur(5px);

  transition:
    opacity .9s cubic-bezier(.22, 1, .36, 1),
    transform .9s cubic-bezier(.22, 1, .36, 1),
    filter .9s ease;

  transition-delay: var(--reveal-delay, 0ms);
}

/* Visible state */
#about.about-animation-ready.about-animation-visible .about-anim-item {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Heading arrives slightly larger, then settles */
#about .about-anim-heading {
  transform: translateY(45px) scale(.975);
}

#about.about-animation-ready.about-animation-visible .about-anim-heading {
  transform: translateY(0) scale(1);
}

/* Tags lift gently on hover */
#about .about-tags span {
  transition:
    transform .25s ease,
    border-color .25s ease,
    background-color .25s ease,
    color .25s ease;
}

#about .about-tags span:hover {
  transform: translateY(-5px);
  border-color: var(--beige-dark);
  background: #d4be9818;
  color: #fff0d3;
}

@keyframes about-light-sweep {
  0% {
    transform: translateX(0);
    opacity: .35;
  }

  100% {
    transform: translateX(clamp(100px, 32vw, 420px));
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #about::after {
    animation: none;
  }

  #about.about-animation-ready .about-anim-item {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  #about .about-tags span {
    transition: none;
  }
}


/* ==========================================
   EXPERTISE — INTERACTIVE AUTOMOTIVE STUDIO
========================================== */

#work .expertise-grid {
  perspective: 1200px;
  gap: 1px;
}

/* Reveal cards progressively */
#work.expertise-motion-ready .expertise-card {
  opacity: 0;
  transform: translateY(32px) scale(.975);
  filter: blur(3px);
}

#work.expertise-motion-ready .expertise-card.is-revealed {
  opacity: 1;
  transform:
    perspective(1000px)
    rotateX(var(--card-rx, 0deg))
    rotateY(var(--card-ry, 0deg))
    translateY(var(--card-lift, 0px))
    scale(var(--card-scale, 1));
  filter: blur(0);
  transition-delay: var(--card-delay, 0ms);
}

/* Smooth transitions and pointer-following highlight */
#work .expertise-card {
  --pointer-x: 50%;
  --pointer-y: 50%;
  --card-rx: 0deg;
  --card-ry: 0deg;
  --card-lift: 0px;
  --card-scale: 1;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  transform-style: preserve-3d;

  background:
    radial-gradient(
      280px circle at var(--pointer-x) var(--pointer-y),
      rgba(212, 190, 152, .12),
      transparent 62%
    ),
    #111f33;

  transition:
    opacity .8s cubic-bezier(.22, 1, .36, 1),
    transform .3s cubic-bezier(.2, .8, .2, 1),
    filter .8s ease,
    background-color .25s ease,
    box-shadow .3s ease;
}

/* Thin light sweep across the card */
#work .expertise-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -30%;
  bottom: -30%;
  left: -110%;
  width: 65%;

  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(212, 190, 152, .025) 25%,
    rgba(233, 223, 201, .13) 50%,
    rgba(212, 190, 152, .025) 75%,
    transparent 100%
  );

  transform: skewX(-18deg);
  pointer-events: none;
}

#work .expertise-card:hover::before,
#work .expertise-card:focus-visible::before {
  animation: expertise-light-sweep .9s ease-out;
}

/* Technical circular motif in the corner */
#work .expertise-card::after {
  border-color: rgba(212, 190, 152, .38);
  transform: rotate(0deg) scale(1);
  transform-origin: center;
  transition:
    transform .65s cubic-bezier(.22, 1, .36, 1),
    border-color .3s ease,
    border-radius .3s ease;
}

#work .expertise-card:hover::after,
#work .expertise-card:focus-visible::after {
  border-color: rgba(212, 190, 152, .85);
  transform: rotate(35deg) scale(1.2);
}

/* Number and label gain emphasis on hover */
#work .card-number {
  transition:
    color .25s ease,
    transform .35s ease;
}

#work .expertise-card:hover .card-number,
#work .expertise-card:focus-visible .card-number {
  color: var(--beige-dark);
  transform: translateY(-4px);
}

#work .card-symbol {
  transition:
    border-color .25s ease,
    background-color .25s ease,
    transform .3s ease;
}

#work .expertise-card:hover .card-symbol,
#work .expertise-card:focus-visible .card-symbol {
  border-color: var(--beige-dark);
  background-color: rgba(212, 190, 152, .09);
  transform: translateY(-3px);
}

#work .expertise-card h3 {
  transition:
    color .25s ease,
    transform .3s ease;
}

#work .expertise-card:hover h3,
#work .expertise-card:focus-visible h3 {
  color: #fff0d3;
  transform: translateX(3px);
}

/* Small highlighted action */
#work .card-link {
  transition:
    color .25s ease,
    letter-spacing .25s ease;
}

#work .expertise-card:hover .card-link,
#work .expertise-card:focus-visible .card-link {
  color: #fff0d3;
  letter-spacing: .13em;
}

#work .expertise-card:hover {
  background:
    radial-gradient(
      280px circle at var(--pointer-x) var(--pointer-y),
      rgba(212, 190, 152, .15),
      transparent 62%
    ),
    #172943;
  box-shadow: inset 0 0 0 1px rgba(212, 190, 152, .14);
}

/* Avoid delayed response when interacting with a card */
#work .expertise-card:hover,
#work .expertise-card:focus-visible {
  transition-delay: 0ms;
}

@keyframes expertise-light-sweep {
  0% {
    left: -110%;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    left: 155%;
    opacity: 0;
  }
}

@media (max-width: 650px) {
  #work.expertise-motion-ready .expertise-card {
    transform: translateY(22px);
  }

  #work.expertise-motion-ready .expertise-card.is-revealed {
    transform: translateY(0);
  }

  #work .expertise-card::before {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #work.expertise-motion-ready .expertise-card,
  #work.expertise-motion-ready .expertise-card.is-revealed {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }

  #work .expertise-card::before {
    display: none;
    animation: none;
  }

  #work .expertise-card::after,
  #work .card-symbol,
  #work .card-number,
  #work .expertise-card h3 {
    transition: none;
  }
}


/* ==========================================
   EXPERIENCE — AUTOMOTIVE TIMELINE MOTION
========================================== */

#experience {
  position: relative;
  isolation: isolate;
}

/* Intro heading reveal */
#experience.experience-motion-ready .section-topline,
#experience.experience-motion-ready > .section-heading-row {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .8s ease,
    transform .8s cubic-bezier(.22, 1, .36, 1);
}

#experience.experience-motion-ready.experience-intro-visible .section-topline,
#experience.experience-motion-ready.experience-intro-visible > .section-heading-row {
  opacity: 1;
  transform: translateY(0);
}

/* Each job entry reveals when entering the viewport */
#experience.experience-motion-ready .experience-row {
  position: relative;
  opacity: 0;
  transform: translateY(32px) translateX(-8px);
  filter: blur(3px);

  transition:
    opacity .75s cubic-bezier(.22, 1, .36, 1),
    transform .75s cubic-bezier(.22, 1, .36, 1),
    filter .75s ease,
    background-color .3s ease;

  transition-delay: var(--experience-delay, 0ms);
}

#experience.experience-motion-ready .experience-row.experience-is-visible {
  opacity: 1;
  transform: translateY(0) translateX(0);
  filter: blur(0);
}

/* Moving technical line at the top of each entry */
#experience .experience-row::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    #8b1e2d 20%,
    #d4be98 60%,
    #fff0d3 75%,
    transparent
  );

  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

#experience .experience-row.experience-is-visible::before {
  animation: experience-line-draw 1s ease-out both;
  animation-delay: var(--experience-delay, 0ms);
}

/* Year marker gets a subtle highlight */
#experience .experience-year {
  position: relative;
  display: inline-block;
  width: fit-content;
  transition:
    color .3s ease,
    transform .35s ease;
}

#experience .experience-row:hover .experience-year {
  color: #fff0d3;
  transform: translateX(5px);
}

/* Highlight the selected row */
#experience .experience-row:hover {
  background: linear-gradient(
    90deg,
    rgba(212, 190, 152, .055),
    rgba(212, 190, 152, .012) 75%,
    transparent
  );
}

/* Heading and descriptions brighten subtly */
#experience .experience-body h3 {
  transition:
    color .25s ease,
    transform .3s ease;
}

#experience .experience-row:hover .experience-body h3 {
  color: #fff0d3;
  transform: translateX(3px);
}

#experience .experience-body p,
#experience .experience-points {
  transition: color .3s ease;
}

#experience .experience-row:hover .experience-body p {
  color: #e0d7c7;
}

/* Arrow movement */
#experience .experience-arrow {
  display: inline-block;
  transition:
    color .25s ease,
    transform .35s cubic-bezier(.22, 1, .36, 1);
}

#experience .experience-row:hover .experience-arrow {
  color: #fff0d3;
  transform: translate(4px, -4px);
}

@keyframes experience-line-draw {
  from {
    transform: scaleX(0);
    opacity: .25;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}

/* Mobile adjustments */
@media (max-width: 650px) {
  #experience.experience-motion-ready .experience-row {
    transform: translateY(22px);
  }

  #experience.experience-motion-ready .experience-row.experience-is-visible {
    transform: translateY(0);
  }

  #experience .experience-row:hover .experience-year,
  #experience .experience-row:hover .experience-body h3 {
    transform: none;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  #experience.experience-motion-ready .section-topline,
  #experience.experience-motion-ready > .section-heading-row,
  #experience.experience-motion-ready .experience-row {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  #experience .experience-row::before {
    animation: none !important;
  }

  #experience .experience-year,
  #experience .experience-body h3,
  #experience .experience-arrow {
    transition: none;
  }
}


/* ==========================================
   CONTACT — CINEMATIC END CARD
========================================== */

#contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Slow cinematic glow in the background */
#contact::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -35%;
  right: -12%;
  width: clamp(280px, 48vw, 640px);
  aspect-ratio: 1;
  border: 1px solid rgba(212, 190, 152, .12);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(212, 190, 152, .12) 0%,
    rgba(139, 30, 45, .045) 35%,
    transparent 70%
  );
  pointer-events: none;
  animation: contact-orbit 12s ease-in-out infinite alternate;
}

/* Animated technical line at the bottom */
#contact::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #8b1e2d 22%,
    #d4be98 48%,
    #fff0d3 52%,
    #8b1e2d 78%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: contact-line-flow 5s linear infinite;
  pointer-events: none;
}

#contact .contact-inner {
  position: relative;
  z-index: 1;
}

/* Text reveal begins after JavaScript adds the ready class */
#contact.contact-motion-ready .contact-inner > * {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(4px);
  transition:
    opacity .85s cubic-bezier(.22, 1, .36, 1),
    transform .85s cubic-bezier(.22, 1, .36, 1),
    filter .85s ease;
  transition-delay: var(--contact-delay, 0ms);
}

#contact.contact-motion-ready.contact-is-visible .contact-inner > * {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Oversized headline remains elegant */
#contact .contact-inner h2 {
  max-width: 900px;
  text-wrap: balance;
  transition:
    color .3s ease,
    letter-spacing .5s ease;
}

#contact.contact-is-visible .contact-inner h2 {
  letter-spacing: -.052em;
}

/* Email link: moving underline */
#contact .contact-email {
  position: relative;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  padding-bottom: 12px;
  border-bottom: 0;
  overflow-wrap: anywhere;
}

#contact .contact-email::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    #8b1e2d,
    #d4be98,
    #fff0d3
  );
  transform: scaleX(.3);
  transform-origin: left center;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

#contact .contact-email:hover::after,
#contact .contact-email:focus-visible::after {
  transform: scaleX(1);
}

#contact .contact-email:hover {
  color: #fff0d3;
}

/* Subtle movement of the email arrow */
#contact .contact-email {
  transition: color .25s ease;
}

@keyframes contact-orbit {
  from {
    transform: translate3d(0, 0, 0) scale(.94);
    opacity: .45;
  }
  to {
    transform: translate3d(-35px, 25px, 0) scale(1.04);
    opacity: 1;
  }
}

@keyframes contact-line-flow {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

@media (max-width: 650px) {
  #contact::before {
    top: -10%;
    right: -45%;
    width: 95vw;
  }

  #contact .contact-inner h2 {
    font-size: clamp(40px, 10vw, 58px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #contact::before,
  #contact::after {
    animation: none;
  }

  #contact.contact-motion-ready .contact-inner > * {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  #contact .contact-email::after {
    transition: none;
  }
}


/* ==========================================
   PORTFOLIO — FIX EXCESSIVE SECTION SPACING
========================================== */

/* Reduce empty space after Expertise */
#work.content-section {
  padding-top: clamp(45px, 5vw, 70px) !important;
  padding-bottom: clamp(38px, 4vw, 58px) !important;
  margin-bottom: 0 !important;
}

/* Bring Experience closer to Expertise */
#experience.content-section {
  padding-top: clamp(42px, 4.5vw, 65px) !important;
  padding-bottom: clamp(42px, 4.5vw, 65px) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Reduce gap before the Contact section */
#contact.contact-section {
  padding-top: clamp(52px, 6vw, 82px) !important;
  padding-bottom: clamp(52px, 6vw, 82px) !important;
  margin-top: 0 !important;
}

/* Tighten the Experience heading */
#experience .section-heading-row {
  margin-top: 25px;
  margin-bottom: 28px;
  gap: 24px;
}

/* Keep timeline rows compact and readable */
#experience .experience-list {
  margin-top: 28px;
}

#experience .experience-row {
  padding-top: 22px;
  padding-bottom: 22px;
}

/* Mobile spacing */
@media (max-width: 650px) {
  #work.content-section {
    padding-top: 38px !important;
    padding-bottom: 32px !important;
  }

  #experience.content-section {
    padding-top: 38px !important;
    padding-bottom: 38px !important;
  }

  #experience .section-heading-row {
    margin-top: 22px;
    margin-bottom: 22px;
    gap: 12px;
  }

  #experience .experience-list {
    margin-top: 22px;
  }

  #experience .experience-row {
    padding-top: 19px;
    padding-bottom: 19px;
  }

  #contact.contact-section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}


/* ==========================================
   GRAPHIC DESIGN — MOVING PHOTO GALLERY
========================================== */

.gd-gallery {
  --gd-border: #3a4c63;
  margin-top: 27px;
  min-width: 0;
}

.gd-gallery-toolbar,
.gd-gallery-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.gd-gallery-toolbar {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--gd-border);
}

.gd-gallery-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--beige);
}

.gd-gallery-count {
  color: var(--muted);
  font-weight: 400;
}

.gd-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--beige-dark);
  box-shadow: 0 0 10px #d4be9860;
  animation: gd-live-pulse 1.8s ease-in-out infinite;
}

.gd-gallery-toggle {
  min-height: 36px;
  padding: 9px 12px;
  border: 1px solid #7e7057;
  background: #172943;
  color: var(--beige);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease;
}

.gd-gallery-toggle:hover {
  border-color: var(--beige);
  background: var(--beige-dark);
  color: var(--navy);
}

.gd-marquee {
  width: 100%;
  margin-top: 15px;
  overflow: hidden;
  border-bottom: 1px solid var(--gd-border);
  background: #0d1a2c;
  contain: paint;
}

.gd-track {
  display: flex;
  width: max-content;
  animation: gd-scroll-left 34s linear infinite;
  will-change: transform;
}

.gd-gallery:hover .gd-track {
  animation-play-state: paused;
}

.gd-gallery.is-paused .gd-track {
  animation-play-state: paused;
}

.gd-marquee-group {
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
  gap: 14px;
  padding: 10px 14px 16px 0;
}

.gd-work-card {
  position: relative;
  width: clamp(210px, 27vw, 300px);
  height: clamp(220px, 29vw, 310px);
  flex: 0 0 auto;
  overflow: hidden;
  padding: 0;
  border: 1px solid #394b62;
  background: #15263d;
  color: var(--beige);
  text-align: left;
  cursor: zoom-in;
  isolation: isolate;
  transform: scale(1);
  transition:
    transform .5s cubic-bezier(.22, 1, .36, 1),
    border-color .3s ease,
    filter .3s ease,
    opacity .3s ease,
    box-shadow .3s ease;
}

.gd-work-card img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  user-select: none;
  filter: brightness(.78) saturate(.85);
  transition:
    filter .45s ease,
    transform .8s cubic-bezier(.22, 1, .36, 1);
}

.gd-work-overlay {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 38px 16px 16px;
  background: linear-gradient(
    0deg,
    rgba(7, 15, 27, .97),
    rgba(7, 15, 27, .55) 68%,
    transparent
  );
}

.gd-work-category {
  color: var(--beige-dark);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .1em;
}

.gd-work-overlay strong {
  font-size: 15px;
  line-height: 1.4;
}

.gd-work-view {
  margin-top: 5px;
  color: #ddd0b5;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .07em;
}

.gd-work-expand {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid #e9dfc95c;
  background: #0b1728cf;
  color: var(--beige);
  transition:
    transform .3s ease,
    background .3s ease;
}

.gd-work-card:hover {
  border-color: var(--beige-dark);
  box-shadow: 0 12px 30px #0004;
}

.gd-work-card:hover img {
  filter: brightness(1) saturate(1);
  transform: scale(1.07);
}

.gd-work-card:hover .gd-work-expand {
  transform: rotate(45deg);
  background: var(--beige-dark);
  color: var(--navy);
}

/* When paused, emphasize the selected work */
.gd-gallery.is-paused .gd-work-card:not(.is-focused) {
  opacity: .43;
  filter: saturate(.65);
  transform: scale(.96);
}

.gd-gallery.is-paused .gd-work-card.is-focused {
  z-index: 3;
  opacity: 1;
  filter: none;
  transform: scale(1.045);
  border-color: var(--beige-dark);
  box-shadow: 0 0 0 1px #d4be9833, 0 18px 38px #0005;
}

.gd-gallery.is-paused .gd-work-card.is-focused img {
  filter: brightness(1.05) saturate(1);
  transform: scale(1.035);
}

.gd-gallery-footer {
  padding-top: 12px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .07em;
  line-height: 1.8;
}

.gd-pdf-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 20px;
  border: 1px solid var(--gd-border);
  background: #15263d;
}

.gd-pdf-section > div:first-child {
  min-width: 0;
}

.gd-pdf-section h3 {
  margin: 8px 0;
}

.gd-pdf-section p {
  margin-bottom: 0;
}

.gd-pdf-section .pdf-file-actions {
  flex-shrink: 0;
}

@keyframes gd-scroll-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes gd-live-pulse {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}

/* Image enlargement dialog */
.gd-lightbox {
  width: min(1000px, calc(100% - 28px));
  max-width: none;
  max-height: calc(100% - 28px);
  padding: clamp(12px, 2vw, 22px);
  overflow: auto;
  border: 1px solid #65738a;
  background: #0b1728;
  color: var(--beige);
  box-shadow: 0 30px 100px #0008;
}

.gd-lightbox[open] {
  animation: gd-lightbox-enter .3s cubic-bezier(.22, 1, .36, 1);
}

.gd-lightbox::backdrop {
  background: #050a12eF;
  backdrop-filter: blur(9px);
}

.gd-lightbox-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 13px;
}

.gd-lightbox-label {
  color: var(--beige-dark);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
}

.gd-lightbox-close {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 1px solid #56647a;
  background: #172943;
  color: var(--beige);
  font-size: 19px;
  cursor: pointer;
}

.gd-lightbox-close:hover {
  border-color: var(--beige-dark);
}

.gd-lightbox img {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 70vh;
  margin: auto;
  object-fit: contain;
  background: #101c2d;
  animation: gd-image-zoom .45s cubic-bezier(.22, 1, .36, 1);
}

.gd-lightbox-caption {
  padding-top: 15px;
  color: var(--beige);
  font-size: 13px;
  font-weight: 600;
}

@keyframes gd-lightbox-enter {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes gd-image-zoom {
  from { opacity: .6; transform: scale(.94); }
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 650px) {
  .gd-gallery-toolbar {
    align-items: flex-start;
  }

  .gd-gallery-count {
    display: none;
  }

  .gd-work-card {
    width: 76vw;
    height: 75vw;
    max-height: 330px;
  }

  .gd-track {
    animation-duration: 27s;
  }

  .gd-pdf-section {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
    padding: 15px;
  }

  .gd-pdf-section .pdf-file-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .gd-lightbox {
    width: calc(100% - 16px);
    max-height: calc(100% - 16px);
    padding: 10px;
  }

  .gd-lightbox img {
    max-height: 65vh;
  }

  .gd-gallery-footer {
    font-size: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gd-track,
  .gd-live-dot {
    animation: none;
  }

  .gd-gallery:hover .gd-track {
    animation-play-state: running;
  }

  .gd-gallery.is-paused .gd-track {
    animation-play-state: paused;
  }

  .gd-work-card,
  .gd-work-card img {
    transition: none;
  }
}


/* =========================================
   GRAPHIC DESIGN GALLERY
========================================= */

.graphic-gallery {
  width: 100%;
  margin-top: 28px;
  color: var(--beige);
}

.graphic-gallery-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.graphic-gallery-toolbar p {
  margin: 0;
  color: var(--beige);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.graphic-gallery-toolbar span {
  flex-shrink: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
}

.graphic-gallery-window {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px 2px 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--beige-dark) var(--surface);
  overscroll-behavior-x: contain;
}

.graphic-gallery-track {
  display: flex;
  align-items: stretch;
  gap: 18px;
  width: max-content;
  min-width: 100%;
}

.graphic-gallery-card {
  position: relative;
  flex: 0 0 clamp(220px, 30vw, 320px);
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.graphic-gallery-card:hover {
  transform: translateY(-5px);
  border-color: var(--beige-dark);
  box-shadow: 0 16px 32px rgb(0 0 0 / 20%);
}

.graphic-gallery-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #0b1728;
  cursor: zoom-in;
}

.graphic-gallery-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.45s ease;
}

.graphic-gallery-image:hover img {
  transform: scale(1.04);
}

.graphic-gallery-caption {
  min-height: 84px;
  padding: 15px 16px 17px;
}

.graphic-gallery-caption span {
  display: block;
  margin-bottom: 8px;
  color: var(--beige-dark);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.graphic-gallery-caption h3 {
  margin: 0;
  color: var(--beige);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* State yang akan digunakan saat animasi dihubungkan ke JavaScript */

.graphic-gallery-window.is-moving {
  overflow: hidden;
}

.graphic-gallery-window.is-moving .graphic-gallery-track {
  animation: graphic-gallery-marquee 35s linear infinite;
}

.graphic-gallery-window.is-paused .graphic-gallery-track {
  animation-play-state: paused;
}

.graphic-gallery-window.is-paused .graphic-gallery-card.is-focused {
  z-index: 2;
  transform: scale(1.06);
  border-color: var(--beige-dark);
  box-shadow: 0 18px 38px rgb(0 0 0 / 30%);
}

@keyframes graphic-gallery-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.graphic-gallery-empty {
  padding: 24px;
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
}

@media (max-width: 600px) {
  .graphic-gallery {
    margin-top: 20px;
  }

  .graphic-gallery-toolbar p {
    font-size: 10px;
  }

  .graphic-gallery-card {
    flex-basis: 235px;
  }

  .graphic-gallery-track {
    gap: 12px;
  }

  .graphic-gallery-caption {
    min-height: 76px;
    padding: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .graphic-gallery-card,
  .graphic-gallery-image img {
    transition: none;
  }

  .graphic-gallery-window.is-moving .graphic-gallery-track {
    animation: none;
  }
}


/* ==========================================
   GRAPHIC DESIGN — MOVING PHOTO GALLERY
========================================== */

.gd-gallery {
  --gd-border: #3a4c63;
  margin-top: 27px;
  min-width: 0;
}

.gd-gallery-toolbar,
.gd-gallery-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.gd-gallery-toolbar {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--gd-border);
}

.gd-gallery-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--beige);
}

.gd-gallery-count {
  color: var(--muted);
  font-weight: 400;
}

.gd-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--beige-dark);
  box-shadow: 0 0 10px #d4be9860;
  animation: gd-live-pulse 1.8s ease-in-out infinite;
}

.gd-gallery-toggle {
  min-height: 36px;
  padding: 9px 12px;
  border: 1px solid #7e7057;
  background: #172943;
  color: var(--beige);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease;
}

.gd-gallery-toggle:hover {
  border-color: var(--beige);
  background: var(--beige-dark);
  color: var(--navy);
}

.gd-marquee {
  width: 100%;
  margin-top: 15px;
  overflow: hidden;
  border-bottom: 1px solid var(--gd-border);
  background: #0d1a2c;
  contain: paint;
}

.gd-track {
  display: flex;
  width: max-content;
  animation: gd-scroll-left 34s linear infinite;
  will-change: transform;
}

.gd-gallery:hover .gd-track {
  animation-play-state: paused;
}

.gd-gallery.is-paused .gd-track {
  animation-play-state: paused;
}

.gd-marquee-group {
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
  gap: 14px;
  padding: 10px 14px 16px 0;
}

.gd-work-card {
  position: relative;
  width: clamp(210px, 27vw, 300px);
  height: clamp(220px, 29vw, 310px);
  flex: 0 0 auto;
  overflow: hidden;
  padding: 0;
  border: 1px solid #394b62;
  background: #15263d;
  color: var(--beige);
  text-align: left;
  cursor: zoom-in;
  isolation: isolate;
  transform: scale(1);
  transition:
    transform .5s cubic-bezier(.22, 1, .36, 1),
    border-color .3s ease,
    filter .3s ease,
    opacity .3s ease,
    box-shadow .3s ease;
}

.gd-work-card img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  user-select: none;
  filter: brightness(.78) saturate(.85);
  transition:
    filter .45s ease,
    transform .8s cubic-bezier(.22, 1, .36, 1);
}

.gd-work-overlay {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 38px 16px 16px;
  background: linear-gradient(
    0deg,
    rgba(7, 15, 27, .97),
    rgba(7, 15, 27, .55) 68%,
    transparent
  );
}

.gd-work-category {
  color: var(--beige-dark);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .1em;
}

.gd-work-overlay strong {
  font-size: 15px;
  line-height: 1.4;
}

.gd-work-view {
  margin-top: 5px;
  color: #ddd0b5;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .07em;
}

.gd-work-expand {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid #e9dfc95c;
  background: #0b1728cf;
  color: var(--beige);
  transition:
    transform .3s ease,
    background .3s ease;
}

.gd-work-card:hover {
  border-color: var(--beige-dark);
  box-shadow: 0 12px 30px #0004;
}

.gd-work-card:hover img {
  filter: brightness(1) saturate(1);
  transform: scale(1.07);
}

.gd-work-card:hover .gd-work-expand {
  transform: rotate(45deg);
  background: var(--beige-dark);
  color: var(--navy);
}

/* When paused, emphasize the selected work */
.gd-gallery.is-paused .gd-work-card:not(.is-focused) {
  opacity: .43;
  filter: saturate(.65);
  transform: scale(.96);
}

.gd-gallery.is-paused .gd-work-card.is-focused {
  z-index: 3;
  opacity: 1;
  filter: none;
  transform: scale(1.045);
  border-color: var(--beige-dark);
  box-shadow: 0 0 0 1px #d4be9833, 0 18px 38px #0005;
}

.gd-gallery.is-paused .gd-work-card.is-focused img {
  filter: brightness(1.05) saturate(1);
  transform: scale(1.035);
}

.gd-gallery-footer {
  padding-top: 12px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .07em;
  line-height: 1.8;
}

.gd-pdf-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 20px;
  border: 1px solid var(--gd-border);
  background: #15263d;
}

.gd-pdf-section > div:first-child {
  min-width: 0;
}

.gd-pdf-section h3 {
  margin: 8px 0;
}

.gd-pdf-section p {
  margin-bottom: 0;
}

.gd-pdf-section .pdf-file-actions {
  flex-shrink: 0;
}

@keyframes gd-scroll-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes gd-live-pulse {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}

/* Image enlargement dialog */
.gd-lightbox {
  width: min(1000px, calc(100% - 28px));
  max-width: none;
  max-height: calc(100% - 28px);
  padding: clamp(12px, 2vw, 22px);
  overflow: auto;
  border: 1px solid #65738a;
  background: #0b1728;
  color: var(--beige);
  box-shadow: 0 30px 100px #0008;
}

.gd-lightbox[open] {
  animation: gd-lightbox-enter .3s cubic-bezier(.22, 1, .36, 1);
}

.gd-lightbox::backdrop {
  background: #050a12eF;
  backdrop-filter: blur(9px);
}

.gd-lightbox-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 13px;
}

.gd-lightbox-label {
  color: var(--beige-dark);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
}

.gd-lightbox-close {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 1px solid #56647a;
  background: #172943;
  color: var(--beige);
  font-size: 19px;
  cursor: pointer;
}

.gd-lightbox-close:hover {
  border-color: var(--beige-dark);
}

.gd-lightbox img {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 70vh;
  margin: auto;
  object-fit: contain;
  background: #101c2d;
  animation: gd-image-zoom .45s cubic-bezier(.22, 1, .36, 1);
}

.gd-lightbox-caption {
  padding-top: 15px;
  color: var(--beige);
  font-size: 13px;
  font-weight: 600;
}

@keyframes gd-lightbox-enter {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes gd-image-zoom {
  from { opacity: .6; transform: scale(.94); }
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 650px) {
  .gd-gallery-toolbar {
    align-items: flex-start;
  }

  .gd-gallery-count {
    display: none;
  }

  .gd-work-card {
    width: 76vw;
    height: 75vw;
    max-height: 330px;
  }

  .gd-track {
    animation-duration: 27s;
  }

  .gd-pdf-section {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
    padding: 15px;
  }

  .gd-pdf-section .pdf-file-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .gd-lightbox {
    width: calc(100% - 16px);
    max-height: calc(100% - 16px);
    padding: 10px;
  }

  .gd-lightbox img {
    max-height: 65vh;
  }

  .gd-gallery-footer {
    font-size: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gd-track,
  .gd-live-dot {
    animation: none;
  }

  .gd-gallery:hover .gd-track {
    animation-play-state: running;
  }

  .gd-gallery.is-paused .gd-track {
    animation-play-state: paused;
  }

  .gd-work-card,
  .gd-work-card img {
    transition: none;
  }
}


/* ======================================
   TEACHING EXPERIENCE — COLORFUL EDITION
====================================== */

.teaching-detail {
  display: grid;
  gap: 24px;
}

.teaching-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 30px;
  background: #f4c84b;
  color: #13243e;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.teaching-tag,
.teaching-volunteer > div > span,
.teaching-section-heading > span {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
}

.teaching-hero h3 {
  font-family: var(--display);
  font-size: clamp(27px, 4vw, 44px);
  line-height: 1.05;
  margin: 16px 0 10px;
  max-width: 650px;
}

.teaching-hero p {
  max-width: 620px;
  margin: 0;
  line-height: 1.7;
  color: #263650;
}

.teaching-hero-stamp {
  width: 112px;
  height: 112px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #f46d58;
  color: #fff8e8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: rotate(8deg);
  border: 3px solid #13243e;
}

.teaching-hero-stamp strong {
  font-size: 42px;
  line-height: 1;
}

.teaching-hero-stamp span {
  font-family: var(--mono);
  font-size: 8px;
  margin-top: 7px;
}

.teaching-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.teaching-stat {
  padding: 17px;
  background: #d9e8ff;
  color: #13243e;
  display: flex;
  align-items: center;
  gap: 12px;
}

.teaching-stat:nth-child(2) {
  background: #bdebd9;
}

.teaching-stat:nth-child(3) {
  background: #ffb9a8;
}

.teaching-stat strong {
  font-family: var(--display);
  font-size: 32px;
}

.teaching-stat span {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
}

.teaching-section-heading {
  margin-top: 8px;
}

.teaching-section-heading > span {
  color: var(--beige-dark);
}

.teaching-section-heading h3 {
  margin: 8px 0 0;
  font-family: var(--display);
  font-size: 27px;
}

.teaching-role-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.teaching-role-card {
  padding: 22px;
  color: #16253c;
  min-width: 0;
}

.teaching-card-yellow {
  background: #ffe18a;
}

.teaching-card-mint {
  background: #bdebd9;
}

.teaching-card-date,
.teaching-card-location {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
}

.teaching-role-card h4 {
  font-family: var(--display);
  font-size: 25px;
  line-height: 1.1;
  margin: 16px 0 7px;
}

.teaching-role-label {
  font-size: 12px;
  font-weight: 700;
}

.teaching-role-card ul {
  padding-left: 18px;
  margin: 17px 0;
}

.teaching-role-card li {
  font-size: 12px;
  line-height: 1.7;
  margin-bottom: 8px;
}

.teaching-card-location {
  padding-top: 12px;
  border-top: 1px solid rgb(19 36 62 / 20%);
}

.teaching-photo-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 14px;
}

.teaching-photo-card {
  margin: 0;
  overflow: hidden;
  background: #1b2f49;
  border: 1px solid var(--line);
}

.teaching-photo-card img {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
  transition: transform .4s ease;
}

.teaching-photo-card:hover img {
  transform: scale(1.035);
}

.teaching-photo-card figcaption {
  padding: 14px;
  display: grid;
  gap: 6px;
}

.teaching-photo-card figcaption span,
.teaching-pdf > div:first-child > span {
  color: var(--beige-dark);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
}

.teaching-photo-card figcaption strong {
  color: var(--beige);
  font-size: 13px;
}

.teaching-volunteer {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center;
  gap: 22px;
  padding: 24px;
  background: #f47761;
  color: #17243a;
}

.teaching-volunteer-number {
  font-family: var(--display);
  font-size: 38px;
  font-weight: 700;
  transform: rotate(-8deg);
}

.teaching-volunteer > div > span {
  color: #442d2d;
}

.teaching-volunteer h3 {
  font-family: var(--display);
  font-size: 26px;
  margin: 8px 0;
}

.teaching-volunteer p {
  font-size: 12px;
  line-height: 1.8;
  margin: 0;
}

.teaching-pdf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 22px;
  border: 1px solid var(--line);
  background: #192d47;
}

.teaching-pdf h3 {
  color: var(--beige);
  margin: 8px 0;
}

.teaching-pdf p {
  color: var(--muted);
  font-size: 12px;
  margin: 0;
  line-height: 1.6;
}

@media (max-width: 650px) {
  .teaching-hero {
    grid-template-columns: 1fr;
  }

  .teaching-hero-stamp {
    width: 75px;
    height: 75px;
  }

  .teaching-hero-stamp strong {
    font-size: 28px;
  }

  .teaching-stats {
    gap: 7px;
  }

  .teaching-stat {
    padding: 10px;
    display: grid;
    gap: 3px;
  }

  .teaching-stat strong {
    font-size: 24px;
  }

  .teaching-stat span {
    font-size: 8px;
  }

  .teaching-role-grid,
  .teaching-photo-grid {
    grid-template-columns: 1fr;
  }

  .teaching-photo-card img {
    height: 220px;
  }

  .teaching-volunteer {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}


/* ==========================================
   WEB & DIGITAL — ANIMATED SHOWCASE
========================================== */

.wd-showcase {
  display: grid;
  gap: 28px;
  overflow: hidden;
  animation: wdReveal .75s ease both;
}

.wd-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  min-height: 390px;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 20%, rgb(239 180 120 / 20%), transparent 32%),
    linear-gradient(130deg, #13243d, #203b5c 75%, #314b69);
  color: #f4e9d8;
  border: 1px solid #40536c;
}

.wd-hero::before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 50%;
  right: -130px;
  top: -175px;
}

.wd-hero::after {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 50%;
  right: -70px;
  bottom: -150px;
}

.wd-hero-copy {
  z-index: 2;
  align-self: center;
  padding: clamp(25px, 4vw, 45px);
  animation: wdSlideIn .8s .1s ease both;
}

.wd-overline {
  display: inline-block;
  padding: 8px 12px;
  background: #e8c18e;
  color: #182941;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
}

.wd-hero-copy h3 {
  max-width: 470px;
  margin: 22px 0 15px;
  color: #f5ead9;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 500;
  line-height: .99;
}

.wd-hero-copy h3 em {
  color: #f2c18c;
  font-weight: 500;
}

.wd-hero-copy > p {
  max-width: 420px;
  margin: 0;
  color: #d3dbe6;
  font-size: 13px;
  line-height: 1.85;
}

.wd-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.wd-chip-row span {
  padding: 8px 10px;
  border: 1px solid rgb(255 255 255 / 28%);
  color: #f5ead9;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: .08em;
}

.wd-hero-caption {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 34px;
  color: #aebdce;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: .12em;
}

.wd-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #eebf85;
  box-shadow: 0 0 0 0 rgb(238 191 133 / 60%);
  animation: wdPulse 1.8s infinite;
}

/* PHONE MOCKUP STAGE */

.wd-visual {
  position: relative;
  min-height: 390px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
  isolation: isolate;
}

.wd-orbit {
  position: absolute;
  width: 270px;
  height: 270px;
  border: 1px solid rgb(242 193 140 / 32%);
  border-radius: 50%;
  pointer-events: none;
}

.wd-orbit-one {
  animation: wdOrbit 22s linear infinite;
}

.wd-orbit-two {
  width: 340px;
  height: 340px;
  border-color: rgb(255 255 255 / 12%);
  animation: wdOrbit 30s linear infinite reverse;
}

.wd-floating-label {
  position: absolute;
  top: 22px;
  right: 22px;
  color: #d8c09e;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: .13em;
}

.wd-floating-star {
  position: absolute;
  z-index: 5;
  color: #f4c48f;
  animation: wdStarFloat 3s ease-in-out infinite;
}

.wd-star-one {
  left: 12%;
  top: 23%;
  font-size: 31px;
}

.wd-star-two {
  right: 13%;
  bottom: 20%;
  color: #f4ead8;
  font-size: 38px;
  animation-delay: .8s;
}

.wd-phone {
  position: absolute;
  width: 150px;
  height: 280px;
  padding: 8px;
  border: 3px solid #b8c1cb;
  border-radius: 25px;
  background: #101b2a;
  box-shadow:
    0 24px 50px rgb(0 0 0 / 35%),
    inset 0 0 0 2px #45556a;
}

.wd-phone-back {
  z-index: 1;
  transform: translate(-57px, 5px) rotate(-12deg);
  animation: wdPhoneBack 5s ease-in-out infinite;
}

.wd-phone-front {
  z-index: 3;
  transform: translate(43px, 8px) rotate(8deg);
  animation: wdPhoneFront 5s ease-in-out infinite;
  animation-delay: .3s;
}

.wd-phone-speaker {
  position: absolute;
  z-index: 4;
  top: 6px;
  left: 50%;
  width: 43px;
  height: 5px;
  transform: translateX(-50%);
  border-radius: 8px;
  background: #68778a;
}

.wd-phone-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 17px;
}

.wd-screen-front {
  background:
    radial-gradient(circle at 50% 34%, #fff6ea 0 28%, transparent 29%),
    linear-gradient(155deg, #e9c6b5, #f8e9dc 55%, #b7c9b0);
  color: #473b43;
}

.wd-screen-brand {
  position: absolute;
  top: 28px;
  font-family: "Cormorant Garamond", serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
}

.wd-screen-flower {
  margin-bottom: 10px;
  color: #ad7883;
  font-size: 38px;
  animation: wdFlowerTurn 12s linear infinite;
}

.wd-screen-front small {
  font-family: "IBM Plex Mono", monospace;
  font-size: 7px;
  letter-spacing: .12em;
}

.wd-screen-names {
  margin: 7px 0;
  font-family: "Cormorant Garamond", serif;
  font-size: 43px;
  font-style: italic;
}

.wd-screen-date {
  font-size: 6px;
  letter-spacing: .1em;
}

.wd-screen-button {
  margin-top: 22px;
  padding: 8px 12px;
  background: #9b6c79;
  color: white;
  font-size: 6px;
  letter-spacing: .1em;
}

.wd-screen-back {
  gap: 22px;
  background: linear-gradient(160deg, #f8e9db, #b5cfc6);
  color: #334e52;
}

.wd-screen-back > span {
  font-family: "Cormorant Garamond", serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .12em;
}

.wd-screen-back small {
  font-family: "IBM Plex Mono", monospace;
  font-size: 6px;
  letter-spacing: .12em;
}

.wd-mini-template {
  display: flex;
  gap: 5px;
  align-items: end;
  height: 90px;
}

.wd-mini-template div {
  width: 28px;
  border-radius: 14px 14px 3px 3px;
  background: #fff9ef;
  box-shadow: 0 5px 12px rgb(0 0 0 / 10%);
}

.wd-mini-template div:nth-child(1) { height: 58px; }
.wd-mini-template div:nth-child(2) { height: 83px; background: #d3a2a3; }
.wd-mini-template div:nth-child(3) { height: 68px; background: #e8c18e; }

/* SECTION TITLES */

.wd-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line);
}

.wd-section-heading > div > span {
  color: var(--beige-dark);
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: .13em;
}

.wd-section-heading h3 {
  margin: 7px 0 0;
  color: var(--beige);
  font-family: "Cormorant Garamond", serif;
  font-size: 32px;
  font-weight: 500;
}

.wd-heading-decoration {
  color: #e8c18e;
  font-size: 30px;
  animation: wdFlowerTurn 14s linear infinite;
}

/* PROJECT CARDS */

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

.wd-project-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #192d47;
  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
  animation: wdCardIn .7s ease both;
}

.wd-project-card:nth-child(2) {
  animation-delay: .15s;
}

.wd-project-card:hover {
  transform: translateY(-7px);
  border-color: #d8b88e;
  box-shadow: 0 18px 36px rgb(0 0 0 / 23%);
}

.wd-project-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 18px;
  color: #c2cddd;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: .1em;
}

.wd-project-symbol {
  color: #e8c18e;
  font-family: "Cormorant Garamond", serif;
  font-size: 27px;
  font-weight: 700;
}

.wd-project-art {
  position: relative;
  display: flex;
  min-height: 200px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.wd-bloomy-art {
  background: linear-gradient(135deg, #e5b9ab, #f7e9d8 60%, #bdcfc0);
  color: #634b56;
}

.wd-bloomy-art::before {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  border: 1px solid rgb(115 77 85 / 32%);
  border-radius: 50%;
  animation: wdOrbit 24s linear infinite;
}

.wd-art-flower {
  position: absolute;
  top: 15px;
  right: 30px;
  font-size: 47px;
  color: #9c6877;
  animation: wdFlowerTurn 16s linear infinite;
}

.wd-art-line {
  position: absolute;
  width: 75%;
  height: 1px;
  background: rgb(99 75 86 / 45%);
  transform: rotate(-32deg);
}

.wd-art-title {
  z-index: 1;
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(35px, 5vw, 53px);
  line-height: .83;
  letter-spacing: .05em;
}

.wd-art-title strong {
  display: block;
  font-weight: 400;
}

.wd-art-caption {
  position: absolute;
  bottom: 18px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 7px;
  letter-spacing: .15em;
}

.wd-invora-art {
  background: linear-gradient(140deg, #a8d5cd, #d9e9dc 55%, #f1d8ac);
  color: #1b4548;
}

.wd-invora-logo {
  z-index: 2;
  font-family: "DM Sans", sans-serif;
  font-size: clamp(32px, 4vw, 47px);
  font-weight: 900;
  letter-spacing: .13em;
}

.wd-invora-logo span {
  color: #ca765b;
}

.wd-invora-orbit {
  position: absolute;
  width: 185px;
  height: 185px;
  border: 1px solid rgb(27 69 72 / 28%);
  border-radius: 50%;
  box-shadow:
    0 0 0 22px rgb(255 255 255 / 9%),
    0 0 0 48px rgb(255 255 255 / 7%);
  animation: wdOrbit 28s linear infinite reverse;
}

.wd-invora-caption {
  position: absolute;
  bottom: 17px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 7px;
  letter-spacing: .13em;
}

.wd-template-stack {
  position: absolute;
  right: 18px;
  top: 19px;
  display: flex;
  gap: 4px;
  transform: rotate(12deg);
}

.wd-template-stack div {
  width: 22px;
  height: 43px;
  border: 1px solid rgb(27 69 72 / 30%);
  border-radius: 4px;
  background: rgb(255 255 255 / 55%);
}

.wd-template-stack div:nth-child(2) {
  transform: translateY(-8px);
  background: #e8b8a0;
}

.wd-project-info {
  display: grid;
  gap: 17px;
  padding: 20px;
}

.wd-project-type {
  color: var(--beige-dark);
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: .12em;
}

.wd-project-info h4 {
  margin: 8px 0;
  color: var(--beige);
  font-family: "Cormorant Garamond", serif;
  font-size: 31px;
  font-weight: 600;
}

.wd-project-info p {
  min-height: 55px;
  margin: 0;
  color: #c1cbd8;
  font-size: 12px;
  line-height: 1.8;
}

.wd-project-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 12px 15px;
  background: #e8c18e;
  color: #14243b;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
  transition:
    background .25s ease,
    transform .25s ease;
}

.wd-project-link:hover {
  background: #f6dfbd;
  transform: translateX(4px);
}

.wd-project-status {
  display: inline-block;
  width: fit-content;
  padding: 10px 12px;
  border: 1px solid #688477;
  color: #b8dfcc;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: .07em;
}

/* FEATURES */

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

.wd-feature {
  min-width: 0;
  padding: 17px 14px;
  border: 1px solid var(--line);
  background: #192d47;
  transition:
    transform .3s ease,
    background .3s ease,
    border-color .3s ease;
}

.wd-feature:hover {
  transform: translateY(-5px);
  background: #243c5b;
  border-color: #d8b88e;
}

.wd-feature > span {
  display: block;
  margin-bottom: 13px;
  color: #e8c18e;
  font-size: 24px;
}

.wd-feature strong {
  color: var(--beige);
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
}

.wd-feature p {
  margin: 9px 0 0;
  color: #bdc9d8;
  font-size: 11px;
  line-height: 1.7;
}

.wd-bottom-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
  font-size: 8px;
  letter-spacing: .1em;
}

/* ANIMATION */

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

@keyframes wdSlideIn {
  from {
    opacity: 0;
    transform: translateX(-25px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

@keyframes wdPhoneFront {
  0%, 100% {
    transform: translate(43px, 8px) rotate(8deg);
  }
  50% {
    transform: translate(43px, -9px) rotate(5deg);
  }
}

@keyframes wdPhoneBack {
  0%, 100% {
    transform: translate(-57px, 5px) rotate(-12deg);
  }
  50% {
    transform: translate(-57px, -12px) rotate(-8deg);
  }
}

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

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

@keyframes wdStarFloat {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-12px) rotate(15deg); }
}

@keyframes wdPulse {
  0% { box-shadow: 0 0 0 0 rgb(238 191 133 / 60%); }
  70% { box-shadow: 0 0 0 9px rgb(238 191 133 / 0%); }
  100% { box-shadow: 0 0 0 0 rgb(238 191 133 / 0%); }
}

/* TABLET AND MOBILE */

@media (max-width: 760px) {
  .wd-hero {
    grid-template-columns: 1fr;
  }

  .wd-hero-copy {
    padding-bottom: 15px;
  }

  .wd-visual {
    min-height: 350px;
  }

  .wd-project-grid {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 430px) {
  .wd-hero-copy h3 {
    font-size: 39px;
  }

  .wd-visual {
    min-height: 320px;
    transform: scale(.9);
    transform-origin: top center;
    margin-bottom: -25px;
  }

  .wd-feature-grid {
    grid-template-columns: 1fr 1fr;
  }

  .wd-bottom-line {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wd-showcase *,
  .wd-showcase *::before,
  .wd-showcase *::after {
    animation: none !important;
    transition: none !important;
  }
}


/* BLOOMY VOW — SINGLE FEATURED PROJECT */

.wd-project-grid-single {
  grid-template-columns: minmax(0, 760px);
  justify-content: center;
}

.wd-project-grid-single .wd-project-card {
  width: 100%;
}

.wd-project-grid-single .wd-project-art {
  min-height: 250px;
}

@media (max-width: 600px) {
  .wd-project-grid-single {
    grid-template-columns: minmax(0, 1fr);
  }
}



/* ==========================================
   DESIGN ENGINEERING — AUTOMOTIVE SPEED LAB
========================================== */

.de-showcase {
  display: grid;
  gap: 25px;
  overflow: hidden;
  color: var(--beige);
}

.de-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 265px;
  padding: 22px 26px;
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 15%, rgb(215 154 104 / 18%), transparent 28%),
    linear-gradient(130deg, #172a43, #0b1728);
  border: 1px solid #40536c;
}

.de-hero::before {
  content: "ENGINEERING";
  position: absolute;
  right: -8px;
  bottom: -32px;
  color: rgb(255 255 255 / 3%);
  font-size: clamp(45px, 10vw, 110px);
  font-weight: 900;
  letter-spacing: .04em;
  pointer-events: none;
}

.de-hero-top,
.de-race-hud,
.de-race-footer,
.de-hero-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
}

.de-hero-top {
  color: #b9c8d8;
}

.de-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 650px;
  margin: 34px 0 24px;
}

.de-kicker {
  color: #e8bd91;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
}

.de-hero-copy h3 {
  max-width: 550px;
  margin: 13px 0;
  color: #f0dfc7;
  font-family: var(--display);
  font-size: clamp(32px, 5vw, 49px);
  line-height: 1;
}

.de-hero-copy p {
  max-width: 540px;
  margin: 0;
  color: #bfcbda;
  font-size: 12px;
  line-height: 1.8;
}

.de-hero-number {
  position: absolute;
  right: 36px;
  bottom: 25px;
  display: grid;
  color: #e8bd91;
  text-align: right;
}

.de-hero-number strong {
  font-size: 43px;
  line-height: 1;
}

.de-hero-number span {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .12em;
}

/* FAST RACE SCENE */

.de-race-stage {
  position: relative;
  isolation: isolate;
  height: 235px;
  overflow: hidden;
  border: 1px solid #40536c;
  background:
    linear-gradient(180deg, #13243b 0%, #0a1423 100%);
}

.de-blueprint-grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .45;
  background-image:
    linear-gradient(rgb(156 183 205 / 11%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(156 183 205 / 11%) 1px, transparent 1px);
  background-size: 28px 28px;
}

.de-race-hud {
  position: absolute;
  z-index: 6;
  top: 15px;
  left: 18px;
  right: 18px;
  color: #d4c3a9;
  font-size: 8px;
}

.de-live-indicator {
  display: flex;
  align-items: center;
  gap: 7px;
}

.de-live-indicator i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e2b17e;
  animation: deLivePulse 1.1s infinite;
}

.de-track {
  position: absolute;
  right: -5%;
  bottom: 39px;
  left: -5%;
  height: 53px;
  transform: skewY(-2deg);
  border-top: 2px solid rgb(222 190 151 / 32%);
  border-bottom: 2px solid rgb(222 190 151 / 32%);
  background: rgb(255 255 255 / 4%);
}

.de-track-center {
  position: absolute;
  top: 50%;
  left: 0;
  width: 200%;
  border-top: 2px dashed #c8ae89;
  transform: translateY(-50%);
  animation: deTrackMove .8s linear infinite;
}

.de-race-car {
  position: absolute;
  z-index: 4;
  top: 46px;
  left: 0;
  width: clamp(205px, 34vw, 345px);
  filter: drop-shadow(0 9px 9px rgb(0 0 0 / 60%));
  animation: deCarPass 4.2s cubic-bezier(.38,0,.68,1) infinite;
  pointer-events: none;
}

.de-race-car svg {
  display: block;
  width: 100%;
  overflow: visible;
}

.de-wheel {
  transform-box: fill-box;
  transform-origin: center;
  animation: deWheelSpin .22s linear infinite;
}

.de-speed-lines {
  position: absolute;
  z-index: 2;
  top: 95px;
  left: 0;
  width: 36%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #d79a68);
  opacity: 0;
  animation: deSpeedTrail 4.2s linear infinite;
}

.de-speed-lines-two {
  top: 130px;
  width: 25%;
  height: 1px;
  animation-delay: .08s;
}

.de-speed-label {
  position: absolute;
  z-index: 5;
  right: 8%;
  top: 71px;
  color: #f4c793;
  font-family: var(--display);
  font-size: clamp(19px, 3vw, 29px);
  font-style: italic;
  font-weight: 700;
  text-shadow: 0 0 20px rgb(220 157 101 / 45%);
  opacity: 0;
  transform: rotate(-9deg) scale(.5);
  animation: deSpeedWord 4.2s ease-out infinite;
}

.de-race-footer {
  position: absolute;
  z-index: 6;
  right: 18px;
  bottom: 14px;
  left: 18px;
  color: #a6b4c6;
  font-size: 8px;
}

/* SECTIONS */

.de-section-title {
  display: flex;
  justify-content: space-between;
  align-items: end;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.de-section-title > div > span {
  color: #d7b48a;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .13em;
}

.de-section-title h3 {
  margin: 7px 0 0;
  color: var(--beige);
  font-family: var(--display);
  font-size: 30px;
  font-weight: 500;
}

.de-section-symbol {
  color: #e4b983;
  font-size: 28px;
}

/* TOOLKIT */

.de-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.de-tool {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px;
  background: #192d47;
  border: 1px solid #354d68;
  transition: transform .3s ease, border-color .3s ease;
}

.de-tool:hover {
  transform: translateY(-4px);
  border-color: #e1ba8e;
}

.de-tool-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  background: #e9c394;
  color: #14243a;
  font-size: 23px;
  font-weight: 900;
}

.de-tool-solid .de-tool-icon {
  background: #e5a19a;
}

.de-tool-inventor .de-tool-icon {
  background: #acc5dc;
}

.de-tool-polyworks .de-tool-icon {
  background: #b5d6c6;
}

.de-tool > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.de-tool strong {
  color: #f2e4d2;
  font-size: 12px;
}

.de-tool small {
  color: #aebed0;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .1em;
}

.de-tool-index {
  margin-left: auto;
  color: #8395aa;
  font-family: var(--mono);
  font-size: 9px;
}

/* CAPABILITIES */

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

.de-capability {
  overflow: hidden;
  background: #182b44;
  border: 1px solid #354d68;
  transition: transform .3s ease, border-color .3s ease;
}

.de-capability:hover {
  transform: translateY(-5px);
  border-color: #dcb58b;
}

.de-capability-visual {
  position: relative;
  display: flex;
  min-height: 145px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.de-capability-visual > span {
  position: absolute;
  top: 12px;
  left: 14px;
  color: rgb(255 255 255 / 82%);
  font-family: var(--display);
  font-size: 29px;
}

.de-capability-visual > small {
  position: absolute;
  right: 12px;
  bottom: 12px;
  color: rgb(255 255 255 / 82%);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .12em;
}

.de-blueprint {
  background-color: #254665;
  background-image:
    linear-gradient(rgb(193 222 241 / 13%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(193 222 241 / 13%) 1px, transparent 1px);
  background-size: 17px 17px;
}

.de-blueprint-shape {
  width: 83px;
  height: 54px;
  border: 2px solid #d8e7ee;
  transform: skewX(-20deg);
  box-shadow: 9px 9px 0 rgb(216 231 238 / 15%);
}

.de-model {
  background: linear-gradient(140deg, #315b69, #20394f);
}

.de-cube {
  position: relative;
  width: 58px;
  height: 58px;
  transform: rotate(30deg) skew(-9deg);
  background: #e5c18e;
  box-shadow: 12px -12px 0 #b9d7c8, 12px 12px 0 #b88473;
}

.de-cube i {
  display: none;
}

.de-dimension {
  background: linear-gradient(135deg, #65526c, #263b55);
}

.de-dimension-lines {
  width: 95px;
  height: 70px;
  position: relative;
  border: 2px solid #ead0ae;
}

.de-dimension-lines::before,
.de-dimension-lines::after {
  content: "";
  position: absolute;
  background: #ead0ae;
}

.de-dimension-lines::before {
  width: 125px;
  height: 1px;
  left: -17px;
  top: 34px;
}

.de-dimension-lines::after {
  width: 1px;
  height: 90px;
  left: 46px;
  top: -12px;
}

.de-capability-info {
  padding: 15px;
}

.de-capability-info > span {
  color: #d9b68d;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .1em;
}

.de-capability-info h4 {
  margin: 8px 0;
  color: #f0e2d0;
  font-size: 14px;
}

.de-capability-info p {
  margin: 0;
  color: #b8c7d7;
  font-size: 11px;
  line-height: 1.7;
}

/* CLOSING */

.de-closing {
  position: relative;
  padding: 27px;
  overflow: hidden;
  background: #e8c18e;
  color: #182941;
  text-align: center;
}

.de-closing::after {
  content: "✳";
  position: absolute;
  top: -28px;
  right: 20px;
  color: rgb(24 41 65 / 10%);
  font-size: 105px;
  animation: deClosingSpin 18s linear infinite;
}

.de-closing > span {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .16em;
}

.de-closing h3 {
  margin: 11px 0;
  font-family: var(--display);
  font-size: clamp(27px, 4vw, 39px);
  font-weight: 600;
}

/* ANIMATION */

@keyframes deCarPass {
  0% {
    transform: translateX(-125%) scale(.82);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  44% {
    transform: translateX(92%) scale(1.02);
    opacity: 1;
  }
  52% {
    transform: translateX(125%) scale(.93);
    opacity: 0;
  }
  100% {
    transform: translateX(125%) scale(.93);
    opacity: 0;
  }
}

@keyframes deWheelSpin {
  to {
    rotate: 360deg;
  }
}

@keyframes deTrackMove {
  to {
    transform: translate(-50%, -50%);
  }
}

@keyframes deSpeedTrail {
  0%, 5%, 60%, 100% {
    opacity: 0;
    transform: translateX(-100px);
  }
  13% {
    opacity: .9;
  }
  40% {
    opacity: .7;
    transform: translateX(260px);
  }
  50% {
    opacity: 0;
  }
}

@keyframes deSpeedWord {
  0%, 10%, 100% {
    opacity: 0;
    transform: rotate(-9deg) scale(.5);
  }
  20% {
    opacity: 1;
    transform: rotate(-9deg) scale(1.08);
  }
  39% {
    opacity: 0;
    transform: rotate(-9deg) scale(1.3);
  }
}

@keyframes deLivePulse {
  50% {
    opacity: .25;
    transform: scale(.7);
  }
}

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

/* RESPONSIVE */

@media (max-width: 650px) {
  .de-hero {
    min-height: 300px;
  }

  .de-hero-number {
    right: 19px;
    bottom: 15px;
  }

  .de-tools {
    grid-template-columns: 1fr;
  }

  .de-capability-grid {
    grid-template-columns: 1fr;
  }

  .de-capability-visual {
    min-height: 165px;
  }

  .de-race-stage {
    height: 205px;
  }

  .de-race-car {
    top: 52px;
    width: 245px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .de-showcase *,
  .de-showcase *::before,
  .de-showcase *::after {
    animation: none !important;
    transition: none !important;
  }

  .de-race-car {
    opacity: 1;
    transform: none;
  }
}


/* ======================================
   PRODUCT DEVELOPMENT — MOTION SHOWCASE
====================================== */

.pd-motion-showcase {
  display: grid;
  gap: 24px;
  overflow: hidden;
}

.pd-motion-heading,
.pd-stage-caption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #c3cbd7;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
}

.pd-motion-stage {
  position: relative;
  height: 260px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid #40536c;
  background:
    radial-gradient(ellipse at 50% 100%, #293d55 0%, transparent 55%),
    linear-gradient(180deg, #101d30, #080f1b);
}

.pd-motion-grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .42;
  background-image:
    linear-gradient(rgb(180 204 224 / 10%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(180 204 224 / 10%) 1px, transparent 1px);
  background-size: 30px 30px;
  animation: pdGridMove 9s linear infinite;
}

.pd-motion-track {
  position: absolute;
  bottom: 39px;
  left: -10%;
  width: 120%;
  height: 44px;
  transform: skewY(-2deg);
  border-top: 1px solid rgb(232 193 142 / 45%);
  border-bottom: 1px solid rgb(232 193 142 / 25%);
  background: rgb(255 255 255 / 3%);
}

.pd-motion-track::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 200%;
  border-top: 2px dashed #c5ad8d;
  animation: pdRoadMove .55s linear infinite;
}

.pd-car-run {
  position: absolute;
  z-index: 4;
  top: 48px;
  left: 0;
  width: clamp(220px, 43%, 430px);
  filter: drop-shadow(0 12px 13px rgb(0 0 0 / 55%));
  animation: pdCarRun 4.5s cubic-bezier(.45,0,.58,1) infinite;
}

.pd-car-run svg {
  display: block;
  width: 100%;
  overflow: visible;
}

.pd-wheel {
  transform-box: fill-box;
  transform-origin: center;
  animation: pdWheelRotate .2s linear infinite;
}

.pd-speedline {
  position: absolute;
  z-index: 2;
  left: -30%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #e8c18e, transparent);
  opacity: 0;
  animation: pdSpeed 4.5s linear infinite;
}

.pd-speedline-one {
  top: 94px;
  width: 42%;
}

.pd-speedline-two {
  top: 137px;
  width: 30%;
  animation-delay: .1s;
}

.pd-speedline-three {
  top: 170px;
  width: 24%;
  animation-delay: .2s;
}

.pd-light-beam {
  position: absolute;
  z-index: 3;
  right: -5%;
  top: 95px;
  width: 48%;
  height: 60px;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(255 224 175 / 0%),
    rgb(255 224 175 / 25%),
    transparent
  );
  filter: blur(13px);
  opacity: 0;
  animation: pdBeam 4.5s linear infinite;
}

.pd-vroom {
  position: absolute;
  z-index: 5;
  right: 8%;
  top: 43%;
  color: #f0c48e;
  font-family: var(--display);
  font-size: clamp(21px, 3vw, 34px);
  font-style: italic;
  font-weight: 700;
  opacity: 0;
  transform: rotate(-10deg) scale(.6);
  text-shadow: 0 0 20px rgb(240 196 142 / 55%);
  animation: pdVroom 4.5s ease-out infinite;
}

.pd-stage-caption {
  position: absolute;
  z-index: 6;
  bottom: 12px;
  left: 15px;
  right: 15px;
  font-size: 8px;
}

.pd-project-intro {
  padding: 22px;
  border-left: 3px solid #d8b68b;
  background: #192d47;
}

.pd-section-label,
.pd-document-info > span {
  color: #d8b68b;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
}

.pd-project-intro h3 {
  margin: 11px 0;
  color: var(--beige);
  font-family: var(--display);
  font-size: clamp(27px, 4vw, 36px);
  font-weight: 500;
}

.pd-project-intro p {
  color: #c3cdd9;
  font-size: 12px;
  line-height: 1.8;
}

.pd-project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.pd-project-tags span {
  padding: 9px 11px;
  border: 1px solid #526780;
  color: #e9d5b8;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .05em;
  transition: .25s ease;
}

.pd-project-tags span:hover {
  background: #e8c18e;
  color: #14243b;
  transform: translateY(-3px);
}

.pd-document {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 19px;
  border: 1px solid #40536c;
  background: #14243a;
}

.pd-document-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 52px;
  background: #e8c18e;
  color: #15243a;
  font-size: 11px;
  font-weight: 800;
}

.pd-document-info {
  min-width: 0;
}

.pd-document-info h3 {
  margin: 7px 0;
  color: var(--beige);
  font-size: 15px;
}

.pd-document-info p {
  margin: 0;
  color: #bdc9d8;
  font-size: 11px;
  line-height: 1.6;
}

.pd-document-actions {
  display: grid;
  gap: 7px;
}

.pd-document-actions .pdf-action {
  text-align: center;
  white-space: nowrap;
}

@keyframes pdCarRun {
  0% {
    transform: translateX(-115%) scale(.85);
    opacity: 0;
  }

  9% {
    opacity: 1;
  }

  42% {
    transform: translateX(95%) scale(1.02);
    opacity: 1;
  }

  51%, 100% {
    transform: translateX(125%) scale(.96);
    opacity: 0;
  }
}

@keyframes pdWheelRotate {
  to { rotate: 360deg; }
}

@keyframes pdRoadMove {
  to { transform: translateX(-50%); }
}

@keyframes pdGridMove {
  to { background-position: 30px 30px; }
}

@keyframes pdSpeed {
  0%, 5%, 65%, 100% {
    opacity: 0;
    transform: translateX(-100px);
  }

  15% { opacity: .9; }
  44% { opacity: .7; transform: translateX(300px); }
  52% { opacity: 0; }
}

@keyframes pdBeam {
  0%, 13%, 55%, 100% { opacity: 0; }
  30%, 43% { opacity: 1; }
}

@keyframes pdVroom {
  0%, 15%, 100% {
    opacity: 0;
    transform: rotate(-10deg) scale(.6);
  }

  25% {
    opacity: 1;
    transform: rotate(-10deg) scale(1.1);
  }

  40% {
    opacity: 0;
    transform: rotate(-10deg) scale(1.3);
  }
}

@media (max-width: 620px) {
  .pd-motion-stage {
    height: 205px;
  }

  .pd-car-run {
    top: 48px;
    width: 270px;
  }

  .pd-document {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .pd-document-actions {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
  }

  .pd-stage-caption {
    font-size: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pd-motion-showcase *,
  .pd-motion-showcase *::before,
  .pd-motion-showcase *::after {
    animation: none !important;
    transition: none !important;
  }

  .pd-car-run {
    opacity: 1;
    transform: translateX(0);
  }
}


/* ============================================
   PRODUCT DEVELOPMENT — AUTOMOTIVE LIGHTING LAB
============================================ */

.pd-studio {
  display: grid;
  gap: 23px;
  overflow: hidden;
}

.pd-studio-heading,
.pd-studio-top-label,
.pd-studio-bottom {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
}

.pd-studio-heading {
  color: #d4c4ad;
}

/* DARK DEVELOPMENT STUDIO */

.pd-studio-stage {
  position: relative;
  isolation: isolate;
  height: clamp(260px, 35vw, 370px);
  overflow: hidden;
  border: 1px solid #344b64;
  background:
    radial-gradient(ellipse at 50% 55%, #263d55 0%, transparent 58%),
    radial-gradient(ellipse at 50% 100%, #172b40 0%, transparent 65%),
    #080f1b;
}

.pd-studio-stage::before,
.pd-studio-stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  border: 1px solid rgb(155 194 220 / 15%);
  border-radius: 50%;
  pointer-events: none;
}

.pd-studio-stage::before {
  width: 520px;
  height: 520px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.pd-studio-stage::after {
  width: 370px;
  height: 370px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.pd-studio-grid {
  position: absolute;
  z-index: -2;
  inset: 0;
  opacity: .35;
  background-image:
    linear-gradient(rgb(143 180 209 / 12%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(143 180 209 / 12%) 1px, transparent 1px);
  background-size: 25px 25px;
  animation: pdStudioGridReveal 2.5s ease both;
}

.pd-studio-crosshair {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 70%;
  height: 1px;
  background: rgb(172 205 226 / 18%);
  transform: translate(-50%, -50%);
}

.pd-studio-crosshair::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 220px;
  top: -110px;
  left: 50%;
  background: rgb(172 205 226 / 18%);
}

.pd-studio-top-label {
  position: absolute;
  z-index: 7;
  top: 15px;
  left: 17px;
  right: 17px;
  color: #a5bbd0;
  opacity: 0;
  animation: pdFadeIn .8s 1s forwards;
}

.pd-blueprint {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: .35;
  pointer-events: none;
}

.pd-blueprint-lines,
.pd-blueprint-dimensions {
  fill: none;
  stroke: #8ec9ed;
  stroke-width: 1;
  stroke-dasharray: 5 6;
  stroke-dashoffset: 800;
  animation: pdBlueprintDraw 3s ease forwards;
}

.pd-blueprint-dimensions {
  opacity: 0;
  animation: pdFadeIn 1s 2s forwards;
}

/* MAIN HEADLAMP */

.pd-headlamp {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: min(88%, 820px);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 18px 30px rgb(0 0 0 / 45%));
}

.pd-headlamp svg {
  display: block;
  width: 100%;
  overflow: visible;
}

.pd-outline {
  stroke-dasharray: 1800;
  stroke-dashoffset: 1800;
  opacity: 0;
  animation: pdHeadlampDraw 3s .5s ease forwards;
}

.pd-lens {
  opacity: 0;
  animation: pdLensReveal 1.5s 2s ease forwards;
}

.pd-detail {
  opacity: 0;
  animation: pdDetailReveal 1.2s 2.6s ease forwards;
}

.pd-projector-aura {
  opacity: 0;
  animation: pdProjectorGlow 2s 3s ease-in-out infinite;
}

.pd-projector {
  opacity: 0;
  animation: pdProjectorOn 1.5s 3.1s ease forwards;
  filter: drop-shadow(0 0 8px #8cdcff);
}

.pd-projector-highlight {
  opacity: 0;
  animation: pdProjectorOn 1s 3.6s ease forwards;
}

.pd-led-line {
  stroke-dasharray: 650;
  stroke-dashoffset: 650;
  opacity: 0;
  animation: pdLedDraw 2s 3s ease forwards;
}

.pd-led-secondary {
  animation-delay: 3.6s;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
}

/* CALLOUTS */

.pd-callout {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #c5d9e8;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .08em;
  opacity: 0;
  animation: pdFadeIn .8s 3.5s forwards;
}

.pd-callout i {
  display: block;
  width: 26px;
  height: 1px;
  background: #8cc9ea;
  box-shadow: 0 0 7px #8cc9ea;
}

.pd-callout-led {
  top: 28%;
  left: 5%;
}

.pd-callout-projector {
  top: 67%;
  right: 5%;
  flex-direction: row-reverse;
}

.pd-callout-housing {
  left: 9%;
  bottom: 19%;
}

/* CINEMATIC LIGHT SWEEP */

.pd-studio-sweep {
  position: absolute;
  z-index: 4;
  top: -20%;
  left: -55%;
  width: 36%;
  height: 145%;
  pointer-events: none;
  opacity: 0;
  transform: rotate(16deg);
  background: linear-gradient(
    90deg,
    transparent,
    rgb(197 231 255 / 5%),
    rgb(222 245 255 / 38%),
    rgb(255 255 255 / 13%),
    transparent
  );
  filter: blur(8px);
  animation: pdLightSweep 5.5s 3.8s ease-in-out infinite;
}

.pd-studio-bottom {
  position: absolute;
  z-index: 7;
  right: 17px;
  bottom: 13px;
  left: 17px;
  color: #8fa9bf;
  font-size: 8px;
}

/* INFORMATION */

.pd-studio-summary {
  padding: 23px;
  background: #182b43;
  border: 1px solid #354d68;
}

.pd-summary-heading > span {
  color: #d8b78d;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
}

.pd-summary-heading h3 {
  margin: 10px 0;
  color: var(--beige);
  font-family: var(--display);
  font-size: clamp(27px, 4vw, 36px);
  font-weight: 500;
}

.pd-studio-summary > p {
  color: #c3cfdd;
  font-size: 12px;
  line-height: 1.85;
  margin: 0;
}

.pd-studio-projects {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}

.pd-studio-projects > div {
  min-width: 0;
  padding: 13px;
  border-top: 2px solid #d8b78d;
  background: #101e31;
  transition: background .3s ease, transform .3s ease;
}

.pd-studio-projects > div:hover {
  background: #263e59;
  transform: translateY(-4px);
}

.pd-studio-projects span,
.pd-studio-projects small {
  display: block;
  color: #aebdd0;
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1.7;
}

.pd-studio-projects strong {
  display: block;
  margin: 8px 0 4px;
  color: #f0dfc7;
  font-size: 14px;
}

.pd-studio-document {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  padding: 19px;
  border: 1px solid #40536c;
  background: #101e31;
}

.pd-studio-pdf-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 52px;
  background: #e8c18e;
  color: #15243a;
  font-size: 11px;
  font-weight: 800;
}

.pd-studio-pdf-info {
  min-width: 0;
}

.pd-studio-pdf-info > span {
  color: #d8b78d;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .1em;
}

.pd-studio-pdf-info h3 {
  margin: 7px 0;
  color: var(--beige);
  font-size: 14px;
}

.pd-studio-pdf-info p {
  margin: 0;
  color: #bdc9d8;
  font-size: 11px;
  line-height: 1.6;
}

.pd-studio-pdf-actions {
  display: grid;
  gap: 7px;
}

.pd-studio-pdf-actions .pdf-action {
  text-align: center;
  white-space: nowrap;
}

/* ANIMATION SEQUENCE */

@keyframes pdStudioGridReveal {
  from {
    opacity: 0;
    background-position: 0 25px;
  }
  to {
    opacity: .35;
    background-position: 0 0;
  }
}

@keyframes pdBlueprintDraw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes pdHeadlampDraw {
  0% {
    stroke-dashoffset: 1800;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes pdLensReveal {
  from {
    opacity: 0;
    transform: scale(.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pdDetailReveal {
  from {
    opacity: 0;
  }
  to {
    opacity: .95;
  }
}

@keyframes pdLedDraw {
  0% {
    opacity: 0;
    stroke-dashoffset: 650;
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes pdProjectorOn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes pdProjectorGlow {
  0%, 100% {
    opacity: .18;
  }
  50% {
    opacity: .75;
  }
}

@keyframes pdLightSweep {
  0%, 34% {
    left: -55%;
    opacity: 0;
  }
  42% {
    opacity: .9;
  }
  75% {
    left: 120%;
    opacity: .6;
  }
  82%, 100% {
    left: 120%;
    opacity: 0;
  }
}

@keyframes pdFadeIn {
  to {
    opacity: 1;
  }
}

/* RESPONSIVE */

@media (max-width: 650px) {
  .pd-studio-stage {
    height: 245px;
  }

  .pd-headlamp {
    width: 112%;
    max-width: none;
  }

  .pd-callout {
    font-size: 6px;
    gap: 4px;
  }

  .pd-callout i {
    width: 12px;
  }

  .pd-studio-projects {
    grid-template-columns: 1fr;
  }

  .pd-studio-projects > div {
    display: grid;
    grid-template-columns: 80px 1fr;
    align-items: center;
    gap: 4px 10px;
  }

  .pd-studio-projects strong {
    grid-column: 2;
    margin: 0;
  }

  .pd-studio-projects small {
    grid-column: 2;
  }

  .pd-studio-document {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .pd-studio-pdf-actions {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
  }

  .pd-studio-top-label,
  .pd-studio-bottom {
    font-size: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pd-studio *,
  .pd-studio *::before,
  .pd-studio *::after {
    animation: none !important;
    transition: none !important;
  }

  .pd-outline,
  .pd-lens,
  .pd-detail,
  .pd-projector,
  .pd-led-line {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  .pd-blueprint-lines {
    stroke-dashoffset: 0;
  }
}


/* ======================================
   PHOTOREALISTIC HEADLAMP STUDIO
====================================== */

.pd-studio-stage-real {
  position: relative;
  isolation: isolate;
  height: clamp(260px, 34vw, 370px);
  background:
    radial-gradient(ellipse at 68% 55%, #263d53 0%, transparent 48%),
    linear-gradient(135deg, #07101d, #101d2e);
  overflow: hidden;
}

/* Blueprint grid */

.pd-studio-stage-real .pd-studio-grid {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-image:
    linear-gradient(rgb(132 183 220 / 12%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(132 183 220 / 12%) 1px, transparent 1px);
  background-size: 24px 24px;
  animation: pdRealGridReveal 1.5s .3s forwards;
}

/* Headlamp image */

.pd-real-headlamp-wrap {
  position: absolute;
  z-index: 2;
  inset: 35px 2% 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pd-real-headlamp {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(.92);
  filter: contrast(1.08) saturate(.95)
          drop-shadow(0 20px 30px rgb(0 0 0 / 40%));
  animation: pdRealHeadlampReveal 1.8s .8s cubic-bezier(.2,.7,.2,1) forwards;
}

/* Projector illumination */

.pd-real-projector-glow {
  position: absolute;
  z-index: 3;
  left: 72%;
  top: 52%;
  width: 9%;
  height: 28%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgb(195 236 255 / 45%),
    rgb(105 189 245 / 17%) 48%,
    transparent 75%
  );
  filter: blur(10px);
  mix-blend-mode: screen;
  opacity: 0;
  animation: pdRealProjectorPulse 2.5s 2.8s ease-in-out infinite;
}

/* Moving light reflection */

.pd-real-light-sweep {
  position: absolute;
  z-index: 4;
  top: -30%;
  left: -25%;
  width: 13%;
  height: 160%;
  opacity: 0;
  transform: skewX(-20deg);
  background: linear-gradient(
    90deg,
    transparent,
    rgb(208 235 255 / 8%),
    rgb(255 255 255 / 45%),
    rgb(177 220 255 / 12%),
    transparent
  );
  filter: blur(9px);
  pointer-events: none;
  animation: pdRealSweep 6s 3s ease-in-out infinite;
}

/* Blueprint lines */

.pd-real-blueprint {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
}

.pd-real-blueprint svg {
  width: 100%;
  height: 100%;
}

.pd-real-blueprint-lines {
  fill: none;
  stroke: #9bcbe8;
  stroke-width: 1;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  opacity: .48;
  animation: pdRealDraw 2.5s .3s ease forwards;
}

/* Labels */

.pd-studio-stage-real .pd-studio-top-label {
  z-index: 7;
  color: #d6e5f1;
}

.pd-real-label {
  position: absolute;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #c5d9e9;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .1em;
  opacity: 0;
  animation: pdRealLabelIn .8s 3.3s forwards;
}

.pd-real-label i {
  width: 25px;
  height: 1px;
  background: #a8dafa;
  box-shadow: 0 0 8px #a8dafa;
}

.pd-real-label-led {
  left: 9%;
  top: 32%;
}

.pd-real-label-projector {
  right: 8%;
  bottom: 30%;
  flex-direction: row-reverse;
}

.pd-real-bottom {
  position: absolute;
  z-index: 8;
  right: 15px;
  bottom: 12px;
  left: 15px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #a9bdce;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .09em;
}

/* Animation sequence */

@keyframes pdRealGridReveal {
  to { opacity: .3; }
}

@keyframes pdRealHeadlampReveal {
  0% {
    opacity: 0;
    transform: scale(.92) translateY(10px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes pdRealDraw {
  to { stroke-dashoffset: 0; }
}

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

@keyframes pdRealProjectorPulse {
  0%, 100% { opacity: .25; transform: scale(.85); }
  50% { opacity: .85; transform: scale(1.2); }
}

@keyframes pdRealSweep {
  0%, 25% {
    left: -25%;
    opacity: 0;
  }
  35% { opacity: .9; }
  70% {
    left: 120%;
    opacity: .65;
  }
  80%, 100% {
    left: 120%;
    opacity: 0;
  }
}

/* Mobile */

@media (max-width: 650px) {
  .pd-studio-stage-real {
    height: 245px;
  }

  .pd-real-headlamp-wrap {
    inset: 40px -12px 30px;
  }

  .pd-real-label {
    font-size: 6px;
  }

  .pd-real-label-led {
    left: 3%;
  }

  .pd-real-label-projector {
    right: 3%;
  }

  .pd-real-bottom {
    font-size: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pd-studio-stage-real *,
  .pd-studio-stage-real *::before {
    animation: none !important;
  }

  .pd-real-headlamp {
    opacity: 1;
    transform: none;
  }
}


/* =========================================
   PROJECTOR LENS — LED POWER ON/OFF
========================================= */

/* Posisi glow tepat di atas projector bulat */
.pd-real-projector-glow {
  position: absolute;
  z-index: 4;

  /* Posisi pusat projector pada gambar */
  left: 69%;
  top: 52%;

  width: 15%;
  height: 43%;

  transform: translate(-50%, -50%);
  border-radius: 50%;

  background: radial-gradient(
    ellipse at center,
    rgba(255,255,255,1) 0%,
    rgba(190,235,255,.95) 9%,
    rgba(112,194,255,.65) 23%,
    rgba(63,150,230,.28) 48%,
    transparent 75%
  );

  filter: blur(5px);
  mix-blend-mode: screen;
  opacity: 0;

  box-shadow:
    0 0 18px rgba(150,220,255,.9),
    0 0 42px rgba(91,180,255,.65),
    0 0 85px rgba(75,150,255,.3);

  animation: pdProjectorPower 5s ease-in-out infinite;
}

/* Cahaya inti di tengah lensa */
.pd-real-projector-glow::before {
  content: "";
  position: absolute;

  width: 35%;
  height: 35%;
  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);
  border-radius: 50%;

  background: radial-gradient(
    circle,
    #ffffff 0%,
    #effaff 28%,
    #a8e0ff 56%,
    transparent 78%
  );

  filter: blur(2px);

  box-shadow:
    0 0 12px #ffffff,
    0 0 28px #a8e0ff,
    0 0 55px #63baff;

  animation: pdLensCore 5s ease-in-out infinite;
}

/* Cincin projector */
.pd-real-projector-glow::after {
  content: "";
  position: absolute;

  width: 72%;
  height: 72%;
  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);
  border-radius: 50%;

  border: 2px solid rgba(203,240,255,.8);
  box-shadow:
    inset 0 0 12px rgba(139,215,255,.7),
    0 0 16px rgba(139,215,255,.9);

  animation: pdLensRing 5s ease-in-out infinite;
}

/* =========================================
   LIGHT SPREAD — ILLUMINATE THE WHOLE BOX
========================================= */

.pd-real-headlamp-wrap::after {
  content: "";
  position: absolute;
  z-index: 3;

  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(
      ellipse 37% 60% at 69% 52%,
      rgba(174,225,255,.38) 0%,
      rgba(120,194,255,.2) 34%,
      rgba(88,160,230,.08) 58%,
      transparent 78%
    ),
    linear-gradient(
      100deg,
      transparent 15%,
      rgba(170,220,255,.07) 48%,
      rgba(210,240,255,.16) 72%,
      transparent 100%
    );

  mix-blend-mode: screen;
  opacity: 0;

  animation: pdBoxIllumination 5s ease-in-out infinite;
}

/* =========================================
   ANIMATION SEQUENCE
========================================= */

/* Projector mati, lalu menyala dan mati kembali */
@keyframes pdProjectorPower {
  0%, 30%, 72%, 100% {
    opacity: .02;
    filter: brightness(.5);
    transform: translate(-50%, -50%) scale(.82);
  }

  /* Mulai menyala */
  39% {
    opacity: .85;
    filter: brightness(1.5);
    transform: translate(-50%, -50%) scale(1.08);
  }

  /* Kedipan singkat */
  43% {
    opacity: .28;
    transform: translate(-50%, -50%) scale(.94);
  }

  /* Cahaya penuh */
  48%, 63% {
    opacity: 1;
    filter: brightness(2);
    transform: translate(-50%, -50%) scale(1.12);
  }

  /* Meredup */
  69% {
    opacity: .12;
    filter: brightness(.7);
    transform: translate(-50%, -50%) scale(.9);
  }
}

/* Cahaya inti */
@keyframes pdLensCore {
  0%, 30%, 72%, 100% {
    opacity: .04;
    filter: brightness(.5);
  }

  39% {
    opacity: .9;
    filter: brightness(1.6);
  }

  43% {
    opacity: .3;
  }

  48%, 63% {
    opacity: 1;
    filter: brightness(2.3);
  }

  69% {
    opacity: .08;
  }
}

/* Refleksi cincin projector */
@keyframes pdLensRing {
  0%, 30%, 72%, 100% {
    opacity: .08;
  }

  40%, 63% {
    opacity: 1;
  }

  68% {
    opacity: .15;
  }
}

/* Seluruh kotak gambar ikut terang */
@keyframes pdBoxIllumination {
  0%, 30%, 72%, 100% {
    opacity: .015;
  }

  39% {
    opacity: .42;
  }

  43% {
    opacity: .12;
  }

  48% {
    opacity: .95;
  }

  58%, 63% {
    opacity: .78;
  }

  69% {
    opacity: .05;
  }
}

/* Jangan animasikan bagi pengguna yang membatasi gerakan */
@media (prefers-reduced-motion: reduce) {
  .pd-real-projector-glow,
  .pd-real-projector-glow::before,
  .pd-real-projector-glow::after,
  .pd-real-headlamp-wrap::after {
    animation: none !important;
  }

  .pd-real-projector-glow,
  .pd-real-headlamp-wrap::after {
    opacity: .7;
  }
}


/* DESIGN ENGINEERING PDF DOCUMENT */

.de-document {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 19px;
  border: 1px solid #40536c;
  background: #101e31;
  transition: border-color .3s ease, transform .3s ease;
}

.de-document:hover {
  border-color: #d8b68b;
  transform: translateY(-3px);
}

.de-document-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 52px;
  background: #e8c18e;
  color: #15243a;
  font-size: 11px;
  font-weight: 800;
}

.de-document-info {
  min-width: 0;
}

.de-document-info > span {
  color: #d8b78d;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .1em;
}

.de-document-info h3 {
  margin: 7px 0;
  color: var(--beige);
  font-size: 14px;
}

.de-document-info p {
  margin: 0;
  color: #bdc9d8;
  font-size: 11px;
  line-height: 1.6;
}

.de-document-actions {
  display: grid;
  gap: 7px;
}

.de-document-actions .pdf-action {
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 620px) {
  .de-document {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .de-document-actions {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
  }
}


/* ==========================================
   QUALITY CONTROL — PRECISION INSPECTION LAB
========================================== */

.qc-showcase {
  display: grid;
  gap: 23px;
  overflow: hidden;
}

/* HERO */

.qc-hero {
  display: grid;
  grid-template-columns: minmax(220px, .65fr) minmax(0, 1.35fr);
  min-height: 310px;
  overflow: hidden;
  border: 1px solid #405a73;
  background: #0a1523;
}

.qc-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 26px;
  background:
    radial-gradient(circle at 20% 15%, rgb(73 133 180 / 17%), transparent 45%),
    linear-gradient(145deg, #12243a, #091522);
}

.qc-overline,
.qc-hero-footnote,
.qc-hero-tags,
.qc-tool-kicker,
.qc-section-heading > div > span,
.qc-section-heading > span,
.qc-document-info > span,
.qc-experience > div > span,
.qc-bottom-line {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .11em;
}

.qc-overline {
  color: #8ed5ff;
  font-weight: 700;
}

.qc-hero-copy h3 {
  margin: 17px 0 12px;
  color: #f1e3d1;
  font-family: var(--display);
  font-size: clamp(29px, 4vw, 43px);
  font-weight: 500;
  line-height: 1.02;
}

.qc-hero-copy > p {
  margin: 0;
  color: #bfccda;
  font-size: 12px;
  line-height: 1.8;
}

.qc-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 20px;
}

.qc-hero-tags span {
  padding: 7px 8px;
  border: 1px solid #405a73;
  color: #c8dded;
  font-size: 8px;
}

.qc-hero-footnote {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 27px;
  color: #9db2c6;
  font-size: 8px;
}

/* HERO VISUAL */

.qc-hero-visual {
  position: relative;
  min-width: 0;
  min-height: 310px;
  isolation: isolate;
  overflow: hidden;
  background: #07111e;
}

.qc-headlamp-image {
  position: absolute;
  z-index: -2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: contrast(1.08) saturate(1.04);
  animation: qcImageReveal 1.4s ease both;
}

.qc-hero-visual::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(5 13 24 / 10%), transparent 50%),
    linear-gradient(0deg, rgb(5 13 24 / 38%), transparent 35%);
  pointer-events: none;
}

.qc-visual-grid {
  position: absolute;
  z-index: 1;
  inset: 0;
  opacity: .28;
  pointer-events: none;
  background-image:
    linear-gradient(rgb(112 188 236 / 14%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(112 188 236 / 14%) 1px, transparent 1px);
  background-size: 25px 25px;
  mask-image: linear-gradient(90deg, transparent, black 25%, black);
  animation: qcGridReveal 2s ease both;
}

/* SCAN FRAME */

.qc-measurement-frame {
  position: absolute;
  z-index: 3;
  inset: 16px;
  pointer-events: none;
}

.qc-measurement-corner {
  position: absolute;
  width: 19px;
  height: 19px;
  border-color: #a5dcfa;
  border-style: solid;
  opacity: .8;
  animation: qcCornerPulse 3s ease-in-out infinite;
}

.qc-corner-one {
  top: 0;
  left: 0;
  border-width: 1px 0 0 1px;
}

.qc-corner-two {
  top: 0;
  right: 0;
  border-width: 1px 1px 0 0;
}

.qc-corner-three {
  bottom: 0;
  left: 0;
  border-width: 0 0 1px 1px;
}

.qc-corner-four {
  bottom: 0;
  right: 0;
  border-width: 0 1px 1px 0;
}

/* MOVING LASER */

.qc-scan-beam {
  position: absolute;
  z-index: 4;
  top: -15%;
  left: -20%;
  width: 44px;
  height: 130%;
  transform: skewX(-17deg);
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(97 190 255 / 13%),
    rgb(119 208 255 / 45%),
    rgb(237 250 255 / 75%),
    rgb(81 172 255 / 24%),
    transparent
  );
  filter: blur(5px);
  animation: qcLaserSweep 6s 1s ease-in-out infinite;
}

.qc-scan-line {
  position: absolute;
  z-index: 5;
  top: 0;
  bottom: 0;
  left: -20%;
  width: 2px;
  opacity: 0;
  pointer-events: none;
  background: #d8f4ff;
  box-shadow:
    0 0 6px #8ed9ff,
    0 0 17px #4db7ff,
    0 0 34px #138fff;
  animation: qcLaserLine 6s 1s ease-in-out infinite;
}

/* SCAN HUD */

.qc-scan-hud {
  position: absolute;
  z-index: 7;
  right: 18px;
  bottom: 17px;
  width: min(215px, 47%);
  padding: 13px;
  border: 1px solid rgb(119 191 231 / 50%);
  background: rgb(7 18 31 / 88%);
  box-shadow: 0 10px 30px rgb(0 0 0 / 22%);
  backdrop-filter: blur(9px);
  animation: qcHudReveal .9s 1s ease both;
}

.qc-hud-heading {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgb(130 176 207 / 24%);
  color: #d9eaf7;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .07em;
}

.qc-status-dot {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #76d7ff;
  box-shadow: 0 0 9px #65caff;
  animation: qcStatusPulse 1.5s ease-in-out infinite;
}

.qc-hud-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  color: #9db2c5;
  font-family: var(--mono);
  font-size: 8px;
}

.qc-hud-row strong {
  color: #91d8ff;
  font-size: 8px;
  font-weight: 600;
}

.qc-progress {
  height: 4px;
  margin-top: 13px;
  overflow: hidden;
  background: #20354a;
}

.qc-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #3b9fe7, #c3edff);
  box-shadow: 0 0 10px #59baff;
  animation: qcProgress 6s 1s ease-in-out infinite;
}

.qc-scan-hud small {
  display: block;
  margin-top: 9px;
  color: #829bb0;
  font-family: var(--mono);
  font-size: 6px;
  line-height: 1.5;
}

.qc-visual-label {
  position: absolute;
  z-index: 6;
  bottom: 16px;
  left: 19px;
  color: #c9dfef;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .1em;
  text-shadow: 0 1px 5px #06101d;
}

/* SECTION HEADINGS */

.qc-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.qc-section-heading > div > span {
  color: #8ed5ff;
}

.qc-section-heading > span {
  color: #a9bacb;
  font-size: 8px;
}

.qc-section-heading h3 {
  margin: 7px 0 0;
  color: var(--beige);
  font-family: var(--display);
  font-size: 29px;
  font-weight: 500;
}

/* TOOL CARDS */

.qc-tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.qc-tool-card {
  display: grid;
  grid-template-columns: minmax(105px, 38%) minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
  border: 1px solid #3a526b;
  background: #172a41;
  transition:
    transform .3s ease,
    border-color .3s ease,
    background .3s ease;
}

.qc-tool-card:hover {
  transform: translateY(-4px);
  border-color: #7ecfff;
  background: #1c334e;
}

.qc-tool-card:last-child {
  grid-column: 1 / -1;
  grid-template-columns: minmax(150px, 25%) minmax(0, 1fr);
}

.qc-tool-image {
  position: relative;
  min-height: 112px;
  overflow: hidden;
  background: #081522;
}

.qc-tool-image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 112px;
  object-fit: cover;
  transition: transform .5s ease, filter .5s ease;
}

.qc-tool-card:hover .qc-tool-image img {
  transform: scale(1.07);
  filter: brightness(1.13);
}

.qc-tool-image-index {
  position: absolute;
  top: 7px;
  left: 8px;
  padding: 4px 6px;
  background: rgb(6 17 29 / 78%);
  color: #d4e9f8;
  font-family: var(--mono);
  font-size: 8px;
}

.qc-tool-info {
  align-self: center;
  min-width: 0;
  padding: 13px 14px;
}

.qc-tool-kicker {
  color: #8ecdf4;
  font-size: 8px;
}

.qc-tool-info h4 {
  margin: 7px 0 5px;
  color: #f0e4d4;
  font-size: 14px;
}

.qc-tool-info p {
  margin: 0;
  color: #bdcbd9;
  font-size: 11px;
  line-height: 1.65;
}

/* EXPERIENCE */

.qc-experience {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 22px;
  align-items: center;
  padding: 21px;
  border-left: 3px solid #7bcfff;
  background:
    linear-gradient(110deg, #1a3049, #122238);
}

.qc-experience > div > span {
  color: #8ed5ff;
  font-size: 8px;
}

.qc-experience h3 {
  margin: 9px 0 0;
  color: var(--beige);
  font-family: var(--display);
  font-size: 25px;
  font-weight: 500;
  line-height: 1.12;
}

.qc-experience > p {
  margin: 0;
  color: #c1cedb;
  font-size: 12px;
  line-height: 1.8;
}

/* PDF DOCUMENT */

.qc-document {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 19px;
  border: 1px solid #405a73;
  background: #0f1e30;
  transition: border-color .3s ease, transform .3s ease;
}

.qc-document:hover {
  border-color: #7ecfff;
  transform: translateY(-2px);
}

.qc-document-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 52px;
  background: #e8c18e;
  color: #15243a;
  font-size: 11px;
  font-weight: 800;
}

.qc-document-info {
  min-width: 0;
}

.qc-document-info > span {
  color: #8ed5ff;
  font-size: 8px;
}

.qc-document-info h3 {
  margin: 7px 0;
  color: var(--beige);
  font-size: 14px;
}

.qc-document-info p {
  margin: 0;
  color: #bdc9d8;
  font-size: 11px;
  line-height: 1.6;
}

.qc-document-actions {
  display: grid;
  gap: 7px;
}

.qc-document-actions .pdf-action {
  text-align: center;
  white-space: nowrap;
}

/* FOOTER */

.qc-bottom-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: #8fa4b8;
  font-size: 8px;
}

/* ANIMATIONS */

@keyframes qcImageReveal {
  from {
    opacity: .25;
    transform: scale(1.06);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes qcGridReveal {
  from { opacity: 0; }
  to { opacity: .28; }
}

@keyframes qcLaserSweep {
  0%, 14% {
    left: -20%;
    opacity: 0;
  }
  22% { opacity: .9; }
  72% {
    left: 115%;
    opacity: .8;
  }
  82%, 100% {
    left: 115%;
    opacity: 0;
  }
}

@keyframes qcLaserLine {
  0%, 14% {
    left: -20%;
    opacity: 0;
  }
  22% { opacity: 1; }
  72% {
    left: 115%;
    opacity: .9;
  }
  82%, 100% {
    left: 115%;
    opacity: 0;
  }
}

@keyframes qcProgress {
  0%, 14% { width: 0; }
  72% { width: 100%; }
  82%, 100% { width: 0; }
}

@keyframes qcStatusPulse {
  0%, 100% {
    opacity: .45;
    box-shadow: 0 0 3px #65caff;
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 13px #65caff;
  }
}

@keyframes qcCornerPulse {
  0%, 100% { opacity: .35; }
  50% { opacity: 1; }
}

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

/* RESPONSIVE */

@media (max-width: 760px) {
  .qc-hero {
    grid-template-columns: 1fr;
  }

  .qc-hero-copy {
    padding: 22px;
  }

  .qc-hero-visual {
    min-height: 260px;
  }

  .qc-tool-grid {
    grid-template-columns: 1fr;
  }

  .qc-tool-card:last-child {
    grid-column: auto;
    grid-template-columns: minmax(105px, 38%) minmax(0, 1fr);
  }

  .qc-experience {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (max-width: 500px) {
  .qc-hero-visual {
    min-height: 225px;
  }

  .qc-scan-hud {
    right: 9px;
    bottom: 9px;
    width: 155px;
    padding: 9px;
  }

  .qc-visual-label {
    bottom: 12px;
    left: 10px;
    max-width: 42%;
    font-size: 6px;
    line-height: 1.5;
  }

  .qc-tool-card {
    grid-template-columns: 115px minmax(0, 1fr);
  }

  .qc-tool-card:last-child {
    grid-template-columns: 115px minmax(0, 1fr);
  }

  .qc-tool-image,
  .qc-tool-image img {
    min-height: 105px;
  }

  .qc-tool-info {
    padding: 10px;
  }

  .qc-tool-info p {
    font-size: 10px;
  }

  .qc-document {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .qc-document-actions {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
  }

  .qc-bottom-line {
    flex-direction: column;
  }
}

/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
  .qc-showcase *,
  .qc-showcase *::before,
  .qc-showcase *::after {
    animation: none !important;
    transition: none !important;
  }

  .qc-headlamp-image {
    opacity: 1;
    transform: none;
  }

  .qc-progress span {
    width: 72%;
  }
}