:root {
   --crimson: #8B0000;
   --crimson-bright: #C0392B;
   --crimson-glow: #ff3b1a;
   --gold: #C9A84C;
   --gold-light: #E8C96A;
   --ink: #0A0604;
   --parchment: #1A0E08;
   --ash: #2A1810;
   --smoke: #3D2318;
   --text-main: #E8D5B0;
   --text-muted: #9A7D5A;
   --text-faint: #5C4433;
 }

 /* ─── CUSTOM CURSOR ──────────────────────────────────── */
 * {
   cursor: none !important;
 }

 #cursor-dot {
   position: fixed;
   width: 8px;
   height: 8px;
   background: var(--crimson-bright);
   border-radius: 50%;
   pointer-events: none;
   z-index: 99999;
   transform: translate(-50%, -50%);
   transition: transform 0.08s ease, background 0.2s, width 0.2s, height 0.2s;
   box-shadow: 0 0 10px 3px rgba(192, 57, 43, 0.8);
   mix-blend-mode: screen;
 }

 #cursor-ring {
   position: fixed;
   width: 32px;
   height: 32px;
   border: 1.5px solid rgba(201, 168, 76, 0.6);
   border-radius: 50%;
   pointer-events: none;
   z-index: 99998;
   transform: translate(-50%, -50%);
   transition: transform 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94),
     width 0.3s, height 0.3s, border-color 0.3s, opacity 0.3s;
 }

 #cursor-ring.hovering {
   width: 52px;
   height: 52px;
   border-color: var(--crimson-bright);
   border-width: 1px;
   box-shadow: 0 0 16px rgba(139, 0, 0, 0.5), inset 0 0 16px rgba(139, 0, 0, 0.15);
 }

 #cursor-ring.clicking {
   width: 20px;
   height: 20px;
   border-color: var(--gold);
 }

 /* spirit trail canvas */
 #spirit-canvas {
   position: fixed;
   inset: 0;
   pointer-events: none;
   z-index: 99990;
   mix-blend-mode: screen;
 }

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

 html {
   scroll-behavior: smooth;
 }

 body {
   background: var(--ink);
   color: var(--text-main);
   font-family: 'Noto Serif', serif;
   overflow-x: hidden;
 }

 body::before {
   content: '';
   position: fixed;
   inset: 0;
   z-index: 0;
   pointer-events: none;
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
   opacity: 0.35;
 }

 /* ─── EMBER PARTICLES ────────────────────────────────── */
 #ember-canvas {
   position: fixed;
   inset: 0;
   pointer-events: none;
   z-index: 1;
   mix-blend-mode: screen;
 }

 ::-webkit-scrollbar {
   width: 6px;
 }

 ::-webkit-scrollbar-track {
   background: var(--ink);
 }

 ::-webkit-scrollbar-thumb {
   background: var(--crimson);
   border-radius: 3px;
 }

 /* ─── NAV ────────────────────────────────────────────── */
 nav {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 100;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 5%;
   height: 70px;
   background: linear-gradient(180deg, rgba(10, 6, 4, 0.97) 0%, rgba(10, 6, 4, 0) 100%);
   border-bottom: 1px solid rgba(139, 0, 0, 0.25);
   backdrop-filter: blur(8px);
   transition: all 0.3s;
 }

 nav.scrolled {
   background: rgba(10, 6, 4, 0.97);
   border-bottom-color: rgba(139, 0, 0, 0.5);
 }

 .nav-logo {
   font-family: 'Playfair Display', serif;
   font-size: 1.1rem;
   color: var(--gold);
   text-decoration: none;
   letter-spacing: 0.08em;
   display: flex;
   align-items: center;
   gap: 10px;
 }

 .nav-logo .sigil {
   width: 34px;
   height: 34px;
   border: 1.5px solid var(--crimson);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1rem;
   color: var(--crimson);
   animation: sigil-pulse 3s ease-in-out infinite;
 }

 @keyframes sigil-pulse {

   0%,
   100% {
     box-shadow: 0 0 0 0 rgba(139, 0, 0, 0);
   }

   50% {
     box-shadow: 0 0 12px 4px rgba(139, 0, 0, 0.4);
   }
 }

 .nav-links {
   display: flex;
   gap: 2.5rem;
   list-style: none;
 }

 .nav-links a {
   color: var(--text-muted);
   text-decoration: none;
   font-family: 'Crimson Text', serif;
   font-size: 0.75rem;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   transition: color 0.25s;
   position: relative;
 }

 .nav-links a::after {
   content: '';
   position: absolute;
   bottom: -3px;
   left: 0;
   right: 0;
   height: 1px;
   background: var(--crimson);
   transform: scaleX(0);
   transform-origin: right;
   transition: transform 0.3s;
 }

 .nav-links a:hover {
   color: var(--gold);
 }

 .nav-links a:hover::after {
   transform: scaleX(1);
   transform-origin: left;
 }

 /* ─── HERO ───────────────────────────────────────────── */
 #hero {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: 120px 5% 80px;
   position: relative;
   overflow: hidden;
 }

 .hero-bg {
   position: absolute;
   inset: 0;
   z-index: 0;
   background:
     radial-gradient(ellipse 80% 60% at 50% 40%, rgba(139, 0, 0, 0.18) 0%, transparent 70%),
     radial-gradient(ellipse 50% 40% at 80% 80%, rgba(201, 168, 76, 0.06) 0%, transparent 60%),
     linear-gradient(180deg, var(--ink) 0%, var(--parchment) 50%, var(--ink) 100%);
 }

 .hero-image-placeholder {
   position: absolute;
   inset: 0;
   z-index: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0.12;
   font-family: 'Cinzel Decorative', serif;
   font-size: 22vw;
   color: var(--crimson);
   pointer-events: none;
   user-select: none;
   text-shadow: 0 0 80px rgba(139, 0, 0, 0.5);
 }

 .fog-layer {
   position: absolute;
   inset: 0;
   z-index: 1;
   background: linear-gradient(180deg,
       rgba(10, 6, 4, 0.6) 0%, rgba(10, 6, 4, 0) 30%,
       rgba(10, 6, 4, 0) 70%, rgba(10, 6, 4, 0.8) 100%);
   pointer-events: none;
 }

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

 .hero-eyebrow {
   font-family: 'Crimson Text', serif;
   font-size: 0.7rem;
   letter-spacing: 0.35em;
   color: var(--crimson);
   text-transform: uppercase;
   margin-bottom: 1.5rem;
   opacity: 0;
   animation: fadeUp 0.8s 0.3s forwards;
 }

 .hero-title {
   font-family: 'Playfair Display', serif;
   font-size: clamp(2.8rem, 7vw, 6rem);
   font-weight: 900;
   line-height: 1.1;
   color: var(--gold);
   text-shadow: 0 0 60px rgba(201, 168, 76, 0.3), 0 4px 30px rgba(0, 0, 0, 0.8);
   margin-bottom: 0.3em;
   opacity: 0;
   animation: fadeUp 0.9s 0.5s forwards;
 }

 .hero-title span {
   color: var(--crimson-bright);
 }

 .hero-subtitle {
   font-family: 'Lora', serif;
   font-style: italic;
   font-size: clamp(1rem, 2.5vw, 1.5rem);
   color: var(--text-muted);
   margin-bottom: 2.5rem;
   opacity: 0;
   animation: fadeUp 0.9s 0.7s forwards;
 }

 .hero-desc {
   font-size: 1rem;
   color: var(--text-main);
   line-height: 1.9;
   max-width: 600px;
   margin: 0 auto 3rem;
   opacity: 0;
   animation: fadeUp 0.9s 0.9s forwards;
 }

 .hero-ctas {
   display: flex;
   gap: 1.2rem;
   justify-content: center;
   flex-wrap: wrap;
   opacity: 0;
   animation: fadeUp 0.9s 1.1s forwards;
 }

 .btn-primary {
   padding: 0.85em 2.2em;
   background: var(--crimson);
   color: var(--gold-light);
   border: 1px solid var(--crimson-bright);
   font-family: 'Cinzel', serif;
   font-size: 0.75rem;
   letter-spacing: 0.15em;
   text-transform: uppercase;
   text-decoration: none;
   transition: all 0.3s;
   position: relative;
   overflow: hidden;
 }

 .btn-primary::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
   opacity: 0;
   transition: opacity 0.3s;
 }

 .btn-primary:hover {
   background: var(--crimson-bright);
   box-shadow: 0 0 30px rgba(192, 57, 43, 0.5);
 }

 .btn-primary:hover::before {
   opacity: 1;
 }

 .btn-outline {
   padding: 0.85em 2.2em;
   background: transparent;
   color: var(--gold);
   border: 1px solid rgba(201, 168, 76, 0.4);
   font-family: 'Cinzel', serif;
   font-size: 0.75rem;
   letter-spacing: 0.15em;
   text-transform: uppercase;
   text-decoration: none;
   transition: all 0.3s;
 }

 .btn-outline:hover {
   border-color: var(--gold);
   background: rgba(201, 168, 76, 0.08);
 }

 .scroll-hint {
   position: absolute;
   bottom: 2rem;
   left: 50%;
   transform: translateX(-50%);
   z-index: 2;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.5rem;
   color: var(--text-faint);
   font-family: 'Cinzel', serif;
   font-size: 0.6rem;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   animation: float 2.5s ease-in-out infinite;
 }

 .scroll-hint::after {
   content: '';
   display: block;
   width: 1px;
   height: 40px;
   background: linear-gradient(180deg, var(--crimson) 0%, transparent 100%);
 }

 @keyframes float {

   0%,
   100% {
     transform: translateX(-50%) translateY(0);
   }

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

 /* ─── SECTION COMMONS ────────────────────────────────── */
 section {
   position: relative;
   z-index: 1;
 }

 .section-inner {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 5%;
 }

 .section-header {
   text-align: center;
   margin-bottom: 4rem;
 }

 .section-tag {
   font-family: 'Crimson Text', serif;
   font-size: 0.65rem;
   letter-spacing: 0.35em;
   color: var(--crimson);
   text-transform: uppercase;
   display: block;
   margin-bottom: 0.8rem;
 }

 .section-title {
   font-family: 'Playfair Display', serif;
   font-size: clamp(1.6rem, 3.5vw, 2.8rem);
   color: var(--gold);
   line-height: 1.2;
   text-shadow: 0 2px 20px rgba(201, 168, 76, 0.2);
 }

 .section-rule {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 1rem;
   margin: 1.2rem auto 0;
   width: fit-content;
 }

 .section-rule::before,
 .section-rule::after {
   content: '';
   width: 60px;
   height: 1px;
   background: linear-gradient(90deg, transparent, var(--crimson));
 }

 .section-rule::after {
   background: linear-gradient(270deg, transparent, var(--crimson));
 }

 .section-rule span {
   color: var(--crimson);
   font-size: 0.8rem;
   font-family: 'Crimson Text', serif;
 }

 .divider {
   border: none;
   height: 1px;
   background: linear-gradient(90deg, transparent, var(--smoke), transparent);
   margin: 5rem auto;
   max-width: 800px;
 }

 /* ─── ABOUT STUDIO ───────────────────────────────────── */
 .studio-description {
   background: linear-gradient(135deg, rgba(139, 0, 0, 0.08) 0%, transparent 100%);
   border: 1px solid rgba(139, 0, 0, 0.25);
   border-left: 4px solid var(--crimson);
   padding: 2.5rem;
   margin-bottom: 4rem;
   border-radius: 4px;
 }

 .studio-description h3 {
   font-family: 'Playfair Display', serif;
   font-size: 2rem;
   color: var(--gold);
   margin-bottom: 1.2rem;
   text-shadow: 0 2px 15px rgba(201, 168, 76, 0.25);
 }

 .studio-description p {
   font-size: 1.05rem;
   line-height: 1.85;
   color: var(--text-main);
   margin-bottom: 1.4rem;
 }

 .studio-description p:last-child {
   margin-bottom: 0;
 }

 .studio-description strong {
   color: var(--gold-light);
 }

 /* ─── ACHIEVEMENTS ───────────────────────────────────── */
 #achievements {
   padding: 6rem 0;
 }

 .achievements-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 1.5rem;
 }

 .achievement-card {
   background: linear-gradient(135deg, var(--parchment) 0%, var(--ash) 100%);
   border: 1px solid rgba(139, 0, 0, 0.3);
   padding: 2rem;
   position: relative;
   overflow: hidden;
   transition: all 0.4s;
 }

 .achievement-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: linear-gradient(90deg, transparent, var(--crimson), transparent);
   transform: scaleX(0);
   transition: transform 0.4s;
 }

 .achievement-card:hover {
   border-color: rgba(139, 0, 0, 0.7);
   transform: translateY(-3px);
   box-shadow: 0 10px 40px rgba(139, 0, 0, 0.2);
 }

 .achievement-card:hover::before {
   transform: scaleX(1);
 }

 .achievement-icon {
   font-size: 2rem;
   margin-bottom: 1rem;
   display: block;
   filter: drop-shadow(0 0 8px rgba(201, 168, 76, 0.4));
 }

 .achievement-year {
   font-family: 'Crimson Text', serif;
   font-size: 0.65rem;
   letter-spacing: 0.2em;
   color: var(--crimson);
   text-transform: uppercase;
   margin-bottom: 0.5rem;
 }

 .achievement-title {
   font-family: 'Crimson Text', serif;
   font-size: 0.95rem;
   color: var(--gold);
   margin-bottom: 0.7rem;
   line-height: 1.4;
 }

 .achievement-desc {
   font-size: 0.85rem;
   color: var(--text-muted);
   line-height: 1.7;
 }

 /* ─── FEATURED PROJECT ───────────────────────────────── */
 #featured {
   padding: 5rem 0 6rem;
 }

 .featured-wrapper {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 4rem;
   align-items: center;
 }

 .featured-image {
   position: relative;
   aspect-ratio: 4/3;
   background: var(--ash);
   border: 1px solid rgba(139, 0, 0, 0.4);
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 /* ─── LIGHTBOX-ABLE IMAGES ───────────────────────────── */
 .lightbox-trigger {
   display: block;
   width: 100%;
   height: 100%;
   position: relative;
   overflow: hidden;
 }

 .lightbox-trigger img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center top;
   transition: transform 0.6s ease, filter 0.4s;
   display: block;
 }

 .lightbox-trigger::after {
   content: '🔍 Xem Ảnh';
   position: absolute;
   inset: 0;
   background: rgba(10, 6, 4, 0.65);
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: 'Crimson Text', serif;
   font-size: 0.8rem;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: var(--gold);
   opacity: 0;
   transition: opacity 0.35s;
   backdrop-filter: blur(2px);
 }

 .lightbox-trigger:hover::after {
   opacity: 1;
 }

 .lightbox-trigger:hover img {
   transform: scale(1.04);
   filter: brightness(0.8);
 }

 .img-placeholder {
   display: none;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 0.8rem;
   color: var(--text-faint);
   font-family: 'Cinzel', serif;
   font-size: 0.75rem;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   width: 100%;
   height: 100%;
 }

 .img-placeholder-icon {
   font-size: 2.5rem;
   opacity: 0.4;
 }

 .featured-image::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, rgba(139, 0, 0, 0.1) 0%, transparent 60%);
   pointer-events: none;
 }

 .featured-corner {
   position: absolute;
   top: 0;
   left: 0;
   width: 40px;
   height: 40px;
   border-top: 2px solid var(--crimson);
   border-left: 2px solid var(--crimson);
   z-index: 2;
 }

 .featured-corner.br {
   top: auto;
   left: auto;
   bottom: 0;
   right: 0;
   border: none;
   border-bottom: 2px solid var(--crimson);
   border-right: 2px solid var(--crimson);
 }

 .featured-label {
   font-family: 'Crimson Text', serif;
   font-size: 0.65rem;
   letter-spacing: 0.3em;
   color: var(--crimson);
   text-transform: uppercase;
   margin-bottom: 1rem;
 }

 .featured-title {
   font-family: 'Playfair Display', serif;
   font-size: clamp(2rem, 4vw, 3.2rem);
   color: var(--gold);
   line-height: 1.15;
   margin-bottom: 0.3em;
   text-shadow: 0 0 40px rgba(201, 168, 76, 0.25);
 }

 .featured-title-vn {
   font-family: 'Lora', serif;
   font-style: italic;
   font-size: 1.1rem;
   color: var(--text-muted);
   margin-bottom: 1.5rem;
 }

 .featured-desc {
   font-size: 0.95rem;
   color: var(--text-main);
   line-height: 1.9;
   margin-bottom: 2rem;
 }

 .featured-stats {
   display: flex;
   gap: 2rem;
   margin-bottom: 2.5rem;
   flex-wrap: wrap;
 }

 .stat {
   text-align: center;
 }

 .stat-value {
   font-family: 'Crimson Text', serif;
   font-size: 1.3rem;
   color: var(--gold);
   display: block;
 }

 .stat-label {
   font-size: 0.7rem;
   color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.1em;
 }

 .tag-list {
   display: flex;
   gap: 0.5rem;
   flex-wrap: wrap;
   margin-bottom: 2rem;
 }

 .tag {
   padding: 0.3em 0.8em;
   border: 1px solid rgba(139, 0, 0, 0.4);
   color: var(--text-muted);
   font-family: 'Crimson Text', serif;
   font-size: 0.65rem;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   background: rgba(139, 0, 0, 0.08);
 }

 /* ─── ABOUT / TEAM ───────────────────────────────────── */
 #about {
   padding: 6rem 0;
 }

 .team-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
   gap: 2rem;
 }

 .team-card {
   background: linear-gradient(160deg, var(--parchment) 0%, var(--ash) 100%);
   border: 1px solid rgba(139, 0, 0, 0.25);
   overflow: hidden;
   position: relative;
   transition: all 0.4s;
 }

 /* Red vignette glow on card hover */
 .team-card::after {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse at center, rgba(139, 0, 0, 0.18) 0%, transparent 70%);
   opacity: 0;
   transition: opacity 0.4s;
   pointer-events: none;
 }

 .team-card:hover {
   border-color: rgba(139, 0, 0, 0.6);
   transform: translateY(-4px);
   box-shadow: 0 16px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(139, 0, 0, 0.15);
 }

 .team-card:hover::after {
   opacity: 1;
 }

 .team-avatar {
   width: 100%;
   aspect-ratio: 1/1;
   background: var(--smoke);
   overflow: hidden;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .team-avatar .lightbox-trigger img {
   object-fit: cover;
   object-position: center top;
 }

 .team-avatar::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 40%;
   background: linear-gradient(0deg, var(--parchment) 0%, transparent 100%);
   pointer-events: none;
   z-index: 1;
 }

 .team-avatar-placeholder {
   display: none;
   flex-direction: column;
   align-items: center;
   gap: 0.5rem;
   color: var(--text-faint);
   font-family: 'Cinzel', serif;
   font-size: 0.7rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   width: 100%;
   height: 100%;
   justify-content: center;
 }

 .avatar-icon {
   font-size: 3rem;
   opacity: 0.3;
 }

 .team-info {
   padding: 1.4rem 1.6rem 1.8rem;
 }

 .team-role {
   font-family: 'Crimson Text', serif;
   font-size: 0.6rem;
   letter-spacing: 0.25em;
   color: var(--crimson);
   text-transform: uppercase;
   margin-bottom: 0.4rem;
 }

 /* ─── GLITCH HOVER ON NAMES ──────────────────────────── */
 .team-name {
   font-family: 'Crimson Text', serif;
   font-size: 1.05rem;
   color: var(--gold);
   margin-bottom: 0.3rem;
   position: relative;
   display: inline-block;
 }

 .team-name::before,
 .team-name::after {
   content: attr(data-text);
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   opacity: 0;
   transition: opacity 0.1s;
 }

 .team-name::before {
   color: var(--crimson-bright);
   clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
 }

 .team-name::after {
   color: var(--gold-light);
   clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
 }

 .team-card:hover .team-name::before,
 .team-card:hover .team-name::after {
   opacity: 1;
 }

 .team-card:hover .team-name::before {
   animation: glitch-top 0.4s steps(1) infinite;
 }

 .team-card:hover .team-name::after {
   animation: glitch-bot 0.4s steps(1) 0.05s infinite;
 }

 @keyframes glitch-top {
   0% {
     transform: translate(0, 0);
   }

   20% {
     transform: translate(-2px, 0);
   }

   40% {
     transform: translate(2px, 0);
   }

   60% {
     transform: translate(-1px, 0);
   }

   80% {
     transform: translate(1px, 0);
   }

   100% {
     transform: translate(0, 0);
   }
 }

 @keyframes glitch-bot {
   0% {
     transform: translate(0, 0);
   }

   25% {
     transform: translate(3px, 0);
   }

   50% {
     transform: translate(-2px, 0);
   }

   75% {
     transform: translate(1px, 0);
   }

   100% {
     transform: translate(0, 0);
   }
 }

 .team-major {
   font-size: 0.8rem;
   color: var(--text-muted);
   font-style: italic;
   margin-bottom: 1rem;
 }

 .team-bio {
   font-size: 0.82rem;
   color: var(--text-main);
   line-height: 1.75;
   margin-bottom: 1.2rem;
 }

 .team-contacts {
   display: flex;
   gap: 0.6rem;
   flex-wrap: wrap;
 }

 .team-link {
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
   padding: 0.35em 0.8em;
   border: 1px solid rgba(139, 0, 0, 0.3);
   color: var(--text-muted);
   text-decoration: none;
   font-family: 'Crimson Text', serif;
   font-size: 0.6rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   transition: all 0.25s;
   background: rgba(139, 0, 0, 0.05);
 }

 .team-link:hover {
   color: var(--gold);
   border-color: var(--gold-light);
   background: rgba(201, 168, 76, 0.08);
 }

 .team-link svg {
   width: 12px;
   height: 12px;
   flex-shrink: 0;
 }

 /* ─── FOUNDER SPOTLIGHT ──────────────────────────────── */
 .founder-spotlight {
   display: grid;
   grid-template-columns: auto 1fr;
   gap: 3rem;
   align-items: start;
   margin-bottom: 5rem;
   padding: 3rem;
   background: linear-gradient(135deg, rgba(139, 0, 0, 0.12) 0%, transparent 60%);
   border: 1px solid rgba(139, 0, 0, 0.3);
   border-left: 3px solid var(--crimson);
 }

 .founder-avatar {
   width: 160px;
   height: 160px;
   border: 2px solid rgba(139, 0, 0, 0.5);
   overflow: hidden;
   position: relative;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--smoke);
 }

 .founder-avatar .lightbox-trigger img {
   object-fit: cover;
   object-position: center top;
 }

 .founder-label {
   font-family: 'Crimson Text', serif;
   font-size: 0.6rem;
   letter-spacing: 0.3em;
   color: var(--crimson);
   text-transform: uppercase;
   margin-bottom: 0.5rem;
 }

 .founder-name {
   font-family: 'Playfair Display', serif;
   font-size: 1.6rem;
   color: var(--gold);
   margin-bottom: 0.3rem;
 }

 .founder-title {
   font-family: 'Lora', serif;
   font-style: italic;
   color: var(--text-muted);
   margin-bottom: 1.2rem;
 }

 .founder-quote {
   font-family: 'Lora', serif;
   font-style: italic;
   font-size: 1.05rem;
   color: var(--text-main);
   line-height: 1.8;
   border-left: 2px solid rgba(201, 168, 76, 0.3);
   padding-left: 1.2rem;
   margin-bottom: 1.5rem;
 }

 /* ─── CONTACT ────────────────────────────────────────── */
 #contact {
   padding: 6rem 0 8rem;
 }

 .contact-wrapper {
   display: grid;
   grid-template-columns: 1fr 1.3fr;
   gap: 5rem;
   align-items: start;
 }

 .contact-intro p {
   color: var(--text-main);
   line-height: 1.9;
   margin-bottom: 2rem;
 }

 .contact-detail {
   display: flex;
   align-items: center;
   gap: 0.8rem;
   color: var(--text-muted);
   font-size: 0.9rem;
   margin-bottom: 0.8rem;
   text-decoration: none;
   transition: color 0.25s;
 }

 .contact-detail:hover {
   color: var(--gold);
 }

 .contact-icon {
   font-size: 1rem;
   width: 20px;
   text-align: center;
 }

 .contact-form {
   display: flex;
   flex-direction: column;
   gap: 1.2rem;
 }

 .form-group {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }

 .form-label {
   font-family: 'Crimson Text', serif;
   font-size: 0.65rem;
   letter-spacing: 0.2em;
   color: var(--text-muted);
   text-transform: uppercase;
 }

 .form-input,
 .form-textarea {
   background: rgba(26, 14, 8, 0.8);
   border: 1px solid rgba(139, 0, 0, 0.3);
   color: var(--text-main);
   padding: 0.85em 1.1em;
   font-family: 'Noto Serif', serif;
   font-size: 0.9rem;
   transition: border-color 0.25s;
   outline: none;
   width: 100%;
   resize: none;
 }

 .form-input:focus,
 .form-textarea:focus {
   border-color: var(--crimson);
   box-shadow: 0 0 0 2px rgba(139, 0, 0, 0.15);
 }

 .form-textarea {
   min-height: 130px;
 }

 /* ─── FOOTER ─────────────────────────────────────────── */
 footer {
   background: var(--parchment);
   border-top: 1px solid rgba(139, 0, 0, 0.25);
   padding: 3rem 5%;
   text-align: center;
 }

 .footer-logo {
   font-family: 'Playfair Display', serif;
   font-size: 1.2rem;
   color: var(--gold);
   margin-bottom: 0.5rem;
 }

 .footer-tagline {
   font-family: 'Lora', serif;
   font-style: italic;
   color: var(--text-faint);
   font-size: 0.9rem;
   margin-bottom: 1.5rem;
 }

 .footer-links {
   display: flex;
   gap: 2rem;
   justify-content: center;
   flex-wrap: wrap;
   margin-bottom: 2rem;
 }

 .footer-links a {
   color: var(--text-faint);
   text-decoration: none;
   font-family: 'Crimson Text', serif;
   font-size: 0.65rem;
   letter-spacing: 0.15em;
   text-transform: uppercase;
   transition: color 0.25s;
 }

 .footer-links a:hover {
   color: var(--gold);
 }

 .footer-copy {
   font-size: 0.75rem;
   color: var(--text-faint);
   line-height: 1.6;
 }

 /* ─── LIGHTBOX ───────────────────────────────────────── */
 #lightbox {
   position: fixed;
   inset: 0;
   z-index: 9999;
   background: rgba(5, 2, 1, 0.96);
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.35s;
   backdrop-filter: blur(8px);
 }

 #lightbox.active {
   opacity: 1;
   pointer-events: all;
 }

 #lightbox-img {
   max-width: 90vw;
   max-height: 88vh;
   object-fit: contain;
   border: 1px solid rgba(139, 0, 0, 0.4);
   box-shadow: 0 0 80px rgba(139, 0, 0, 0.3), 0 0 160px rgba(0, 0, 0, 0.9);
   transform: scale(0.9);
   transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
 }

 #lightbox.active #lightbox-img {
   transform: scale(1);
 }

 #lightbox-close {
   position: absolute;
   top: 1.5rem;
   right: 1.5rem;
   width: 44px;
   height: 44px;
   border: 1px solid rgba(139, 0, 0, 0.4);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--text-muted);
   font-size: 1.2rem;
   transition: all 0.25s;
   background: rgba(10, 6, 4, 0.8);
 }

 #lightbox-close:hover {
   border-color: var(--crimson-bright);
   color: var(--gold);
   box-shadow: 0 0 20px rgba(139, 0, 0, 0.4);
 }

 #lightbox-caption {
   position: absolute;
   bottom: 2rem;
   left: 50%;
   transform: translateX(-50%);
   font-family: 'Crimson Text', serif;
   font-size: 0.75rem;
   letter-spacing: 0.2em;
   color: var(--text-muted);
   text-transform: uppercase;
 }

 /* ─── BLOOD DRIP on hover (decorative element) ───────── */
 .section-title {
   position: relative;
   display: inline-block;
 }

 /* ─── ANIMATIONS ─────────────────────────────────────── */
 @keyframes fadeUp {
   from {
     opacity: 0;
     transform: translateY(24px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 .reveal {
   opacity: 0;
   transform: translateY(30px);
   transition: opacity 0.7s ease, transform 0.7s ease;
 }

 .reveal.visible {
   opacity: 1;
   transform: translateY(0);
 }

 .reveal-delay-1 {
   transition-delay: 0.1s;
 }

 .reveal-delay-2 {
   transition-delay: 0.2s;
 }

 .reveal-delay-3 {
   transition-delay: 0.3s;
 }

 .reveal-delay-4 {
   transition-delay: 0.4s;
 }

 /* ─── RESPONSIVE ─────────────────────────────────────── */
 @media (max-width: 900px) {
   .featured-wrapper {
     grid-template-columns: 1fr;
     gap: 2.5rem;
   }

   .contact-wrapper {
     grid-template-columns: 1fr;
     gap: 3rem;
   }

   .founder-spotlight {
     grid-template-columns: 1fr;
   }

   .founder-avatar {
     width: 250px;
     height: 250px;
   }

   .nav-links {
     display: none;
   }
 }

 @media (max-width: 600px) {
   .team-grid {
     grid-template-columns: 1fr;
   }

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