/* ShadowCast · Founder & CEO section (3D). Everything is scoped to .fd */
.fd {
  --fd-gold: #e2b155; --fd-gold-2: #c99543; --fd-hot: #ffe2a6; --fd-cream: #f2e9d8; --fd-text: #d3cbbd; --fd-mute: #a59c8d; --fd-bg: #050403;
  --fd-serif: Cinzel, "Trajan Pro", Georgia, serif; --fd-sans: Manrope, Inter, "Segoe UI", system-ui, sans-serif; --fd-display: Syne, "Arial Black", sans-serif;
  position: relative; isolation: isolate; overflow: hidden; container-type: inline-size;
  background: radial-gradient(60% 80% at 28% 45%, #120d07 0%, rgba(18,13,7,0) 70%), var(--fd-bg);
  color: var(--fd-text); font-family: var(--fd-sans);
}
.fd *, .fd *::before, .fd *::after { box-sizing: border-box; }
.fd .fd-stage { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.fd .fd-gl { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .8s ease; }
.fd.fd-live .fd-gl { opacity: 1; }

/* the frame is laid out on a 1672 x 765 grid: 1u = 1px at 1672px wide */
.fd .fd-frame, .fd .fd-band { --u: min(calc(100cqw / 1672), 1.3px); }
.fd .fd-frame {
  position: relative; z-index: 1; width: calc(1672 * var(--u)); margin: 0 auto; min-height: calc(703 * var(--u));
  pointer-events: none;
}
.fd .fd-frame a, .fd .fd-frame button, .fd .fd-copy { pointer-events: auto; }

/* left caption */
.fd .fd-left { position: absolute; left: calc(53 * var(--u)); top: calc(80 * var(--u)); }
.fd .fd-left i { display: block; width: calc(74 * var(--u)); height: 1px; background: linear-gradient(90deg, var(--fd-gold), rgba(226,177,85,.35)); margin-bottom: calc(22 * var(--u)); transform-origin: left; }
.fd .fd-left span, .fd .fd-rail .fd-cap { display: block; font: 500 max(9px, calc(11 * var(--u)))/1.8 var(--fd-sans); letter-spacing: .32em; text-transform: uppercase; color: #ddd4c4; text-shadow: 0 1px 8px rgba(0,0,0,.9); }

/* the 3D stack lives in this box (the scene reads its size); the flat card shows until WebGL is ready */
.fd .fd-stack { position: absolute; left: calc(20 * var(--u)); top: calc(55 * var(--u)); width: calc(850 * var(--u)); height: calc(565 * var(--u)); perspective: calc(1600 * var(--u)); }
.fd .fd-flat-card { position: absolute; left: calc(225 * var(--u)); top: calc(70 * var(--u)); width: calc(452 * var(--u)); transform: rotateY(-22deg); transform-origin: left center; transition: opacity .5s ease; }
.fd .fd-flat-card img { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 calc(24 * var(--u)) rgba(226,177,85,.35)); }
.fd.fd-live .fd-flat-card { opacity: 0; }

/* copy column */
.fd .fd-copy { position: relative; margin-left: calc(907 * var(--u)); padding-top: calc(97 * var(--u)); width: max(calc(575 * var(--u)), 360px); padding-bottom: calc(40 * var(--u)); }
.fd .fd-label { display: flex; align-items: center; gap: calc(28 * var(--u)); margin: 0; font: 600 max(10.5px, calc(13.5 * var(--u)))/1 var(--fd-serif); letter-spacing: .3em; text-transform: uppercase; color: var(--fd-gold); }
.fd .fd-label i { width: calc(51 * var(--u)); height: 1px; background: var(--fd-gold); transform-origin: left; }
.fd .fd-name { margin: calc(30 * var(--u)) 0 0 calc(10 * var(--u)); font: 800 max(34px, calc(72 * var(--u)))/.93 var(--fd-display); letter-spacing: -.005em; color: var(--fd-cream); text-shadow: 0 0 calc(30 * var(--u)) rgba(0,0,0,.6); }
.fd .fd-name span { display: block; }
.fd .fd-bio { margin: calc(30 * var(--u)) 0 0 calc(10 * var(--u)); max-width: calc(520 * var(--u)); font: 400 max(14.5px, calc(18.6 * var(--u)))/1.58 var(--fd-sans); color: var(--fd-text); }
.fd .fd-pills { list-style: none; display: flex; flex-wrap: wrap; gap: calc(14 * var(--u)) calc(14 * var(--u)); margin: calc(26 * var(--u)) 0 0 calc(10 * var(--u)); padding: 0; }
.fd .fd-pills li { display: flex; align-items: center; height: max(32px, calc(39 * var(--u))); padding: 0 calc(15 * var(--u)); border: 1px solid rgba(226,177,85,.5); border-radius: calc(5 * var(--u)); background: rgba(8,6,4,.62); font: 500 max(12px, calc(13.2 * var(--u)))/1 var(--fd-sans); color: #f1ebe0; white-space: nowrap;
  box-shadow: inset 0 0 calc(14 * var(--u)) rgba(226,177,85,.06); transition: border-color .3s, box-shadow .3s, transform .3s; }
.fd .fd-pills li:hover { border-color: var(--fd-gold); box-shadow: inset 0 0 calc(14 * var(--u)) rgba(226,177,85,.14), 0 0 calc(18 * var(--u)) rgba(226,177,85,.22); transform: translateY(-1px); }
.fd .fd-rule { height: 1px; margin: calc(30 * var(--u)) 0 0 calc(10 * var(--u)); width: calc(563 * var(--u)); background: linear-gradient(90deg, rgba(226,177,85,.85), rgba(226,177,85,.5) 60%, rgba(226,177,85,.15)); transform-origin: left; }
.fd .fd-feats { list-style: none; display: flex; margin: calc(30 * var(--u)) 0 0 calc(10 * var(--u)); padding: 0; width: calc(563 * var(--u)); }
.fd .fd-feats li { display: flex; align-items: center; gap: calc(19 * var(--u)); flex: 0 0 auto; }
.fd .fd-feats li + li { border-left: 1px solid rgba(226,177,85,.42); }
.fd .fd-feats li:nth-child(1) { width: calc(158 * var(--u)); }
.fd .fd-feats li:nth-child(2) { width: calc(212 * var(--u)); padding-left: calc(41 * var(--u)); }
.fd .fd-feats li:nth-child(3) { padding-left: calc(35 * var(--u)); }
.fd .fd-feats svg { width: max(26px, calc(36 * var(--u))); height: max(26px, calc(36 * var(--u))); flex: none; fill: none; stroke: var(--fd-gold); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(226,177,85,.55)); }
.fd .fd-feats span { font: 600 max(8.5px, calc(10.6 * var(--u)))/1.62 var(--fd-serif); letter-spacing: .3em; text-transform: uppercase; color: var(--fd-gold); }
.fd .fd-feats li:hover svg { filter: drop-shadow(0 0 8px rgba(255,210,130,.9)); }

/* right rail */
.fd .fd-rail { position: absolute; left: calc(1528 * var(--u)); top: calc(16 * var(--u)); bottom: calc(-48 * var(--u)); border-left: 1px solid rgba(226,177,85,.22); padding-left: calc(21 * var(--u)); }
.fd .fd-rail .fd-cap { margin-top: calc(80 * var(--u)); }
.fd .fd-rail i { display: block; width: calc(25 * var(--u)); height: 1px; margin-top: calc(22 * var(--u)); background: var(--fd-gold); transform-origin: left; }
.fd .fd-rail .fd-coord { position: absolute; top: calc(540 * var(--u)); left: calc(21 * var(--u)); font: 500 max(8.5px, calc(10.5 * var(--u)))/2 var(--fd-sans); letter-spacing: .2em; color: #d9d0c0; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* bottom band */
.fd .fd-band { position: relative; z-index: 1; height: calc(62 * var(--u)); min-height: 44px; border-top: 1px solid rgba(226,177,85,.35); border-bottom: 1px solid rgba(226,177,85,.2); background: linear-gradient(180deg, rgba(10,8,6,.86), rgba(6,5,4,.94));
  display: flex; align-items: center; padding: 0 calc(93 * var(--u)); gap: calc(25 * var(--u)); }
.fd .fd-band span { font: 600 max(8px, calc(9.6 * var(--u)))/1 var(--fd-serif); letter-spacing: .42em; text-transform: uppercase; color: var(--fd-gold-2); white-space: nowrap; }
.fd .fd-band span:last-child { color: var(--fd-gold); margin-left: calc(70 * var(--u)); }
.fd .fd-band i { flex: 1 1 0; height: 1px; background: linear-gradient(90deg, rgba(226,177,85,.55), rgba(226,177,85,.3)); transform-origin: left; }
.fd .fd-band i:nth-of-type(1) { flex-grow: 307; } .fd .fd-band i:nth-of-type(2) { flex-grow: 212; } .fd .fd-band i:nth-of-type(3) { flex-grow: 372; }

/* entrance (the class fd-in is added when the section scrolls into view) */
.fd.fd-wait .fd-reveal { opacity: 0; transform: translateY(18px); }
.fd.fd-wait .fd-draw { transform: scaleX(0); }
.fd .fd-reveal { transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--d, 0) * 1ms); }
.fd .fd-draw { transition: transform 1.2s cubic-bezier(.65,0,.2,1); transition-delay: calc(var(--d, 0) * 1ms); }
.fd.fd-wait.fd-in .fd-reveal { opacity: 1; transform: none; }
.fd.fd-wait.fd-in .fd-draw { transform: none; }
.fd .fd-name span { clip-path: inset(-10% -5% -20% -5%); }
.fd.fd-wait .fd-name span { clip-path: inset(-10% 100% -20% -5%); }
.fd.fd-wait.fd-in .fd-name span { clip-path: inset(-10% -5% -20% -5%); transition: clip-path 1.1s cubic-bezier(.65,0,.2,1); transition-delay: calc(var(--d, 0) * 1ms); }

