/* ================================================================
   TEAM DETAIL — "The Chronicle"
   JobNav 2025 · Editorial magazine feature layout
   ─────────────────────────────────────────────────────────────────
   Fonts   : Sora (display) · Manrope (body) · Outfit (accents)
   Palette : Navy #010080 · Gold #FFB100 · Deep #000050
   ================================================================ */

   @import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600;700;800&family=Manrope:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800;900&display=swap');

   /* ── Tokens ──────────────────────────────────────────────────── */
   :root {
     --td-navy:        #010080;
     --td-navy-dark:   #000050;
     --td-navy-deeper: #000030;
     --td-gold:        #FFB100;
     --td-gold-light:  #ffd166;
     --td-gold-dim:    rgba(255,177,0,0.14);
     --td-gold-glow:   rgba(255,177,0,0.35);
     --td-white:       #ffffff;
     --td-gray-50:     #f7f8fc;
     --td-gray-100:    #eef0f8;
     --td-gray-200:    #dde0ef;
     --td-gray-400:    #8b91b5;
     --td-gray-600:    #474d72;
     --td-gray-800:    #181d38;
     --td-font-d:      'Sora',    -apple-system, sans-serif;
     --td-font-b:      'Manrope', -apple-system, sans-serif;
     --td-font-a:      'Outfit',  -apple-system, sans-serif;
     --td-r:           24px;
     --td-ease:        cubic-bezier(0.22, 1, 0.36, 1);
     --td-t:           0.38s cubic-bezier(0.22, 1, 0.36, 1);
     --td-shadow:      0 4px 32px rgba(1,0,128,0.08);
     --td-shadow-h:    0 20px 60px rgba(1,0,128,0.15);
   }
   
   .td-page, .td-page * { box-sizing: border-box; }
   
   .td-page {
     background: var(--td-gray-50);
     font-family: var(--td-font-b);
     color: var(--td-gray-800);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
   
   
   /* ================================================================
      BACK LINK
      Normal flow inside .td-identity-col — never behind the navbar.
      ================================================================ */
   .td-back-wrap {
     margin-bottom: 2rem;
   }
   
   .td-back {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     font-family: var(--td-font-a);
     font-size: 0.72rem;
     font-weight: 700;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: rgba(255,255,255,0.50);
     text-decoration: none;
     transition: color 0.25s ease, gap 0.25s ease;
   }
   
   .td-back i, .td-back svg { width: 13px; height: 13px; transition: transform 0.25s ease; }
   .td-back:hover            { color: var(--td-gold); gap: 0.8rem; }
   .td-back:hover i,
   .td-back:hover svg        { transform: translateX(-3px); }
   
   
   /* ================================================================
      HERO — cinematic full-viewport split
      ================================================================ */
   .td-hero {
     min-height: 100vh;
     display: grid;
     grid-template-columns: 1fr 1fr;
     position: relative;
     overflow: hidden;
     background: linear-gradient(150deg, var(--td-navy) 0%, var(--td-navy-dark) 60%, var(--td-navy-deeper) 100%);
   }
   
   .td-hero::after {
     content: '';
     position: absolute;
     inset: 0;
     background:
       radial-gradient(ellipse 55% 45% at 12% 85%, rgba(255,177,0,0.07) 0%, transparent 60%),
       radial-gradient(ellipse 40% 55% at 88% 12%, rgba(99,102,241,0.07) 0%, transparent 60%);
     pointer-events: none;
     z-index: 0;
   }
   
   /* Portrait column */
   .td-portrait-col {
     position: relative;
     overflow: hidden;
     z-index: 1;
   }
   
   .td-portrait-img {
     width: 100%; height: 100%;
     object-fit: cover;
     object-position: center top;
     display: block;
     opacity: 0;
     transform: scale(1.05);
     animation: tdPortrait 1.3s var(--td-ease) 0.05s forwards;
   }
   
   .td-portrait-fallback {
     width: 100%; height: 100%;
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     background: linear-gradient(145deg, rgba(99,102,241,0.18), rgba(1,0,80,0.55));
     opacity: 0;
     animation: tdPortrait 1s var(--td-ease) 0.05s forwards;
   }
   
   .td-portrait-fallback i,
   .td-portrait-fallback svg { width: 110px; height: 110px; color: rgba(255,255,255,0.12); stroke-width: 0.75; }
   
   /* Diagonal scrim */
   .td-portrait-col::after {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(108deg, transparent 42%, rgba(0,0,50,0.50) 62%, rgba(0,0,50,0.96) 100%);
     pointer-events: none;
     z-index: 2;
   }
   
   /* Gold slash seam */
   .td-portrait-col::before {
     content: '';
     position: absolute;
     top: 0; bottom: 0; right: 0;
     width: 3px;
     background: linear-gradient(to bottom, transparent 0%, var(--td-gold) 18%, var(--td-gold) 82%, transparent 100%);
     z-index: 4;
   }
   
   /* Identity column */
   .td-identity-col {
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: clamp(5rem, 7vw, 7rem) clamp(2.5rem, 5vw, 5rem) clamp(3rem, 5vw, 5rem);
     position: relative;
     z-index: 2;
     opacity: 0;
     transform: translateX(28px);
     animation: tdIdentity 1s var(--td-ease) 0.35s forwards;
   }
   
   .td-role-chip {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     padding: 0.38rem 1rem;
     background: rgba(255,177,0,0.10);
     border: 1px solid rgba(255,177,0,0.28);
     border-radius: 100px;
     font-family: var(--td-font-a);
     font-size: 0.67rem;
     font-weight: 700;
     letter-spacing: 0.13em;
     text-transform: uppercase;
     color: var(--td-gold);
     width: fit-content;
     margin-bottom: 1.75rem;
   }
   
   .td-hero-name {
     font-family: var(--td-font-d);
     font-size: clamp(2.8rem, 4.2vw, 5.2rem);
     font-weight: 800;
     line-height: 1.0;
     letter-spacing: -0.04em;
     margin: 0 0 0.5rem;
   }
   
   .td-hero-name-first { color: var(--td-gold); }
   .td-hero-name-rest   { color: var(--td-white); }
   
   .td-name-rule {
     width: 72px; height: 4px;
     background: linear-gradient(90deg, var(--td-gold), rgba(255,177,0,0.15));
     border-radius: 2px;
     margin: 0.75rem 0 1.75rem;
   }
   
   .td-hero-quote {
     font-family: var(--td-font-d);
     font-size: clamp(0.95rem, 1.5vw, 1.15rem);
     font-weight: 300;
     font-style: italic;
     color: rgba(255,255,255,0.72);
     line-height: 1.7;
     border-left: 3px solid var(--td-gold);
     padding-left: 1.2rem;
     max-width: 460px;
     margin-bottom: 2.25rem;
   }
   
   .td-hero-meta {
     display: flex;
     flex-wrap: wrap;
     gap: 1.1rem;
     margin-bottom: 2.25rem;
   }
   
   .td-hero-meta-item {
     display: inline-flex;
     align-items: center;
     gap: 0.4rem;
     font-family: var(--td-font-b);
     font-size: 0.85rem;
     font-weight: 600;
     color: rgba(255,255,255,0.50);
   }
   
   .td-hero-meta-item i,
   .td-hero-meta-item svg { width: 14px; height: 14px; color: var(--td-gold); }
   
   .td-hero-social { display: flex; gap: 0.6rem; }
   
   .td-social-btn {
     width: 42px; height: 42px;
     border-radius: 50%;
     background: rgba(255,255,255,0.06);
     border: 1px solid rgba(255,255,255,0.10);
     display: flex;
     align-items: center;
     justify-content: center;
     color: rgba(255,255,255,0.40);
     text-decoration: none;
     transition: all 0.25s ease;
   }
   
   .td-social-btn:hover {
     background: var(--td-gold); border-color: var(--td-gold);
     color: var(--td-navy);
     transform: translateY(-3px);
     box-shadow: 0 8px 24px var(--td-gold-glow);
   }
   
   .td-social-btn i, .td-social-btn svg { width: 15px; height: 15px; }
   
   /* Stat strip */
   .td-stat-strip {
     position: absolute;
     bottom: 0; left: 0; right: 0;
     z-index: 10;
     background: rgba(0,0,30,0.72);
     backdrop-filter: blur(14px);
     -webkit-backdrop-filter: blur(14px);
     border-top: 1px solid rgba(255,255,255,0.07);
     padding: 1.4rem 0;
     opacity: 0;
     transform: translateY(16px);
     animation: tdStrip 0.8s var(--td-ease) 0.85s forwards;
   }
   
   .td-stat-strip-inner { display: flex; align-items: center; }
   
   .td-stat-cell {
     flex: 1;
     text-align: center;
     position: relative;
     padding: 0.2rem 0;
   }
   
   .td-stat-cell + .td-stat-cell::before {
     content: '';
     position: absolute;
     left: 0; top: 20%; bottom: 20%;
     width: 1px;
     background: rgba(255,255,255,0.09);
   }
   
   .td-stat-num {
     font-family: var(--td-font-a);
     font-size: clamp(1.7rem, 2.4vw, 2.3rem);
     font-weight: 900;
     color: var(--td-gold);
     line-height: 1;
     display: block;
   }
   
   .td-stat-lbl {
     font-family: var(--td-font-b);
     font-size: 0.68rem;
     font-weight: 700;
     letter-spacing: 0.10em;
     text-transform: uppercase;
     color: rgba(255,255,255,0.38);
     display: block;
     margin-top: 0.3rem;
   }
   
   @keyframes tdPortrait { to { opacity: 1; transform: scale(1); } }
   @keyframes tdIdentity { to { opacity: 1; transform: translateX(0); } }
   @keyframes tdStrip    { to { opacity: 1; transform: translateY(0); } }
   
   
   /* ================================================================
      CHAPTER LABEL
      ================================================================ */
   .td-chapter {
     display: flex;
     align-items: center;
     gap: 1rem;
     margin-bottom: 2.75rem;
   }
   
   .td-chapter-num {
     font-family: var(--td-font-a);
     font-size: 4.5rem;
     font-weight: 900;
     color: var(--td-gold);
     opacity: 0.14;
     line-height: 1;
     user-select: none;
     flex-shrink: 0;
     letter-spacing: -0.05em;
   }
   
   .td-chapter-label {
     font-family: var(--td-font-a);
     font-size: 0.67rem;
     font-weight: 700;
     letter-spacing: 0.18em;
     text-transform: uppercase;
     color: var(--td-gold);
     padding: 0.32rem 0.9rem;
     border: 1px solid var(--td-gold-dim);
     border-radius: 100px;
     background: rgba(255,177,0,0.06);
   }
   
   .td-chapter--light .td-chapter-num   { color: var(--td-navy); opacity: 0.07; }
   .td-chapter--light .td-chapter-label {
     color: var(--td-navy);
     border-color: rgba(1,0,128,0.14);
     background: rgba(1,0,128,0.04);
   }
   
   
   /* ================================================================
      SECTION SHELLS
      ================================================================ */
   .td-section {
     padding: clamp(4.5rem, 8vw, 7.5rem) 0;
     position: relative;
   }
   
   .td-section--white { background: var(--td-white); }
   .td-section--gray  { background: var(--td-gray-50); }
   
   .td-section--navy {
     background: linear-gradient(148deg, var(--td-navy) 0%, var(--td-navy-dark) 100%);
     overflow: hidden;
   }
   
   .td-section--navy::before {
     content: '';
     position: absolute;
     inset: 0;
     background:
       radial-gradient(ellipse 50% 60% at 8% 90%, rgba(255,177,0,0.06) 0%, transparent 60%),
       radial-gradient(ellipse 40% 50% at 92% 8%,  rgba(99,102,241,0.06) 0%, transparent 60%);
     pointer-events: none;
   }
   
   .td-section-title {
     font-family: var(--td-font-d);
     font-size: clamp(1.9rem, 3.2vw, 3rem);
     font-weight: 800;
     letter-spacing: -0.03em;
     line-height: 1.1;
     color: var(--td-gray-800);
     margin: 0 0 0.5rem;
   }
   
   .td-section-title--story { margin-bottom: 1.5rem; }
   .td-section-title--rev  { color: var(--td-white); }
   
   .td-section-sub {
     font-family: var(--td-font-b);
     font-size: 1.05rem;
     color: var(--td-gray-400);
     max-width: 500px;
     line-height: 1.75;
     margin: 0 0 3.25rem;
   }
   
   .td-section-sub--rev { color: rgba(255,255,255,0.50); }
   
   
   /* ================================================================
      CH.01 — THE STORY  (bio + sidebar)
      ================================================================ */
   .td-story-layout {
     display: grid;
     grid-template-columns: 1fr 320px;
     gap: 3.5rem;
     align-items: start;
   }
   
   .td-prose {
     font-family: var(--td-font-b);
     font-size: 1.1rem;
     line-height: 1.88;
     color: var(--td-gray-600);
   }
   
   .td-prose p             { margin: 0 0 1.5rem; }
   .td-prose p:last-child  { margin: 0; }
   
   .td-pull-quote {
     font-family: var(--td-font-d);
     font-size: clamp(1.2rem, 1.8vw, 1.48rem);
     font-weight: 300;
     font-style: italic;
     color: var(--td-navy);
     border-left: 4px solid var(--td-gold);
     padding: 1.1rem 1.5rem;
     margin: 2rem 0;
     line-height: 1.6;
     background: rgba(1,0,128,0.03);
     border-radius: 0 12px 12px 0;
   }
   
   /* Info sidebar */
   .td-info-card {
     background: var(--td-white);
     border-radius: var(--td-r);
     border: 1px solid var(--td-gray-200);
     overflow: hidden;
     box-shadow: var(--td-shadow);
     position: sticky;
     top: 1.5rem;
   }
   
   .td-info-head {
     background: var(--td-navy);
     padding: 1.4rem 1.75rem;
   }
   
   .td-info-head-label {
     font-family: var(--td-font-a);
     font-size: 0.65rem;
     font-weight: 700;
     letter-spacing: 0.16em;
     text-transform: uppercase;
     color: var(--td-gold);
     display: flex;
     align-items: center;
     gap: 0.5rem;
   }
   
   .td-info-head-label i,
   .td-info-head-label svg { width: 12px; height: 12px; }
   
   .td-info-block {
     padding: 1.4rem 1.75rem;
     border-bottom: 1px solid var(--td-gray-100);
   }
   
   .td-info-block:last-child { border-bottom: none; }
   
   .td-info-block-lbl {
     font-family: var(--td-font-a);
     font-size: 0.63rem;
     font-weight: 700;
     letter-spacing: 0.16em;
     text-transform: uppercase;
     color: var(--td-gray-400);
     margin-bottom: 0.9rem;
   }
   
   .td-info-summary {
     font-family: var(--td-font-b);
     font-size: 0.88rem;
     color: var(--td-gray-600);
     line-height: 1.65;
     margin: 0;
   }
   
   .td-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
   
   .td-tag {
     padding: 0.28rem 0.8rem;
     background: rgba(1,0,128,0.06);
     border: 1px solid rgba(1,0,128,0.11);
     border-radius: 100px;
     font-family: var(--td-font-a);
     font-size: 0.67rem;
     font-weight: 700;
     color: var(--td-navy);
     text-transform: uppercase;
     letter-spacing: 0.06em;
     transition: all 0.2s ease;
     cursor: default;
   }
   
   .td-tag:hover {
     background: var(--td-navy);
     color: var(--td-gold);
     border-color: var(--td-navy);
     transform: translateY(-2px);
   }
   
   .td-companies { display: flex; flex-direction: column; gap: 0.45rem; }
   
   .td-co {
     padding: 0.65rem 1rem;
     background: var(--td-gray-50);
     border: 1px solid var(--td-gray-200);
     border-radius: 12px;
     font-family: var(--td-font-b);
     font-size: 0.85rem;
     font-weight: 600;
     color: var(--td-gray-800);
     display: flex;
     align-items: center;
     gap: 0.5rem;
     transition: all 0.2s ease;
     cursor: default;
   }
   
   .td-co::before {
     content: ''; width: 6px; height: 6px;
     border-radius: 50%; background: var(--td-gold); flex-shrink: 0;
   }
   
   .td-co:hover { border-color: var(--td-navy); background: rgba(1,0,128,0.04); }
   
   
   /* ================================================================
      CH.02 — THE JOURNEY (timeline)
      ================================================================ */
   .td-timeline {
     position: relative;
     padding-left: 3.25rem;
     max-width: 900px;
   }
   
   .td-timeline::before {
     content: '';
     position: absolute;
     left: 0.4rem;
     top: 0.5rem; bottom: 0.5rem;
     width: 2px;
     background: linear-gradient(to bottom, var(--td-gold) 0%, var(--td-gold) 85%, transparent 100%);
   }
   
   .td-tl-item {
     position: relative;
     padding-bottom: 3rem;
   }
   
   .td-tl-item:last-child { padding-bottom: 0; }
   
   .td-tl-dot {
     position: absolute;
     left: -2.95rem; top: 0.4rem;
     width: 14px; height: 14px;
     border-radius: 50%;
     background: var(--td-gold);
     border: 3px solid var(--td-white);
     box-shadow: 0 0 0 3px rgba(255,177,0,0.22);
     transition: all 0.3s ease;
   }
   
   .td-tl-item:hover .td-tl-dot {
     transform: scale(1.45);
     box-shadow: 0 0 0 5px rgba(255,177,0,0.18);
   }
   
   .td-tl-card {
     background: var(--td-white);
     border-radius: 18px;
     border: 1px solid var(--td-gray-200);
     padding: 1.75rem 2rem;
     box-shadow: var(--td-shadow);
     transition: var(--td-t);
   }
   
   .td-tl-card:hover {
     border-color: rgba(255,177,0,0.30);
     box-shadow: var(--td-shadow-h);
     transform: translateX(6px);
   }
   
   .td-tl-header {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     gap: 1rem;
     margin-bottom: 0.5rem;
   }
   
   .td-tl-role {
     font-family: var(--td-font-d);
     font-size: 1.15rem;
     font-weight: 700;
     color: var(--td-gray-800);
     line-height: 1.2;
   }
   
   .td-tl-company {
     font-family: var(--td-font-b);
     font-size: 0.95rem;
     font-weight: 600;
     color: var(--td-navy);
     margin-top: 0.2rem;
   }
   
   .td-tl-date {
     font-family: var(--td-font-a);
     font-size: 0.70rem;
     font-weight: 700;
     letter-spacing: 0.08em;
     color: var(--td-gray-400);
     white-space: nowrap;
     background: var(--td-gray-100);
     padding: 0.3rem 0.75rem;
     border-radius: 100px;
     flex-shrink: 0;
     align-self: flex-start;
   }
   
   .td-tl-summary {
     font-family: var(--td-font-b);
     font-size: 0.92rem;
     color: var(--td-gray-600);
     line-height: 1.68;
     margin-top: 0.75rem;
   }
   
   
   /* ================================================================
      MILESTONES (on navy)
      ================================================================ */
   .td-milestone-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
     gap: 1.25rem;
   }
   
   .td-milestone {
     background: rgba(255,255,255,0.05);
     border: 1px solid rgba(255,255,255,0.09);
     border-radius: 18px;
     padding: 1.75rem;
     position: relative;
     overflow: hidden;
     transition: var(--td-t);
   }
   
   .td-milestone::before {
     content: '';
     position: absolute;
     top: 0; left: 0; right: 0;
     height: 3px;
     background: linear-gradient(90deg, var(--td-gold), transparent);
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.4s ease;
   }
   
   .td-milestone:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,177,0,0.22); transform: translateY(-5px); }
   .td-milestone:hover::before { transform: scaleX(1); }
   
   .td-milestone-yr {
     font-family: var(--td-font-a);
     font-size: 0.66rem;
     font-weight: 700;
     letter-spacing: 0.13em;
     text-transform: uppercase;
     color: var(--td-gold);
     display: block;
     margin-bottom: 0.75rem;
   }
   
   .td-milestone-title {
     font-family: var(--td-font-d);
     font-size: 1rem;
     font-weight: 700;
     color: var(--td-white);
     line-height: 1.3;
     margin-bottom: 0.5rem;
   }
   
   .td-milestone-desc {
     font-family: var(--td-font-b);
     font-size: 0.83rem;
     color: rgba(255,255,255,0.48);
     line-height: 1.6;
   }
   
   
   /* ================================================================
      CH.03 — THE WORK (projects)
      ================================================================ */
   .td-projects-header {
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     gap: 1rem;
     flex-wrap: wrap;
     margin-bottom: 3rem;
   }
   
   .td-projects-header-title { margin: 0 0 0.4rem; }
   .td-projects-header-sub  { margin: 0; }
   
   .td-projects-count {
     font-family: var(--td-font-a);
     font-size: 0.72rem;
     font-weight: 700;
     letter-spacing: 0.10em;
     text-transform: uppercase;
     color: var(--td-gray-400);
   }
   
   .td-project-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
     gap: 1.5rem;
   }
   
   .td-project {
     background: var(--td-white);
     border-radius: 20px;
     border: 1px solid var(--td-gray-200);
     overflow: hidden;
     box-shadow: var(--td-shadow);
     transition: var(--td-t);
     display: flex;
     flex-direction: column;
   }
   
   .td-project:hover {
     transform: translateY(-7px);
     box-shadow: var(--td-shadow-h);
     border-color: rgba(255,177,0,0.28);
   }
   
   .td-project-img-wrap {
     position: relative;
     width: 100%;
     aspect-ratio: 16 / 9;
     overflow: hidden;
     background: linear-gradient(145deg, rgba(1,0,128,0.07), rgba(99,102,241,0.10));
   }
   
   .td-project-img-wrap img {
     width: 100%; height: 100%;
     object-fit: cover;
     transition: transform 0.55s var(--td-ease);
   }
   
   .td-project:hover .td-project-img-wrap img { transform: scale(1.07); }
   
   .td-project-overlay {
     position: absolute;
     inset: 0;
     background: rgba(1,0,80,0.88);
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     transition: opacity 0.28s ease;
   }
   
   .td-project:hover .td-project-overlay { opacity: 1; }
   
   .td-project-ext-btn {
     width: 52px; height: 52px;
     border-radius: 50%;
     background: var(--td-gold);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--td-navy);
     text-decoration: none;
     transition: transform 0.25s ease;
   }
   
   .td-project-ext-btn:hover { transform: scale(1.12); }
   .td-project-ext-btn i, .td-project-ext-btn svg { width: 20px; height: 20px; }
   
   .td-project-body {
     padding: 1.5rem;
     flex-grow: 1;
     display: flex;
     flex-direction: column;
   }
   
   .td-project-title {
     font-family: var(--td-font-d);
     font-size: 1.05rem;
     font-weight: 700;
     color: var(--td-gray-800);
     margin: 0 0 0.25rem;
   }
   
   .td-project-role {
     font-family: var(--td-font-a);
     font-size: 0.67rem;
     font-weight: 700;
     letter-spacing: 0.10em;
     text-transform: uppercase;
     color: var(--td-gray-400);
     margin-bottom: 0.75rem;
   }
   
   .td-project-summary {
     font-family: var(--td-font-b);
     font-size: 0.88rem;
     color: var(--td-gray-600);
     line-height: 1.65;
     flex-grow: 1;
     margin-bottom: 1rem;
   }
   
   .td-project-metric {
     display: inline-flex;
     align-items: center;
     gap: 0.4rem;
     padding: 0.32rem 0.85rem;
     background: rgba(16,185,129,0.10);
     border: 1px solid rgba(16,185,129,0.20);
     color: #0c9b6c;
     border-radius: 100px;
     font-family: var(--td-font-a);
     font-size: 0.70rem;
     font-weight: 700;
     letter-spacing: 0.05em;
   }
   
   .td-project-metric i, .td-project-metric svg { width: 13px; height: 13px; }
   
   .td-empty {
     font-family: var(--td-font-b);
     font-size: 0.95rem;
     font-style: italic;
     color: var(--td-gray-400);
     text-align: center;
     padding: 2rem;
   }
   
   
   /* ================================================================
      CH.04 — WHAT OTHERS SAY (testimonials, on navy)
      ================================================================ */
   .td-testimonial-slide       { display: none; }
   .td-testimonial-slide.active {
     display: block;
     animation: tdSlide 0.38s ease forwards;
   }
   
   @keyframes tdSlide {
     from { opacity: 0; transform: translateY(10px); }
     to   { opacity: 1; transform: translateY(0); }
   }
   
   .td-testimonial-card {
     background: rgba(255,255,255,0.05);
     border: 1px solid rgba(255,255,255,0.09);
     border-radius: var(--td-r);
     padding: clamp(2rem, 4vw, 3.5rem);
     max-width: 860px;
     margin: 0 auto;
     position: relative;
     overflow: hidden;
   }
   
   .td-testimonial-card::before {
     content: '';
     position: absolute;
     top: 2rem; bottom: 2rem; left: 0;
     width: 4px;
     background: linear-gradient(to bottom, var(--td-gold), transparent);
     border-radius: 0 2px 2px 0;
   }
   
   .td-quote-mark {
     font-family: Georgia, 'Times New Roman', serif;
     font-size: 6rem;
     color: var(--td-gold);
     opacity: 0.14;
     line-height: 0.75;
     user-select: none;
     display: block;
     margin-bottom: 1rem;
   }
   
   .td-testimonial-text {
     font-family: var(--td-font-d);
     font-size: clamp(1.05rem, 1.7vw, 1.22rem);
     font-weight: 300;
     font-style: italic;
     color: rgba(255,255,255,0.88);
     line-height: 1.78;
     margin-bottom: 2rem;
   }
   
   .td-testimonial-author { display: flex; align-items: center; gap: 1rem; }
   
   .td-testimonial-avatar {
     width: 46px; height: 46px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--td-gold), #ff9500);
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: var(--td-font-a);
     font-size: 0.85rem;
     font-weight: 800;
     color: var(--td-navy);
     flex-shrink: 0;
   }
   
   .td-testimonial-name {
     font-family: var(--td-font-b);
     font-size: 0.95rem;
     font-weight: 700;
     color: var(--td-white);
     display: block;
   }
   
   .td-testimonial-role-text {
     font-family: var(--td-font-b);
     font-size: 0.80rem;
     color: rgba(255,255,255,0.40);
   }
   
   .td-carousel-controls {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 1.25rem;
     margin-top: 2.25rem;
   }
   
   .td-carousel-btn {
     width: 44px; height: 44px;
     border-radius: 50%;
     background: rgba(255,255,255,0.06);
     border: 1px solid rgba(255,255,255,0.10);
     color: rgba(255,255,255,0.45);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: all 0.25s ease;
   }
   
   .td-carousel-btn:hover {
     background: var(--td-gold); border-color: var(--td-gold);
     color: var(--td-navy); transform: scale(1.1);
   }
   
   .td-carousel-btn i, .td-carousel-btn svg { width: 16px; height: 16px; }
   
   .td-carousel-dots { display: flex; gap: 0.5rem; }
   
   .td-dot {
     width: 8px; height: 8px;
     border-radius: 50%;
     background: rgba(255,255,255,0.18);
     border: none;
     cursor: pointer;
     padding: 0;
     transition: all 0.3s ease;
   }
   
   .td-dot.active { width: 28px; border-radius: 4px; background: var(--td-gold); }
   
   
   /* ================================================================
      RESPONSIVE
      ================================================================ */
   @media (max-width: 1023px) {
     .td-hero {
       grid-template-columns: 1fr;
       min-height: auto;
     }
   
     .td-portrait-col {
       height: 56vw;
       min-height: 300px;
       max-height: 500px;
     }
   
     .td-portrait-col::after {
       background: linear-gradient(to bottom, transparent 35%, rgba(0,0,50,0.94) 100%);
     }
   
     .td-identity-col { padding-top: 3rem; }
   
     .td-stat-strip { position: relative; animation: none; opacity: 1; transform: none; }
     .td-stat-strip-inner { flex-wrap: wrap; }
     .td-stat-cell { min-width: 50%; }
     .td-stat-cell:nth-child(2n+1)::before { display: none; }
   
     .td-story-layout { grid-template-columns: 1fr; gap: 2rem; }
     .td-info-card    { position: static; }
   }
   
   @media (max-width: 767px) {
     .td-hero-name  { font-size: clamp(2.2rem, 9vw, 3rem); }
     .td-timeline   { padding-left: 2rem; }
     .td-tl-dot     { left: -2.1rem; }
     .td-tl-header  { flex-direction: column; gap: 0.5rem; }
     .td-project-grid, .td-milestone-grid { grid-template-columns: 1fr; }
     .td-testimonial-card { padding: 1.75rem 1.4rem; }
     .td-quote-mark { font-size: 4rem; }
   }
   
   
   /* ================================================================
      ACCESSIBILITY
      ================================================================ */
   @media (prefers-reduced-motion: reduce) {
     .td-portrait-img, .td-portrait-fallback,
     .td-identity-col, .td-stat-strip {
       animation: none !important;
       opacity: 1 !important;
       transform: none !important;
     }
     * { transition-duration: 0.01ms !important; }
   }
   
   :focus-visible {
     outline: 2px solid var(--td-gold);
     outline-offset: 3px;
     border-radius: 4px;
   }