/* V2 experience comparisons. References retrieved from the 21st MCP:
   https://21st.dev/@shadcnui-blocks/components/timeline-02
   https://21st.dev/@uilayout.contact/components/impact-experience
   https://21st.dev/@0xUrvish/components/vertical-tabs
   Uses the portfolio's existing font and orange accent, with original career copy. */
#experience{background:#f7f8fa;color:#252525;border-top:1px solid #e0e4e8;padding-top:90px;padding-bottom:90px;color-scheme:light;scroll-margin-top:84px}
#experience>.section-eyebrow{color:#b84612}
.v2-exp-heading{display:flex;flex-direction:column;align-items:flex-start;gap:28px;margin-bottom:52px}
#experience .v2-exp-heading h2{margin:0;max-width:900px}
.v2-exp-options{display:flex;gap:4px;padding:4px;border:1px solid #d5dbe2;border-radius:100px}
.v2-exp-options button{min-height:44px;padding:0 22px;border-radius:100px;font-size:14px;color:#555b62}
.v2-exp-options button[aria-pressed=true]{background:#b84612;color:#fff}
#experience button:focus-visible,#experience [role=tabpanel]:focus-visible{outline:3px solid #b84612;outline-offset:4px}
#experience .exp-timeline{min-width:0}
#experience .exp-card{display:grid;grid-template-columns:240px minmax(0,1fr);gap:48px;padding:40px 0;min-height:0;border:0;border-bottom:1px solid #dce0e5;position:relative;opacity:1;transform:none}
#experience .exp-card[hidden]{display:none}
#experience .exp-card::before{display:none}
.v2-exp-identity{position:sticky;top:110px;align-self:start;display:flex;flex-direction:column;gap:20px;min-width:0}
.v2-exp-brand{width:56px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#edf0f3;border:1px solid #dce0e5;flex-shrink:0}
.v2-exp-brand--openprem{width:120px;height:64px;background:#171717;border-color:#171717}
#experience .exp-logo{position:static;float:none;display:block;width:34px;height:34px;object-fit:contain;object-position:center;border-radius:0;background:none;margin:0;padding:0}
#experience .v2-exp-brand--openprem .exp-logo{width:94px;height:40px}
#experience .v2-exp-brand--batch .exp-logo{width:24px;height:27px}
#experience .exp-company{font-size:28px;font-weight:500;line-height:1.15;letter-spacing:-.04em;overflow-wrap:anywhere}
#experience .exp-employer{margin:0}
#experience .exp-employer .exp-org{color:#606872;font-size:13px;margin-top:8px}
#experience .exp-head{padding:0;margin:0 0 16px;color:#606872;font-size:13px;gap:10px 24px;justify-content:flex-start}
#experience .exp-period{color:#9a3d10;font-variant-numeric:tabular-nums}
#experience .exp-role{font-size:30px;line-height:1.15;margin-bottom:22px;letter-spacing:-.035em;color:#252525}
#experience .exp-pts{font-size:16px;line-height:1.75;color:#535c66;max-width:850px;padding-left:20px}
#experience .exp-pts li+li{margin-top:14px}
#experience .exp-pts li::marker{color:#b84612}
#experience .exp-org a{color:#252525;text-decoration-color:#b84612}
#experience .exp-role-history{margin-top:32px;padding-top:28px;border-top:1px solid #dce0e5}
/* Timeline: a connected rail and a sticky employer identity beside each role. */
#experience[data-experience-layout=timeline] .exp-timeline{border-left:1px solid #d4dbe2;margin-left:8px;padding-left:34px}
#experience[data-experience-layout=timeline]{background:#fff}
.version-two #experience[data-experience-layout=timeline] .exp-card::before{border-color:#fff}
#experience[data-experience-layout=timeline] .exp-card::before{display:block;content:'';position:absolute;left:-41px;top:46px;width:12px;height:12px;border:3px solid #f7f8fa;border-radius:50%;background:#b84612;box-shadow:0 0 0 1px #b84612}
/* Editorial: larger employer typography and role metadata separated from narrative. */
#experience[data-experience-layout=editorial] .exp-card{grid-template-columns:230px minmax(0,1fr);gap:64px;padding-block:48px}
#experience[data-experience-layout=editorial] .exp-company{font-size:38px;font-weight:400}
#experience[data-experience-layout=editorial] .exp-role{font-size:34px;max-width:500px}
#experience[data-experience-layout=editorial] .v2-exp-details{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(0,1.5fr);column-gap:36px;align-content:start}
#experience[data-experience-layout=editorial] .v2-exp-role-header{grid-column:1;grid-row:1;align-self:start}
#experience[data-experience-layout=editorial] .v2-exp-role-header>.exp-head{display:flex;flex-direction:column;align-items:flex-start}
#experience[data-experience-layout=editorial] .v2-exp-details>.exp-pts{grid-column:2;grid-row:1;font-size:15px}
#experience[data-experience-layout=editorial] .exp-role-history{grid-column:1/-1}
/* Tabs: manual selection keeps one employer visible at a time. */
.v2-exp-tabs[hidden]{display:none}
#experience[data-experience-layout=tabs] .v2-exp-content{display:grid;grid-template-columns:280px minmax(0,1fr);gap:56px;align-items:start}
.v2-exp-tabs{position:sticky;top:110px;display:flex;flex-direction:column;gap:4px}
.v2-exp-tabs button{display:flex;flex-direction:column;gap:7px;text-align:left;padding:20px 18px;min-height:72px;border-left:3px solid transparent;border-radius:0 8px 8px 0;color:#59636f}
.v2-exp-tabs button span{font-size:19px;font-weight:500;line-height:1.2}
.v2-exp-tabs button small{font-size:12px;line-height:1.4}
.v2-exp-tabs button[aria-selected=true]{border-color:#b84612;background:#fff;color:#252525}
.v2-exp-tabs button:hover{background:#edf0f3}
#experience[data-experience-layout=tabs] .exp-card{grid-template-columns:1fr;gap:30px;padding:28px 0 0;border:0;animation:v2-exp-enter .25s ease-out}
#experience[data-experience-layout=tabs] .v2-exp-identity{position:static;flex-direction:row;align-items:center;gap:20px}
@keyframes v2-exp-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1100px){#experience .exp-card,#experience[data-experience-layout=editorial] .exp-card{grid-template-columns:190px minmax(0,1fr);gap:32px}#experience[data-experience-layout=editorial] .v2-exp-details{display:block}#experience[data-experience-layout=tabs] .v2-exp-content{grid-template-columns:220px minmax(0,1fr);gap:32px}#experience[data-experience-layout=tabs] .exp-card{grid-template-columns:1fr}}
@media(max-width:760px){#experience{padding-top:64px;padding-bottom:64px}.v2-exp-heading{margin-bottom:32px;gap:24px}.v2-exp-options{width:100%}.v2-exp-options button{flex:1;padding:0 12px}#experience .exp-card,#experience[data-experience-layout=editorial] .exp-card{grid-template-columns:1fr;gap:28px;padding-block:32px}.v2-exp-identity{position:static;flex-direction:row;align-items:center;gap:18px}#experience .exp-company,#experience[data-experience-layout=editorial] .exp-company{font-size:27px}#experience .exp-role,#experience[data-experience-layout=editorial] .exp-role{font-size:27px}#experience .exp-pts{font-size:15px;line-height:1.7}#experience[data-experience-layout=timeline] .exp-timeline{margin-left:6px;padding-left:22px}#experience[data-experience-layout=timeline] .exp-card::before{left:-29px;top:42px}#experience[data-experience-layout=tabs] .v2-exp-content{grid-template-columns:1fr;gap:20px}.v2-exp-tabs{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.v2-exp-tabs button{padding:14px 12px;min-height:84px}.v2-exp-tabs button span{font-size:16px}#experience[data-experience-layout=tabs] .exp-card{padding-top:12px;grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){#experience .exp-card{animation:none}}

/* Additional directions from 21st: Feature Bento (18898), Accessible Accordion
   (34656, credited upstream to Ryan Mack / A11YPros), Scrollable Card Stack (25296).
   Original data and logos are retained. The stack uses explicit navigation. */
.v2-exp-options{flex-wrap:wrap;border-radius:18px}
.v2-exp-disclosure{min-width:0}
#experience[data-experience-layout] .exp-card[hidden]{display:none}
.v2-exp-disclosure>summary,.v2-exp-compact-summary,.v2-exp-teaser{display:none}
.v2-exp-deck-controls[hidden]{display:none}
.v2-exp-deck-controls{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}
.v2-exp-deck-controls button{border:1px solid #d5dbe2;min-height:44px;padding:0 20px;border-radius:100px;background:#fff;color:#252525;font-size:14px}
.v2-exp-deck-controls span{font-size:14px;color:#59636f;text-align:center}
#experience:is([data-experience-layout=cards],[data-experience-layout=accordion]) .v2-exp-disclosure>summary{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid #d5dbe2;border-radius:100px;cursor:pointer;color:#9a3d10;font-size:14px;list-style:none;background:#fff}
.v2-exp-disclosure>summary::-webkit-details-marker{display:none}
.v2-exp-disclosure>summary:focus-visible{outline:3px solid #b84612;outline-offset:4px}
#experience:is([data-experience-layout=cards],[data-experience-layout=accordion]) .v2-exp-compact-summary{display:flex;flex-direction:column;gap:10px}
.v2-exp-compact-summary span{font-size:13px;color:#9a3d10}
.v2-exp-compact-summary strong{font-size:25px;line-height:1.2;letter-spacing:-.03em;font-weight:500}
#experience:is([data-experience-layout=cards],[data-experience-layout=accordion]) .v2-exp-identity{position:static;flex-direction:row;align-items:center;gap:18px}
#experience:is([data-experience-layout=cards],[data-experience-layout=accordion]) .exp-company{font-size:28px}
#experience:is([data-experience-layout=cards],[data-experience-layout=accordion]) .v2-exp-disclosure[open]>.v2-exp-details{margin-top:26px;padding-top:28px;border-top:1px solid #dce0e5}
/* Company cards: one wide current employer, followed by a pair of compact rows. */
#experience[data-experience-layout=cards] .exp-timeline{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
#experience[data-experience-layout=cards] .exp-card{display:flex;flex-direction:column;gap:24px;padding:32px;background:#fff;border:1px solid #dce0e5;border-radius:20px}
#experience[data-experience-layout=cards] .exp-card:first-child{grid-column:1/-1;background:linear-gradient(115deg,#fff,#fff8f2);border-color:#dfc6b7}
#experience[data-experience-layout=cards] .v2-exp-teaser{display:block;font-size:16px;line-height:1.7;color:#535c66;max-width:78ch;margin:0}
#experience[data-experience-layout=cards] .v2-exp-disclosure{margin-top:auto}
#experience[data-experience-layout=cards] .exp-card[data-expanded=true]>.v2-exp-teaser,#experience[data-experience-layout=cards] .exp-card[data-expanded=true]>.v2-exp-compact-summary{display:none}
/* Accordion: company, role and period remain visible, full history expands below. */
#experience[data-experience-layout=accordion] .exp-card{grid-template-columns:1fr 1fr;column-gap:36px;row-gap:0;padding:32px 180px 32px 0}
#experience[data-experience-layout=accordion] .v2-exp-disclosure{grid-column:1/-1}
#experience[data-experience-layout=accordion] .v2-exp-disclosure>summary{position:absolute;right:0;top:36px}
#experience[data-experience-layout=accordion] .v2-exp-brand--openprem{width:88px;height:48px}
#experience[data-experience-layout=accordion] .v2-exp-brand--openprem .exp-logo{width:66px;height:30px}
#experience[data-experience-layout=accordion] .exp-company{font-size:25px}
/* Card stack: one employer at a time with layered paper edges behind the content. */
#experience[data-experience-layout=stack] .exp-timeline{position:relative;padding:18px 16px 30px;isolation:isolate}
#experience[data-experience-layout=stack] .exp-timeline::before,#experience[data-experience-layout=stack] .exp-timeline::after{content:'';position:absolute;inset:12px 26px 12px;border:1px solid #d6dde4;border-radius:20px;background:#e9edf1;z-index:-1;transform:rotate(-1deg)}
#experience[data-experience-layout=stack] .exp-timeline::after{inset:20px 18px 6px;background:#f0f3f6;transform:rotate(1deg)}
#experience[data-experience-layout=stack] .exp-card{display:flex;flex-direction:column;gap:32px;background:#fff;border:1px solid #dce0e5;border-radius:18px;padding:40px;box-shadow:0 12px 34px #1d304710;animation:v2-exp-enter .25s ease-out}
#experience[data-experience-layout=stack] .exp-card[hidden]{display:none}
#experience[data-experience-layout=stack] .v2-exp-identity{position:static;flex-direction:row;align-items:center}
@media(max-width:1100px){#experience[data-experience-layout=accordion] .exp-card{grid-template-columns:1fr;padding-right:180px;row-gap:18px}}
@media(max-width:760px){.v2-exp-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}.v2-exp-options button{padding:0 10px}#experience[data-experience-layout=cards] .exp-timeline{grid-template-columns:1fr}#experience[data-experience-layout=cards] .exp-card{padding:24px 20px;gap:20px}#experience[data-experience-layout=accordion] .exp-card{padding:26px 0;grid-template-columns:1fr;row-gap:20px}#experience[data-experience-layout=accordion] .v2-exp-disclosure>summary{position:static}#experience:is([data-experience-layout=cards],[data-experience-layout=accordion]) .exp-company{font-size:24px}.v2-exp-compact-summary strong{font-size:24px}#experience[data-experience-layout=stack] .exp-card{padding:24px 20px}#experience[data-experience-layout=stack] .exp-timeline{padding:12px 6px 24px}.v2-exp-deck-controls{gap:10px;flex-wrap:wrap}.v2-exp-deck-controls span{order:-1;flex-basis:100%;text-align:left}.v2-exp-deck-controls button{padding:0 16px}}
@media(prefers-reduced-motion:reduce){#experience[data-experience-layout=stack] .exp-card{animation:none}}

/* Showcase: additional option based on the user's dark horizontal-card reference. */
#experience[data-experience-layout=showcase]{background:#080808;color:#f5f4f0;border-color:#252525}
#experience[data-experience-layout=showcase] .v2-exp-options{border-color:#383838}
#experience[data-experience-layout=showcase] .v2-exp-options button{color:#c4c4c4}
#experience[data-experience-layout=showcase] .v2-exp-options button[aria-pressed=true]{color:#fff}
#experience[data-experience-layout=showcase] .v2-exp-deck-controls span{color:#c4c4c4}
#experience[data-experience-layout=showcase] .v2-exp-deck-controls button{background:transparent;border-color:#444;color:#fff}
#experience[data-experience-layout=showcase] .exp-timeline{display:flex;gap:24px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-color:#a94116 #252525;scrollbar-width:thin;padding:12px 0 28px}
#experience[data-experience-layout=showcase] .exp-card{display:flex;flex-direction:column;flex:0 0 410px;min-height:550px;padding:32px;gap:24px;border:1px solid #373737;border-radius:18px;background:#161616;scroll-snap-align:center;color:#fff}
#experience[data-experience-layout=showcase] .exp-card[data-highlighted=true]{border-color:#e94a10}
#experience[data-experience-layout=showcase] .v2-exp-identity{display:contents}
#experience[data-experience-layout=showcase] .v2-exp-brand{align-self:flex-start}
#experience[data-experience-layout=showcase] .exp-employer,#experience[data-experience-layout=showcase] .v2-exp-identity>.exp-company{margin-top:auto;padding-right:0}
#experience[data-experience-layout=showcase] .exp-company{color:#fff;font-size:32px;line-height:1.15;font-weight:400}
#experience[data-experience-layout=showcase] .exp-employer .exp-org{color:#f2e9e3}
#experience[data-experience-layout=showcase] .v2-exp-compact-summary{display:flex;flex-direction:column;gap:12px}
#experience[data-experience-layout=showcase] .v2-exp-compact-summary span{color:#fff;font-size:14px}
#experience[data-experience-layout=showcase] .v2-exp-compact-summary strong{font-size:24px;font-weight:400;color:#fff}
#experience[data-experience-layout=showcase] .v2-exp-teaser{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;font-size:16px;line-height:1.65;color:#fff;margin:0}
#experience[data-experience-layout=showcase] .v2-exp-disclosure>summary{display:grid;place-items:center;position:absolute;top:26px;right:26px;width:48px;height:48px;border:1px solid #ffffff45;border-radius:50%;background:transparent;color:#fff;font-size:0;cursor:pointer;list-style:none}
#experience[data-experience-layout=showcase] .v2-exp-disclosure>summary::after{content:'↗';font-size:24px}
#experience[data-experience-layout=showcase] .exp-card[data-highlighted=true] .v2-exp-disclosure>summary{background:#fff;color:#161616;border-color:#fff}
#experience[data-experience-layout=showcase] .v2-exp-disclosure[open]>summary::after{content:'−'}
#experience[data-experience-layout=showcase] .v2-exp-disclosure[open]>.v2-exp-details{max-height:340px;overflow:auto;overscroll-behavior:contain;padding:24px 4px 4px 0;border-top:1px solid #ffffff40;scrollbar-width:thin}
#experience[data-experience-layout=showcase] .exp-card[data-expanded=true]>.v2-exp-teaser,#experience[data-experience-layout=showcase] .exp-card[data-expanded=true]>.v2-exp-compact-summary{display:none}
#experience[data-experience-layout=showcase] .exp-role,#experience[data-experience-layout=showcase] .exp-head,#experience[data-experience-layout=showcase] .exp-period,#experience[data-experience-layout=showcase] .exp-pts,#experience[data-experience-layout=showcase] .exp-org a{color:#fff}
#experience[data-experience-layout=showcase] .exp-pts{font-size:15px}
#experience[data-experience-layout=showcase] .exp-pts li::marker{color:#fff}
#experience[data-experience-layout=showcase] .exp-role-history{border-color:#ffffff40}
@media(max-width:760px){#experience[data-experience-layout=showcase] .exp-card{flex-basis:86%;min-height:500px;padding:26px 22px}#experience[data-experience-layout=showcase] .exp-timeline{gap:16px}#experience[data-experience-layout=showcase] .exp-company{font-size:28px}#experience[data-experience-layout=showcase] .v2-exp-disclosure>summary{right:18px;top:22px}#experience[data-experience-layout=showcase] .v2-exp-identity{padding-right:44px}}

/* Observed public reference: sticky, scroll-scrubbed row; .45s centre-out
   radial gradient reveal; .3s diagonal arrow swap. Only Showcase uses motion. */
@property --v2-exp-reveal{syntax:'<percentage>';inherits:false;initial-value:-40%}
#experience[data-experience-layout=showcase] .exp-card{isolation:isolate}
#experience[data-experience-layout=showcase] .exp-card::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(90deg,#f66c05,#e7160b);--v2-exp-reveal:-40%;mask-image:radial-gradient(circle at center,#000 var(--v2-exp-reveal),transparent min(calc(var(--v2-exp-reveal) + 18%),100%));transition:--v2-exp-reveal .45s cubic-bezier(.215,.61,.355,1)}
#experience[data-experience-layout=showcase] .exp-card[data-highlighted=true]::after{--v2-exp-reveal:100%}
#experience[data-experience-layout=showcase] .v2-exp-disclosure>summary{overflow:hidden;transition:background-color .3s ease-out,color .3s ease-out}
#experience[data-experience-layout=showcase] .v2-exp-disclosure>summary::before,#experience[data-experience-layout=showcase] .v2-exp-disclosure>summary::after{position:absolute;font-size:24px;transition:transform .3s ease-out}
#experience[data-experience-layout=showcase] .v2-exp-disclosure>summary::before{content:'↗';transform:translate(-150%,150%)}
#experience[data-experience-layout=showcase] .v2-exp-disclosure>summary::after{transform:translate(0,0)}
#experience[data-experience-layout=showcase] .exp-card:is(:hover,:focus-within) .v2-exp-disclosure:not([open])>summary::after{transform:translate(150%,-150%)}
#experience[data-experience-layout=showcase] .exp-card:is(:hover,:focus-within) .v2-exp-disclosure:not([open])>summary::before{transform:translate(0,0)}
#experience[data-experience-layout=showcase] .v2-exp-disclosure[open]>summary::before{display:none}
#experience[data-experience-layout=showcase][data-showcase-motion=true]{height:275svh;min-height:0;padding-bottom:0}
#experience[data-experience-layout=showcase][data-showcase-motion=true] .v2-exp-content{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:clip;padding:24px 0}
#experience[data-showcase-motion=true] .v2-exp-deck-controls{flex-shrink:0}
#experience[data-experience-layout=showcase][data-showcase-motion=true] .exp-timeline{position:relative;width:max-content;overflow:visible;scroll-snap-type:none;will-change:transform;padding:8px 0}
#experience[data-experience-layout=showcase][data-showcase-motion=true] .exp-card{height:550px;min-height:0;flex-shrink:0}
#experience[data-showcase-motion=true] .v2-exp-disclosure[open]{flex:1;min-height:0}
#experience[data-experience-layout=showcase][data-showcase-motion=true] .v2-exp-disclosure[open]>.v2-exp-details{max-height:100%}
@media(max-width:760px){#experience[data-experience-layout=showcase][data-showcase-motion=true] .exp-card{flex-basis:calc((100vw - var(--gutter) * 2) * .86);width:calc((100vw - var(--gutter) * 2) * .86);height:500px}}
@media(prefers-reduced-motion:reduce){#experience[data-experience-layout=showcase] .exp-card::after,#experience[data-experience-layout=showcase] .v2-exp-disclosure>summary,#experience[data-experience-layout=showcase] .v2-exp-disclosure>summary::before,#experience[data-experience-layout=showcase] .v2-exp-disclosure>summary::after{transition:none}}