.fd .fd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* narrow screens: card on top, copy below */
@container (max-width: 899px) {
  .fd .fd-frame, .fd .fd-band { --u: 1px; }
  .fd .fd-frame { width: auto; min-height: 0; display: flex; flex-direction: column; padding: 56px 20px 36px; }
  .fd .fd-left, .fd .fd-rail { display: none; }
  .fd .fd-stack { position: relative; left: auto; top: auto; width: 100%; max-width: 620px; height: auto; aspect-ratio: 850 / 600; margin: 0 auto; }
  .fd .fd-flat-card { left: 18%; top: 4%; width: 64%; transform: rotateY(-8deg); }
    .fd .fd-copy { margin: 30px 0 0; padding: 0; width: 100%; }
  .fd .fd-name { font-size: clamp(38px, 10.5vw, 64px); margin-left: 0; }
  .fd .fd-bio, .fd .fd-pills, .fd .fd-rule, .fd .fd-feats { margin-left: 0; }
  .fd .fd-bio { font-size: 16px; max-width: 60ch; }
  .fd .fd-rule, .fd .fd-feats { width: 100%; }
  .fd .fd-feats { flex-wrap: wrap; gap: 16px 0; }
  .fd .fd-feats li, .fd .fd-feats li:nth-child(n) { width: auto; flex: 1 1 33%; padding: 0 12px; min-width: 150px; }
  .fd .fd-feats li:first-child { padding-left: 0; }
  .fd .fd-feats li + li { border-left: 0; }
  .fd .fd-band { padding: 0 20px; gap: 12px; height: 52px; }
  .fd .fd-band i:nth-of-type(3), .fd .fd-band span:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fd .fd-reveal, .fd .fd-draw, .fd .fd-name span { transition: none !important; }
}