#about.about-personal { background: #090c10; color: #f5f4f0; padding-block: clamp(90px,9vw,150px); overflow: clip; }
.about-canvas { max-width: 1500px; }
.about-title { font: 600 clamp(30px,4.55vw,75px)/1.18 var(--fd); letter-spacing: -.045em; margin: 0; padding-bottom: clamp(26px,3vw,48px); border-bottom: 1px solid #ffffff19; white-space: nowrap; }
.about-script { font-family: 'Wisemaid',sans-serif; font-weight: 400; font-size: 1.2em; line-height: 0; display: inline-block; margin-inline: -.025em; vertical-align: -.035em; }
.about-gold { color: #e9debf; }
.about-introduction { font: 500 clamp(20px,1.9vw,30px)/1.45 var(--fd); letter-spacing: -.03em; margin: 34px 0 clamp(45px,5vw,78px); max-width: 1320px; }
.about-journey { display: grid; grid-template-columns: minmax(0,1fr) minmax(70px,.3fr) minmax(0,1fr); align-items: stretch; }
.about-story-card { position: relative; isolation: isolate; padding: clamp(28px,3.2vw,50px); min-height: 370px; background: #ffffff02; border: 1px solid #ffffff12; transition: background 350ms,transform 300ms; transform: perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); }
.about-story-card::before { content:''; position:absolute; z-index:-1; inset:0; pointer-events:none; background: radial-gradient(360px circle at var(--px,50%) var(--py,50%),#e9debf12,transparent 70%); opacity:var(--hover,0); transition:opacity 400ms; }
.about-story-card:hover { background-color:#ffffff04; }
.about-card-outline { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.about-card-outline rect { fill:none; stroke:#e9debf; stroke-width:1; vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--draw,0)); opacity:.65; }
.about-card-icon { display:inline-flex; width:42px; height:42px; align-items:center; justify-content:center; border:1px solid #e9debf30; color:#e9debf; font-size:23px; margin-bottom:35px; transition:transform 450ms; }
.about-story-card:hover .about-card-icon { transform:rotate(-8deg) scale(1.08); }
.about-card-eyebrow { display:block; color:#a9a499; font-size:9px; letter-spacing:.13em; margin-bottom:13px; }
.about-story-card h3 { font:500 clamp(27px,2.5vw,38px)/1.2 var(--fs); letter-spacing:-.04em; margin:0 0 22px; }
.about-story-card p { font:400 clamp(14px,1.08vw,17px)/1.85 'Plus Jakarta Sans',sans-serif; color:#b4b6be; margin:0; }
.about-bridge { position:relative; display:grid; place-items:center; }
.about-bridge svg { position:absolute; width:100%; height:100%; inset:0; }
.about-bridge path { fill:none; stroke-width:1; vector-effect:non-scaling-stroke; }
.about-bridge-track { stroke:#ffffff16; }
.about-bridge-draw { stroke:#e9debf; stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--bridge,0)); }
.about-bridge > span { position:relative; background:#090c10; color:#e9debf; border:1px solid #e9debf33; display:grid; place-items:center; width:40px; height:40px; transform:scale(calc(.8 + var(--bridge,0)*.2)); }
.about-horizon { display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; }
.about-horizon span { font:9px var(--fm); padding:8px 10px; border:1px solid #e9debf22; color:#e9debf; }
.about-depth { margin-top:clamp(45px,5vw,80px); padding-block:35px; border-block:1px solid #ffffff16; display:grid; grid-template-columns: .65fr 1fr; gap:50px; align-items:center; }
.about-experience { display:flex; align-items:center; gap:28px; }
.about-experience strong { font:500 clamp(65px,7vw,105px)/1 var(--fs); letter-spacing:-.075em; color:#e9debf; }
.about-experience strong span { font-size:.55em; vertical-align:top; }
.about-experience > span { max-width:100px; line-height:1.8; font-size:10px; color:#b1aba0; }
.about-depth > p { font:400 clamp(15px,1.2vw,18px)/1.85 'Plus Jakarta Sans',sans-serif; color:#b4b6be; margin:0; }
.about-manifesto { font:500 clamp(29px,3.7vw,58px)/1.3 var(--fs); letter-spacing:-.04em; max-width:1280px; margin:clamp(55px,7vw,110px) 0; }
.about-ink-word { color:#686b73; transition:color 200ms linear,text-shadow 300ms; }
.about-ink-word.is-lit { color:#f4f1ea; }
.about-manifesto .about-ink-word.is-lit { color:#e9debf; }
.about-ink-word:hover { color:#e9debf; text-shadow:0 0 24px #e9debf35; }
.about-finale { display:flex; justify-content:space-between; align-items:center; gap:35px; border-top:1px solid #ffffff16; padding-top:45px; }
.about-still { font:500 clamp(23px,2.2vw,34px)/1.4 var(--fs); letter-spacing:-.035em; margin:0; }
.about-still > span { color:#e9debf; }
.about-growing { color:#a8abb3; font:14px/1.8 'Plus Jakarta Sans',sans-serif; margin:14px 0 0; }
.about-conversation { display:inline-flex; align-items:center; justify-content:space-between; gap:32px; padding:23px; color:#e9debf; border:1px solid #e9debf55; font:11px/1.5 var(--fm); max-width:320px; transition:transform 180ms ease-out,background 250ms; }
.about-conversation:hover { background:#e9debf; color:#101115; }
.about-conversation:focus-visible { outline:2px solid #e9debf; outline-offset:5px; }
.about-reveal-ready [data-about-reveal] { opacity:0; translate:0 24px; transition:opacity 750ms ease,translate 850ms cubic-bezier(.2,.7,.2,1); }
.about-reveal-ready [data-about-reveal].is-revealed { opacity:1; translate:0 0; }
@media(max-width:800px) { .about-title { white-space:normal; font-size:clamp(35px,6.7vw,56px); } .about-journey { grid-template-columns:1fr; } .about-story-card { min-height:0; padding:30px; } .about-bridge { height:72px; } .about-bridge svg { rotate:90deg; width:72px; height:100%; left:calc(50% - 36px); } .about-bridge > span { rotate:90deg; } .about-depth { gap:26px; grid-template-columns:1fr; } .about-finale { flex-direction:column; align-items:flex-start; } .about-conversation { width:100%; } }
@media(prefers-reduced-motion:reduce) { .about-reveal-ready [data-about-reveal] { opacity:1; translate:none; transition:none; } .about-story-card,.about-conversation { transform:none!important; transition:none; } .about-ink-word { color:#f4f1ea; } .about-manifesto .about-ink-word { color:#e9debf; } .about-card-outline rect,.about-bridge-draw { stroke-dashoffset:0; } }

/* Compact outlook: balanced columns, one shared rule, no oversized empty bands. */
.about-outlook { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:clamp(32px,5vw,80px); margin-top:38px; padding-top:32px; border-top:1px solid #ffffff1c; align-items:start; }
.about-outlook-label { display:block; color:#9c9da4; font-size:9px; letter-spacing:.14em; margin-bottom:20px; }
.about-outlook .about-manifesto { font:500 clamp(25px,2.35vw,37px)/1.35 var(--fs); letter-spacing:-.035em; max-width:740px; margin:0; }
.about-outlook .about-finale { display:block; padding:0 0 0 clamp(24px,3vw,48px); border-top:0; border-left:1px solid #ffffff16; }
.about-outlook .about-still { font:500 clamp(22px,1.8vw,28px)/1.35 var(--fs); letter-spacing:-.035em; margin:0; }
.about-outlook .about-growing { font-size:12px; line-height:1.7; max-width:310px; margin:13px 0 20px; }
.about-outlook .about-conversation { display:flex; max-width:330px; padding:14px 16px; font-size:10px; gap:18px; background:#ffffff03; }
.about-outlook .about-conversation:hover { background:#e9debf; }
#about.about-personal { padding-bottom:clamp(65px,6vw,96px); }
@media(max-width:700px) { .about-outlook { grid-template-columns:1fr; gap:28px; margin-top:28px; padding-top:28px; } .about-outlook .about-finale { border-left:0; border-top:1px solid #ffffff16; padding:25px 0 0; } .about-outlook .about-manifesto { font-size:27px; } .about-outlook-label { margin-bottom:15px; } }

/* Shorter, evenly sized journey cards with a tighter internal rhythm. */
.about-story-card { min-height: 0; padding: clamp(24px,2.1vw,32px); }
.about-card-icon { width: 34px; height: 34px; font-size: 20px; margin-bottom: 20px; }
.about-card-eyebrow { margin-bottom: 10px; }
.about-story-card h3 { font-size: clamp(25px,2.2vw,34px); margin-bottom: 15px; }
.about-story-card p { line-height: 1.7; }
.about-horizon { margin-top: 20px; }
.about-horizon span { padding: 7px 9px; }
@media(max-width:800px) { .about-story-card { padding: 24px; } }


/* Warm-white About variation, scoped to this chapter. */
#about.about-personal { background:#f4efe9; color:#101115; }
#about .about-title { color:#101115; border-color:#10111526; }
#about .about-gold { color:#756443; }
#about .about-story-card { background:#ffffff65; border-color:#10111524; }
#about .about-story-card:hover { background:#ffffffa0; }
#about .about-story-card::before { background:radial-gradient(360px circle at var(--px,50%) var(--py,50%),#a38d6020,transparent 70%); }
#about .about-card-outline rect { stroke:#756443; }
#about .about-card-icon { color:#756443; border-color:#75644350; }
#about .about-card-eyebrow,#about .about-outlook-label { color:#62615d; }
#about .about-story-card h3 { color:#101115; }
#about .about-story-card p,#about .about-depth > p,#about .about-growing { color:#53555b; }
#about .about-bridge-track { stroke:#10111525; }
#about .about-bridge-draw { stroke:#756443; }
#about .about-bridge > span { background:#f4efe9; color:#756443; border-color:#75644365; }
#about .about-horizon span { color:#655536; border-color:#75644340; }
#about .about-depth,#about .about-outlook,#about .about-finale { border-color:#10111524; }
#about .about-experience strong,#about .about-still > span { color:#756443; }
#about .about-experience > span { color:#62615d; }
#about .about-ink-word { color:#92908a; }
#about .about-ink-word.is-lit { color:#101115; }
#about .about-manifesto .about-ink-word.is-lit { color:#655536; }
#about .about-ink-word:hover { color:#756443; text-shadow:0 0 22px #75644320; }
#about .about-conversation { color:#101115; background:#ffffff50; border-color:#10111545; }
#about .about-conversation:hover { background:#101115; color:#f4efe9; }
#about .about-conversation:focus-visible { outline-color:#756443; }
@media(prefers-reduced-motion:reduce) { #about .about-ink-word { color:#101115; } #about .about-manifesto .about-ink-word { color:#655536; } }

/* Simplified story panels: content first, compact proportions, one lower divider. */
#about .about-journey { grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr); }
#about .about-story-card { padding:22px 25px; background:transparent; border:0; border-left:2px solid #75644345; transform:none; }
#about .about-story-card:hover { background:#ffffff40; }
#about .about-card-outline,#about .about-card-icon,#about .about-card-eyebrow,#about .about-horizon { display:none; }
#about .about-story-card h3 { font-size:clamp(23px,1.8vw,29px); margin:0 0 12px; }
#about .about-story-card p { font-size:clamp(14px,1vw,16px); line-height:1.7; max-width:610px; }
#about .about-bridge svg { display:none; }
#about .about-bridge > span { width:28px; height:28px; border:0; background:transparent; font-size:14px; }
#about .about-depth { margin-top:30px; padding:27px 0; border-top:0; border-bottom:1px solid #10111524; gap:35px; grid-template-columns:.5fr 1fr; }
#about .about-experience strong { font-size:clamp(58px,5vw,78px); }
#about .about-depth > p { font-size:clamp(14px,1.1vw,17px); line-height:1.75; }
#about .about-outlook { margin-top:0; padding-top:30px; border-top:0; }
@media(max-width:800px) { #about .about-journey { grid-template-columns:1fr; gap:18px; } #about .about-bridge { display:none; } #about .about-story-card { padding:12px 20px; } #about .about-depth { grid-template-columns:1fr; gap:20px; } }

/* Quiet story notes with small pointed captions beneath each panel. */
#about .about-journey { column-gap:26px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding-bottom:26px; border-bottom:1px solid #10111524; }
#about .about-bridge { display:none; }
#about .about-story-card { display:flex; flex-direction:column; align-items:flex-start; padding:0; border:0; background:transparent; }
#about .about-story-card:hover { background:transparent; }
#about .about-story-card::before { display:none; }
#about .about-story-card p { order:0; box-sizing:border-box; width:100%; flex:1; padding:20px 23px; border:1px solid #10111515; background:#ffffff35; font-size:clamp(14px,.95vw,15px); line-height:1.75; color:#53555b; transition:background 300ms,border-color 300ms; }
#about .about-story-card:hover p { background:#ffffff75; border-color:#75644345; }
#about .about-story-card h3 { order:1; display:flex; align-items:center; gap:8px; font:400 10px/1.5 var(--fm); letter-spacing:.025em; color:#756443; margin:11px 0 0 2px; }
#about .about-story-card h3::before { content:''; display:block; width:4px; height:4px; background:#756443; }
#about .about-depth { margin-top:0; }
@media(max-width:800px) { #about .about-journey { grid-template-columns:1fr; gap:22px; } #about .about-story-card { padding:0; } #about .about-story-card p { padding:18px 20px; } }

/* An automatic, quiet gold wave across the introduction; no hover required. */
#about .about-introduction .about-ink-word { color:#101115; text-shadow:none; }
#about .about-introduction.is-auto-playing .about-ink-word { animation:about-intro-wave 7s ease-in-out var(--word-delay,0ms) infinite; }
#about .about-introduction .about-ink-word:hover { color:#101115; text-shadow:none; }
@keyframes about-intro-wave { 0%,8%,40%,100% { color:#101115; } 19%,27% { color:#8a7143; } }
#about .about-story-card p { position:relative; transition:translate 350ms cubic-bezier(.2,.7,.2,1),background 350ms,border-color 350ms,box-shadow 350ms; }
#about .about-story-card:hover p { translate:0 -4px; background:#ffffff85; border-color:#75644360; box-shadow:0 10px 25px #33271309; }
#about .about-story-card h3 { transition:translate 350ms,color 350ms; }
#about .about-story-card:hover h3 { translate:4px 0; color:#43381f; }
@media(prefers-reduced-motion:reduce) { #about .about-introduction.is-auto-playing .about-ink-word { animation:none; color:#101115; } #about .about-story-card:hover p,#about .about-story-card:hover h3 { translate:none; } }

/* Match the introduction to the title typography without changing its sizing. */
#about .about-introduction { font-family:var(--fd); font-weight:600; }

/* Refine the marked notes and align experience with its supporting story. */
#about .about-story-card p { border-color:#10111520; background:#ffffff25; }
#about .about-story-card h3 { font-size:11px; letter-spacing:0; font-weight:500; }
#about .about-depth { grid-template-columns:minmax(200px,.36fr) minmax(0,1fr); align-items:center; gap:clamp(28px,4vw,65px); }
#about .about-experience { gap:22px; }
#about .about-experience > span { font-size:10px; letter-spacing:.04em; max-width:110px; }
#about .about-depth > p { margin:0; }
@media(max-width:700px) { #about .about-depth { grid-template-columns:1fr; gap:20px; } }

/* Reverse the experience row: narrative first, tenure on the right. */
#about .about-depth { grid-template-columns:minmax(0,1fr) minmax(200px,.36fr); }
#about .about-depth > p { grid-column:1; grid-row:1; }
#about .about-depth > .about-experience { grid-column:2; grid-row:1; justify-self:end; }
@media(max-width:700px) { #about .about-depth { grid-template-columns:1fr; } #about .about-depth > p { grid-column:1; grid-row:1; } #about .about-depth > .about-experience { grid-column:1; grid-row:2; justify-self:start; } }

/* Story labels above their content panels. */
#about .about-story-card h3 { order:-1; margin:0 0 11px 2px; }

/* Tighten the story transition and unify the two main text statements. */
#about .about-introduction { margin-bottom:clamp(28px,3vw,44px); }
#about .about-journey { width:100%; column-gap:26px; }
#about .about-story-card { width:100%; min-width:0; }
#about .about-story-card p { max-width:none; }
#about .about-outlook { grid-template-columns:minmax(0,2fr) minmax(260px,.8fr); gap:clamp(26px,3vw,48px); }
#about .about-outlook .about-manifesto { font-family:var(--fd); font-weight:600; font-size:clamp(20px,1.9vw,30px); line-height:1.45; letter-spacing:-.03em; max-width:none; }
#about .about-outlook .about-finale { padding-left:clamp(22px,2vw,32px); }
@media(max-width:800px) { #about .about-outlook { grid-template-columns:1fr; gap:26px; } #about .about-outlook .about-finale { border-left:0; border-top:1px solid #10111524; padding:24px 0 0; } }

/* Two continuous brand strips, counter-moving beneath the About statement. */
.about-logo-wall { margin-top:30px; padding-top:20px; overflow:hidden; }
.about-logo-wall[hidden] { display:none; }
.about-logo-caption { font:10px/1.6 var(--fs); color:#746e61; margin:0 0 18px; }
.about-logo-lane { overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.about-logo-lane + .about-logo-lane { margin-top:12px; }
.about-logo-track { display:flex; gap:28px; width:max-content; animation:about-logo-travel 48s linear infinite; animation-play-state:paused; }
.about-logo-wall.is-visible .about-logo-track { animation-play-state:running; }
.about-logo-track img { flex:0 0 auto; width:800px; height:42px; object-fit:contain; opacity:.65; }
.about-logo-lane.is-reversed .about-logo-track { animation-direction:reverse; }
.about-logo-wall:hover .about-logo-track { animation-play-state:paused; }
@keyframes about-logo-travel { from{transform:translateX(calc(-50% - 14px))} to{transform:translateX(0)} }
.about-logo-settings { margin-top:18px; color:#756443; }
.about-logo-settings label { display:block; font-size:12px; padding-block:12px; }
.about-logo-settings input { max-width:100%; }
@media(max-width:600px) { .about-logo-track img { width:650px;height:34px; } }
@media(prefers-reduced-motion:reduce) { .about-logo-track { animation:none; } }

/* Original high-resolution PNG, repeated at its native proportions. */
#about .about-logo-track { animation-duration:60s; }
#about .about-logo-track img { width:1200px; height:auto; aspect-ratio:6000/151; opacity:.8; }
#about .about-logo-lane { mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); }
#about .about-outlook .about-still { font-family:var(--fd); font-weight:600; font-size:clamp(20px,1.9vw,30px); line-height:1.45; letter-spacing:-.03em; }
@media(max-width:600px) { #about .about-logo-track img { width:1000px; height:auto; } }

/* Slightly larger logos inside the existing clipped marquee width. */
#about .about-logo-track img { width:1440px; }
@media(max-width:600px) { #about .about-logo-track img { width:1200px; } }

/* Tighter closing rhythm and a clearer primary invitation. */
#about .about-outlook .about-still { line-height:1.22; }
#about .about-outlook .about-conversation { background:#101115; color:#f4efe9; border-color:#101115; padding:17px 20px; font-family:var(--fd); font-size:14px; font-weight:500; min-height:54px; }
#about .about-outlook .about-conversation:hover { background:#756443; border-color:#756443; color:#fffaf0; }

/* Tighter belief-to-logo rhythm and a continuous aligned column divider. */
#about .about-logo-wall { margin-top:16px; padding-top:5px; }
#about .about-logo-caption { margin-bottom:12px; }
#about .about-logo-lane + .about-logo-lane { margin-top:8px; }
#about .about-outlook .about-finale { align-self:stretch; }
@media(max-width:800px) { #about .about-outlook .about-finale { align-self:auto; } }