/* Yusuf Fatih: upright editorial motion, enhanced over the preferred composition. */
html{scroll-behavior:auto}
.kinetic-title{font-kerning:normal;text-rendering:optimizeLegibility}
.type-line{display:block;overflow:hidden;padding-bottom:.13em;margin-bottom:-.13em}
.type-ink{display:block;transform-origin:left bottom}
.hero h1{font-weight:900;letter-spacing:-.078em}
.hero h1>.type-line{padding-right:.08em;line-height:.82}
.hero h1 .type-ink>span{color:var(--lime)}
.hero-title h1{translate:0 var(--name-drift,0px)}
.section-heading h2,.world-head h2,.experience>h2{font-weight:700;letter-spacing:-.06em;line-height:1.02}
.section-heading h2{font-size:clamp(52px,6.6vw,102px)}
.chapter-heading h3{font-weight:650;letter-spacing:-.045em}
.manifesto h2 .type-ink>span{font-family:Georgia,serif;font-weight:400;font-style:italic;letter-spacing:-.06em}
.motion-on .reveal-target:not(.revealed){opacity:1;transform:none}
.kinetic-title .type-line:nth-child(2) .type-ink{translate:var(--type-drift,0px) 0}
.hero .type-line:nth-child(2) .type-ink{translate:none}
.ticker-track{animation-duration:22s;font-weight:700;letter-spacing:.04em}
.image-button{isolation:isolate}
.image-button img{transition:transform .65s cubic-bezier(.16,1,.3,1),scale .65s cubic-bezier(.16,1,.3,1)}
.nav-social svg,.contact-card-top svg{transform:none}
.round:hover{transform:translateY(3px);border-color:var(--lime)}
.close:hover{transform:scale(1.06)}
.contact-card:after{display:none}
.publication{transition:background-color .25s,transform .35s cubic-bezier(.16,1,.3,1)}
.publication:hover{background:#b79a650a}
nav a:after{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.contact-card strong{transition:transform .4s cubic-bezier(.16,1,.3,1)}
.contact-card:hover strong{transform:translateX(5px)}
.interactive-control:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
@media(min-width:1001px){.chapter-heading h3{font-size:clamp(38px,4.3vw,66px)}}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .motion-on .photo-drift img{scale:1.09}
 .motion-on .photo-drift:hover img{scale:1.12}
 .image-button:hover{transform:translateY(-3px)}
 .nav-social:hover svg{transform:translateY(-2px) scale(1.06)}
 .contact-card:hover .contact-card-top svg{transform:translateY(-3px) scale(1.06)}
}
@media(max-width:600px){
 .section-heading h2{font-size:clamp(40px,10.5vw,62px)}
 .hero h1{font-size:clamp(88px,23vw,140px)}
 .kinetic-title .type-line:nth-child(2) .type-ink{translate:none}
 .ticker-track{animation-duration:26s}
 .contact-card:hover strong{transform:none}
}
@media(prefers-reduced-motion:reduce){
 .hero-title h1,.type-ink{translate:none!important;transform:none!important}
 .motion-on .reveal-target{opacity:1!important;transform:none!important}
 .type-line{overflow:visible}
 .contact-card strong{transform:none!important}
}
/* Wrapper spans inherit the original display treatment; only the punctuation is lime. */
.hero h1 .type-line,.hero h1 .type-ink{color:var(--ivory)}
.manifesto h2>.type-line{font-family:Arial,Helvetica,sans-serif;font-style:normal;font-weight:900;letter-spacing:inherit}
/* Contact heading spans are normal-flow lines, never the legacy decorative marker. */
.connect h2.kinetic-title>.type-line{position:static;inset:auto;display:block;font-size:inherit;font-weight:inherit;color:inherit;line-height:inherit}
.connect .type-line .type-ink{translate:none}
.contact-heading{grid-template-columns:minmax(0,1.35fr) minmax(240px,.8fr);gap:clamp(32px,6vw,96px);align-items:end;margin-bottom:clamp(36px,5vw,68px)}
.contact-heading h2{margin:0;font-size:clamp(64px,8.1vw,120px);line-height:1.02;letter-spacing:-.055em;min-width:0}
.contact-heading h2 .type-line{padding-right:.1em}
.contact-heading>p{text-align:left!important;text-wrap:pretty;max-width:34ch;margin:0 0 .45em;font-size:clamp(15px,1.2vw,18px);line-height:1.8}
.contact-social-grid{gap:20px;align-items:stretch}
.contact-card{min-height:270px;padding:clamp(24px,2.5vw,36px);border-radius:2px;transition:background-color .55s cubic-bezier(.22,1,.36,1),color .45s,border-color .45s,transform .55s cubic-bezier(.22,1,.36,1),box-shadow .55s}
.contact-card-top{margin-bottom:38px}
.contact-card strong{font-size:clamp(28px,3vw,44px);line-height:1.15;letter-spacing:-.045em}
.contact-detail{font-size:14px;letter-spacing:0;line-height:1.5}
.contact-action{font-size:12px;letter-spacing:.035em;padding-top:32px}
.contact-business{margin-top:36px;padding-top:28px;align-items:center;min-width:0}
.contact-business>div{min-width:0}
.contact-email{font-size:clamp(20px,2.6vw,36px);text-decoration-thickness:1px;text-underline-offset:8px}
.contact-research{font-size:13px}
/* Scroll fills the title lines in sequence. No hidden fallback or duplicate text. */
.scroll-type{--type-color:var(--navy);--type-muted:#14263d66}
.connect .scroll-type{--type-color:var(--ivory);--type-muted:#f8f6f166}
.connect .scroll-type .type-line:last-child{--type-color:var(--lime);--type-muted:#c7f36b66}
@supports(background-clip:text){
 .motion-on .scroll-type .type-ink{background:linear-gradient(90deg,var(--type-color) 0%,var(--type-color) var(--line-fill,100%),var(--type-muted) var(--line-fill,100%),var(--type-muted) 100%);background-clip:text;-webkit-background-clip:text;color:transparent}
 .motion-on .scroll-type .type-ink em,.motion-on .scroll-type .type-ink>span{color:inherit}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .contact-card:hover,.contact-card:focus-visible{transform:translateY(-4px);box-shadow:0 16px 32px -26px #0008}
 .contact-card:hover strong,.contact-card:focus-visible strong{transform:translateX(3px)}
 .contact-card .contact-card-top svg{transition:transform .55s cubic-bezier(.22,1,.36,1)}
 .contact-card:hover .contact-card-top svg{transform:translateY(-2px) scale(1.035)}
 .image-button,.gallery-filters button,.nav-social,.language-switch,.text-link,.round{transition-duration:.45s;transition-timing-function:cubic-bezier(.22,1,.36,1)}
 .motion-on .photo-drift:hover img{scale:1.105}
}
@media(max-width:900px){
 .contact-heading{grid-template-columns:1fr;gap:26px}
 .contact-heading h2{font-size:clamp(62px,10.5vw,92px)}
 .contact-heading>p{max-width:48ch}
 .contact-card{padding:22px;min-height:245px}
 .contact-card strong{font-size:30px}
}
@media(max-width:600px){
 .contact-heading{gap:24px;margin-bottom:32px}
 .contact-heading h2{font-size:clamp(49px,13.2vw,76px);line-height:1.06}
 .contact-heading>p{font-size:15px;line-height:1.75;margin:0}
 .contact-social-grid{gap:12px}
 .contact-card{min-height:166px;padding:24px;grid-template-columns:minmax(0,1fr) 36px;gap:0 16px}
 .contact-card-top{margin:0}
 .contact-card-top svg{width:30px;height:30px}
 .contact-card strong{font-size:30px}
 .contact-detail{font-size:13px}
 .contact-action{padding-top:18px;font-size:12px}
 .contact-business{align-items:stretch;gap:16px;margin-top:28px}
 .contact-email{font-size:clamp(18px,5.1vw,26px)}
 .contact-card:hover strong{transform:none}
}
@media(prefers-reduced-motion:reduce){
 .motion-on .scroll-type .type-ink{background:none;color:var(--type-color);transform:none;translate:none}
 .contact-card:hover strong{transform:none}
}

@property --line-fill{syntax:"<percentage>";inherits:false;initial-value:100%}
.motion-on .scroll-type .type-ink{transition:--line-fill .14s linear}
/* Dark study-section headings retain contrast throughout the scroll fill. */
.worlds .scroll-type{--type-color:var(--ivory);--type-muted:#f8f6f180}
@media(max-width:600px){
 .worlds .world-head{padding-top:32px;padding-bottom:28px}
 .world-head .eyebrow{padding-bottom:20px}
 .world-head h2{font-size:clamp(36px,9.8vw,48px);line-height:1.08;margin:10px 0 0;letter-spacing:-.045em}
 .world-head .type-line{padding-right:.08em}
}